组件库规范

组件库是什么？

组件库相当于乐高的一个个积木，通过组件的拼搭可以迅速搭建出一个页面。通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。

而对于 B 端产品和 C 端产品，二者的组件库又有些许差异。

🔔 C 和 B 的区别

C 端的组件库更追求极致的交互和视觉体验，因此需要考虑视觉、性能、实现、兼容性，另一方面，C 端会根据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。

对于 B 端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外 B 端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。

如何做组件库

确定组件库的内容

新产品：对于新产品来说，业务体量较小，较难抽取共性，组件也不全面，因此较好的方式是参考大厂的组件库确定要做哪些组件，它们的相对成熟，参考价值较高。

成熟产品：对于已经成熟的产品来说，我们可以直接遍历页面，穷举出所有用到的组件，除基础组件外，提炼出复用率高的业务组件进行结构化和组件制定。

组件分类

组件是设计师在日常设计工作中，极为常见的内容。设计师除了在完成业务需求的的设计之后，同时需要设计一套适用于产品的组件库。

所谓「最佳方案性价比」，就是我们需要在设计的个性化表达和资源投入之间找到最佳的平衡点，在关注出色视觉表现的基础上，逐渐加强对项目协同及体验价值的关注，逐步形成新的设计思维模式，也就是组件化思维。

组件化设计 就是把产品需求场景化、视觉表达模块化，每个组件基于复用为目的，使其具备独立的完整解决方案，通过标准的规范组合方式来构建整个设计方案，从而提升设计效能。

👀 组件化设计思维 3 个关键点

• 完整组件方案：将组件视为一个独立的产品，从多维度，多场景输出组件的方案和组合标准。

• 组件化思维：从需求出发，拆解页面表达结构和所需组件。

• 通用页面规则：通用的页面与组件的栅格体系及替换规则。

搭建每个组件

以警告提示（Alert）为例，演示单个组件的建立方法。

定义组件

根据业务定义警告提示的使用场景，警告提示用于重要信息的提醒，采用非浮层的方式展现在页面顶部，被动出现，且不会自动关闭。

拆分组件

这一步是将组件拆分为元件。对警告组件进行拆分后得到如下：

重组输出

根据业务场景，我们把各个元件重组为组件，建成组件集，并定义各种组件的使用规则。

输出文档并替换到产品中

在组件库建立完成后，只有在日常设计中真正使用组件库，提高组件库在设计稿中的覆盖率，才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档，在团队中进行推广，加强设计团队的公用意识。另外，我们还要与开发工程师配合逐步完成现有页面的组件替换。

定期维护组件库

组件库的内容并非一成不变，而是在不断地更新，以保证所包含的组件都是最新和有用的。与其他数据一样，组件也会有增删改。

🔎

增：当有新的组件产生时，我们需要通过判断它的拓展性和复用率，以确定是否将它入库。

删：随着产品的不断升级迭代，如果某个组件已经不用或复用率很低时，我们可以考虑是否要将它删除。

改：不可避免的，组件会随着业务而进行升级，我们可以通过数据埋点和 A/B test 的方式来确定某个组件是否要进行改动。

控件规范

控件是指产品界面中可操作的部件，我们也称元件，与组件是有一些区别的。控件翻译为 Control，组件翻译为 Component。

通俗的解释说法就是组件为多个元素组合而成，控件为单一元素组合而成。

常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。

以下列举一些我们在 APP 设计规范中整理的内容。

按钮

👀 按钮有 5 个状态：

正常、点击、悬停、加载、禁用。

需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。

输入框

用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。

选择

选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。

选项卡

用于让用户在不同的视图中进行切换。标签数量，一般是 2-5 个；其中，标签中的文案需要精简，一般是 2-4 个字。每个标签所占的宽度可适当调整。

滑动开关

滑动开关有两个互斥的选项（例如开/关、是/否、启动/禁止），它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作。

进度条

用于向用户展示步骤的步数以及当前所处的进程。

角标

用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。

组件规范

常用的 UI 组件（Component）：表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。

👀 Ant design 移动组件

在 skecth 中设计时，使用 Symbol 创建的组件，在后期整理时，可以节省许多的时间。

👀 当然，Figma 也同样具备这样的能力，你所创建的组件都存在于 Assets 中。

缺省页面

INFO

• 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。

• 无网络状态：在没有连接到网络时的提示页面。

• 404&505：发生未知错误时的页面。