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

之前的文章我们主要讲述了搭建设计系统前的一些准备工作,本篇开始我们就进入到具体的搭建内容了。由于笔者是做 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。

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

总结

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

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

收藏 82
点赞 50

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。