UI组件如何设计企业级的UI组件库

2022-01-08 13:12

原标题:如何设计企业级UI组件库？

从以上对话不难看出，最常发生在需求沟通和研发过程中，由于缺乏统一的规范和标准化体系，实施过程中各方沟通成本较高，导致设计结果与实施存在一定差距，影响用户体验；公共组件和业务组件混合在一起，导致设计模式和代码的重用率低。尤其是业务发展到一定量的时候，如果没有高效的工具和标准来协同工作大量重复的、相似的复杂产品需求场景，团队的生产和沟通效率会受到很大影响。

问题

认知:产品、R&D、设计师对同一需求都有各自的解决方案，缺乏统一规范的约束，难以达成共识。

效率:设计效率低，交互原型维护成本高，上下游团队沟通成本高，容易造成不专业的印象。

质量:认知和效率的限制最终导致产品质量和用户体验难以保证。

解决

大家应该都知道乐高积木，是可以嵌套组合的塑料积木。有1300多个形状，每个形状有12种不同的颜色，可以插入各种形状。事实上，组件库的工作方式就像乐高一样，它通过将小组件相互嵌套来生成各种组件或模块，并组合各种组件模块来生成页面结构。先理清一个概念。什么是组件库？

作为设计系统的一部分，组件库是组件的集合，可以直接用于在我们的常规界面设计过程中制作交互式图例和构建页面。它可以作为单个组件独立存在，也可以通过多个组件组成的结构或模式解决类似场景的设计问题。组件库是一个在约束下构建解决方案的过程，因此组件的使用应该遵循一定的规范，并根据一个标准化的系统在多个业务场景中重用。

一个有效的构件库可以帮助设计师和R&D提高工作效率和设计专业性，同时让产品的体验更加一致、可学习、品牌感更强。它的基本特征必须是通用的、灵活的和可重用的。

通用性:指基础足够，没有业务属性的共性。参与设计过程的每个人都应该知道这个组件的功能和用途，并具有一定的可扩展性。

灵活性:组件的组合要求灵活，在不同场景下相互组合可以快速搭建交互框架的原型图，并根据不同页面结构的演变来适应新的业务需求。

可复用性:适用于多个业务或产品，在设计过程和研发过程中可以高频复用。

那么用构件库的标准化体系来完成设计方案能带来什么样的价值呢？

组件库的价值

保证产品体验的一致性:对于一个拥有多个业务系统的大型复杂产品，虽然每个独立的业务系统在功能上有一定的差异，但整体的用户体验需要满足基本的一致性。比如我在同一个产品中使用业务系统A和业务系统B时，通过相似的页面结构、组件和样式的一致性、操作反馈甚至提示复制结构的一致性，可以感知到我使用的A和B业务系统属于同一个产品。

提高设计师效率:当需求巨大，来自不同业务线时，需要逐个绘制页面和组件，导致大量重复工作，在评审和需求沟通中可能会有持续的细节调整。因此，对于设计师来说，组件的高频复用可以大大提高设计效率，让设计师更专注于理解和解决用户的实际问题。

提高产研团队效率:直接按照规范设计和研究通用场景和通用需求，减少上下游对同一页面理解和组件使用不同导致的冗余通信成本。

有利于设计规范的沉淀:组件的设计和使用可以直接作为交互和视觉规范的一部分。可以根据统一的设计规范确定要使用的主题颜色、组件样式、组合方式和页面结构，快速搭建一个或多个产品的交互框架。

构建“鱼设计”企业用户界面组件库

那么如何构建企业UI组件库呢？

我将以前段时间参与的“FishDesign企业UI组件库”项目为例，介绍一个企业UI组件库的设计原则，内容构成中包含哪些类型和元素，以及在分类和设计过程中如何考虑每个组件类型。本文关注的是构建构件库的内容，而不是构件类别本身的设计方法。

顾名思义，“企业级”是指FishDesign所服务的服务具有一定的体量，可能服务于包含多个独立子业务系统的大型复杂产品，如网易七鱼；也可能同时服务多个产品，比如网易七鱼、网易定位。

组件库是帮助设计人员和前端工程师快速构建业务系统的工具。除了最重要的组成内容，还需要设计原则、配色方案和布局规范来指导具体业务产品的设计。

1.设计原则

目前基于鱼的设计主要是帮助打造B端企业产品，B端业务的产品目的决定了其采用的设计模式，因此我们将采用以下四个设计原则来塑造构件库:

简洁性:如无必要，不添加实体，仔细筛选客户当前需要的信息内容。

直接:在用户操作后提供直接反馈，确保用户操作结果符合预期。

优雅:设计方案追求优雅，给用户一种有质感的操作感。

适应性:设计方案要提供可扩展性和适应性，以适应企业的不同模式。

2.颜色

产品会根据自己的产品目标和受众选择配色方案。如上所述，有效的组件库应该满足通用性、灵活性和可重用性的要求，配色方案应该灵活定制以满足多样化的需求。以网易七鱼为例，设置一种主色、四种辅助色和六种中性色，构建一致的外观。

主色调:选择蓝色，传达智能服务、信赖可靠、科技创新的品牌形象。

辅助色:除了品牌的主色蓝色之外，辅助色中也有同样的蓝色，因为蓝色是一个比较通用的色系，用于产品中的主操作按钮、文字按钮或图标。红色引起注意，表示危险，因此通常用于警告和错误警告。黄色通常用作警告信息，提醒用户操作可能存在的风险和后果。绿色可以传递安全健康的情绪感受，可用于成功运营的正反馈或引导。

中性色:一般用黑色和灰色来显示产品的文字信息、背景和边框颜色，用来表达层次结构。

3.布局规格

为了解决多服务中网页设计区域的信息存储问题，我们使用规则的网格阵列来指导和规范布局和信息分发，即网格系统和页面布局。基于12格系统，FishDesign将整个设计区域划分为24个相等的部分，增加页面的相似度，提升用户体验。

我们通过基本的配色和布局规范解决了产品风格和信息块框架的设计。组件库中的重要组件是如何作用于产品构建的？布拉德·弗罗斯特提出的“雾化设计理论”可以帮助我们更好地理解雾化设计的灵感来源于现实世界中的分子结构。UI中粒度最小的元素，即“原子”，构成粒度较大的元素，即“分子”；许多分子形成更复杂的组件和模块，即“有机体”。

组件库不可能一开始就什么都有，所以需要不断的维护和迭代。如何在初始质量成分中划定合适的成分范围？最合适的出发点是从我们身边的业务场景出发，从最基本、最简单、最小的元素入手。

4.组件分类

根据现有的业务场景和未来的业务发展方向，我们将构件库的构件类型分为通用构件和业务构件。一般的业务组件库不是外部的，所以在FishDesign官网上只能看到常用的组件。

通用组件:指应用范围广，复用频率高，可以复用多个业务，不包含业务逻辑。比如导航栏、按钮、吐司、弹出窗口等。

业务组件:与一般组件相比，这类组件最大的特点是包含更多的业务属性，与产品功能相关性强，因此适用范围可能局限于一两个业务系统或特殊场景，复用频率不高。比如网易七鱼的在线和通话系统就是咨询分类组件。

一个大型复杂的业务产品通常会有多个设计师或前端工程师参与设计，需要在各种处理方式中选择合适的设计模式来解决不同的场景问题，这就需要根据组件属性的差异来细分通用组件，那么如何确定通用组件中的子类别呢？

有竞争力的产品学习和研究，并列举这部分产品类型中的组件类型。

遍历您负责的产品中的现有业务场景，提取并整理业务场景中使用的组件。

对排序后的两部分组件进行筛选和复制，保留频率较高的常用部分。例如，同一个下拉过滤组件，由于缺乏统一的规范和组件，可能导致同一个产品不同业务系统的同一个场景中使用的组件风格和交互方式不一致。我们需要做的就是将这些在类似业务场景中使用各种表达式的组件进行合并和复制，然后通过设计组的内部审核来划定最终通用组件的范围。

基于组件的属性和使用场景，对划定的组件范围进行分类。

从以上步骤，我们继续将常用组件细分为五个子类别:基本组件、导航、数据输入、数据显示和操作反馈。