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

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

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

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

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

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

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

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

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

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

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

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

　　创建好的组件分为父级和子级创建出来的是父级组件，按住“option”键，将父级元素拖动到空白处，就创建出来一个子级（快捷健是“command+d”）

　　需要注意：更改父级组件，子级组件也会随着发生改变；更改子级组件，父级组件不会改变。

　　命名规则是组件中不容忽视的问题，影响在使用过程中对组件的调用，使用「/」来为组件命名，用于给组件进行分类，这样可以帮助 figma 判断组件内元素的层级。例如：【抽屉/大号】，在使用组件的过程中命名规则会影响右侧工具栏中的“Swap instance”，可以在这里进行切换控件，控件的位置层级和命名规范一致，合理的命名会让整个组件库布局调理清晰、结构缜密，帮助我们快速定位。

　　Auto layout 是 Figma 自动布局功能，创建带有自动布局的组件，可以帮助我们实现背景随内容调整、列表项目任意移动、列表间距快速调整等需求，这样对于组件的拓展和应用会非常灵活。

　　以按钮为例：创建一个按钮，在面板属性中“Auto layout”点击“+”，或者使用键盘快捷键“SHIFT+A”，这时候就可以去调节自动布局的相关属性了：

　　间距：控制元素和元素之间的间距，新版本支持设置负间距，可以轻松做出头像堆叠效果；

　　容器：控制元素举例框架上侧、下侧、左侧、右侧间距，可以统一设置，分别设置；

　　分布方式：“Packed”支持九种分布（左上、中上、右上、左中、中央、右中、左下、中下、右下）；“Space between”是平均分布，新版本支持在画布中快捷调整；

　　调整对象：可以控制自动布局中的对象，固定的宽度或高度 （Fixed），拥抱内容 （Hug contents），填充容器 （Fill container）。

　　Figma 拥有强大的变体功能。同一个组件的不同状态可以通过变体的方式灵活创建，方便用户调用，变体中需要了解两个功能：属性 Property、值 Variant

　　值 Variant：是每个属性可用的不同选项。例如：状态属性可以有默认、悬浮、点击和禁用等，可以将其理解为分类下的参数。

　　创建完组件后，可以在每个组件的“Description”，输入该组件的解释说明，在引用组件的时，hover该组件上就出出现气泡说明，方便用户查看该组件的说明