编者按：本文网易设计师用「FishDesign企业级UI组件库」项目为例，过在网易七鱼品应用，来介绍个企业级 UI 组件库设计原则。
品：这需求很简单，比上期有段和操作项异，把上稿子接复制下应该不用很多时吧？
交互：上次你是是做过级筛组合？我这期需求要到，你把那分稿子发给我。
研发：这个组件在其模块过已有式，这次为什用不一的？不然要重复开发呀，能不能统一一下。
视觉：同一按钮不同的模块颜色不一样诶，这次哪模块一致啊？
……
通以上对不难看出，最常出现在需求沟通与研程中，由缺少统一的规范和标准化系，导致施节各方沟通成高，造成设计成果与现有一定差距，影响用户验；通用组件和业务组件混用，导致设计模式和代码复用率低。尤其是当业务展到一定量时，对复产品的大量重复且类似的需求场，果没有一种高效的工具和规范来协同工，将大大影响团的生产及沟通效率。
- 认知：产品、研发、计对于同一需求都有理解的解决方案，缺少统一规范的约束，难以达成共识。
- 效率：设效率低，交互原型的维护本及下游团队的沟通本高，易造不专业的印象。
- 品质：认和效率的局，最终导致施落地的产品质量和用户验难以得到障。
大家应该都知道高（LEGO）积木，它是一种可以互相嵌套组的塑料积木，形状共有 1300 多种，每种形状都有 12 种不同的颜色，可以拼插出多种造型。其实组件库的工作方式就像高，通过件的互相嵌套来产生多种组件或模块，多种组件模块结生成页面结构。先来梳理一个概念，组件库是什？
组件库是计系统的一部，是在常规界面计过程中可以直用来制作交互图例和搭建页面的组件集，它可以作为个组件独立存在，也可以通过多个组件组而成的结构或模式来解决类似景的计问题。组件库是在约束条件下去构建解决方案的过程，所以组件的使用也需遵循一定的规范，按照一套标准化的体系复用于多个业景。
一效的组件库，可以帮设师研发提高作效率，提升设专业度的同时让产品本身的体验加一致、可学，品牌感强，它所具备的基本特征一通用的、灵活的、复用的。
- 通用性：味着足够基础和常见且不带业属性，参计环节的每个人都应该知道这个组件的功能及目的，同备一定扩展性。
- 灵活性：求元件的组合需灵活，可以不同场景下通过互相组合速搭建交互框架原型图，并根据不同页面结构的演变应新的业务需求。
- 复用：指的是适用个业务或产品，在设计程和研程中以高频复用。
那么用组件库这种标准化体系完设方案时，到底能怎样的价？
保证产品体验的一致性：对于一含多业务系统的型复杂产品，每独立的业务系统虽然功能一区别，但整体的用户体验需满足基本的一致性。比如，当我使用同一产品中的业务系统 A 业务系统 B 时，我能通过类似的页面结构、组件及样式的一致性、操作反馈乃至提示文案结构的一致性，感知到我使用的A、B业务系统隶属于同一产品。
提升设计师的效率：在需求量巨大且需求来自不同的业务时，需要逐一绘页面及组件，造成大量重复劳动，并且在评审及需求沟通节还能存在不断地细节优。所以对设计师而言，组件的高频复用能大大提升设计效率，使设计师更的将精力聚焦理和决用户的际问题。
提升研团队效率：用场景及普需求接按规范进设计和研发，减少上下游页及组件使用不理解而生多余沟成本。
利于沉淀设计规范：组件本身的设计和使方式就可直接作为交互和视觉规范的一分，按照统一的设计规范来确定需要使的题色、组件样式、组合方式及页面结构，可快速搭建一个或多个产的交互框架。
那么如何构建一个企级 UI 组件库？
将用前段间参的「FishDesign企业UI组件库」项目为例，通过在网易鱼产品中的应用，来介绍一个企业 UI 组件库的计则，内容构成包含哪些类型和素，每种组件类型在类和计过程中是如何考量的。本文侧重讲述构建一个组件库所涵盖的内容，而不是某组件类别本身的计方法。
顾思义，「企业级」意 FishDesign 所服务的业务都具备一体的，可能服务一包含了多独立子业务系统的型复杂产品，比如网易七鱼；也可能同时服务多款产品，比如网易七鱼网易。
组件库是帮助设计者及前端工程师快速构建业务系统的工具，除最重要的组件内容，还需要设计原则、方案及局规范来指导具业务产品的设计有效落地。
1. 设计原则
基 FishDesign 目前主要是帮助搭建 B 端企业级产品，而 B 端业务的产品目的决定它所才采取的设计模式，所以我们将用以下四点为塑造组件库的设计原则：
- 简洁：如无必要，勿增实体，慎重筛选户当前需要息内容。
- 直接：提供用户操作后的直接反馈，保证用户的操作结果符合预。
- 优雅：设计方案追求优雅，给使用者有质感的操感受。
- 适应性：设计案需提供可扩展能力及适应性，以适应不模企业使用。
2. 颜色
产品会根据自身的产品目标受众群体去选产品的配色方案。文提到，一效的组件库需满足通用性、灵活性、复用性，配色方案就应该能被灵活自义应对多样化的诉求。以网易七鱼例（下文均以网易七鱼例），设置了 1 种主色，4 种辅色 6 种中性色搭建一致的外观感受。
- 主色：选择蓝色系来传达智能服、任可靠、术创新的品牌形象。
- 辅色：除了品牌主色调蓝色，辅色中也存一样的蓝色，那因蓝色相对泛用性较广的色系，用于产品中的主操作按钮、文字按钮或 icon 。色唤起注意并昭示危险，所以一般用于谨慎操作及错误提示。黄色则常用于警示信息，提示用户操作可能的风险及后果。绿色能传递安全健康的绪感受，用于向反馈提示或功操作的引导。
- 中：一般采取黑灰来展示产品的文信息、背和边框，用来表现次结构。
3. 布规范
为处多务中页设计区域的信息收纳问题，我们规则的格阵列来指导和规范版面布及信息分布，即栅格系统和页面布。FishDesign 在 12 栅格系统的基础上，将整个设计区域按照 24 等分的原则进行划分，来增页面的相似，升户体验。
我们通过基本的配色及布规范解决了产格及信息区框架的设计，那组件库中重要的组件分，是如何作于产搭建的？Brad Frost 的「原子设计论」可帮助我们更好的解，原子设计的灵感来自于现实世界当中的分子结构，UI 中颗粒最小的元素，即「原子」，组成了颗粒较大的元件，即「分子」；而诸多分子又组成了更复杂的组件与模，即「有机体」。
组件库构建之初无法一应俱全，是需要后续断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢？最合适的切入点就是从身边的务场景发，从最基本、最简单、最小的元素入手。
4. 组件分类
我们根据当已有的务场景和对往后一时期的务发展方向进行规划，将组件库的组件类分为通组件和务组件。一般务组件库是对外的（毕竟使场景特殊有限，放来参考意义大），在 FishDesign 官只看到通组件分。
- 用组件：指适用范围广、复用频高，可复用于多个业务不含业务逻辑。比如导航栏、按钮、toast、弹窗等。
- 务组件：这类组件对通组件而言，最大的特点就是包含了较多务属性，跟产功有较强的联性，影响到适范围可仅限于 1~2 个务系统或特殊场景，且复频次。如易七鱼的在线和呼叫系统中的咨询分类组件。
个大型复杂业务品常有不止位设计师或前端工程师参与设计，需要在多处理选择合适设计模来解决不场景问题，这要求根据组件属性异，需用组件做细分，那么如何确定用组件子分类呢？
- 竞品学习与研究，穷举该部分产品类型中的组件类型。
- 遍历自己所负责产品内已有的业务场，提取并整理业务场中所用到的组件。
- 将理好两部分组件进筛选去，保留高频用部分。比如样是下筛选组件，由于缺少统规范和组件，可能导致后是在品不业务系统相场景下，使用组件从样到交互都不致。我们要做是这部分在类似业务场景使用了多表形组件做合并去，然后过设计组内审来圈定最后用组件范围。
- 基于组件的属性和使场景，对圈定的组件范围进行归类。
由上述步骤，我们将用组件继续细分为五个子类：基础组件、导航、数据录入、数据展示、操作反馈。
- 基础组件：即按钮、图标，相较于其他组件的使用场景通用，或其他组件实时依赖了这些组件实的组件类别。
- 导航：即导航菜单、标签、面包屑等，以帮助用户产品系统内快速找到所在页面级或位置的组件类别。
- 数据录入：即输入框、选择、表单等，支持用户将数据信息录入到系统组件类。
- 数据展示：即图表、表格、气泡卡片等，将录入到系统的数据信息多样展示来的组件类别。
- 操作反馈：即对话框、警告提示（Alert）、全局提示（Toast）等，在用户操作前后，使系统状得以理反馈的组件类别。
以网易七鱼为例，看下有组件库参与搭设计示例，以下页所用组件均出自 FishDesign 组件库。
「导航组件」使示例：
「表格组件」使示例：
「弹组件」使示例：
「步骤组件」使示例：
组件库最大价值在于提升个团队研效率，使设计质量以保障时，提升品体用户体验。
我们对构建企级 UI 组件库的步骤及要素做个简单顾：
- 首先，明确组件库所需解决问题及存在价值，这决定组件库体量和服务范围是什么，以及构时是否合适。
- 次，通过竞分析并结合身边最熟悉或深耕的务入手，通过产目的来择设计模式，从最小元素开始逐步整，包括产配色方案和栅格系统等布规范。
- 第三，需要对组件库的重要组成部「组件」，进行圈定及理类。这需要注的是，组件范围的圈定，尤其在组件库搭建的初阶段并不是越多越好，而是需要有效的覆盖那些经过规划的业景即可。
- 后，组件库并不构建完就结束了，需后续项目中逐维护与新的积累过程。
任何组件库的构建都离不开一个优秀的队在整个计过程中的高效协同，十谢参的计前端工程。上文仅是个人参过程中的一些经验总结，还不够全面，同篇幅有限，关于组件的体计考量无法一次详尽，欢迎一起讨论组件库及标准化计体系相关的更多内容。
欢迎关注作者「网易UEDC」的公众号：
浙公网安备33011002017549号