设计系统搭建全流程：全局样式

之前的文章我们主要讲述了搭建设计系统前的一些准备工作，本篇开始我们就进入到具体的搭建内容了。由于笔者是做 HMI 设计的，所以很多内容是针对 HMI 设计来讲的，希望大家可以举一反三，得到自己想要的东西。

上期回顾：

接下来我们进入正题，本篇文章我们主要讲述全局样式的搭建过程，全局样式按照我构建的组件库分类来讲，包括：栅格系统、颜色样式、字体样式、图标样式。首先我们先来讲述下栅格系统：

一、栅格

栅格是遵循一定的规则，运用固定的网格，进行页面的布局设计，使布局版面简洁有规则，提高设计效率与统一性。

简单来讲：就是使用垂直或者水平的参考线，将画面简化为有规律的格子，并用这些格子作为参考，以构建秩序性版面的一种设计手法，基于构建的网格来定义信息区域的框架，以保证页面的每个区域都能够规则的排布。

1. 基本构成

在栅格的使用中，我们会对不同区域进行定义，一个栅格系统主要由 Container：容器、Columns :列宽、Gutters：水槽、Padding：内边距 四部分组成。

Container/容器：需要布局信息的版面区域，栅格系统的其他三大元素都要基于该容器的大小去计算。

Columns /列宽：从上到下的垂直空间区域，是承载内容的容器。

Gutters/槽：相邻两个栏之间的间距，把控着页面的留白与呼吸感。

Padding/内边距：可以视为安全距离。栅格和内容区域的距离间隙。

2. 计算公式

当对区域内的单元格进行栅格标注时，我们可得出公式为：

NC=N*Column+（N-1）*Gutter+2*Padding

当屏幕进行适配时，相同密度下，通过调整栅格中 Column 的数值进行适配。

3. 应用

笔者从事 HMI 设计，所以一般来讲，在构建设计系统的时候栅格采用 12 栅格体系，既能保证页面元素的排列多样，也可以不至于页面元素过于凌乱。

元素的排布应落在 Column 上，而不是 Gutter 上。

4. 怎么找到适合的栅格

在做 HMI 的栅格的时候，不同于 PC 端，当一个车机系统架构出来的时候，基本上容器宽高就定义好了，所以对于车机的屏幕来讲，它的栅格系统宽高属性是固定的，那么接下来就是找到一个适合的栅格系统。

首先要说明的是，栅格系统不是臆想出来的，它是为了界面视觉更好呈现，帮助设计师快速布局的。所以我们首先要根据 keypage 界面，判断出视觉风格，根据视觉风格构建合适的栅格。

上图是一些车机系统的界面，从其中我们可以看出来，有的界面属于紧凑型，有的是属于宽松型，这就是视觉风格的表现，同时也是我们去制作栅格系统需要考虑的问题，对于紧凑型的视觉风格，Gutters 会小一些，对于宽松型的视觉风格，Gutters 就会大一些。

当我们对视觉风格有一个基础把握以后，接下来就进入到制作栅格体系的过程了。在这里我一般会使用 Numbers 进行栅格体系的构建，通过输入不同的参数，构建出不同的栅格数据，以供后续进行验证选择。比如：对于一个 1728*756 的应用区域来讲，我们构建的栅格体系可以有如下几种：

首先根据栅格计算公式计算出不同 Gutters 下 Column 的极值，然后根据不同的 Gutter 制作不同的栅格参数，以便筛选出符合要求的栅格数据。在这里凭借一些经验来进行输入。

1. Gutters 以 8 作为作为栅格中的最小单位，如果无法获取合适的栅格，可以使用 4 为最小单位。
2. 所有参数数据尽量选 2 的倍数，不可出现小数点，如果无法找到合适的栅格，才考虑进行打破。
3. Margin*2 一般小于 Column*1
4. Gutters 一般不小于 8dp，不大于 48dp
5. ……

根据上面的经验判断，选出了十个可以使用的栅格体系，如下图所示。然后就是对选出来的栅格体系进行具体界面验证，通过对一些页面进行栅格布局，来考量哪个栅格体系更合适，以便确定需要的栅格体系。

在本例中，可选择栅格体系范围还是比较大的，但是到了具体的项目中，很可能遇到更复杂的情况，发现按照上面的逻辑无法选择出任何一个栅格体系，那么就需要继续优化逻辑进行进一步的筛选了。

二、颜色

颜色体系在产品中主要起到传递信息、创建层级、表达情感、构建一致性的目的。

1. 构成

一般来讲，在构建颜色体系的时候，品牌色已经定义好了，不管是从公司 VI 还是项目风格提炼而来。然后根据定义好的品牌色构建其他色彩，可以是邻近色、补色等不同的颜色种类共同构建出一套完整的色彩体系。

对于 HMI 设计来讲，不需要像很多设计系统那样子构建那么多色彩，那么多梯度，只需要按照项目来打造自己项目的色彩体系即可，如下图所示：

色彩体系主要定义了品牌色板、辅助色板、警示色板、中性色板、功能色板 五部分。

品牌色板：常用颜色，作为系统主色彩贯穿整个系统中，是系统中最核心、最高频使用的颜色，常用于强调信息、引导操作，并在很大程度上决定了系统整体的基调和风格。

辅助色板：用于重要程度较低的的操作或内容。

警示色板：应用于异常、危险操作以及警告提醒等场景。

中性色板：针对正文和图标，占位符、分割线、背景等元素和组件，根据不同的使用场景使用恰当的正文色彩。

功能色板：功能色是指用于特定场景、表达特殊语义的颜色，例如成功、警告等状态颜色。

上述色彩体系只是我平时搭建设计系统时候用的分类方式，并不适用于所有项目，大家可以根据自己具体的项目搭建属于自己的色彩体系。

三、字体

字体是界面设计中最基本的构成之一。一套设计系统中通过合理的使用字号、字重和颜色来强调界面中重要的信息。

一般来讲，一套设计系统中只使用一种字体，因为多种字体的混合使用会使界面看起来零散和草率。

不同于移动端和 pc 端，不同的车厂都会有不同的字体需求，所以在制作字体体系的时候，需要根据具体的字体集进行评估。

1. 字重

系统中为了区分界面中信息的重要程度，可以通过不同的字重进行区分。HMI 系统中为了避免界面混乱，一般定义两种到三种字重等级。

2. 行高

字体行高的引入主要是为了对齐相同字号的不同字体，比如：中英文、字符和数字的混合排版等。所以为了界面统一性，我们会定义每种字号的行高。

3. 字体类型

为了统一视觉和排版效果，会对所有使用的字体进行规范，生成固有的字体类型，设计师使用定好的字体类型进行设计，而不可使用其他的字号和字重。下面的是我常用的字体类型，仅供参考。

四、图标

图标作为界面构成的重要元素，并在一定程度上影响着整体界面的设计效果。

车机中的图标大致可以分为两种类型：通用型图标和业务型图标。我们这里主要聚焦在通用型图标。

1. 规范

栅格作为图标绘制的底层结构，设计的基础。我一般选择以 160*160 dp 的尺寸作为图标绘制的统一栅格尺寸。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。

2. 风格统一

对于系统设计来讲，会充斥着各种不同的图标类型，那么一套统一视觉风格的图标就会显得尤为重要，上面我们通过使用图标栅格规范来保证视觉重量一致，但是还有很多的细节也会影响到图标的风格统一，比如：描边还是填充、线宽粗细、圆角大小、倾斜角度、切口、修饰符位置等等一系列的问题都在影响着图标的最终展示效果，所以我们在制作图标规范的时候，这些内容都需要进行定义。

3. 尺寸

由于图标使用的方式多样，出现的位置各有不同，所以我们有必要对我们的图标设定一个大小梯度，这有助于尽可能的减少我们视觉不统一现象。比如：40dp 和 42dp 的图标使用在 list 中都可以，或者说，从视觉来讲，大差不差，如果不对图标大小进行限制，那么不同的设计同学就可能使用不同大小的图标。这并不是一个良性的过程，所以我们有必要对图标的大小梯度进行设定，基于本人 HMI 的经验来讲，一般我会把图标分为：24*24、32*32、40*40、48*48、64*64、80*80、120*120、160*160 这八种尺寸。

4. 线宽

基于上述图标尺寸和视觉风格的定义，接下来想和各位探讨一个问题，那就是线条粗细。因为显示设备一般采用方形像素，那么非整数像素会以灰度显示，所以对齐像素点是影响图标是否清晰显示的最重要的因素。

我们既然设定了图标的大小梯度，那么为了更好的呈现，我们期望可以在每种图标尺寸下都可以保证清晰显示，也就是说线宽都是整数，但是现实往往并不那么完美，在图标放大缩小的时候势必会出现小数点的情况，那么我们如何去比避免呢？

对于早期的显示设备来讲，屏幕像素质量不高，那么只有一条途径：对每种不同尺寸下的图标进行单独绘制，以保证在每种尺寸下都可以完美展示，这是技术的限制，同时也是解决这个问题最好的方法。

但是对于当下的显示设备来讲，屏幕质量已经极大提升，并且现在版本更新迭代加快，很多时候时间就是效率，所以需要尽快的完成设计工作，所以大家现在更倾向于使用一种尺寸进行放大缩小生成其他的尺寸。

所以在绘制图标的时候，我们需要去考虑选择合适的线宽，尽可能的让图标可以清晰的展示，尤其对于车机屏幕来讲， 并没有手机或者电脑屏幕像素那么好，所以这件事就会显得更加重要。在这里我一般还是会用 Numbers 进行图标不同尺寸线宽计算。如下图所示：

通过上图可以看出，为了尽可能保证线宽是整数，在没有的情况下，尽可能使用.5，减少特殊数值的出现，所以能够满足情况的很少。在 160 尺寸下，线宽为 20 dp 是最好的，但是当图标为 24 dp 时线宽为 3，会显得太粗，所以下一级合适的就是线宽为 10 dp。

这里只是我的一些经验之谈，大家在制作图标时，可以参考这种思维模式，而没必要完全套用，毕竟线宽粗细首先是由视觉风格决定的。

总结

本篇内容主要聚焦在全局样式的搭建，以及我在具体工作中遇到的一些问题的具体思考，为大家提供一种思路。希望本篇文章可以对你有所帮助。如果大家有什么不同的见解，欢迎留言，我们一起探讨，谢谢大家。

后续的文章我将继续为大家介绍设计系统的控件组件的搭建流程，敬请期待～