在信息系统建设过程中，由于缺少统一的规范和标准化体系，实施环节各方沟通成本高，导致设计成果与实现有一定差距，影响用户体验。如果有一种高效的工具和规范来协同工作，将大大提高团队的生产及沟通效率。

一、UI组件库介绍

组件库是设计系统的一部分，是在我们常规界面设计过程中可以直接用来制作交互图例和搭建页面的组件集合。它可以作为单个组件独立存在，也可以通过多个组件组合而成的结构或模式来解决类似场景的设计问题。

一个有效的组件库，可以帮助设计师和研发提高工作效率，在提升设计专业度的同时，让产品本身的体验更加一致、品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。

二、UI组件库的价值

2.1统一性

1.整个产品以不同模块的业务按照统一规范使用，提升整个产品的视觉交互统一性，减少开发样式，提升开发效率。

2.统一交互设计规则，减少用户操作的迷惑感，提升产品的体验。

2.2高效性

1.减少制作组件控件的时间，不需要对组件重新下定义，提升设计效率，可将更多时间放在流程体验和设计推动上。

2.提升研发团队的效率,通用场景及普通需求直接按规范进行设计和研发，减少上下游对同一页面及组件使用方式的不同理解而产生的多余沟通成本。

2.3延续性

1.通过设计规范，在以后更新中可以连续迭代，避免断层。

2.利于沉淀设计规范，组件本身的设计和使用方式就可以直接作为交互和视觉规范的一部分，按照统一的设计规范来确定需要使用的主题色、组件样式、组合方式及页面结构，可以快速搭建出一个或多个产品的交互框架。

三、远齐UI组件库的构建

组件库是帮助设计者及前端工程师快速构建业务系统的工具，需要制定设计原则、配色方案、组件分类，以及迭代设计和维护规则来指导具体业务产品设计的有效落地。组件库是在约束条件下去构建解决方案的过程，所以组件的使用也需遵循一定的规范，按照一套标准化的体系复用于多个业务场景。

笔者将以远齐UI组件库项目为例，通过在此产品中的应用，来介绍一个企业级 UI 组件库的设计原则，组件分类包含哪些类型和元素，每种组件类型在分类和设计过程中是如何考量的。

3.1 设计原则

基于远齐UI组件库，目前主要是帮助搭建 B 端企业级产品，而 B 端业务的产品目的决定了它所才采取的设计模式，所以我们将用以下四点作为塑造组件库的设计原则。

1.简洁：如无必要，勿增实体，慎重筛选客户当前需要信息内容。

2.直接：提供用户操作后的直接反馈，保证用户的操作结果符合预期。

3.优雅：设计方案追求优雅，给使用者有质感的操作感受。

4.适应性：设计方案需提供可扩展能力及适应性，以适应不同模式的企业使用。

3.2颜色

远齐UI组件库会根据自身的产品目标和受众群体去选定产品的配色方案。前文提到，一个有效的组件库需满足通用性、灵活性、复用性，像配色方案就应该能被灵活自定义来应对多样化的诉求。以此产品为例，设置了 1 种主色、4 种辅助色、2种语义色和 6 种中性色来搭建一致的外观感受。

1.主色：选择蓝色系来传达智能服务、信任可靠、技术创新的品牌形象。

示例

2.辅助色：除了品牌主色调蓝色，在辅助色中也存在一样的蓝色，那是因为蓝色是相对泛用性较广的色系，用于产品中的主操作按钮、文字按钮或 icon 等。

示例

3.语义色:红色唤起注意并昭示危险，所以一般用于谨慎操作及错误提示。绿色能传递安全和健康的情绪感受，用于正向反馈提示或成功操作的引导。

示例

4.中性色：一般采取黑灰色调来展示产品的文本信息、背景和边框色，用来表现层次结构。

 示例

3.3组件分类

根据当下已有的业务场景和对往后一段时期的业务发展方向进行规划，远齐将组件库的组件类型分为通用组件和业务组件。

1.通用组件：指适用范围广、复用频次高，可复用于多个业务且不包含业务逻辑。比如导航栏、按钮、toast、弹窗等。

2.业务组件：这类组件对比通用组件而言，最大的特点就是包含了较多业务属性，跟产品功能有较强的关联性，所以影响到适用范围可能仅限于 1~2 个业务系统或特殊场景，且复用频次不高。

一个大型复杂的业务产品通常需要在多种处理方式中选择合适的设计模式来解决不同的场景问题，这要求根据组件属性的差异，需对通用组件做细分，具体分为五个子类别：基础组件、导航、数据录入、数据展示、操作反馈。

1.基础组件：即按钮、图标等，相较于其他组件的使用场景更通用，或其他组件在实现时依赖了这些组件来实现的组件类别。

2.导航：即导航菜单、标签、面包屑等，可以帮助用户产品系统内快速找到所在页面层级或位置的组件类别。

3.数据录入：即输入框、选择器、表单等，支持用户将数据信息录入到系统的组件类别。

4.数据展示：即图表、表格、气泡卡片等，将录入到系统的数据信息多样化展示出来的组件类别。

5.操作反馈：即对话框、警告提示（Alert）、全局提示（Toast）等，在用户操作前后，使系统状态得以合理反馈的组件类别。

3.4迭代设计和维护

一个优秀的组件库绝不是短期就能结束的项目，而是一款产品，需有专人长期的跟进和维护。例如：优化组件包容性、补充组织的种类等，从而逐步建立起适用于团队的组件库。

四、总结

任何组件库的构建都离不开一个优秀的团队在整个设计过程中的高效协同，远齐科技已经在软件系统的每个应用层上实现了规范化和标准化，在长年累积的项目和经验中，逐步形成自己的标准化组件库。

远齐科技基于成熟的软件架构、互联网、物联网、大数据、人工智能等技术构建面向未来的集成开发平台系统。在自有集成开发平台基础上，基于最佳业务实践开发出丰富的软件功能模块、业务系统，为企业提供高效的定制化开发服务。