如何零基础高效建立组件库？来看大厂设计师的总结！

如何定义组件库

UI 设计组件库（UI KIT），直译过来就是户界面成套元件。我们日工作中构建的组件库，一般是把有界面设计中的控件及控件组合汇总分类，形成一个对对外都起到效与控制标准的工具库。

1. 辩证地看待原子设计论

为了方组件库在实际应中的实及迭代拓展，我们通需要对组件模进行分析解构。

大家应该都熟悉著名原子设计理论在组件库应用（原子设计：将页颗粒度分为原子、分子、组织、模板、页细维度，进组件和组件层层嵌套）。

所以是否我们就应该将原子理论不加辩证地应用到所有组件的构建中呢？我得其中的颗粒度选择还是需要根据组件的分类进行有区别的抉择的。

△ 不熟悉原子设计理论的，推荐以看看位原子鼻祖写的书

也可以看看这篇总结：

商业设中我们通常把组件库分「基础型」「业务型」两类，者主以系统组件（导航/tab/键盘）、页面固组件（图标/按钮）高频使用的组件主，后者则直接关联业务加复杂多变的组件模块。

如果说前者应用概念进行计，觉得是没有大毛病，包括在后期 library 的输出上理论确实也会显得比较严谨。

但「务」组件因为本身属于复杂多变的模组件，使过细的颗粒但容易影响整体态拼的效率，可因为颗粒过细导致在变过程中的体验一致性变异。针对「务」组件，我们更需要对它进行交互解构。用结构化替代穷举提效的同保障整体的交互体验一致性，确保这个模块无论怎变换，它还是不脱离整体的计系统规则。

2. 组件库vs设计规范

在讨论完组件库的颗粒度之后，有一些同学还是纠结这个 UI KIT 底需不需要和计规范做结，体需要展示哪些内容更贴现在主流的做法。

个人解这两者应该是相辅相成、相对独立且呈包含系的 2 个东西，如果 UI 设计规范类一纸详细的产生产说明，组件库则更像是一个线上工具零件库+简易工作使说明书。再通俗一些来说，就是我们的组件库依附于当前的设计规范，同时未来我们将依据设计规范来产的符合规范的组件。

△ 摘「如」计规范

△ 摘「滴滴出行」uikit画布展示说

但实际上因为大厂 UED 规模及念差异，大对组件库和视觉规范的输各相同。

基本在滴滴时候为 CDX 组件和规范沉淀时久远，改版频率又十分低，不设计团队沟基本凭着套出 UI KIT 师自高效输出了。现在到了新团队，也是优先搭可以上使用出活组件库，毕竟项目拼是效率和时。

组件库的部署与落地同步

接下来我们来说说在实工作我们最为实用部分，有关如何实现组件库完美应用，让你日常工作再也离不开它。

1. symbol化的设计布局思路

相信 sketch 的 symbol 原子设计原大应该都很熟悉（熟悉的话可百搜到很多相使 symbol 的攻略），我就简单再举个弹的例子来补充一些小细节：

对于对话框组件的解构我们可分为图片区、标题区、正区、操作区个分，我们要做的是把这个弹做成一个「无限可」的对话框，即对话框的每一个区域（从图片到操作按钮）都是可替换的。

这里我们需要单独 symbol 化嵌套部分是图片、操作按钮及背景遮罩，这样我们可以到个基本可以接适配使用图文话框。

△ 有symbol化操作过程有疑问可以留言或者私我

按照上思路我们就以基 0 失误地完成 sketch 组件库的初步搭建，接下来给大家分享一个常用的组件库搭建目录 list：

除了业务组件视不品业务线而定，基础组件和传组件都相固定可以相大积地复用。其传组件大家可能接触相少些， UX 和UE 设计师来说是可以接在做流程交互梳理时，拖拖拽拽完成设计常好用工具组件。

△ 摘自「滴滴出」uikit传组件-流程图部分

2. sketch cloud的同步协作

制作完组件库 sketch 部署后我们需要把它真正地应用起来了。

我们以通 sketch/首选项/添加组件库的方式将我们刚刚部署完的 sketch（命名为：组件库 library_zmn_20191118）导。之就以在 sketch/置/组件中找到对应的「组件库 library_zmn_20191118」组件库直接进行拖拽元素使用。

个步骤很同学很熟悉，但是在际工中我们常常遇到一个问题就是，一旦个组件库生变更该何进行组内同步呢？果只改变地的组件库源文件更替上传，其他设计同学的 library 并不生变化，所以何做到大家同步更新呢？

首先我们需要做的是登录 sketch cloud 账户（sketch 右上角的小云云）

登录 sketch cloud 账户之，我们需要将组件库源文件上传成为 cloud 文档（sketch>文件>打开 cloud 文档>新 cloud 文档）。

里我们还以点击已上传的 cloud 组件库文档进行编辑和更新，之得在 sketch cloud 里添加你的组内设计同学哦。

样一来所有组内设计的同学就以在 sketch 里更新下载新的组件库直接拖拽使用（一般 cloud 组件云更新 sketch 的右上角有「红通提示」，是以直接点开更新下载的）。

样一来现人同步地更新组件库的高效操，非常之用。唯一美中不的就是 sketch cloud 账户周期退出登录，所以我们还是需要时常检查一下自己的 cloud 账户是否还在，以免错更新。

3. 组件库的监察机制与管理

去年面试的时从快看到淘宝，感最高频出现的就是有关组件库的问题，感大家很关注有关组件库的定义与库标准。尤其在大的 UED，一般有一套属的组件库监察滚动机适用地团合，对之的组件库更新迭代，新组件封装库有自己的标准。

对于监察机制我们就不多了，因并不一配于家的况，我们这主谈谈组件库理。

因为组件库从搭建完成之后会不停滚动更新，那是否需要将所有更新出现的新组件都纳入组件库呢？显然是不科学的，需要理管理和控制组件库的容量，及调整和翻新组件库的组件，确保组件库的内容都是最新最好用的。

那么如何来判定组件的入库与剔除标准呢？我们可从 4 个维进行细致的分析，这里供一个参考。

基础层：标准规范符合

对于组件的考察最基础的应该就是标准和一致性，组件是否符合视觉规范直接影响整体的体验传达。

体验层：视觉层次/感官体验是否良好

每个组件都应该适配合的手势交互热区尺寸、一目了然的操作点功分区及极致舒适美的感官体验

数据层：数据验证

一分组件是可通过埋点+单一变量的 A/B test 的方式测试同的点击转率。这里我们举个例子：例如电商的抢购按钮，我们在改变他产信息与视觉交互的情况，通过测试 2 种同案及视觉表达的按钮的点击率差异就可数据测试 2 个组件的优劣汰。

实用层：兼容性/复用率/拓展性

因为组件库的容量有限，所以不能够把所有出现过的，觉得不错的组件都封装纳入组件库，所以最后一条是组件入库的决定性因素。只有组件复用足够高频且有良好的拓展性，才能最终把它定格成组件库的一员。

总结

咱在 0-1 构建组件库，要清晰它的定义作用，之后进行类 list 规划，最后再在 sketch 中完成部署落地，最后形成一套完成的组件库同步协作的管理机制新组件入库的标准制定。更远一点来说还可以开发形成协作，共同开发线上组件库资源，实现从横向的业赋能。

注作者的微信公众号：「Nana的设计锦囊」