如何从0到1搭建UI组件库？

组件库如何高效的对内外应用？

如何定义组件库

Ui设计组件库(UI kit)，直译过来就是用户界面成套元件。我们日常工作中所构建的组件库，一般是把所有界面设计中的控件以及控件组合汇总分类，形成一个对内对外都能起到提高效能与控制标准化的工具库。

1.辩证的看待原子设计理论

为了方便组件库在实际应用中的实用度以及迭代拓展，我们通常需要对组件模块进行分析解构。

大家应该都熟悉著名的原子设计理论在组件库的中疯狂应用(原子设计：将页面颗粒度分为原子、分子、组织、模板、页面的超细维度，进行组件和组件的层层嵌套)。

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

在商业设计中我们通常把组件库分为“基础型”和“业务型”两大类，前者主要是以系统组件(导航/tab/键盘等)、页面固定组件(图标/按钮等)等高频使用的组件为主，后者则是直接关联业务更加复杂多变的组件模块。

如果说前者我们应用原子概念进行设计，我觉得是没有太大毛病，包括在后期library的输出上原子理论确实也会显得比较严谨。

但“业务型”组件因为本身属于复杂多变的模块组件，使用过细的颗粒度不但容易影响整体动态化拼装的效率，也可能因为颗粒度过细导致在变化过程中的体验一致性变异。所以针对“业务型”组件，我们更需要对它进行交互解构。用结构化替代穷举提效的同时保障整体的交互体验一致性，确保这个模块无论怎么变换，它还是不脱离整体的设计系统规则。

2.组件库vs设计规范

在讨论完组件库的颗粒度之后，有一些童鞋还是纠结这个ui kit到底需不需要和设计规范做结合，具体需要展示哪些内容更贴合现在主流的做法。

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

但实际上因为厂子UED规模及理念差异，大家对组件库和视觉规范的输出也各不相同。

基本在滴滴的时候因为CDX的组件和规范沉淀的时间久远，改版的频率又十分之低，不同设计团队沟通基本凭着一套出行的ui kit的就无师自通高效输出了。现在到了新的团队，也是优先搭建可以马上使用出活的组件库，毕竟项目拼的是效率和时间。

组件库的部署与落地同步

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

1.symbol化的设计布局思路

相信sketch的symbol化原子设计原理大家应该都很熟悉(不熟悉的话也可以度娘搜到很多相关如何使用symbol的攻略)

对于对话框组件的解构我们可以分为图片区/标题区/正文区/操作区四个部分，所以我们要做的是把这个弹窗做成一个“无限可能”的对话框，即对话框的每一个区域(从图片到操作按钮)都是可以替换的。

这里我们需要单独symbol化的嵌套部分就是图片、操作按钮及背景遮罩，这样我们就可以得到一个基本可以直接适配使用的图文对话框。

除了业务组件视不同产品业务线而定之外，基础组件和传达组件都相对固定可以相对大面积的复用。其中传达组件大家可能接触的相对少一些，对UX和UE设计师来说是可以直接在做流程交互梳理时候妥妥拽拽完成设计的非常好用的工具组件。

2.sketch cloud的同步协作

制作完组件库的sketch部署之后我们就需要把它真正的应用起来了。

我们可以通过sketch/首选项/添加组件库的方式将我们刚刚部署完的sketch(命名为：组件库library_zmn_20191118)导入。之后就可以在sketch/置入/组件中找到对应的“组件库library_zmn_20191118”组件库直接进行拖拽元素使用。

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

去年面试的时候从快看到淘宝，感觉最高频出现的就是有关组件库的问题，感觉大家都很关注有关组件库的定义与入库标准。尤其在大厂的UED，一般都有一套专属的组件库监察滚动机制适用于多地多团队合作，对于之后的组件库更新迭代，新组件封装入库有自己的标准。

对于监察机制我们就不多说了，因为并不一定适配于大家的情况，我们这边主要谈谈组件库管理。

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

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

免责声明：文章内容来源于网络，版权归原作者所有，如有侵权，请联系我们删除。