Where Visual Hierarchy Comes From
Users don't read your page line by line. They scan it first, then stop at whatever stands out most. You decide what stands out most.
What you'll run into
- 页面元素都在，但看起来平，说不清哪里不对
- 想突出某块内容，只能加粗、加框、加底色，越加越乱
- AI 生成的页面每一块都长得差不多，像个模板
Four levers
| 手段 | 怎么用 | 注意 |
|---|---|---|
| 大小 | 重要的做大，次要的做小 | 差距要拉开。相差两三个像素等于没差 |
| 位置 | 重要的放上面、放左边、放不用滚动就看到的地方 | 位置比样式更有效，而且不增加视觉噪音 |
| 留白 | 重要的周围留更多空间，把它孤立出来 | 最被低估的一种。加空间比加装饰干净 |
| 对比 | 颜色、粗细、明暗拉开差距 | 对比不明显反而让人困惑，要么做足要么别做 |
Five layout rules
These five are the foundation of all layout—they apply to prototypes, slide decks, and documents alike.
| 法则 | 意思 | 做法 |
|---|---|---|
| 亲密 | 相关的东西放一起，不相关的拉开距离 | 像开会时同班的人自然站一堆。标题和它的正文要挨着，段与段之间留空 |
| 对比 | 靠强烈差异区分主次 | 大小、粗细、颜色三种对比。微妙的对比起不到作用，只会让人困惑 |
| 对齐 | 统一页面的对齐方式 | 常用左对齐，居中显得正式但不好读。视觉对齐优先于物理对齐 |
| 重复 | 重复使用同样的元素统一风格 | 同类模块用同一套结构。重复过度会视觉疲劳 |
| 留白 | 维持页面的呼吸感 | 字距、行距、页边距、段落间距，都是留白的一部分 |
Whitespace has some ready-to-use numbers: tracking is about 20% of font size, line height is 120% to 150% of font size, page margins are 5% to 15% of page width, and paragraph spacing is 0.5 to 1 times the line height.
How to verify
- Squint at it. Blur the page by squinting — the few blocks still visible are the highest in hierarchy. If it blurs into an even field, there's no hierarchy.
- Convert to grayscale. If the hierarchy is still there without color, it's built on structure, not propped up by color.
- Ask yourself: what does this page most want the user to do. The element matching that answer should be the most prominent thing on the page (see One Screen, One Job).