方案一：驾驶舱风格 采用驾驶舱形式，以生产为主的业务，使用户可以更直观，更全面地了解企业中所有指标的具体情况，以便快速做出决策。整体显示更为重要的实时数据，监控掌握大局观，及时对有问题的数据进行及时处理，板块区分明显，更方便找到相关数据。
方案二：平台主页风格  在初步调研产品框架的基础上，系统首页重构信息组织架构，丰富信息和数据，根据不同权限可调整页面信息增加办公效率。设计风格采用简约的设计语言，模块化布局，方圆并构的设计模式，界面强调可复用性和通用性，配色采用品牌色，品牌融合度高。

我们在B端设计里，对于一个平台或工具系统而言其包含的数据往往是逻辑复杂其庞大的。在这庞大的数据海里，我们能有用精准的筛选方式来定位我们所需要的数据。这是一个系统所要具备最基础的功能，也是提升用户体验的关键。

在一个项目中，我们第一步要确认的是如何准确的定位用户群体。

即这个项目对接的核心角色是谁？

我们知道一个B端需求会涉及多个角色，每个角色都可以看作是一个利益相关者。

越靠近核心角色，代表重要程度越高，这就意味着，我们做这个需求的时候要根据重要程度排优先级，才能符合需求。

在当今数字化时代，设计系统的健康运转对于提升用户体验、优化产品功能至关重要。然而，如何科学地度量评估设计系统的表现，尤其是组件库的维护升级效果，一直是业内关注的焦点。传统的问卷形式定性评估虽然广泛应用，但因其受限于样本量和周期性评估的特性，难以提供实时、精准的反馈。

在B端设计领域，Light Design设计系统凭借其出色的组件库，为用户带来了极大的便利。然而，随着产品功能的不断迭代和用户体验要求的提升，组件库的维护升级也面临着越来越多的挑战。为了更加敏捷地应对这些挑战，我们急需一种实时的定量监测能力，以便快速定位问题、明确迭代方向，进而减少维护成本，提升组件库的易用性。

本文将以Light Design设计系统的组件库为例，深入探讨如何通过定量指标来优化组件库的维护升级流程。我们将从四个关键方面展开：明确问题、选择指标、探究现状、解决风险。

首先，我们需要明确想要挖掘组件库的哪些问题。这些问题可能涉及组件的使用频率、错误率、性能表现等多个方面。通过将这些问题按维度分类，我们可以更加清晰地了解组件库的现状和潜在风险。

接下来，根据设立的维度，我们将选择合适的观测指标。这些指标应该能够准确地反映组件库的性能表现和用户体验，同时也需要具有可量化、可比较的特点。

在确定了观测指标后，我们将开始探究这些指标所反映的现状和风险。通过收集和分析实际数据，我们可以了解组件库在实际使用中的表现，发现存在的问题和瓶颈，为后续的优化提供有力支持。

明

首先，我们需要明确希望定量评估帮助解决哪些问题，从参与组件库的角色来入手把问题维度进行分类：

角色一是维护方，负责生产和迭代组件。对于这一方，希望宏观的知道目前组件库的体量，判断是需要精简还是扩充；

以及还需要判断迭代周期是否合理，那么就对应以下2个维度：

1.构成规模-即组件库由多少组件构成。

2.维护效率-即组件库迭代的快慢。

角色二是引用方，也就是各个业务平台的设计师、研发同学。他们会在日常的需求消化中，引用组件完成功能迭代。我们希望通过这些引用的行为观测组件库的覆盖能力，提前预知不易用的风险组件，尽早升级。于是就有了以下2个维度：

1.引用规模-即有多少平台用到了组件库。

2.易用性-即组件是否在各业务场景都方便引用。

择

有了维度分类后，接下来就需要在众多组件库的观测数据中，选取合适的数据成为观测指标。

下面是我们根据评估维度选择的观测指标：

构成规模

1.组件个数-基础、业务、图表等多组件库分别计数。

2.组件库覆盖率-各组件库中被引用组件对于全集的占比。

维护效率

1.组件库迭代进度-迭代性质可分为问题修复、特性和实验性功能增优。

引用规模

1.引用平台数-有多少平台引用了组件库。

2.组件库版本引用占比-各平台引用的是哪个版本的组件库（组件库每升级一次，即为一个新版本）。

3.各平台组件库引用覆盖-我们提供了基础、业务、图表3个大组件库，从这个数据可以获知各个业务平台都引用了前述的哪些组件库，以及各引用了多少组件。

易用性

1.组件引用次数-组件被各业务方引用了多少次。

2.组件改写次数-此处为非正常改写，业务的研发强行破坏了组件的既有样式，业内通常称其为"Hack"。

通过上面的分析，我们就得到了一个较为完整的观测指标框架，下面我们来探讨下如何利用他们实际去发现和解决问题。

探&解

确定以上观测指标，我们搭建了监测平台，日常监控组件库的数据表现，产出数据报告。下面就用实际的例子来讲讲如何利用这些定量的观测指标，发现并解决组件库的易用性和维护上的一系列问题。

易用性相关

问题1：如何定位到不好用的组件？是否值得升级？又如何进行优化呢？

解：这里需要依靠2个数据指标来判断，分别是组件的引用次数和改写次数。简单解释就是高频引用同时又频繁改写的组件严重影响了业务方的引用效率，这些组件自然是不好用的，需要重点解决。

我们以表单组件为例，来看下具体的工作流。

1.定位出高频引用且高频改写的组件：首先定位到"表单"组件出现在引用数Top5内，且改写数是非常频繁的。

2.还原具体改写场景并分类归因：针对"表单"组件，拉取了改写的css代码，逐一分析都改写了哪些样式。从中提炼出共性的改写场景，进行分类归因。于是可以把表单组件的改写问题分为4大类，分别是行间距问题、标签宽度问题、横向表单缺失问题、附属表单样式规范问题。

3.针对不同原因导出解决手段进行组件升级：最后，根据上述问题，逐一进行设计和研发升级。升级后的表单组件再被业务方引用时，免去了改写的成本，平均单次引用可节省约1h的研发耗时。

问题2：上面解决了单个组件的易用性问题，但无法从全局判断组件库整体的易用性表现，那应该如何解决呢。

解：把所有组件的引用次数加和，得到总体数值，并结合时间维度，观察组件库整体改写数与引用数各自的变化趋势。用线形图来描述的话，随着时间推移，引用越多，改写越少，两条线呈开口状，那就表示组件库处于越来越健康的状态。反之则需要警惕了。同时我们搭建了一套评分体系，基于引用/改写数值，通过归一化和加权等一系列计算，by月/季度给组件库易用性打分，也能精准的知道组件库易用性的表现，如果分值是下降的，就要具体去定位哪些组件出了问题，再根据上述的方法相应地进行升级。

日常维护相关

问题1：业务方反馈的升级诉求经常扎堆，怎么去快速判断升级的优先级呢，提高维护效率呢？

解：为了能提高组件库的维护效率，及时满足各业务方的诉求，会从易用性、引用规模、升级成本这三方面来综合判断升级的优先级。

首先，将业务侧提出升级诉求的组件按业务上线时间由近到远排序。这就有了一个基础的优先级。

然后，从中挑选有严重bug的组件(易用性差)、多平台高频引用的组件(引用规模大），往前调整优先级。

最后，评估它们的升级成本，如果成本小，迅速能迭代，那就按顺序解决。如果其中有大规模升级的组件，不一定能敏捷支持，那就需要与业务侧商量，先提供临时替代方案，再专项升级组件。

问题2：日常维护组件库，如何保持组件库的活力？

解：组件库若长期未更新，说明对业务升级诉求的支持效率不高。此外若存在一些低频使用甚至冗余的组件，则会在组件库升级时带来很大的负担。所以需要时刻保持组件库的精炼和活力。我们从两方面来评估，第一、固定周期内的迭代频次，这体现了应对业务方诉求的响应速度和自驱升级的主动性；第二、低频引用的组件个数，首先我们会定期清理引用数为0的组件，并分析低频组件不常被引用的原因，相应做精简、合并，控制低频引用组件个数，有利于我们将更多的精力聚焦在重点组件的维护升级上。

结语

上述给大家简单地介绍了设计系统相关的定量指标及其使用案例，那么除了以上这些，其实我们还有很多可扩展的空间，如目前的数据维度都是针对系统"维护方"和"引用方"的，还缺少"平台体验者"，也就是真正用户对设计系统的视觉/操作体验指标，如何通过定量的手段收集这些指标数据，与定性数据相辅相成让组件库的评估更为精准，将是我们接下来需要探索的课题。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

当然产品本身也是随着实际业务场景的变化，从而考虑设计不同的形式来达到该功能的使用。产品需要优化，交互和布局同样需要优化，所以在B端产品中并不是一个同样的功能就仅限于只有一种解决方案。

对于产品而言，只有参与的项目越多，设计和思考的场景越全面，了解的产品越多，才能更好的掌握一个功能的多种类型和使用场景，这一次能够在原来的基础上更加全面的总结同一个功能的类型和场景，主要是在工作中也有遇到类似的业务场景，加上对其他产品的体验，从而让我更加全面的了解到该功能的多样性。

表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效表格被公认是展现结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效。

首先看我们这次改版的对象：

如何给界面做减法，实现B端设计提效效果？

光凭第一印象，整体效果是还不错的，落实到每个局部的话，布局也是合理的，可以看到是有设计的细节在里面.jpg。

但是，再多看几眼，就会发现整体的效果似乎有点不和谐，但又找不出来问题具体在哪，不知道怎么改下去。问题的根源就是 —— 过度设计。

我们强调过很多次，表盘页的设计是作品集项目中最重要的页面，因为观看者对整体视觉和设计水准的印象是通过它建立起来的，不管你分析怎么写，我们首先关注的肯定也是设计的效果。

但重要不代表需要过度倾注和堆叠视觉元素，过度的设计会让界面看起来有 “飞机” 敢，不仅不真实的印象产生了，还会显得业余不够自信。同时任何项目中表盘页过度设计都会对整个项目造成负担，后续的页面要怎么设计才能不和它产生隔阂，保持一致性。

下面，我们根据原页面进行分析，来找出问题并优化：

问题 1：导航栏的图标

导航的顶部 LOGO 描边没有太大必要，以及图标的设计在这个尺寸下非常的局促，因为细节较多，不仅复杂性提升了，也缺乏图形辨识。

所以改动中，将多余的背景去掉，再简化图标本身的样式。

如何给界面做减法，实现B端设计提效效果？

问题 2：顶栏的设计

顶部栏本身设计单看是没有问题的，但是作为全局栏目和导航栏颜色缺乏区分，而且用了投影来强化层次，就让这个模块的权重被过度放大。

所以我们去掉了背景色，并适当增高栏目的高度，让局部更舒展。

如何给界面做减法，实现B端设计提效效果？

问题 3：统计数字的问题

统计数字在作品展示里用特殊字体很常见，因为要用更美观的字体来呈现重要的信息。但任何页面中的信息权重都要保持阶梯性，不能让加粗、深色、特殊字体几个要素作用在过多的信息上，这就让画面显得非常的“吵”。

所以要对字重和色彩做控制，创造对比来降低视觉的压力。

如何给界面做减法，实现B端设计提效效果？

问题 4：图表的应用

原图中的图表应用有一定的问题，第一个柱状的堆叠类型并不是太符合实际数据应用，下方的环形图中起始位置显然不对，并且色彩比较混乱。

所以是答案对它们做出优化，并调整了一些小细节。

如何给界面做减法，实现B端设计提效效果？

问题 5：配图类型选择

在引导卡片中，用的扁平插画素材一方面不高级，另一方面内容太碎，再加上用奇怪的字体和倾斜，使得这个卡片看起来非常别扭。

改动中替换新的图片素材（临时找的，理解意思就行），同时使用一般黑体的标题，以及增加背景色，来形成新的卡片样式。

如何给界面做减法，实现B端设计提效效果？

问题 6：装饰图标应用

在快速入口和日程模块中，都有使用装饰图标，显然大家也能理解他们对于目前的语境来讲还是细节过多了，所以需要做一些调整，让它们简化。

如何给界面做减法，实现B端设计提效效果？

最后，再加上一些细节的小改动，最终的样式就完成了。

如何给界面做减法，实现B端设计提效效果？

表盘的设计一定要在最后做检查，一些设计感强的元素是否有必要这么做，尤其是类似图标元素，做得很花哨是否对信息的识别能带来帮助？如果不行，那就可以果断的放弃。

表盘页的设计感来自 —— 全局元素和色彩的控制，而不是单一某个局部内容的加强。

文章来源：优设
作者：酸梅干超人

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

人工智能的崭新概念正在逐渐改变我们对设计的认识和实践方式。在这个数字化时代，AI不再仅仅是一种辅助工具，它已经成为设计师的得力助手，能够提供更高效、更智能的设计方案。在B端设计视觉中，AI的应用为我们开辟了一条通向更优质设计的道路，本文将深入探讨如何借助AI技术，辅助设计师完成B端设计视觉。无论你是刚刚踏入设计领域的小白，还是经验丰富的资深设计师，都可以利用AI工具来提升设计效率、优化视觉效果。

通常设计团队的设计链路大致可以分成四个步骤：需求分析->用研交互->UI视觉->验收迭代。在不同的阶段，需要团队中的交互/UI/视觉...设计师各司其职，每位设计师要解决的核心问题不同：

这里引入一个结构化的设计方法——“双钻”模型

“双钻设计模型”已经被很多设计师或设计机构做过概念变体和衍生，所以可能经常会看到各种各样类似的“设计模型”，有的是“三钻”的，有的是三角形的或是正方形的。不过，不要太在意这些模型是叫做“双钻模型”、“三钻模型”还是“两个四边形模型”，其核心都是在讲
一套使用设计思维来解决问题的思路和方法，这套思路和方法适用于
从产品需求定义到设计成果产出的整个过程。

在这个过程中，“设计模型”能够分别帮助设计师达到三个目的：

1. 洞察和挖掘产品真正的问题
   也就是模型中第一个“钻”的核心目的：为正确的事情做设计（Designing the right thing），即“做正确的事”。

2. 通过恰当方法找到设计最优解
   也就是模型中第二个“钻”的核心目的：用正确的方法做设计（Designing things right），即“将设计做正确”。

3. 复盘并验证问题设计的结果
   也就是模型中第三个“钻”的核心目的：验证做的设计是否正确（Verify Desig Effectiveness），即“验证设计的效果”。

4. 链路1-需求分析

可能有人会说：“分析需求不是产品经理的事情吗？”

确实，在产品需求阶段产品经理会起主导角色，产品经理的需求分析：侧重于从商业维度考虑产品目标，考虑用户的需求是什么，以及用什么样的功能去满足用户需求。
但同时，设计师会协助产品参与需求挖掘工作，可以更直观了解产品的背景和设计目标，同时会协助产品经理分析用户的使用场景和各个接触点，使得产品在需求阶段可以更好的与后续交互设计衔接。

设计师的需求分析侧重点：基于对产品需求的正确理解，通过运营与用户层面考虑，平衡业务与用户之间的诉求，让设计在达到用户体验的情况下更大化的发挥商业价值。

2. 链路2-用研交互

在提出需求目标后，需要精准定位目标用户，将假设与用户诉求进行验证。

交互设计师会采用用户画像/体验地图/用户移情图等方法构建用户使用情景，将抽象的业务目标在用户层面进行价值试验后的故事转译。通过前期调研和用户故事还原体验情景，最终分析验证前期方案的假设，并为方案原型交互设计提供客观数据支撑。

通过用研及数据结果分析验证后，就到了原型设计阶段，最终修正的需求文档会交由交互设计师转化交互原型文档。

交互文档主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容，大致会包含：基础信息(项目简介、需求分析)，交互说明(信息架构思维导图、任务流程图)，页面交互流程原型图（包含交互设计的方案阐述界面布局、操作手势、反馈效果、元素的规则定义、以及异常页面和异常情况的说明）。

3. 链路3-UI视觉

建立设计规范

UI即User Interface（用户界面），而UI设计规范通俗来说，是围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。 UI组件库则是是基于用户界面产品而制定的一套可复用设计库，也是为了方便设计师、开发和测试人员共同协作，而遵循的规律和法则。
其中色彩范围、图标设计方案、插画配图以及动效等，这些都可以在定义视觉风格的阶段进行思考，并有所结论。而字体的选择且通常情况下会使用iOS和Android系统的模型字体作为规范字体，因为系统字体更为匀称，显示效果更为舒适，醒目利于阅读，更利于视觉信息的传达。

搭建设计组件库

搭建组件库，其实是利用组件库型思维，产品需求场景化、视觉表达模块化并最终将解决方案进行封装。

通过标准的规范组合方式来构建整个设计方案，从而提升设计效能。一方面使团队的每位设计师和开发都能通过组件库直观了解产品设计规范，通过组件的复用性原理提升设计与开发的协同效率。另一方面通过清晰有规律样式布局，保证产品界面视觉及体验性的一致性。

4. 链路4-验收迭代

设计走查验收

设计界面交付后就算完成设计任务了吗？

设计交付不等于设计任务的结束，在产品正式版发布之前，交互设计师和视觉设计师需要对线上测试版本进行走查。有些团队内部协作习惯于直接口头或是简单文字沟通，面对简单且量少的问题时可能会相对比较快速。但是一定会存在信息遗漏、沟通误差等问题。

产品设计迭代
虽然有些公司的产品真的过硬，可能会具备较长的生命周期，但它们始终会被更加优秀、好用、新颖的竞品所取代。
因此产品设计的持续优化迭代，是能保持发挥产品优势，不断找到用户痛点的关键，而做好产品迭代不仅是产品经理的职能， 也是设计师的职能所在。

写在最后，我们来梳理一下整个设计链路的结构

作者：7V_Kevin
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司