视觉层级从哪来
大小、位置、留白、对比，四样东西决定用户先看哪。
用户不会逐行读你的页面，他会先扫一遍，然后停在最显眼的地方。你决定哪里最显眼。视觉层级靠的是四样东西：大小、位置、留白、对比。vh-wiki
你会遇到的现象：
- 页面元素都在，但看起来平，说不清哪里不对
- 想突出某块内容，只能加粗、加框、加底色，越加越乱
- AI 生成的页面每一块都长得差不多，像个模板
四种手段
- **大小。**重要的做大，次要的做小。差距要拉开，相差两三个像素等于没差。
- **位置。**重要的放上面、放左边、放不用滚动就看到的地方。位置比样式更有效，而且不增加任何视觉噪音。
- **留白。**重要的周围留更多空间，把它孤立出来。这是最被低估的一种手段——加空间比加装饰干净得多。
- **对比。**颜色、粗细、明暗拉开差距。对比不明显反而让人困惑，要么做足，要么别做。
优先用位置和留白，其次用大小，最后才用颜色。颜色是最贵的资源，用一次就少一次——满屏都是重点，等于没有重点。
怎么判断做到位了：眯起眼睛让页面模糊，或者转成灰度看。去掉颜色之后层级还在，说明层级是靠结构撑起来的，不是靠颜色硬撑的；如果模糊之后一片均匀，说明根本没有层级。
位置为什么最划算：它不花任何样式。把主按钮从页面底部挪到首屏，把最重要的标题放到栏目的第一个，用户不需要「被提醒」就会先看到它。对比则是最容易过度的——每块内容都想用自己的颜色、粗细抢注意力，结果就是谁也抢不到。记住一个顺序：位置和留白免费且有效，颜色和加粗要省着用。
排版五法则
这五条是所有版面的地基，做原型、做 PPT、写文档都通用。
- **亲密。**相关的东西放一起，不相关的拉开距离。标题要跟自己的正文挨着，跟上一段分开——如果标题离上一段比离自己的正文还近，用户就会把它归错组。间距不只是好看，它在表达从属关系。
- **对比。**靠强烈差异区分主次。大小、粗细、颜色三种对比。微妙的对比起不到作用，只会让人困惑。
- **对齐。**统一页面的对齐方式。常用左对齐，居中显得正式但不好读。视觉对齐优先于物理对齐。
- **重复。**重复使用同样的元素统一风格。同类模块用同一套结构。重复过度会视觉疲劳。
- **留白。**维持页面的呼吸感。字距、行距、页边距、段落间距，都是留白的一部分。
留白有几个可以直接套的数值：字距约为字号的 20%，行距为字号的 120% 到 150%，页边距为页面宽度的 5% 到 15%，段落间距为行距的 0.5 到 1 倍。
怎么验证
- **眯眼看。**眯起眼睛让页面模糊，还能看出的那几块就是层级最高的。如果模糊之后一片均匀，说明没有层级。这时候再加粗、加框、加底色，只会越加越乱。
- **转成灰度。**去掉颜色之后层级还在，说明层级是靠结构建立的，不是靠颜色硬撑的。
- **问自己：这页最想让人做什么。**答案对应的那个元素，应该是全页最显眼的（见一屏一件事）。
层级要服务于主次判断。先想清楚这页的主任务，视觉层级才有落点；反过来，层级做对了，用户不用想就知道该看哪、该点哪。