组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组；并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，將这些组件整理在一起，便形成组件库。组件库帮助我们节省因重复设计产生的工作时间，让我们更专注于用户体验和对产品的创新。

一、项目组件库创建背景

我们在工作中经常会遇到这样的工作场景：
设计A：设计师B,把你xx项目的设计稿发我下，我要用里面的一个组件。
设计D：设计师C,为什么你的设计稿里的颜色和我的不一致，到底以哪个为主？
产品经理A：为什么所有项目组件都不统一？
产品经理B：这次需求跟上次没有多大变化，很多组件都可以复用，为什么评估的时间那么长？
开发A：为什么每次给的设计稿样式，颜色，组件都不同，我又得写新的样式表，2天肯定完不成。
开发B：怎么又改组件？功能还没做好
……
这样的对话场景太常见，大家在相互推卸责任，产品抱怨设计师设计进度太慢，设计师抱怨前期没有沟通好，开发抱怨工作量增加，设计师不专业等等。这一系列的问题不断的重复出现，迫使我们去寻找解决方案。

二、什么是组件库

组件库就是界面设计常用控件或元素的集合，从某种意义上说，交互设计线框图的组件库比视觉设计阶段的UI组件库价值更高。UI设计阶段，不同产品、不同项目的常用组件即使有共通之处，也一定是不完全相同的。而在交互设计的线框图阶段，一个优秀的组件库可以同时在许多项目中发光发热。

一个好的组件库，衡量标准主要包括灵活性、复用性、全面性。灵活性指一个组件的字段、icon、配色都应该可以灵活改写，以应对多样化的需求。复用性指对于通用组件，应当是可以在不同项目间复用的。全面性则指一套组件库应当覆盖尽可能多的常用元素。

组件化的初衷并非提高一致性、利于团队合作这些高大上的目的，而是人类进步的第一生产力——「懒」。消灭重复劳动是提高效率的主要途径，勤劳如小蜜蜂的设计师也不例外，那么组件化就是无论交互还是UI设计中我们不得不思考的问题。

虽然之前总是强调大家不要过分关注工具，对交互设计师而言，业务目标、流程和信息架构上的思考才是我们的核心价值所在。但这不代表工具就不需要思考和积累，一把更锋利的工具才能帮助我们把有限的时间和精力放在上面所说的核心思考上，而不是沦为埋头画图的线框仔。

三、组件库创建的意义

1. 保持视觉风格统一

一个产品必然有其固有的品牌基调和品牌倾向性，不同的设计样式会给产品带来不同的调性，为了保持产品视觉风格统一，设计师应该建立组件库，制定设计规范，统一设计样式。

2. 保持交互一致性

交互的一致性，可以减少用户学习成本培养用户习惯，让产品拥有良好的用户体验。比如一个日期的选择组件，在整个产品中应该就一种交互方式，如果一会是滚动，一会是下拉，会让用户操作起来比较烦躁。

3. 便于多设计师协作，也便于修改

每个设计师的想法不同，设计出来的样式自然也不同，组件化设计可以解决多位设计相互协作的问题，节省项目时间，而且要修改，不用牵扯全局，修改组件即可。

4. 与视觉设计无缝衔接：

Sketch为交互设计和视觉设计阶段的无缝衔接提供了最好的平台，交互组件库可以直接交付视觉设计师进行视觉设计，形成真正的UI组件库（UI Kit）。

5. 有助于形成设计规范：

当UI组件库形成后，「设计规范的积淀」——这个贯穿交互和UI设计管理工作中的老大难问题，就已经解决了一大半了，经过评审确认的UI组件库可以直接作为视觉设计规范的一部分。

6. 利于团队合作：

无论是交互设计组件库还是UI组件库，经过整理和完善，在项目或者团队中推行开来，对项目内，或者不同项目间设计成果的一致性、合作效率都大有裨益，也有助于让整个品牌形成有效的辨识度。

7. 满足不同场景需求

将组件视为一个独立的产品，从多维度，多场景输出组件的方案和组合标准，在组件设计过程中，我们进行更完整全面的思考，产出更能灵活适应不同场景的方案。

8. 便于多个项目后续迭代升级

新产品上线后，还需要不断的去完善，在迭代过程中可能会新增其他功能，就需要在现有组件上进行补充升级。

四、组件库创建流程

1. 组件清单

主要是整理和归类线上组件，按照公司现有产品的交互路径一步步操作，梳理项目，罗列清单。和产品或者需求方讨论未来会有哪些新业务，现有的组件是否能够满足需求，是否需要补充设计方案。清单整理完毕后，将每一个组件建成一个独立任务，像日常需求那样，方便随时更新、复用。

2. 场景整理

把自己变成产品的深度用户，把现有线上产品完整体验一遍，绘制用户行为路径，并和需求方沟通了解后续计划，将组件的所有的当前/潜在应用场景总结出来，尽可能不遗漏场景。

比如一个高级搜索组件使用的场景：
输入框输入关键字进行模糊搜索，出现的联想选项可以用上下箭头进行选择，按下回车键，内容区域展示加载状态
输入框输入关键字鼠标悬停右侧下拉展示全部筛选条件，模糊搜索的关键字在下拉中展示，并和其他查询条件联查，tab键可以切换下拉中的筛选条件，按下enter键收起高级搜索，内容展示加载状态
点击重置，清空所有查询条件，并刷新查询内容，不收起查询条件；手动清空单个查询条件，查询内容区域不刷新，清空最后一个查询条件是，查询内容刷新，不收起高级搜索

3. 体验分析

分析线上已有组件的体验现状如何，每类场景下需要解决的核心问题是什么，无法兼顾时如何取舍。

例如表单的组件：

把组件拆解成多个区域如下：

输入框：
选择器：
时间选择器：
开关：
多选：
单选：
文本域：
按钮：

思考按钮在点击保存表单时的交互场景：

还没填写完表单信息不能保存提交的时候：
填写完成后还未提交的时候：
鼠标悬停在保存按钮上还未点击的时候：
鼠标点击保存按钮还未松开鼠标的时候：
点击保存后系统正在保存等待中的时候：

4. 方案设计

多维度去思考组件所使用的场景和一些交互状态，考虑组件对所有场景的适应，设计一套符合自己产品特色的组件并含有多种设计方案。

设计组件时需要注意的要点：

组件命名以及排列要有规则，方便团队成员查找对应的组件；
组件之间的元素是可以相互替换的，例如文字的颜色，按钮的颜色都可以根据场景不同选择对应的方案，图标可以根据场景替换对应的颜色或者其他图标等等；
组件应包含：默认状态、交互状态、用户体验。
将所设计的组件进行整合，便拥有了一个团队的组件库啦！

五、意见收集

通过上面的创建流程的讲解，一个设计组件库基本建立完成了，到底是否适合产品使用呢，我们还需要进行内部讨论，听取各方的反馈意见，进行增删改查，然后就可以正式使用。

随着各项目不断的更新迭代，我们也会发现很多新的问题出现，所以设计组件库也需要像产品一样定期更新。可以定期对设计团队、产品经理、开发团队等相关同事进行意见收集，问问他们现阶段遇到的一些问题和相关建议，然后把这些反馈收集起来进行筛选判断，及时更新组件库。

小结

组件库帮助我们节省因重复设计产生的工作时间，让我们更专注于用户体验和对产品的创新。当然组件库的创建还需要不断的积累和更新，需要团队共同努力完成。作为设计师的我们，还有很多需要去学习的地方，让我们一起努力吧！