Hello大家好，我是大冯 ，今天我们讲一下HMI的设计层级排布对比 ，那为什么讲这一课 ，是因为最近很多同学 ，做这个HMI界面的时候 ，对比的层级总是抓不好 ，今天也是着重的讲的这么一个部分 ，那么我们首先来看一下排版的原则 ，排版的原则无非就是三句话 ，遵守规范，还是遵守规范 ，只要你遵守规范 ，不是说你的界面有多么的出彩 ，但是绝对不能出错 ，遵守的这个规范包括颜色 ，文字，图形 ，组件等等 ，那么我们在稍后 ，也会这个一一的 ，给大家详细的描述一下 ，那版式的四大原则是，一对比 ，二重复 ，三对齐 ，四亲密性 ，那最开始的一个版式 ，4大原则是在平面设计中 ，来进行产生的 ，但是同样适合我们的UI设计 ，以及HMI的设计 ，那么在这里用Figma给大家演示一下 ，这4大原则分别都是什么 ，只要运用好这4大原则的话 ，其实你整个HMI的设计稿 ，并不会出多么大的错误 ，那首先是对比 ，这里面我也是准备了两个案例 ，一个是标题，一个是正文 ，那么大家觉得这么排列它合适吗 ，当然是不太合适的 ，因为它也没有什么对比 ，还有这个字重以及颜色上的整体对比 ，所以说它正文和标题它是一样大的 ，我们看到的就是一个层级 ，对于这种我们应该怎么办 ，首先这个标题字号 ，可以稍微的大一些 ，比如说是30 ，那我调整到40可不可以 ，可以是吧 ，那么此时还不太够 ，

接下来我们再复制出来一个层级 ，把它的字重也加深一些 ，你可以看到它们两个的字重 ，都是65号的是吧 ，那我们调整到75 ，甚至你要觉得不够大的话 ，那调到85也是可以的 ，这样的话觉得 ，标题和正文的两个层级 ，还是没有办法去区分出来 ，接下来我们再复制出来一个层 ，那我们把这个颜色降低一些，30% ，或者稍微的降低一点点 ，这个60%也是可以的 ，通过颜色来进行区别的话 ，这个对比就很强烈了对吧 ，值得一提的是 ，这个文字的颜色 ，对比度向下调 ，是通过不透明度来进行调整的 ，而不是说你换颜色 ，那换颜色的情况下 ，是这样的 ，我这里面建立一个纯黑色的画板 ，这里面把它给复制出来 ，再复制一个 ，那同样都改成纯白色的 ，那在这里稍微给它调整一下这个文字的颜色 ，和左边这个60%的透明度差不多 ，那么我们在这么对比之后 ，我们再去换一个底色 ，就可以看出来了 ，比如说我换成这样的红色，那可以看出来 ，这个背景的颜色是红色 ，前边的标题是白色 ，正文是透明的 ，那右边的这个随着颜色的变化 ，它的正文的颜色并没有变化 ，还是偏灰色的 ，所以说我们最终通过控制 ，这个文字的颜色深或者浅 ，是通过不透明度来进行调整的 ，

那如果说觉得还不够的话 ，在一些特殊的情况下 ，我们还可以去换一下字体 ，这个标题，换一个字体 ，比如说像江西卓凯的这款字体 ，通过字体和字体的对比能看出来 ，我们还有一种方式 ，就是换另外一种鲜艳的颜色 ，是 ，这个是60%透明的黑色 ，那标题的颜色 ，我们可以换一个橙色 ，适当的去增加对比 ，这样的话能更加的明显 ，那么在这里 ，就是我们排版的第一个原则叫对比 ，给它加深一点，同时 ，同时的话这个 ，这个是不可以调整字重的字体 ，那么接下来我们再去讲一下 ，重复的原则 ，重复的原则指的是什么 ，刚才和大家说的 ，一定要遵守规范的部分 ，第一个是颜色 ，那么这个颜色怎么说呢 ，整个页面不要超过三种颜色 ，这里面三种颜色 ，指的是除去白色和黑色 ，比如说像这种危险警告 ，和安全，三种颜色 ，红，绿，黄三种颜色 ，第二种就是什么，是文字 ，文字其中也包括了字体 ，像这种字体，字号，大小 ，以及字重的调整 ，还有这个最后的字行高 ，这里面都是需要进行统一的 ，这个可以重复去使用 ，第三种是什么 ，第三种是形状 ，形状其中也包括了矩形 ，

还有像这个圆形，或者是这种三角形 ，那么把形状这个元素单独拉出来 ，是什么意思呢 ，圆角矩形的情况下 ，我们就保持同一个角度的圆角矩形 ，如果我们使用圆形的话 ，就是要统一使用一个圆形 ，而不是你统一使用一个圆形之后 ，你再去多做几个三角形，星形 ，这种就是不规则的形状 ，这样的话就会造成整个页面 ，排版会非常的混乱 ，也不符合这个重复的原则 ，形状之后还有一个叫样式 ，样式里面包括这个效果的投影 ，内阴影，涂色模糊 ，也就是我们通常所说的高斯模糊 ，还有这个背景模糊 ，做毛玻璃专用的这个效果，那投影 ，我们统一一下光源 ，它的光源是上至下 ，这里面我给一个箭头 ，大家可能看得更清晰一些 ，从最上到最下这个90度的光源 ，还是从左上角 ，到这个中间的斜45度的光源 ，这个一定要确定，那我们通常做UI的时候 ，还有做这个HMI的时候 ，一般使用从上到下 ，从左到中间的这个 ，两个角度的光源 ，那么光源也是需要进行统一的 ，同时包括内阴影的颜色 ，还有投影的模糊角度 ，这个也是需要统一 ，最后一个就是控件 ，包括像Toast，Dialog ，button这种形状 ，都是需要进行统一的 ，如果说你不统一的话 ，也会造成排版混乱 ，这个就是排版里面的重复性的原则 ，那么我们接下来再去看一下这个对齐 ，

对齐的话 ，在所有做UI的软件里面来讲 ，大部分常用的只有分为两种 ，第一种是文字的这个对齐 ，第二种是版式的对齐 ，文字对齐指的是什么 ，像两个文字 ，两个文字我在打的过程里面，多打几个字 ，对齐的话可以分为左对齐 ，还有这个右对齐 ，还有居中对齐 ，比如说我把这个框再拉大一点 ，这是左对齐，这是右对齐的状态 ，还有居中对齐的状态 ，一般是分为这三种 ，那么还有一种是版式上的对齐 ，版式上对齐 ，是这个样子的，给大家演示一下 ，选中两个文字 ，可以看到最上面是左对齐右对齐 ，居中对齐，还有这个顶对齐 ，下对齐，还有这个居中对齐是吧 ，垂直居中对齐 ，那在最右边还有一个更多选项 ，通常使用的还有这个水平间距均分 ，垂直间距均分 ，那么这两个意思就是 ，我这里面也是复制一下 ，比如说它们三个之间 ，间距是不对等的 ，那么通常来讲 ，我们需要进行计算之后 ，在中间进行隔断，比如说40 ，右边也是调整到40，那不用的 ，如果说多种这个状态的话 ，我们可以多复制几份 ，那最右边和最左边 ，它们两个选中好之后 ，这个位置对齐之后 ，我们可以点一下这个 ，更多选项的水平间距均分 ，