B端设计规范和组件库应该怎么做？

这是一篇酝酿了比较久的内容了，来讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了一点点细节。

所以我自己出一版，希望能帮助你们一次性解决这些问题。

1.1 设计规范和组件库

B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。

所以，首先我们要先理清楚什么是设计规范和组件库。

设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。

换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。

组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。

严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。

组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。

对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。

所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。

设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：

任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。

项目规范是一个典型的 “项目团队可以没有，但你不能不会” 的基本招聘要求。

1.2 开源组件库和项目规范

在今天搭建 B 端项目规范时，新手还有一个普遍的问题：

项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？

初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。

它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……

这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。

比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。

再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。

前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。

开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。

同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。

下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。

2.1 和规范有关的功能解析

之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。

但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。

所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。

2.1.1 样式功能

样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。

而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。

而每个样式分类独立生成记录的好处，就是可以为了方便让设计师自由进行样式的组合。比如填充制定了红、蓝、绿三种，投影制定了深、浅两种，使用者可以自由搭配这些选项。

2.1.2 响应式功能

响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。

例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。

或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。

软件中的响应式并不等同于广义的网页响应式技术，它不能实现完整的栅格布局和流体响应，只能帮助我们来解决一些最基本的响应需求，这在后面的章节中再具体介绍。

2.1.3 自动布局功能

自动布局功能，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。

它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。

自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。

掌握自动布局是 UI 设计类软件的灵魂，后面我们会解释它的具体功能和应用方法，然后再进入组件的具体使用环节，分析对应的实际应用场景。避免你们无法分清自动布局和组件的功能。

2.1.4 组件功能

组件功能在不同软件有不同的叫法，如 Symbol、Component、Kits 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。

例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。

在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。

接下来继续说说关于规范应用中软件功能的具体介绍，发现用图文的形式解释软件功能实在是太难做了。这次算是爆肝来解释自动布局 Autolayout 的使用，帮助还不理解，或者还在用 Sketch、XD 的同学搞清楚它到底是什么。

2.2 样式功能

在软件中，记录样式就是在对应的属性面板上 “创建” 并 “命名”，就将对应设置数据转化成一个指定名称的记录，方便我们记忆和调用。

比如，填充色中使用了两种色彩相近的色彩和不同透明度，我们就可以使用中文命名来区分，其中 #2B6DCF 80% 叫 辅助色，#2B93CF 90% 叫 主色。

创建完成的填充色记录，就会在对应的属性样式列表中出现，之后就可以在对应图层的属性中关联该记录了。

之后，所有关联到该记录的图层属性，都可以快速应用该记录内的参数。如果我们在样式的列表中修改该记录的数值，那么所有关联到该记录的图层就会一起被修改。

一定要牢记，目前的主流 UI 工具中，样式是根据不同属性类型记录的。比如一个字体图层，它的填充、字体、描边、投影，是可以创建不同的样式记录的，各不影响。

而软件 Sketch 的样式逻辑，则是根据图层类型来记录的，比如矩形和字体，会记录该图层下所有样式属性的参数，且该记录只能应用在同类的图层上（而 XD 只能记录色彩和字体样式…）。

这种做法虽然理解起来容易，但是会导致样式数量大幅度增加。尤其是在字体上，变动填充、描边都要设置一个新的样式，这在实际项目中的灵活性是非常差的。

而即时设计、Figma 则不考虑图层类型，只关注属性类型。类似前端的样式表中 “类（Class）” 的应用，每个类有不同的样式参数，只要定义了类的命名和属性、参数，那么不同 Div （即图层）就可以自由组合这些样式记录了。

<Div Class = “ color2 shadow1 board3 ”> </div>

<Div Class = “ color1 shadow3 board2 ”> </div>

2.3 响应式功能

响应式是我们前面做过很多期分享的课题了，基于 BootStrap 的完整响应式功能确实非常强大，可以通过栅格布局来实现丰富的响应方式。

虽然 UI 软件中也提供了 ”响应式“ 这样的功能，但它可以实现的效果非常有限。用一句话概括就是：

“图层基于父级画板 Frame 的匹配逻辑”

比如我们先创建一个画板，然后再置入相关的图层，那么这些图层就可以启用响应式规则。包含间距固定、居中对齐、等比缩放这三种响应规则。

间距固定的意思，就是图层基于父级画板的某间距数值是固定的，不管画布尺寸怎么变动，图层和画布的对应间距都是保持一致的。比如常规的某一方向间距固定。

比如在模块上的标题栏，就可以将栏目设置成一个 Frame，然后标题相关元素左间距对齐，更多图标右间距对齐，之后变更标题栏的宽，图层的对齐关系就是不变的。

而设置左右、上下间距同时对齐，则是图层会随画布的尺寸变动修改自身的宽高来满足。

居中模式则是图层根据画布的大小进垂直、水平方向的对齐，忽略间距数值。

最后一个缩放的设置，用起来和两侧间距对齐很接近，也是放大缩小画布图层会跟着一起变动，但它响应的逻辑是依据比例，而不是间距。这个设置在实际项目中很难派上用场。

过往的设计软件中，父集尺寸变更，下级元素只能机械的执行缩放效果。而响应式设置就是避免这种僵硬的效果，向真实的网页适配方式看齐。

同时，这种父集对齐的逻辑是可以进行嵌套使用的，比如刚才的标题栏，可以将这个画板再置入到整个卡片画板之下，并对 “标题栏画板” 创建顶部对齐，左右间距对齐，那么该画板本身的尺寸不管怎么变动，头部标题栏顶部位置固定，宽度间距和父集统一，标题栏下方的元素也会左右对齐。

所以，将一个画板中的元素响应方式设置好，可以节省我们很多时间，不用再因为父集元素尺寸修改而一个图层一个图层修改下级元素的尺寸和位置。

在后续生成组件前，我们就要优先完成画板下方的响应设置，这样就能确保该组件支持灵活的调节和布局。比如用上方的卡片，就可以快速搭建一个表盘页面的基本框架，我们要做的就是拖拽画板到一个合适的尺寸即可，无需调节下级图层。

但需要注意的事，即时设计和 Figma 触发响应式的设置是元素需要处于画板 Frame 之下，而不是编组 Group 中， Sketch、XD 因为没有 Frame 的概念，所以使用编组就可以应用响应式设置，这个区别一定要牢记。

同时，响应式虽然可以完成很多高效的适配，但是它的局限性是无法打破的，例如无法实现 3 列以上的卡片列表等间距放大，或者随宽度增加生成新列下方卡片补位。

2.4 自动布局功能

自动布局 Autolayout 作为一个自动排版功能，使用场景包含两类，父子级响应和依序排列。它们有各自的生成条件。

首先需要一个矩形图层作为背景，并将其它下级图层置入到矩形背景中去，全选后点击 “自动布局“ 按钮即可生成父子级响应。如果图层没有完全置入矩形中或没有相交，那么就会生成一个依序排列的自动布局出来。

创建自动布局会生成一个新的 “特殊编组”，用来收纳下级图层，它在图层列表中会有新的图标。

2.4.1 父子级响应布局

父子级响应布局中，背景的矩形图层会被自动移除，样式被继承到自动布局的编组上，针对该编组层的属性设置，就等同于原先的背景矩形设置（和画板 Frame 图层逻辑一样）。

这类布局最常应用于按钮控件上，可以让按钮的宽度随文本宽度变化。

但光靠创建这个效果显然是无法完整解释自动布局的，我们就必须从前端的逻辑，来理解这种包含父子层级的元素如何实现自动布局。

首先就是前端环境中，很多控件、组件本身的尺寸是无法直接写死的，它们是随内容自动调节的。而自动布局右侧的设置面板中的田字格一栏，旁边会有宽度和高度设置，默认都是 “自动 Auto”，这就是说它们会随内容宽高进行响应。

比如上方的按钮，它实现的逻辑就是：

按钮宽 = 元素内容宽 + 左右间距

按钮高 = 元素内容高 + 上下间距

这种情况是父层级基于子层级的响应，应用于无法确定父级图形尺寸的场景，如按钮、标签、单元格、瀑布卡片等。

但前端中的不确定性并不是只有这一种，还可以反过来，子图层大小不确定，需要它们去响应父级图层的尺寸变更。

比如一些文本卡片，会应用在不同的页面中，且根据应用的场景会有宽高的调节，所以需要下级的文本区域可以跟随上级尺寸响应。

我们就需要把父级布局设置成 “固定宽/高”。还要选中子图层，在它的自动布局选项中选择 “自适应”，来满足这个相反的需求。

如果子图层没有设置自适应，那么它就不会直接随着父级图层变更自己的尺寸。但还是有针对子元素的响应设置 —— 对齐模式。

在父级布局设置中，有一个网点模块，可以设置下级图层的对齐模式。当下级图层不处于自适应模式时，则对齐可以修改下级元素的对齐方向，即前面响应式设置中的 “间距固定”。

2.4.2 依序排列布局

前面我们演示的案例都只有一个子图层，如果出现多个子图层的话，自动布局也可以帮我们进行调节，除对齐外还包含子图层排列方式、分布方式，而这就是依序排列的布局模式。

排列方式就是多个子图层横排还是竖排的设置。

分布方式，则是这些子图层布局的位置怎么定，默认包含固定间距和自适应两种。

固定间距即子元素排列的间距保持一致，在右侧的输入框中可以设置间距数值，也可以结合对齐模式来设置整体的对齐方向。

而自适应，则是在父级区域内进行等分，这个等分的逻辑比较特别，需要左右各有一个子图层靠到头，新增的图层在这个基础上进行 “等间距分布”。

依序排列的优势，除了把现有的子图层快速布局以外，还可以用拖拽、键盘调整元素顺序。或者从外部拖动某个图层到该区域中，就可以插入序列，成为下级图层之一。

2.4.3 混合布局模式

前面两种布局模式，可以解决各种 UI 设计中的细节设置问题，理解起来也并不难，只要自己去操作一下就能学会。而真正让人头疼的，是自动布局可以相互嵌套，并混合这两种模式，在复杂的页面设计场景和组件模块中灵活应用。

下面我们通过一个模态对话框 Modal Dialog 案例来进行说明。这个对话框会包含3种不同的宽度规格，且对话内容不确定，可能会字数很多包含很多行的高度。

想要用自动布局实现一个满足需求的对话框，我的建议是先学会拆分里面的下级模块，通过完成下级模块的设置后再进行最终的合并调节。在这个对话框中，

包含三个模块，顶部标题栏、中间内容区域，底部操作栏。

首先从顶部标题栏开始，我们随意创建个 280px * 44px 的矩形，然后再置入标题和图标到矩形中。之后全选它们创建成自动布局，然后设置父层级内间距，且改成宽度固定、分布自适应，就可以获得一个可以随意修改宽度的标题栏了。

然后就是内容区域，本质上就是一个文本区域，所以我们拖拽一个文本区域出来，设置好对应的参数和填充一点文本即可。

而底部操作栏，则在一开始做好两个按钮（可以使用自动布局做）和背景以后，就可以进行合并，只是父级元素上的设置要改成固定宽度和右对齐，并设置布局间距（按钮间距）。

这三个模块完成以后，我们再选中它们进行自动布局合并，把它们设置成竖排模式，再添加背景色和排列间距，就可以实现出一个正常的对话框效果。

到这一步，如果我们修改对话框整体的宽度，或者输入多行的文本，都无法达到预期的效果，所以还要在这个基础上进一步的调整。

首先是宽度适应，我们要先将最上级的自动布局改成 “固定宽度”，然后将下级图层都改为 “自适应”，这样我们增加组件的宽，下方布局就会立即响应，且推导到更下级的图层中。

为了满足文字宽度随父级响应，高度影响父级高度，就要将顶部的自动布局改成 “高度适配”，再将下级的文本改成 “宽度自适应”、“自动高度”，然后，我们就可以随意拖动这个自动布局的宽，和添加任意的文本内容了。

在这个案例中，我们前后嵌套了若干层的自动布局，每层自动布局的上下级会有各自的响应关系，需要我们逐一进行确认。并且，细心的同学应该也发现，这里面有很多设置似乎和前面的响应式设置非常类似，那把一些下级布局从一开始就做成响应式的编组行不行？

答案是可以的……

响应式设置和自动布局，本质上都是为了节省我们操作时间而设计的功能，我们要从实际设计的对象出发，选择合理的功能来实现最终的效果。而不是只能使用自动布局，或者只能使用响应式。

也不要因为了解了响应式包含了非常强大的自适应功能，而认为项目中任何组件、页面，都要全由它们组成。在需要频繁优化页面内容、调整设计需求的项目里，过度嵌套的自动布局会让设计文件的 “熵” 值无限增加，会产生更多复杂的、没有效率的问题。

相信引用过 Ant、TDesign 等组件库文件进行设计的同学应该都深有体会……

至于怎么用才好，没有标准的答案，就需要未来大家自己去积累相关经验了。

篇幅有限，下一篇我们再讲组件功能及具体的项目设计规范创建说明了。我们下期再见！

希望对大家有所启发，请记得把文章转发到你的朋友圈，点个在看，咱们一起加油吧！