░ 如何构建大家都能高效利用的组件库？

组件库的搭建和维护需要设计师花费大量的时间，因此从组件库的构思到维护都需要建立在团队内部保持一致的基础上，渗透至项目的全流程，让它发挥出最大的效用。

下面有几点建议：

1-尽早让各职能角色参与进来，共同讨论出合理的组件命名及框架，提高每一位成员的参与度，降低项目组成员的认知成本。（其他设计师就是组件库的用户）

2-搭建合理的文件框架，并编写友好的使用手册；

3-定期收集新的组件需求，更新组件并组织评审，听取各个职能角色的意见。

更多注意事项可以参考UXPin的E-book: 如何建立设计系统

░ 着手制作

首先我们需要构思一个组件库的框架。这里用iOS人机交互指南中的分类方法，将组件分为栏（Bars）、内容（Views）、控制（Controls），(这种分类方式在笔者看来是最简洁又最全面的）再加上视觉系统和标注体系，共为五部分。

为什么是五项呢？人的短期记忆容量是有限的，五项相对来说比较适中。初次使用就能留下印象，多次使用便能形成长期记忆。每个大类的分支也是经过了努力的归纳，维持在个位数，尽量减少团队成员在使用过程中可能产生的记忆负荷。

具体架构如下：

组件库框架（笔者自绘）

这么多内容，从哪里开始入手？

△ 建立界面元素清单（Interface Inventory）

以移动端应用为例，组织上交互设计师、视觉设计师、前端开发，利用一个下午的时间，将目前移动端项目中采用的各类组件截图，分工归纳到一个文档中（可采用Power Point, keynote, sketch, google slides，使用团队觉得趁手的工具就好）。

这个过程当中，对于组件的分类和名称，大家也会产生许多不同意见，最终讨论与达成一致后，再组织大家一起浏览一遍，必定能发现大量的一致性问题。

通过这一过程，团队能够形成对于建立规范、总结和维护组件库必要性的认识、熟悉和认同组件库的框架。从一开始，就把所有关系人包括进来。

这一方法的细节可以点击这里：原子设计第四章

△ 定义视觉风格

颜色、字体、阴影、网格等（仅为统一交互文档的视觉效果，并不需要像产品视觉规范那样细致）

如图：

定义交互文档使用的色彩和字体规范（自绘）

网格体系能够帮助我们通过亲密性和对比原则快速建立起有韵律的元素组。（参考Material Design的grid system）

△ 绘制组件内容

原子设计（Atom design）的理论能够帮助我们以层级化的方式看待页面组件，对于Sketch嵌套组件的构建很有帮助。Brad Frost从工业、建筑生产中的装配式、模块化概念得到灵感，借鉴了化学学科中的一些理论知识，将页面元素进行了分级。

原子-分子-组织-模板-页面

他将页面元素中的最小单元比喻为原子（atom）（如表头、输入框、按钮等）；将原子构成的简单元素组合称为分子（molecules）（如搜索栏）；由原子、分子甚至组织构成的复杂元素组合，即为组织（organisms）（如web页面中的顶栏、购物网站中的宫格组件）；下一步，由组件构成典型页面，考虑布局、内容大小、间距等，形成模版（templates）；最后再是具体的页面（pages）。

我们可以开始思考，界面清单中的那些组件里那些是原子，那些是分子，哪些是组织？我们的项目中有哪些可作为模版的典型页面？

例如：下图的这个对话框即是一个组织（organism），由图片、文字、按钮所组成。其中图片、文字和按钮中的ICON为不可拆分的单元，即原子；而这里的按钮组件由ICON和文字组成，是分子。

示例（截图自Mimo）

归类完后，就可以按照1-原子（嵌套入）2-分子（嵌套入）3-组织（嵌套入）4-模版的顺序，依次开始绘制组件了。

嵌套组件的注意事项请见：一个故事理解Sketch组件嵌套（Nested Symbols）

下一篇文章，将详解几个搭建组件库必备的Sketch小技巧。

上一篇：从0-1，搭建高利用率、扩展性强的交互组件库（一）

参考文章：

·sketch的symbol嵌套功能：https://sketchapp.com/docs/symbols/nested-symbols/

·如何构建高复用性的交互组件库：http://qinsman.com/1701_idkit/

·“后台产品”ux&ui设计总结（下）-style guide 制作：https://zhuanlan.zhihu.com/p/28809858

·how to construct a design system: https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117

·set up a design system: https://blog.prototypr.io/design-system-ac88c6740f53

·5 things to do before your next design file: https://medium.com/ux-power-tools/5-things-to-do-before-you-start-your-next-design-file-in-sketch-or-preparing-your-design-mise-en-ff7ea9fe3722

·atomic design http://atomicdesign.bradfrost.com/chapter-2/

一些国内外公司的style guide：

国内：

·ant design:https://ant.design/index-cn

·teambition:https://design.teambition.com/

国外：

·Atlassian :https://atlassian.design/

·IBM:https://www.ibm.com/design/language/

·airbnb:https://airbnb.design/building-a-visual-language/

·mailchimp:https://ux.mailchimp.com/patterns

·trello:https://design.trello.com/

·buzzfeed:http://solid.buzzfeed.com/

·salesforce:https://www.lightningdesignsystem.com/