指导企业级B端产品界面设计的企业级B端设计规范，近年来受到各大厂的热捧

作为指导企业级B端产品界面设计的企业级B端设计规范，近年来受到各大厂的热捧，产出了诸如Salesforce，Antdesign、Element、ViewUI等设计规范。

设计规范是一套由设计价值观作为底层逻辑支撑，以设计原则做指导，包括了全局样式、基础组件库、业务组件库、页面模板等搭建界面要素的集合体。企业级设计规范不仅保障了产品间用户体验的一致性，同时体现了企业对待产品的严谨性。

二、原子设计方法论

笔者负责的企业级B端设计规范采用业界通用的原子设计方法论来构建。该方法在2013年由设计师Brad从化学中得到启发，从而创建了原子设计理论。化学界，由原子构成分子、分子构成宇宙物体。因此对应到产品界面，界面也是由颜色、文字、组件等基本元素构成的。

1. 原子

原子是构成界面的最小元素，例如颜色、文本、图标、容器。

2. 分子

分子是原子按照一定规律组合起来的元素，B端界面上即是组件，例如按钮、选择器、表格等。

3. 组织（区块）

区块可以认为是组件的组合，例如表格上方的查询区域，查询区域是由表单组件与按钮组成的。

4. 模板

模板是区块+区块，或区块+组件组合成的页面，称得上模板的页面通常为典型页面。

5. 页面

页面是指在典型页面模板规范与业务目标的基础上所形成的的既符合规范又符合产品的实际页面。

6. 范例

范例是页面与页面的组合，并且带有交互说明，范例表明了一个可被抽象化的业务流程是如何设计的。

三、规范搭建中需要注意的点

笔者从亲自搭建企业级设计规范的角度，将一些搭建中需要注意的点做了梳理。期望大家在定制自有设计规范的时候，规避一些问题，少走一些弯路。

1. 文字规范

文字在B端界面上大量出现，没有文字，产品将不能为人所用。文字是人机交互的基础，合理的文字设计规则，可以提升用户体验，提升用户操作效率。文字通常包括了字体、字号、字重、行高、色值这几个属性。笔者建议大家在定义B端界面文字时，做如下注意。

1）字体

字体分为数字/英文和中文。

在B端产品中，字体使用建议优先级排序为（基于数字/英文&mac系统优先原则）：Helvetica Naue（英文/数字）、Helvetica(英文/数字)、Arial(英文/数字)、PingFang SC、Hiragino Sans GB、Microsoft YaHei UI、微软雅黑、sans-serif。

2）字号

为了保证界面整洁，设计规范中约定字号不超过3种，同时基于电脑显示器屏幕大小、行业用户习惯、最佳阅读距离等要素，设计规范需要对字号进行了规定。

目前业界常用的字号标准有两种：

1. 12px（正文）、14px（标题）、16px（特殊情况，极少使用）；
2. 14px（正文）、14px（标题）、16px（特殊情况，极少使用）。

3）字重

字重是指字体的粗细程度。一个字体的字重通常至少4-6个，其中Regular与Bold最常用。字重的选择基于清晰区分的原则。

由于设计稿和开发代码的字重对应没有准确的标准，因此我们测试了各种字号在mac和win上的显示效果后，设计师使用了苹方字体Regular （常规体）以及 Medium （中黑体）两种字重来设计页面，它们分别对应代码中的400和700。

笔者也给大家找了下其他网站上对字重的标注，大家可以做参考。