🏆 三大构图比例系统
1. 黄金比例 φ = 1.618
定义：(a+b)/a = a/b = 1.618...。自然界中无处不在：鹦鹉螺壳、向日葵种子排列、银河旋臂。应用于设计：分割线放在61.8%处。Apple logo、Twitter logo 都基于黄金比例。但研究显示黄金比例并不比1.5或1.7有可测量的审美优势（Green, 1995）。
2. 三分法 Rule of Thirds
将画面分为3×3=9格，关键元素放在4个交叉点上。摄影中最常用的构图法。比黄金比例更容易记忆和应用。交叉点位置：33.3%和66.7%处。研究表明三分法构图的照片被评价为"更美"（Palmer et al., 2013）。
3. 动态对称 Dynamic Symmetry
Jay Hambidge(1920)提出的系统，基于√2, √3, √4, √5 等根号矩形。√2矩形(1:1.414)→A系列纸张的基础。√5矩形包含黄金比例。比黄金比例更灵活——提供更多分割选择。
实证结论：三种比例系统在审美吸引力上没有显著差异（McManus & Weatherby, 1997）。选择哪个不太重要——一致性才重要。在一个项目中坚持使用一种比例系统，比追求"最完美"的比例更有效。
🔲 栅格系统的数学
栅格系统提供一致的间距和结构——Material Design、Bootstrap、Ant Design 都基于8px基线：
8px栅格系统：
• 基准单位：8px
• 所有间距 = 8的倍数：8, 16, 24, 32, 40, 48, 56, 64...
• 为什么是8？8能被2、4整除，且大多数屏幕尺寸能被8整除
• 内边距：16px / 24px / 32px
• 外边距：24px / 32px / 48px
• 栅格列数：12列（最灵活：可分1/2/3/4/6列）
• 沟槽：8px / 16px / 24px / 32px
• 基准单位：8px
• 所有间距 = 8的倍数：8, 16, 24, 32, 40, 48, 56, 64...
• 为什么是8？8能被2、4整除，且大多数屏幕尺寸能被8整除
• 内边距：16px / 24px / 32px
• 外边距：24px / 32px / 48px
• 栅格列数：12列（最灵活：可分1/2/3/4/6列）
• 沟槽：8px / 16px / 24px / 32px
响应式断点
| 断点 | 宽度 | 列数 | 沟槽 | 外边距 |
|---|---|---|---|---|
| Mobile | < 640px | 4 | 16px | 16px |
| Tablet | 640-1024px | 8 | 16px | 24px |
| Desktop | 1024-1440px | 12 | 24px | 32px |
| Wide | > 1440px | 12 | 24px | auto |
👁️ 视线扫描模式：Z型 vs F型
Z型扫描
适用于：着陆页、海报、信息层次简单的页面
→→→
↘
→→→
视线从左上→右上→左下→右下，形成Z字形。关键信息放在四个角和对角线上。
F型扫描
适用于：文本密集的页面、博客、新闻
→→→
↓
→→
↓
Nielsen(2006)眼动追踪发现：用户先水平扫描顶部，然后垂直扫描左侧，偶尔水平扫。呈F形。左边的内容比右边更被注意。
⬜ 白色空间的认知功能
白色空间不是"空白"——它是设计的主动元素：
❌ 空间不足
标题一行接一行
段落之间没有间距
元素挤在一起
用户无法区分内容块
认知负荷过高
✅ 合理留白
标题与正文有清晰间距
段落之间有呼吸空间
内容块明确分隔
用户轻松定位信息
认知负荷适当
白色空间的研究证据：
• 增加行间距从1.0→1.5，阅读速度提升20%（Dyson & Haselgrove, 2001）
• 增加段落间距提高信息定位速度32%（Ling & van Schaik, 2006）
• 奢侈品牌大量使用白色空间→"高端感"感知（Dion & Arnould, 2011）
• 但白色空间过多→"空旷/廉价"感——需要平衡
• 增加行间距从1.0→1.5，阅读速度提升20%（Dyson & Haselgrove, 2001）
• 增加段落间距提高信息定位速度32%（Ling & van Schaik, 2006）
• 奢侈品牌大量使用白色空间→"高端感"感知（Dion & Arnould, 2011）
• 但白色空间过多→"空旷/廉价"感——需要平衡