视觉层级从哪来 | 设计界面 | 做产品

视觉层级从哪来

用户不会逐行读你的页面，他会先扫一遍，然后停在最显眼的地方。你决定哪里最显眼。

你会遇到的现象

手段怎么用注意大小重要的做大，次要的做小差距要拉开。相差两三个像素等于没差位置重要的放上面、放左边、放不用滚动就看到的地方位置比样式更有效，而且不增加视觉噪音留白重要的周围留更多空间，把它孤立出来最被低估的一种。加空间比加装饰干净对比颜色、粗细、明暗拉开差距对比不明显反而让人困惑，要么做足要么别做

优先用位置和留白，其次用大小，最后才用颜色。颜色是最贵的资源，用一次就少一次——满屏都是重点，等于没有重点。

下面就是眯起眼睛、或者转成灰度之后看到的样子

元素都在，但是平的

模糊之后一片均匀 —— 说明根本没有层级这时候再加粗、加框、加底色，只会越加越乱

先用位置和留白

模糊之后仍然看得出主次 —— 层级是结构撑起来的整块只用了一次颜色，就在那个按钮上

两边的元素数量完全一样。右边没有加任何东西，只是把它们的位置和周围的空间重新分了一次。

「转成灰度」这个检查之所以有效，是因为它把颜色这个最容易被滥用的手段暂时拿掉了。去掉颜色之后层级还在，说明它是靠结构建立的，不是靠颜色硬撑的。

这五条是所有版面的地基，做原型、做 PPT、写文档都通用。

法则意思做法

亲密相关的东西放一起，不相关的拉开距离像开会时同班的人自然站一堆。标题和它的正文要挨着，段与段之间留空

对比靠强烈差异区分主次大小、粗细、颜色三种对比。微妙的对比起不到作用，只会让人困惑

对齐统一页面的对齐方式常用左对齐，居中显得正式但不好读。视觉对齐优先于物理对齐

重复重复使用同样的元素统一风格同类模块用同一套结构。重复过度会视觉疲劳

留白维持页面的呼吸感字距、行距、页边距、段落间距，都是留白的一部分

亲密法则最容易出问题：标题跟上一段的距离比跟自己正文的距离还近，用户就会把它归错组。间距不只是好看，它在表达从属关系。

留白有几个可以直接套的数值：字距约为字号的 20%，行距为字号的 120% 到 150%，页边距为页面宽度的 5% 到 15%，段落间距为行距的 0.5 到 1 倍。

留白优先四种手段里最被低估的一种。先试着删掉分割线和边框，用间距分区。

字号阶梯大小这一项要成体系。三到四级字号就够，随手定的字号会让层级散掉。

一屏一件事层级要服务于主次判断。先想清楚这页的主任务，视觉层级才有落点。