视觉层级从哪来
用户不会逐行读你的页面，他会先扫一遍，然后停在最显眼的地方。你决定哪里最显眼。
你会遇到的现象
- 页面元素都在，但看起来平，说不清哪里不对
- 想突出某块内容，只能加粗、加框、加底色，越加越乱
- AI 生成的页面每一块都长得差不多，像个模板
四种手段
| 手段 | 怎么用 | 注意 |
|---|---|---|
| 大小 | 重要的做大，次要的做小 | 差距要拉开。相差两三个像素等于没差 |
| 位置 | 重要的放上面、放左边、放不用滚动就看到的地方 | 位置比样式更有效，而且不增加视觉噪音 |
| 留白 | 重要的周围留更多空间，把它孤立出来 | 最被低估的一种。加空间比加装饰干净 |
| 对比 | 颜色、粗细、明暗拉开差距 | 对比不明显反而让人困惑，要么做足要么别做 |
排版五法则
这五条是所有版面的地基，做原型、做 PPT、写文档都通用。
| 法则 | 意思 | 做法 |
|---|---|---|
| 亲密 | 相关的东西放一起，不相关的拉开距离 | 像开会时同班的人自然站一堆。标题和它的正文要挨着，段与段之间留空 |
| 对比 | 靠强烈差异区分主次 | 大小、粗细、颜色三种对比。微妙的对比起不到作用，只会让人困惑 |
| 对齐 | 统一页面的对齐方式 | 常用左对齐，居中显得正式但不好读。视觉对齐优先于物理对齐 |
| 重复 | 重复使用同样的元素统一风格 | 同类模块用同一套结构。重复过度会视觉疲劳 |
| 留白 | 维持页面的呼吸感 | 字距、行距、页边距、段落间距，都是留白的一部分 |
留白有几个可以直接套的数值：字距约为字号的 20%，行距为字号的 120% 到 150%，页边距为页面宽度的 5% 到 15%，段落间距为行距的 0.5 到 1 倍。
怎么验证
- 眯眼看。眯起眼睛让页面模糊，还能看出的那几块就是层级最高的。如果模糊之后一片均匀，说明没有层级。
- 转成灰度。去掉颜色之后层级还在，说明层级是靠结构建立的，不是靠颜色硬撑的。
- 问自己：这页最想让人做什么。答案对应的那个元素，应该是全页最显眼的（见一屏一件事）。