B端设计规范

篇首语:

纵观目前市场上几套开放的设计规范方案：Saleforce、Antdesign、Fusion Design、Element、Vant都是国内比较值得参考的规范资源，大厂的开源无疑是我们探索B端规范道路上的明灯…

那到底什么是设计规范呢？这篇文章将从宏观角度去讲解一下我对设计规范的理解，先不会做细分领域的梳理，毕竟一口吃不成大胖子。阅读大概需要10分钟，希望这10分钟能够让正在阅读的你有所收获。

一.制定规范的意义是什么

我相信大部分同学对设计规范这个词的理解一定是来源于某次的网上冲浪，因为“设计规范”这个概念并不是从我们心中萌发出来的，而是我们主动去学习,或者是在项目工作中收获到的知识点。更多的觉得大家都在说要做设计规范，设计规范，那我也要做设计规范，有很严重的人从众心理。其实如果项目很小，则真的没有必要花费人力资源去搭建规范的，保证视觉的连贯性就足以了。

Q：或许你会问

目前市面上有那么多大厂分享出来的设计规范，例如AntD、fusionD，自己做的很难有这些大哥团队做的全面精细，直接调用就好，还有必要自己从0到1做一遍吗？

A: 答案是非常有必要的

原因如下：

1.B端业务有各种各样的需求，具备一定的特殊性，流通的设计规范组件并不能100%满足我们的产品。

2.目前B端产品的同质化有点严重，原因就在于第三方设计规范的使用者太多，为了避免这种情况发生，我们必须要发挥才能做出差异化的、根据项目定制的设计规范。

3.使用市场上那些封装好的设计规范，在此基础上进行修改时，效率会很低，适配的复杂度和重新开发相差无几。

4.另外，设计规范在多个设计合作时，依然能保证设计风格的统一，提高设计效率。

至于那些大厂成熟的组件库，我认为应该把它当成一个字典，有迷茫的地方，可以去参考人家成熟的解决方案。

二.设计规范的作用是什么

那么建立一套属于自己产品的设计规范有什么作用，可以为项目带来什么便利呢？可以从产品、设计、开发、测试四个方面去说明。

For 设计

1.不论是独立完成还是多个设计师合作，都起到了减少设计成本，提高设计效率，能够快速承接新需求的作用。

2.可以最大程度地保证设计的一致性，更容易营造良好的用户体验氛围，提高操作效率，加深用户对产品的记忆。

3.沉淀设计资产，让设计更加持续地输出价值，减少一次设计。

For 开发

设计规范是与前端有效沟通的工具，可以大大提高设计的还原度，降低对接成本。

开发循序渐进地封装组件代码，避免重复工作，保证代码质量，提高了开发效率和复用率。

For 测试

避免重复的无意义的走查。

For 产品

方便产品迭代，提高产品迭代与优化效率，降低试错成本。

三.接下来重点讲讲设计规范的构成

设计规范的构成，也就是该如何去建立起一套设计规范。

由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组建库创建体验一致的用户界面。

设计原则：整个设计系统所要遵循的全局规则，是设计风格的指导思想。

设计语言：主要包括色彩、字体、图标等

组建库：按钮、选择器、表格、下拉框等

一致性

从现实生活角度，与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

从界面角度，设计样式、图标、文本等所有的元素和结构需保持一致。

及时反馈

包括控件反馈、按钮反馈、页面反馈，通过界面样式和交互动效让用户可以清晰的感知自己的操作，操作后通过页面元素的变化清晰地展现当前状态。即操作中、操作后都能让用户有个心理预期。

提高效率

包括简化操作流程、语言表达清晰且明确、界面简单直白，让用户快速识别而非回忆。

操作可控

根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策。用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

在做设计语言和组建库时，有一个基本原则是：少即是多（less is more），用尽可能少的样式来实现设计目标，例如按钮提供三种尺寸即可，在适应不同场景需求的同时，保证体验的一致性；另一方面，保持克制的设计规范可以进一步减少设计师的决策时间，提高设计效率。

01 色彩规范

（1）色彩的作用

反馈信息、突出层级、表明状态

B端产品中，颜色不仅仅用来传达品牌调性，更多的是用来传达以下信息

反馈信息

通过不同的颜色给予信息反馈，例如红色代表错误信息，绿色代表 成功信息 。

突出层级

通过色彩可以对内容信息进行分层级展示，提高用户读取信息的效率。

表明状态

通过颜色来区分某个事物处于何种状态。

在真实的设计场景中，对色彩的复杂度要求是非常高的。色彩规范应该基本覆盖一套产品对用色的所有场景。

一套完整的色彩规范，包括品牌主色、功能色、中性色。

品牌主色

一套产品只有一个品牌主色，是界面中出现最多的颜色。在需要用色强调而且没有其他要求时，一般都会选择主色，例如tab的选中态，图表的颜色等。

功能色

借助人们对色彩的心理模型，帮助人们高效获得信息。例如绿色代表通行、成功，红色代表禁止、错误，橙色代表警告。

中性色

通俗来讲就是黑白灰。除文字外，中性色还被大量运用在分割线、边框、背景等场景中。

（2）色彩系统的原则

理性的

我们在选色时，尽可能避免个人的设计风格，减少配色的主观性，理性且有逻辑地选色

可扩展的

使用这种选色方法可以扩展生成更多的颜色，以适应不同的变化。

和谐的

色彩规范中的颜色互相搭配使用时，应该是和谐的。

（3）如何落地

至于如何落地实施，可以从两方面来讲：设计层面、开发层面

设计层面

我们在选色时，尽可能避免个人的设计风格，减少配色的主观性，理性且有逻辑地选色

开发层面

在前期与开发同事沟通，将每个颜色定义为一个变量，在代码中不使用具体的色值，而是例如blue-6的色值。

这样做的好处是，在需要替换某个色值时，只需要在底层对变量改变即可实现全局的更改，提高了很多效率。

开发同事完全从库中取色，保证了色彩的准确性，提高了设计稿的落地率。

02 文字规范

B端UI界面的视觉设计是一种偏向于排版的设计类型，那么对于文字的字体，字重，字号，行高、颜色五个属性的把握就显得格外重要。

字体

字体采用系统自带的字体（例如苹方、微软雅黑、思源黑体），另外对于B端来说，一般都会有较为重要的数据，这时可以采用特殊字体给予一定的强调，最常用的便是DIN。但是我们使用的字体一般都基于用户有什么字体，而由于win和mac默认字体不同，所以要提前预留好字体风格类似的多种字体。并且可以设置多个字体，通过逗号隔开，如果第一个字体用户没有，那么会自动替换成下一个字体。

字号

字号上，精简为主，可以用字重和颜色来表现层级的，就不要用字号来表现。

行高

行高上，我们目前采用的方案是行高是字体行高为字号的1.5倍，取4的倍数。

字重

字重上，以开发的视角来看的话，包括从100-900的九个字重。一般我们只采用regular、medium、semibold三个字重。 

颜色

目前最常用的字体颜色是#333333、#666666、#999999，区分标题、正文、辅助文字

03 图标规范

图标重要性

当一个界面完全由文本构成时，用户被迫阅读每个文字来找到自己想要的信息。而引入图标后，降低了用户的认知负荷，帮助用户更快导航，提高用户使用产品的效率。另外一方面、设计精致风格统一的图标提高界面的美观度的同时，也为用户带来了连贯一致的使用体验。

图标规范的内容

尺寸：由于不同形状(三角形，圆形、长方形、正方形)具有不同的视觉大小，仅仅规范图标的大小是不够的，通常我们会设计一套图标keyline，来保证不同的图标具有相同的视觉大小。

填充/描边：一般的系统功能图标采用描边。工作台的常用功能入口一般采用带背景的填充图标，原因是在空间有限的的区域，太多形状会显得杂乱，另一方面面型图标的视觉面积较大，短时间内更加容易识别。

除此之外，还包括圆角、端点、线宽、倾斜角度等其他规范。

如何落地

在产品中，图标通常有多种尺寸，我们一般会为每个尺寸的图标各创建一个frame来进行管理，其中，我们会把同一个图标的填充版和描边版创建为一个组件集，这样在调用时可以直接控制图标的填充和描边，在做有选中态和非选中态的组件时尤为方便。另外，在命名上，我们会用图标的内容为它命名而非表意，例如一个灯泡的图标，我们会直接命名为灯泡而非创意。

图标库推荐

Iconfont

国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。特点是图标非常丰富，它满足了我日常工作中90%的icon需求。

Remixicon

Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高，风格中性大气，因此适用于很多风格的项目，分为“线性图标”和“面型图标”两种风格。相比于 Material Icons，RemixIcon 看起来风格会更统一、简约且精致硬朗一些。

IconPark

 这是字节CUX设计团队出品和维护的开源图标库，如今已对外开放使用，特点是图标大小，线宽等多个属性均可设置，自由度较高。 

01 组件库 UI kit

组件库是可以理解为一个重复使用的界面设计元素的集合体，它是一个文件库。

「组」是设计元素的组合方式；

「件」由不同的元件组成；

「库」仓库，指储存组件的地方，即一个Sketch文件。

组件库在整个系统中扮演的是行为层面的对接，是团队内部设计师和开发间的横向协作，是保证产品输出一致的规范基础，设计规范更像是一份说明文档，组件库是设计规范组成里的一部分。

02 做组件库的时机

组件库的搭建需要恰当的时机，那什么时机才适合去做呢？

在B端产品中，做组件库的时机要需要产品发展到较为稳定的版本，它需要有多个需求沉淀出内容来，毕竟B端的组件库需要结合业务设计出符合业务场景的样式，真正可以组件化的逻辑和样式是不可以凭空想象的，所以前提是要产品有一定的发展，要足够的了解业务逻辑，积累足够的业务场景，再开始着手设计组件库。

1、理解阶段

组件库相当于乐高的一个个积木，通过组件的拼搭可以迅速搭建出一个页面。通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。对于B端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。

结构细分其实就是将各个独立的模块进行拆解与重组的过程。

2、拆解阶段

B端组建库的建立，主要把组件概括为四大类：基础组件、业务组件、数据可视化组件、常用模块。具体细分见思维导图：

3、设计阶段

在设计组件库时，我们要用产品思维去执行，因为一个组件库要能够落地，必须从规划、设计、开发、跟踪，完成一整个产品的闭环，而不仅仅是输出一个UI kit 文件。

在整个设计过程中，有几点需要注意的事项：

3-1 命名规范

鉴于每个人日常工作习惯不同对于一些概念理解会有偏差，做之前最好和团队内的小伙伴商量好命名格式。

3-2 布局

比如在项目中会涉及到一些筛选框、输入框等，会出现标题文本右对齐、内容文本左对齐的情况，这时在做组件的时候就要定义不同的布局样式。

3-3 业务场景

B端产品众所周知它的特点是业务逻辑复杂，场景多，所以我们的产品在进入市场后，都会有专门的前场人员到现场去做示范和讲解产品如何使用。针对不同权限的人员使用产品范围不同，看到的页面也不同，但我们要保证相同业务场景下相同产品功能一致性的输出，降低用户的学习成本。所以我们在做底层组件的时候就要多场景的去考虑，以确保一致性输出。

组件库的应用

组件库的应用实质上是指组件的重组，构成新的模块或者组件来应对项目的需求。在特殊的情况下，需要分离组件在原基础上做适当的调整。还是那句话，具体应用具体分析，活用组件库。

组件库的维护

开发完组件库以后，对于它的更新迭代要根据产品的发展不断去维护的。根据需求的多样性组件库最好也要有规定迭代周期，以保证满足需求。组件库需要持续保持简洁清晰的状态，绝不能出现过于臃肿，反而给工作带来负面效果。

最后附上一些大厂组件库地址：

Ant Design

官网地址：https://ant.design/index-cn

Alibaba Fusion Design 

官网地址：https://fusion.design/pc/component/basic/input?themeid=2

Element UI

官网地址：https://element.eleme.cn/#/zh-CN

Zent（有赞PC端组件库）

官网地址：https://youzan.github.io/zent/zh/guides/install

iview

官网地址：https://www.iviewui.com/