no和off哪个是开关(冰箱0n和0ff夏天用哪个)

编辑导语:拥有一套适合B端产品设计师的组件库，可以大大提高他们的办公效率。那么，如何建立自己的组件库呢？本文对组件库进行了分析，总结了如何构建B端设计组件库。感兴趣的朋友，一起来看看吧！

在求职面试的时候，B端的设计师们有没有发现，面试官们都很在意你的构件库建设能力，入职后每个团队都会有一个负责构件库的小组。作为一名设计师新手，如何快速加入？如果公司目前没有元件库，设计师如何推进施工？本文将与大家详细分享大厂设计师如何从零到一建立构件库，如何在过程中推广，如何与其他部门合作，帮助新手设计师提升职场竞争力。

一、组件库的价值

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

比如在B端业务中，会广泛使用一些表单，所以我们需要规范表单和表格，在任何场景下都遵循这个规范，增加R&D团队的确定性，省去不必要的设计，保持系统一致性，让设计师专注在最需要创意的地方。

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

一致性:一套标准化的设计规则可以向用户传达统一的品牌调性，降低用户的学习成本，培养用户习惯，使产品具有良好的用户体验。

高效:组件的使用规范和各种状态只要设置一次就可以重用。设计师在设计新的需求时可以直接调用组件，这样就不需要大量的重复性工作，把时间花在更有价值的事情上。R&D方可以直接调用封装的组件，可以避免重复造轮，降低通信成本。

灵活性:所有页面都充满了原子。在产品的后期迭代中，你可以通过调整原子，以不同的方式排列，得到一个信息系统，这样全局灵活性非常强，系统维护非常方便。

二、原子设计理论

原子设计其实是老生常谈的理论，但是构件库离不开原子设计。在这里，我再多说几句原子设计的由来和概念。

在化学领域，世间万物都是由化学元素周期表中的原子构成的。原子构成分子，分子构成有机物，有机物构成生命。网页设计师Brad Forst在这里找到了灵感。我们设计的页面是否也有相应的原子，由这些原子的不同排列组成？于是在2013年，我们把这个理论和设计领域的知识结合起来，创造了一套设计方法论——原子设计。原子设计是我们构建构件库的一种非常重要的思维方式。从底层开始，可以从元素到页面去思考，这样可以对设计有更清晰的认识。

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

原子:是一般物质的最小单位，不可再分的基本粒子。相应的组件:文本、颜色、图标、布局、阴影。界面上没有办法细分，随意改动也不会影响整体的相互感谢感。

分子:原子按一定的等序排列和空是一个整体。与组件库相对应的是单个组件，如按钮、搜索框、表单等，是由文字、颜色、图标、布局、阴影等组成的控件。

组织是指许多原子和分子以一定的方式相互联系在一起的系统，以及相对复杂的组件如弹出窗口、导航栏、列表等。可以在界面中理解。

模板:模板开始有了页面的雏形。它是由多个组织组合而成的模块。一些常用的典型页面可以沉淀成模板页面，比如表单页面、列表页面、详情页等。

页面:页面是模板的一个具体例子。将实际内容填入模板形成一个页面，这是我们最终的高板镇视觉稿，也是产品的最终形态。

三、定位团队现状

在开始之前，你需要知道你的团队处于什么阶段。没有任何一双鞋适合所有人。精致昂贵的高跟鞋显然不适合马拉松跑者。组件库也是如此。没有最好的，只有最适合的，要根据目前团队的不同阶段来判断。后期需要投入的资源越多，给团队带来的价值就越大。以下是团队发展的三个不同阶段，以符合您团队的情况:

团队创建初期:产品定位不明确，设计师只有一两个，主要靠粗略的复制粘贴设计稿就能满足。这个阶段可以牺牲一些经验上的一致性，这样项目需要快速上线验证；

快速发展阶段:随着业务方向越来越清晰，团队规模扩大，会有新的合伙人加入设计团队，每个设计师都有自己的想法。如果没有一套明确的设计规则，会导致页面一致性差，随意的设计也会增加开发成本；对于R&D这边的每个新样式，都需要编写一个单独的集合，这导致了大量重复且无意义的工作。这个阶段是构建组件库的机会。需要定义常用组件的远景和交互，以保证页面的一致性，避免一次性设计。

团队成熟阶段:第三个阶段是产品已经非常成熟，基础组件的标准定义也具备了。同时还有大量的B端背景页面，B端背景页面基本都是表单页面、表单页面、详情页。这些页面可重复使用。这时，如果设计师不得不为每个页面调整产品文档对应的字段，设计师的性价比就会变得极低。所以，在这个阶段，构件库的服务对象不仅仅是设计师。在设计师完美制定出出现率高的典型页面布局规范后，团队的所有职能人员，如产品经理、R&D、运营人员等，都可以直接跳过设计部分，根据典型页面规范应用生成页面。

四、确定人力资源

根据你团队的不同阶段，你需要申请资源来建立一个构件库。构建完整的组件库就像构建产品一样。绝对不是设计师可以独立完成的事情，需要多方的配合。这时候你可以列出构件库遇到的一些问题，完成后能给团队带来什么价值，跟领导申请设计资源，跨部门为R&D申请人力资源。

项目正式立项后，业主，也就是构件库的搭建者，需要明确整个时间节点，什么时间点完成什么事情，定期召开会议，同步大家的设计进度，以此来推动这件事情的顺利进行。

在设计过程中，与R&D保持联系，避免信息鸿沟，了解技术实现的边界在哪里。确认后进入设计阶段，避免盲目设计，进入评审阶段被告知无法实现。再返工就浪费时间了。同时，在设计过程中与相关R&D保持联系，避免信息鸿沟。

以上一家公司遇到的问题为例。当时的背景是整个大团队分为七个业务线，每个业务线都建立了自己的组件库。前端技术选择不同，导致设计规范、业务组件等基础设施成果无法移植，整体重复建设，资源浪费。现有的Figma组件效率低下，源文件命名不规范，组件不完整。

团队也意识到了问题的存在，开始从0-1重建，组建虚拟团队构建组件库，由设计团队和研发团队组成。设计师的工作是负责建造和检查。施工完成后，小组成员和学生一起检查，记录修改点和论据，鼓励充分讨论；修订完成后，将进行复验。所有员工无异议后，锁定图板进行开发评审和进一步实施。在整个项目周期内，将定期召开周会，以同步各方的进度和风险点。

五、组件库的产出

接下来就可以正式进入设计阶段了。需要制作的设计内容包括设计原理、设计语言、组件库和说明文档。

设计原则:设计原则是设计的标准，用于指导和衡量设计方案的优越性，建立一套构件库。每个元素都需要围绕这个设计原则来实现，其意义在于为下一步的设计提供方向。

语言:需要在设计原则和商业调性的基础上定义，主要通过造型、色彩、性格、品质、结构等视觉元素来表现。例如

Figma控制:我们可以通过设计原则和基本风格来定义我们组件的风格。就像一个仓库，它包含了各种组件的所有样式。

说明:组件仓库建立后，还需要附带使用说明书。具体一个组件如何使用，在什么情况下用什么状态，都需要一一说明，以免设计师面对眼花缭乱的原装组件不知从何下手。

六、设计原则

在实施的过程中，我们首先考察业内成熟的设计原则:比如苹果的设计原则是创意美学的重要性、隐喻的价值、易用性和及时反馈的原则。蚂蚁设计以自然、确定、意义、成长为设计价值观。根据自己企业的愿景和使命进行头脑风暴。列出你认为影响你所在行业的关键词，将关键词分类汇总在一起，最终提炼出适合你所在行业的设计原则。

七。设计语言在这之前，要定义一个概念，设计令牌，也就是存储风格的载体。“Token”原意为“令牌”，在工程逻辑中用于验证用户身份和服务器端。在设计系统中，设计令牌可以简单地理解为一个封装的视觉风格参数。

设计令牌最重要的意义是通过指定样式参数和统一的命名规则，实现设计和R&D样式之间的完全通信，实现无损通信，增强系统的可维护性。在真实的产品设计和R&D过程中，设计和R&D的命名不一致，且数量较少。当数量很大时，全局维护就变得困难得多。但是如果直接把这些参数分开管理，整个流程的添加和修改会清晰很多。

1. 颜色

色彩是页面整体风格的重要基本元素。好的色彩配置可以准确传达有效信息和品牌感，梳理页面的视觉层次，突出内容，平衡其他视觉元素。一般来说，一个产品的色彩体系会包括:主色、中性色、功能色。接下来按照颜色分类，逐一列出不同分类的颜色风格。

主色:产品的品牌颜色，也是界面中最常见的颜色，比如按钮颜色、按键操作状态等。

中性色:用于调和界面中的配色来衬托其他颜色，一般用于字体、分割线、背景色等。

颜色:清晰地向用户传达成功、警告、错误等状态。

2. 文字

不同的字体大小和颜色可以反映文本信息的主次内容。文本样式将包括:字体大小，重量，行高，间距等。选择一种字体(推荐中文:微软雅荷，英文:Aria)。如果使用方平，该字体将在Win系统中丢失。这里建议风格创作要克制，风格库尽量简单适用。

字体大小:PC端最小可识别字体为12px，需要区分字体级别，一般用偶数隔开。

粗细:除了字体大小，还可以通过粗细来突出层次。常用常规和中等字体粗细，分别对应代码中的400和500。

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

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

3. 投影

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

为了丰富不同级别阴影的使用，通常将阴影定义为三级:一级卡片阴影、二级选择下拉弹出阴影、三级对话框阴影。

八、Figma控件1. 结构细分

首先，要对原有的组件进行拆分、提炼、整合、重组，需要将一个组件拆分成若干个模块，让每个模块都可以独立的改变和替换，让组件所呈现的尝试能够满足所有场景。比如抽屉控件可以分为四个模块:外观位置(上下左右)、抽屉大小(大中小)、标题区(副标题、头像、标签、更多操作、标签页标签)和按钮区。每个模块可以独立生成新的样式。维度通常在拆解到按钮、图标等最细的颗粒后，就不会再拆解了。

2.创建一个新组件。选择要组件化的元素，并单击顶部工具栏中的“创建组件”键，以成功创建它。快捷键是“command+option+k”，成功创建的组件元素有一个实心的紫色菱形图标，变成紫色边框。

创建的组件分为父组件和子组件。创建的组件是父组件。按住“option”键，将父元素拖动到空的白色处，就会创建一个子元素(快捷键是“command+d”)。

注意:如果改变父组件，子组件也会改变；改变子组件，父组件不会改变。

3. 命名规则

命名规则是组件中不可忽视的问题，影响组件在使用过程中的调用。“/”用于组件的命名和分类，可以帮助figma判断组件中元素的级别。比如【Drawer/Large】，使用组件时命名规则会影响右边工具栏的“交换实例”，可以在这里切换控件。控件的位置级别与命名规范一致，合理的命名会使整个组件库的布局清晰，结构良好，有助于我们快速定位。

4.自动布局自动布局是Figma的自动布局功能。使用自动布局创建组件可以帮助我们满足背景随内容调整、列表项任意移动、列表间距快速调整等需求。，对于组件的扩展和应用将非常灵活。

以按钮为例:创建一个按钮，在面板属性“自动布局”中点击+，或者使用键盘快捷键“SHIFT+A”。此时，您可以调整自动布局的相关属性:

方向:多个元素可以调整为垂直排列，垂直排列合适；

间距:控制元素之间的间距。新版本支持设置负间距，方便叠加头像。

容器:框架的上、下、左、右侧间距等控制元素，可以统一设置，也可以单独设置；

分发方式:“打包”支持九种分发方式(左上、中上、右上、中左、中右、左下、中下、右下)；“间距”均匀分布，新版本支持画布内快速调整；

调整:您可以控制自动布局中的对象，如固定宽度或高度、拥抱内容和填充容器。

5.变异函数Figma有一个强大的变异函数。同一组件的不同状态可以通过变体的方式灵活创建，方便用户调用。在变体中，你需要知道两个函数:属性和变体。

Property:是组件的可变方面。比如按钮组件的属性可以是大小，状态，或者是否有图标，可以理解为类别。变量名称遵循命名约定的结构，属性1 =值，属性2 =值，属性3 =值。只有两个属性的选项可以显示为开关。Figma将自动识别真/假、是/否和开/关作为开关。命名时，属性1 =真/假，属性1 =是/否，属性1 =开/关。

值Variant:是每个属性可用的不同选项。例如，状态属性可以包括默认、悬停、点击和禁用，可以理解为分类下的参数。

6.组件描述/链接组件创建后，可以在每个组件的“描述”中输入组件的说明。引用组件时，组件上会出现一个气泡描述，方便用户查看组件的描述。

同时也可以添加相关链接。在组件描述中，设计者可以点击“Inspect”中的相关按钮直接跳转，查看相关的组件规范文档，方便用户使用。

九。设计文档组件文档是设计如何使用组件的重要说明，是构建组件库不可忽视的存在。一般由部件名称、基本定义、操作说明、基本组成、类型、尺寸和布局、交互说明等组成。

弹出窗口组件的说明文档:

组件名称:对话框模式

基本定义:用于在不离开当前页面的情况下携带信息，可以帮助用户更快更轻松地完成任务。

使用说明:

要求用户立即响应:使用对话框请求阻止用户继续操作；

通知用户紧急信息:使用对话框通知用户有关其当前任务的紧急信息，通常用于报告系统错误或通知结果；

确认用户的决定:使用对话框确认用户的决定，清楚地描述当前行为的潜在后果，如果行为具有破坏性或不可逆，则使用错误警告色。

当你需要携带少量的输入信息或显示信息，并希望信息的出现中断当前操作时。当对话框内容过多，需要复杂操作甚至二次跳转时，建议使用抽屉或新页面，而不是对话框。

基本成分:

标题区(必填):可以是纯文本，也可以是文本前面的图标，表示状态；支持配置描述，显示为辅助信息。

文本(可选):可以包括文本描述、表格、表格、步骤栏和通知；

操作区(可选):操作区支持配置的存在、配置按钮的拷贝和数量。当弹出窗口达到最大高度时，操作区域的底部是固定的。

关闭按钮(可选):点击关闭弹出窗口；

黑色遮罩(必选):黑色遮罩覆盖整个页面，遮罩下方的页面内容不响应滚动和点击。

类型:

通知对话框(用于警告、紧急或简单的二级弹出确认)。

功能对话框(除了标题、纯文本内容和按钮之外，还需要承载更复杂的信息时)。

选项/显示对话框(内容不足以形成单独页面或不想跳转到新页面的对话框，但多用于搜索、设置和内容选择)。

宽屏弹出窗口(建议用于承载左右联动控制、树形结构、日历、多列表网格等复杂信息。).

布局:

有三种对话框:小尺寸、中尺寸和大尺寸。限制对话框的宽度，根据内容适应高度。最大高度是通过对话框与页面顶部和底部之间的60px填充值计算的高度。支持滚动操作。

互动规则:

点击黑色遮罩:可以点击黑色遮罩关闭对话框进行一般信息显示，但不建议点击黑色遮罩关闭对话框进行信息输入，这样容易导致填写的数据丢失。

支持对话框打开二级，二级页面要保持同样的宽度，高度可以和内容适配。切换级别时，对话框的高度基于顶部标题区域。

多个对话框同时出现。宽屏和大尺寸对话框可以在原有对话框的基础上进行扩展。建议最多同时出现两个对话框。一般来说，不建议在小尺寸对话框的基础上玩大尺寸对话框。对话框需要和对话框的层次结构区分开来，每个对话框的底部都要叠加一个蒙版层。

十、组件库的维护

一个组件的每一次优化都是基于对用户和场景的假设，可能只是用户想要的，也可能是一厢情愿。我们的优化需要得到用户和市场的验证，所以我们对组件库进行了多次可用性测试。而且每次测试都会有意想不到的发现。比如一些我们应该想当然的操作，用户根本无法理解。还是我们精心打磨的细节，用户其实并不在意。因此，验证-迭代是构件库不可或缺的一部分，也是一个反复而漫长的过程。

组件样式的每次迭代只需要改变父组件的样式，然后更新发布。这是Figma会通知所用组件的文件，设计师可以更新使用最新版本。

XI。组件库的使用如果要使用组件库，首先在“库”中打开使用过的组件库，然后在“资源”面板下，将需要使用的组件直接拖动到文件中，就可以直接使用了。

十二、组件库参考

近几年各大厂和B端行业头部公司都搭建了很多完整开放的组件库，属于比较成熟的市场状态。这个时候，有些小伙伴就会产生疑惑。他们不能直接打电话吗？为什么需要自己建？原因是B端业务的特殊性。市面上的通用组件库是没有办法覆盖每个业务的所有场景的。一旦有需要特殊对待的地方，去变魔术的成本也是很高的。另外，直接重用第三方会导致同质化严重，没有设计差异化。因此，建立一个自己团队的构件库是非常必要的。

下面是一些国内外比较成熟的构件库，在构建自己的构件库时，可以作为一本字典来参考。我们做不了巨人，只能做踩在巨人肩膀上的小矮人。

蚂蚁设计(蚂蚁金夫)

https://ant.design/docs/react/introduce-cn

元素(饥饿)

https://element.eleme.cn/#/zh-CN

阿科设计(字节跳动)

https://arco.design/

融合设计(阿里巴巴)

https://fusion.design/pc/? themeid = 2

赞UI(牛逼)

https://youzan.github.io/zent/zh/guides/install

腾讯公司

https://tdesign.tencent.com/

闪电设计系统

https://996.pm/75PGd

流畅设计系统

https://www.microsoft.com/design/fluent/#/

碳设计系统

https://github.com/carbon-design-system/carbon

材料设计

https://material.io/design

十三、B端设计师价值

在构建了一个非常完善的组件库之后，有些设计师可能会陷入焦虑，觉得自己设计师的价值被逐渐削弱了。他们可以在没有设计师的情况下构建一套完整的页面，但事实并非如此。

面对复杂的B端业务，有大量的业务组件可以沉淀。比如在IM系统中，个人名片是常用的控件，可以沉淀到业务组件中。相比基础组件，业务组件更考验设计的创新能力和多业务理解。所有B端设计师都需要用心去做。

纯B端UI和UE的帖子越来越少。现在市场上对B端设计的要求是全链路的能力。深入业务，为用户体验负责，是大势所趋。作为用户体验设计，很明显按钮和弹窗的细节太小。我们要对整个产品系统流程和全面的用户体验负责。

一个完善的设计体系是一把双刃剑，可以统一整个体系，提高效率。组件库技能是一个非常复杂的系统，在构建过程中可以加深设计师对各个控件的理解。这个技能是一个创新的过程。另外，要注意不要让元件库成为限制设计师创造力的枷锁。优秀的设计师可以利用这些基本的组件风格，就像搭积木一样，创造出各种丰富多彩的世界。

本文最初由@郭达·毛毛设计笔记发表。每个人都是产品经理。未经许可，禁止复制。

题目来自PEPEPELS，基于CC0协议。