如何搭建B端设计系统

上海/UI设计师/4年前/1833浏览

版权

如何搭建B端设计系统

B端项目复盘

问题整理
01.关于设计系统
02.设计语言
03.设计模式
04.设计规范
05.文案策略
06.组件库
07.设计资源
08.工具其他

一、关于设计系统

1.1 什么是设计系统
设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产，是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案，能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发！

依照自己的理解，我将这些概念整理成了以下这张图。希望先给大家一个概念上的全貌，然后再来逐一分解。

1.2 为什么要搭建设计系统？

其实在设计系统搭建之前，在项目中遇到了很多问题，例如设计师内部之间的沟通，即便有了统一的原则，但是在规范的使用细节上依然有分歧，或者随着时间和新的设计师加入，不同的设计师也有了不同的看法。所以在面向团队其他成员时，更是沟通成本高，还原度差。

搭建设计系统的主要目的可分为：降本、增效、提质。

与设计师

所包含的可共享的设计文档可以帮助设计人员能够快速准确地组合复用高保真的设计，确保设计一致性
规范性的文档让设计变得有理可据，避免产品前后期风格相差太远；
让设计师在从繁复的基础设计工作中脱离出来，可以有更多时间去处理体验、业务上的问题。

与产品经理
在于产品经理沟通的过程中，要特别注意文案策略，避免出现拗口的、前后不一致的、过长的、重复性的文案，以免降低产品的一致性。

帮助减少花费在过小细节交互上的时间与精力，让产品经理能够更专注于产品整体上的把控与决策；
一些简单、重复的界面产品经理可以通过组件自行搭建，进一步提升团队效率

与开发

开发可以利用设计系统的规范文档和设计团队进行有效沟通；
通过详细的规范文档，推动组件化进程，避免重复造轮子。

与测试

在进行最终走查验收时，就有了统一的标准，减少因“技术原因”而造成的走查问题等；

二、设计原则
设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。
在构建过程中，根据以往我们产品设计过程中经常出问题的地方，我加入了一些可用性原则，以此来指导产品的设计方向。

三、设计模式
设计模式的概念有些抽象，在网上查找不同资料后，给出一下解释。

Design Patterns，就是设计过程中可以反复使用的、可以解决特定问题的设计方法。

相对于 Components，Patterns 要处理的事情会更复杂一些。它的目标是为完成一个任务提供基础操作，是解决一系列问题的全局解决方案。

简单来说当用户在web中执行了一个操作，我们需要给予反馈，告知用户，而这个 Pattern 要解决的问题就是为这一系列场景提供一套设计解决方案。
以Ant Design 的反馈为例
https://ant.design/docs/spec/research-message-and-feedback-cn
Ant Design 在不同的场景下，都给出了推荐用法。

四、设计规范
4.1 统一设计尺寸
以往设计稿都采用1920*1080的设计尺寸，这样会影响设计师对页面内容量和适配的判断。在公司内部，很多分辨率低的电脑（mac等），往往展示的内容较少或者适配不合理，因此在统一设计规范时，我们将设计尺寸统一改为了1440*820，这样对上或者对下适配都比较合适。

4.2 设计规范需要整理哪些
设计规范大体由2部分组成，基础视觉和组件。基于业务着想，这里我将视觉又拆分为基础视觉和框架布局；组件又分为基础组件和业务组件。

4.3 页面框架
基于业务需求，我将页面框架主要分为基本框架结构和左右布局适配结构
基本框架结构：适用于各种导航首页等基本页面
左右布局适配：适用于大数据开发、表格等页面

4.4 栅格布局
为了方便适配，开发沟通之后，我们统一采用了24栅格；为了方便计算，将magin和gutter都定位16px

4.5 颜色
主色的选择，需要依据使用人群，目标用户，使用场景，产品属性等因素综合进行考虑，在颜色使用上B端与C端的目的并不相同，C端颜色使用更大胆自由一些，以抓人眼球为主。而B端端使用则是以辅助产品功能为主，需要遵循对比原则，提升产品易读性。

在颜色的使用比例上，B端更需要冷静克制，因此会减少主色的使用，而使用大留白。

在规范好颜色以后，需要与前端进行同步，将颜色赋予单独的编号，方便双方就颜色上达成统一。如下图所示，一个编号对应一个RGB色值

4.6 字体
字体是体系化界面设计中最基本的构成之一。
我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：
1、字体家族
2、主字体
3、字阶与行高
4、字重
5、字体颜色

4.6.1 字体家族
在实际使用场景中，用户的电脑一般是PC和Mac，但是这两个平台的屏幕材质、渲染方式都不一样，所以使用的默认字体也是不一样的。PC默认使用微软雅黑，而Mac默认使用苹方。
当我们打开一个网站，浏览器会读取font-family中的字体名称，并去检索用户电脑系统中的字体，如果有的话就显示，没有的话检索下一个。

4.6.2 主字体
在规范制定之前，团队一直使用12px为主字体大小，但是12px相对1920的屏幕来说，字体过小，虽然会让屏幕内容纳更多，但是会影响识别效率，在参考Ant design 、Arco Design等多个大厂组件库之后，我们将主字体大小设置为14px。

4.6.3 字阶与字重
字重的功能是为了在文本种突出重点强调内容，在文本中常采用3种规格的自重（regular，Medium，Smlbold）
设定标题一律采用Medium
正文一律采用Regular，强调内容采用颜色区分大于字重去区分。

4.6.4 字体颜色
规范制定前，字体颜色通常为#333333、#666666、#999999虽然方便记忆，但是根据据WCAG2.0标准，文本和背景之间需要存在足够的对比度，确保绝大范围视力程度的人群都易于阅读。因此参考Ant Design 之后，已字体不透明度为维度进行字体色彩划分。

4.7 分隔与间距

在间距上，我们以8px的倍数为倍数进行设计。同时将间距分为竖向间距与横向间距。为了方便管理与沟通我会将他们进行尺寸上的区分（XS、S、M、L、XL）。

我会将间距分为竖向间距与横向间距，均采用8px*N（N=1，2，,3...）的形式。

4.4 图标规范

4.4.1 图标规范
之前在做图标时，不少设计师仍然保持按照视觉大小去做的原则，导致图标复用时大小不一致，难以统一；据此我们在设计图标时采用统一的大小和规范，使用svg格式，来保证图标在视觉上的统一。

4.4.2 图标尺寸
在之前做C端的图标时常常需要考虑精致感与氛围营造，而B端图标功能则是降低用户认知为优先。
与间距类似，将图标同等进行划分等级。12号字体与14号字体搭配外框为16px 图标；14号字体请搭配 24px 的图标；采用8px为基数，可以有效减少层级，减少误差。

4.4.3 图标管理
图标管理又可范围内图标风格、命名规则以及交付方式等。在与前端开发沟通达成共识，将图标上传到阿里巴巴图标库中，更方便前端调用图标大小和调整颜色。

五、文案策略

文案使产品性格更加突出，清晰、准确、一致的文案让界面更易用，使得用户在每一次的使用体验中感到顺畅、愉悦。在交互界面上的说明和提示文案上指导用户完成操作，可以让用户更容易达到目的。其实我们不需要过多的文案，而需要文案能表示更多；因为，语言本身就是一种界面，一种架构。

5.1 基础原则
文案设计非常重要，我们在使用和设计的时候需要注意以下几点：