Center of Front

外观

视觉四原则 ​

是什么 ​

《写给大家看的设计书》提出的 CRAP 四原则：对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）。几乎所有「说不出哪里糙」的页面，都是这四条里某条没满足。

1. 亲密性（Proximity） ​

相关的靠近，无关的远离。 距离本身就在表达「这两样是一组的」。

  • ❌ 反例：表单里 label 和输入框隔了 40px，和上一个字段只隔 8px —— 用户会看错组
  • ✅ 正确：同一组元素间距 8-12px，组与组之间 24-32px
css
/* 间距差距要明显：组内 8px，组间 32px，拉开 4 倍 */
.form-group + .form-group { margin-top: 32px; }
.form-group label { margin-bottom: 8px; }

2. 对齐（Alignment） ​

任何东西都不能随手乱放，每个元素都和另一条隐形线对齐。

  • ❌ 反例：卡片标题居中、正文左对齐、按钮又居中 —— 三种对齐方式打架
  • ✅ 正确：一个页面通常只留一种主对齐方式（左对齐最常用），居中只用于仪式感强的区块（hero、空状态）

自查：在页面上随便点一个元素，往左右扫——它和谁对齐？答不出来就是乱放。

3. 重复（Repetition） ​

同样的东西，长得必须一样。 重复产生专业感，凌乱产生业余感。

  • 所有卡片：同一圆角、同一阴影、同一内边距
  • 所有标题：同一字号阶梯（见字体与排版）
  • 所有主按钮：同一颜色、同一高度

实现方式：把这些「一样」提取成 CSS 变量，全站引用：

css
:root {
  --radius-card: 12px;
  --space-card: 20px;
  --color-primary: #6090b8;
}

4. 对比（Contrast） ​

如果两个元素要不一样，就让它们差别巨大。 「标题 18px、正文 16px」这种半吊子差异 = 没有层级。

元素弱对比（❌）强对比（✅）
标题 vs 正文18px vs 16px28px vs 14px，加粗 + 变色
主按钮 vs 次按钮一个描边一个实底实底填色 vs 纯文字
正文 vs 辅助文字#333 vs #444#1a1a1a vs #999 + 缩小一号

5 分钟自查清单 ​

页面写完，按顺序过一遍：

改造练习

找一个自己写的旧页面，只调间距和对齐（不动颜色不动布局），对比前后截图。90% 的情况下观感会明显提升——这就是四原则的杠杆率。