为什么要做组件库（深度解析大厂B端组件库从零到一搭建）

编辑导语：有一套合适B端产品设计师的组件库就能够大大提高自己的办公效率。那么，怎样建立自己的组件库呢？在本篇文章中，作者对组件库进行了解析，总结了如何打造B端设计组件库。感兴趣的小伙伴，一起来看看吧!

各位B端设计师们在求职面试的时候，有没有发现面试官都非常关注你有没有搭建组件库的能力，而且入职后每个团队都会有一个负责组件库的小组，那作为新手设计师怎么快速加入？如果公司目前没有组件库，设计师怎样推动建设？这篇文章详细的为大家分享大厂设计师是怎么从零到一搭建组件库、过程中如何推动、和其他部门怎样进行配合，来帮助各位新手设计师提升自己的职场竞争力。

一、组件库的价值

组件库是一个设计界面元素的集合仓库，要把各个场景中反复出现的控件沉淀下来，使用的时候不需要单独设计，直接调用即可。

比如在B端业务中一些表格表单也会被大量使用，那么我们就需要对表格、表单进行规范，在任何场景下都遵循这一规范，增加研发团队的确定性节省不必要的设计，保持系统一致性，让设计师专注于创意最需要的地方。

组件库带给团队的价值是一致、高效、灵活。

一致：一套标准化的设计规则可以传达给用户统一的品牌调性，减少用户学习成本培养用户习惯，让产品拥有良好的用户体验。

高效：组件的使用规范和各种状态只要搭建一次就可以重复使用，设计师在设计新的需求的时候直接调用组件，不需要大量重复工作，把时间花在更有价值的事情上。研发侧直接调用封装好的组件就可以，避免重复造轮子，同时也降低了沟通成本

灵活：所有页面的都是原子，在产品后期迭代中，只要调整原子、按照不同的方式进行排布就可以获得一个信息系统，这样全局灵活性非常强，也非常便于系统维护。

二、原子设计理论

原子设计其实是老生常谈一套理论了，但是要讲组件库绕不开原子设计，在这里我就再啰嗦几句关于原子设计的起源和概念。

在化学领域中，世界上一切万物都是由化学元素周期表组成的原子组成，原子组成分子，分子组成有机物，有机物构成生命。网页设计师Brad Forst从这里找到了灵感，我们设计的页面是不是也有相对应的原子，通过这些原子不同的排列组成呢？于是在2013年将此理论结合设计领域的知识，创建了一套设计方法论——原子设计（Atomic Design），原子设计是我们搭建组件库非常重要的一种思维模式，从底层开始思考从元素到页面，这样会对设计有更清晰的理解。

原子设计理论分为五个层面：原子、分子、组织、模板、页面。对应到设计中我们的颜色、字体、圆角等作为原子，通过各种组合排列最终搭建出页面。根据原子设计理论，需要把原子设计的五个层面和我们组件的内容进行一一对应，先从最基础的核心元素入手，进行组件库搭建。

原子 (Atom)：是构成一般物质的最小单位，不可再分的基本微粒。对应组件：文字、颜色、图标、布局、阴影。在界面中没有办法细分并且随意改变不会对整体等共恩感有影响。

分子 (Molecule)：是由原子按照一定等顺序和空间排列而结合在一起的整体，对应在组件库就是单个组件，按钮、搜索框、表单这些，是由文字、颜色、图标、布局、阴影进行组合构成的控件。

组织 (Organization) ：是指有诸多原子分子按照一定方式相互联系起来的系统，在界面中可以理解相对复杂的组件，例如弹窗、导航栏、列表等。

模板（Template）：模版就开始有页面的雏形了，由多个组织结合而成的模块，一些常用典型页面可以沉淀成模版页面，像表单页、列表页、详情页。

页面（Page）：页面是模板的具体实例，将实际内容填充进模版后形成页面，是我们最后产出的高板镇视觉稿，也是产品的最终形态。

三、定位团队现状

在开始动手之前需要明确自己所在团队处于哪种阶段，没有一双鞋适合所有人，精致名贵的高跟鞋配上跑马拉松的运动员显然是不合适的。组件库也是如此，没有最好的只有最合适的，要根据团队当前的不同阶段去进行判断。越到后期需要投入的资源越多，同时给团队带来的价值也越大。下面列举三种不同的团队发展阶段，来匹配你们团队的情况吧：

团队创建初期：产品定位不明确，设计师只有一两个人，设计师主要通过粗暴的复制粘贴设计稿就可以满足，这个阶段可以牺牲一些体验上的一致性，目的是项目需要快速上线进行验证；

快速发展阶段：随着业务方向越来越清晰，团队规模的不断扩张，设计团队会有新的伙伴加入，每个设计师都有自己的想法，如果没有一套明确的设计规则，会导致页面一致性差，随意的设计也会增加开发成本；对于研发侧每一个新的样式都需要单独写一套，出现大量重复无意义的工作。这个阶段是搭建组件库的时机，需要去定义常用组件的视觉和交互保证页面的一致性、避免一次性设计；

团队成熟阶段：第三个阶段是产品已经非常成熟，也有了基本组件的规范定义，同时有大量B端后台页面，而B端后台页面基本上都是表格页、表单页、详情页，这些复用性强的页面，这时候如果每个页面都要设计师对应产品文档去调整字段，设计师的性价比就会变得极低。所以在这个阶段的组件库的服务对象不仅仅是设计师，设计师非常完善的制定出现率高的典型页面布局规范后，产品经理、研发、运营人员等团队所有的职能人员，可以直接跳过设计节，根据典型页面规范套用生成页面。

四、确定人力资源

根据自己所在团队的不同阶段，需要去申请搭建组件库的资源，搭建一套完善的组件库就跟搭建一款产品一样，绝对不是设计师可以独立完成的，需要多方配合。这时候呢可以列举一些关于组件库遇到的问题，完成后可以带给团队什么价值，去和leader申请设计资源，以及跨部门申请研发的人力资源。

正式立项后，作为搭建组件库的的owner需要定义好整个时间节点，什么时间点完成什么事情，并且定期开会来同步大家的设计进度，来推动这件事情的顺利进行。

设计过程中要和研发随时保持沟通，避免出现信息差，了解技术实现的边界在哪，确认之后在开始进入设计阶段，避免盲目设计完了以后，进入评审阶段被告知实现不了，再重新返工浪费时间同时设计过程中要和相关研发随时保持沟通，避免出现信息差。

举例在上家公司遇到的问题，当时的背景是整个大团队分为7个业务线，每个业务线都搭建了自己的组件库，前端技术选型都不同，导致设计规范，业务组件等基建成果不可移植、全局的重复建设、资源浪费。现有Figma组件使用低效，源文件命名不规范组件不全等问题。

团队内部也意识到了问题的存在，开始从0-1重新搭建，成立搭建组件库的虚拟小组，由一个设计小组和研发小组共同组成。设计师的工作负责搭建、核查。完成搭建后小组成员同学一起集中check，记录修改点、争论点，鼓励充分讨论；修改完成后在进行复验，全员无异议后锁定画板交付开发评审并更进实现，在整个项目周期定期进行周会同步各方进度，及风险点。

五、组件库的产出

接下来就可以正式进入设计阶段了，需要产出的设计内容有设计原则、设计语言、组件库和说明文档。

设计原则：设计原则是做设计的标准，用来指导和衡量设计方案的优略，搭建一套组件库，每个元素都需要围着这个设计原则展开执行，他的意义是为接下来的设计提供方向。

设计语言：需要秉承设计原则和业务调性的基础上进行定义，主要表现为形、色、字、质、构这些视觉元素。比如

Figma控件：通过设计原则、基础样式可以定义出来我们组件的样式，就像一个仓库一样，包含了各种组件的所有样式。

说明文档：组件仓库搭建好了，还需要配上使用说明书，具体某个组件该怎么使用、什么情况下使用哪种状态，都需要一一说明，防止设计师面对玲琅满目的组件原件不知道从何下手。

六、设计原则

在执行过程中首先调研业内成熟的设计原则：例如苹果的设计原则为创意审美的重要性、隐喻的价值、易用性原则和及时的反馈。蚂蚁的AntDesign就是将自然、确定性、意义性和生长性作为它的设计价值观。在结合自己业务的愿景和使命进行头脑风暴，罗列出你认为影响所处行业的关键词是什么，一起对应关键词进行分类聚拢，最后抽离出适合自己业务的设计原则。

七、设计语言

在这之前要明确一个概念Design Token，即储存样式的载体，“Token”原本的意思是“令牌”，在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。

Design Token 最重要的意义是通过规定样式的参数、和统一的命名规则做到设计与研发的样式完全打通，进行无损耗的沟通，增强系统的可维护性。在真实产品设计、研发过程中，设计和研发命名不一致，数量少还好，当数量多了以后全局维护就变得困难了很多，但如果我们直接将这些参数分装管理，整个过程的新增、改版就会清晰很多。

1. 颜色

颜色是页面整体风格表现的重要基本元素，好的色彩配置可以准确的传达有效信息和品牌感，梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。一般而言，一个产品的颜色体系会包含：主色、中性色、功能色。接下来根据颜色分类，将不同分类的颜色样式逐一罗列出来。

主色：产品的品牌色，也是界面中出现最多的颜色，比如按钮的颜色、重点操作等状态。

中性色：在界面中调和色彩搭配，用来衬托其他颜色，一般应用在字体、分割线、背景色等。

功能色：向用户明确传达成功、警告、错误等状态。

2. 文字

不同的字体大小和颜色文字信息，可以体现出内容的主次。在文字样式中会包括：字号、字重、行高和字距等。选择一款字体（推荐中文：微软雅黑、英文：Aria），如果使用苹方则Win系统中会出现字体丢失的情况，这里建议样式创建要克制，尽可能保证样式库精简适用。

字号：PC端最小可识别字体是12px ，需要区分字体层级，一般以偶数来进行间隔。

字重：除了使用字号，还可以通过字重来突出层级，常用采用 Regular 以及 Medium 的两种字体重量，分别对应代码中的 400 和 500。

行高：建议行号是字体的150%，通常字体越大行高越小。

间距：根据 WCAG 中的 AAA 标准，段落间距至少为字体大小的 1.5 倍。

3. 投影

阴影是存在于画布元素中并通常会在背景边框中延伸出对象。主要有外阴影、内阴影。阴影值应该遵循现实物理世界中物体的特性，物体的高度直接影响阴影，离地面越高阴影越大，模糊值越高，反之相反。

为了在不同层级使用阴影更加丰富，通常阴影定义三个层级，一级卡片阴影、二级选择下拉popover阴影、三级对话框阴影。

八、Figma控件

1. 结构细分

首先要将原本的组件进行打散、细化、整合、重组，我们需要把一个组件中可以拆分成几个模块，使每个模块都可以进行独立的变化替换，这样组件呈现出来的尝试可以满足全部场景。举例:抽屉控件，可以分为出现位置（上下左右）、抽屉尺寸（大中小）、标题区域（副标题、头像、标签、更多操作、tabs标签）、按钮区域这四个模块，每个模块可以独立产生新的样式。拆解维度到按钮、图标等最细颗粒后通常不会再进行拆分。

2. 新建组件

选中要组件化的元素，点击顶部工具栏“Greate Componer”健即可创建成功，快捷健是“command option k”，创建成功的组件元素有实心的紫色菱形图标，变为紫色边框。

创建好的组件分为父级和子级