从0-1搭建B端组件库设计体系

什么是组件库？

在讲组件库的设计之前，我们先明确一下什么是组件库？组件库就是界面设计常用控件或元件的集合，具有标准规范和可复用场景的基本模块。

「组」是设计元素的组合方式，「件」由不同的元件组成。跟乐高原理差不多，玩家（设计师）通过小元件（设计元素）或组件（模板）的不同组合形式，层层搭建和嵌套，最终组成建筑（页面）。

为什么需要组件库？

对于设计师来说，组件库的意义。

保持视觉风格统一、保持交互一致性、便于多设计师协作；

对于前端工程师来说，组件库的意义。

提升效率，让研发把精力放在业务上、保证风格统一，避免重复开发，便于查错、修改，便于多开发协作。

组件库怎么做？

做组件库之前要思考时机是否恰当，那什么时机才适合去做呢？

在B端产品中建设组件库的时机非常重要，毕竟B端的组件库需要结合业务设计出符合业务场景的规范，真正可以组件化的逻辑和样式是不可以凭空想象的，所以前提是要对产品的业务逻辑足够的了解，积累足够的业务场景，再开始着手设计组件库。

组件库强调的是通用性、灵活性、复用性，一个有效的组件库，可以帮助设计师和研发提高工作效率，提升设计专业度的同时让产品本身的体验更加一致、可学，品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。

通用性：意味着足够基础和常见且不带业务属性，参与设计环节的每个人都应该知道这个组件的功能及目的，同时具备一定扩展性。

灵活性：要求元件的组合需灵活，可以在不同场景下通过互相组合来快速搭建交互框架原型图，并根据不同页面结构的演变来适应新的业务需求。

复用性：指的是适用于多个业务或产品，在设计过程和研发过程中都可以高频复用。

组件库的设计大致分为三个阶段：通用样式设计——>组件架构梳理——>组件搭建

1. 通用样式设计

在进行组件库建设的初期，首要目标是构建界面的最小颗粒度元素：颜色、文字、图标、栅格等。

2. 组件架构梳理

在进行完组件最小颗粒元素之后，进行组件架构的梳理。

需要先从项目中筛选出满足复用性和拓展性的可拆解的模块，对于B端的产品来说我们在筛选的时候根据旧版本内容，把页面穷举罗列出来，分析相似性和可替换的模块，然后利用思维导图的方式罗列出可组件化的内容，做成可替换的组件，使每个原子可独立变化和替换，这种多嵌套组合式的细分方式，让组件最终呈现出来的样式满足多场景的业务需求。

根据组件类型把组件分为：通用、布局、导航、数据录入、数据展示、操作反馈六大类别。

3. 组件搭建

建议使用Sketch Symbols进行组件库的搭建，在组件搭建的过程中注意先定义颜色、文字等基础组件，根据组件的层级层层递进。

随着组件库的进化，需要对核心Libraries当中的某些元素进行更新时，Sketch提供的机制使这件事变得很简单，只要在Libraries文件当中像操作普通Symbols那样进行修改便可以，然后所有调用过这些Symbols的Sketch文件都会收到更新提示「Sketch界面右上角」。

点击提示信息，查看变更并进行确认，所有更新工作就会自动完成。这样的方式，可以使引入组件库Libraries的产品快捷的更新为最新的组件，减少了设计师因为组件更改从而修改设计稿的时间。

组件库如何管理？

当组件库在公司内部运行了一段时间后，随着产品日渐增多。对于组件库的新增的需求管理保有要克制的原则，在设计团队内对于新增组件需求进行评审会，充分讨论组件是否具有普适性，是否有其他组件可以满足其需求再进行设计、添加。

组件库的建立和维护是一个长期的过程，通过组件库的建立，大大提升了设计师与前端工程师的工作效率，可以将精力专注于产品业务逻辑中，实现产品的正向发展。