设计原则

C
Contrast

对比

如果两个元素不一样，就让它们明显不一样，绝不似是而非。对比建立层次，把视线引向最重要的东西。

别犹豫——元素要有别，就让差异够大。

检查清单

  • 标题和正文在字号、字重上有明显的跳变，而不是细微差别。
  • 主次操作的视觉重量明显不同。
  • 关键信息靠大小、颜色或字重跳出，而不是只靠斜体。
.title {
  font-size: 2.5rem;
  font-weight: 700;
}
.body {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}
R
Repetition

重复

在整个设计中重复视觉元素——颜色、形状、字体、间距。重复建立统一感，让布局像一个系统，而不是零散的拼凑。

到处复用同一套 token——一致会被读成「刻意」。

检查清单

  • 圆角、阴影、间距都取自同一套共享 token。
  • 同类元素样式一致——每张卡片都像卡片。
  • 品牌色和字体在各区块反复出现，把页面串成一体。
:root {
  --radius: 8px;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
A
Alignment

对齐

页面上每个元素都该和别的元素有视觉连接。没有东西是随手一放的——共享的边线和基线建立起一种眼睛信赖的隐形秩序。

没有东西该飘着——一切都落在共享的边线或基线上。

检查清单

  • 元素共享对齐边，而不是各自为政。
  • 同一区块里避免居中与左对齐混用。
  • 用网格或共享左边线约束元素的落点。
.form {
  display: grid;
  gap: 12px;
}
.form > * {
  text-align: left;
}
P
Proximity

亲密性

把相关的东西聚拢、把无关的推远。亲密性把零散元素归并成几个清晰的单元，减少读者眼睛要做的功。

靠近 = 相关——按含义分组，而不是凭手感。

检查清单

  • 标签紧贴它所描述的输入框，而不是漂在两者之间。
  • 相关项成组，组与组之间的留白大于组内留白。
  • 孤立、未分组的元素被归入它所属的单元。
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}