design-principles

设计原则

支配视觉感知与交流的基本规律。这些原则不是主观看法，而是对人类视觉与认知运作方式的观察。

何时使用此技能

• 做出视觉设计决策
• 评估设计是否“奏效”
• 解释某些东西为何感觉不对劲
• 教授设计基础知识
• 排查设计问题

核心原则

1. 视觉层级

规律：并非所有元素都同等重要。设计必须引导视线。

建立层级：

工具	作用	示例
尺寸	越大 = 越重要	主视觉标题与正文
字重	越粗 = 越重要	粗体标题与细体正文
颜色	越鲜艳／对比越强 = 越吸引注意力	主要 CTA 与次要 CTA
位置	左上方（从左向右的布局）= 最先看到	Logo 的位置
空间	留白越多 = 越重要	CTA 周围留出充足内边距
深度	阴影／高度 = 更突出	浮动操作按钮

测试层级： 将设计模糊处理至 50%。你仍能识别出：

• 主要焦点？
• 次要信息？
• 应采取的操作？

2. 格式塔原则

规律：大脑会将视觉元素组织成有意义的组。

接近性

彼此靠近的元素会被视为相关。

Good:  [Label]          [Label]
       [Input]          [Input]
       (8px gap)        (8px gap)

       (32px gap between groups)

       [Label]          [Label]
       [Input]          [Input]

Bad:   [Label]  [Label]  [Label]  [Label]
       [Input]  [Input]  [Input]  [Input]
       (equal spacing destroys grouping)

在 Tailwind 中：

• 相关项目：space-y-2 (8px)
• 不相关的组：space-y-8 (32px) 或 divide-y

相似性

外观相似的元素会被视为一组。

存在多种卡片类型时，应在视觉上区分不同类别：

• 同一类别：使用相同的圆角、阴影和内边距
• 不同类别：使用不同的颜色、图标样式或布局

连续性

视线会沿着平滑的路径移动。

应用于导航：

[Home] → [Products] → [About] → [Contact]
         ↓
    [Category A]
    [Category B]
    [Category C]

线条不必实际显示出来，暗示性的线条也有效。

闭合性

大脑会补全不完整的形状。

适用于：

• Logo 设计（WWF 熊猫）
• 图标设计（暗示出的形状）
• 延伸至屏幕外的卡片（暗示还有更多内容）

图形／背景

主体与背景之间应有清晰的区分。

经典示例：FedEx Logo 中 E 和 x 之间的负空间所形成的箭头。

常见问题：

• 在繁杂的图片背景上放置文字
• 层与层之间对比度不足
• 无法明确区分哪些内容可点击、哪些是静态的

3. 三分法则

规律：将主体放置在三分线的交点处，可以营造自然的平衡感。

+-------+-------+-------+
|       |       |       |
|   ●   |       |       |  ← Focal point at intersection
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+

对于 Web 布局：

• 主视觉文字左对齐，并位于左侧三分线处
• 将关键视觉元素放在交点处
• 用留白填充剩余的三分区域

4. 黄金比例（1:1.618）

规律：这种比例反复出现在艺术与建筑中。关于人类天生偏好这一比例的证据较弱且结论不一，因此应将其视为一种实用比例，而非唯一选择（其他比例还有 1.25、1.333、1.5）。

应用：

• 内容宽度与侧边栏宽度：1:1.618
• 标题字号与正文字号：1.618:1
• 间距倍数：16px → 26px → 42px

Tailwind 近似值：

Base unit: 16px (text-base)
Medium:    24px (text-2xl ≈ 16 × 1.5)
Large:     36px (text-4xl = 2.25rem ≈ 16 × 2.25)

5. 视觉平衡

规律：构图应给人稳定感，而不是摇摇欲坠。

对称平衡

• 两侧分量相等
• 正式、稳定、传统
• 适用于：企业、奢华、权威风格

非对称平衡

• 不均等的元素通过视觉分量取得平衡
• 动态、有趣、现代
• 适用于：创意、初创公司、编辑设计

视觉分量的影响因素：

元素	增加的分量
尺寸	越大 = 分量越重
颜色	越深、越鲜艳 = 分量越重
复杂度	越精细 = 分量越重
位置	在画面中的位置越高 = 分量越重（Arnheim）
独立性	越孤立 = 分量越重

6. 对齐

规律：元素应共享视觉基准线，即使这些线并未明确绘出。

强对齐：

[Logo]
_________________________
[Navigation links          ]
_________________________

[Headline              ]
[Subhead               ]
[CTA Button]

(Everything shares left edge)

弱对齐：

    [Logo]
[Navigation links]
    [Headline]
   [Subhead   ]
    [CTA Button]

(No consistent edge)

7. 重复

定律：一致的模式能营造统一感，也更易于学习。

需要保持一致的元素：

• 圆角（所有卡片保持一致）
• 阴影层级（同等重要的元素使用相同深度）
• 间距单位（4px 或 8px 的倍数）
• 颜色用法（主色始终表示操作）
• 字体层级（h2 始终呈现为 h2）

8. 对比

定律：差异能创造趣味，并引导注意力。

对比类型：

• 尺寸对比：大标题、小注释
• 颜色对比：浅色背景上的深色文字、暖色点缀
• 字重对比：粗体标题、常规正文
• 风格对比：衬线标题、无衬线正文
• 间距对比：紧凑的分组、宽松的间隔

最低对比度要求：

• 正文：4.5:1 对比度（WCAG AA）
• 大号文本（常规字重 24px 及以上，或粗体约 18.66px 及以上）：3:1 对比度
• UI 组件：3:1 对比度

9. 留白（负空间）

定律：留空的部分与填满的部分同样重要。

留白的作用：

1. 呼吸空间：避免认知过载
2. 分组：分隔不同的内容区域
3. 强调：独立的元素能吸引注意力
4. 奢华感：充裕的空间传达高端品质

常见问题：

• 为了“容纳更多内容”而塞满元素
• 所有地方的间距都相同（造成单调感）
• 害怕留下空白

Tailwind 间距指南：

Tight (related):     gap-2 (8px)
Standard (siblings): gap-4 (16px)
Section (groups):    gap-8 (32px) or py-12
Page (major):        gap-16 (64px) or py-24

10. 统一

定律：所有元素都应显得彼此协调。

实现统一：

• 保持调色板一致
• 统一字体系统
• 重复使用模式和组件
• 对齐网格
• 保持比例协调

检验统一性： 任选一个元素并将它放到其他位置。它看起来仍然协调吗？如果不是，说明系统缺乏统一性。

快速参考：原则应用

问题	原则	解决方案
“感觉很杂乱”	留白	增加内边距／外边距
“不知道该看哪里”	层级	建立明确的视觉焦点
“感觉彼此脱节”	统一／重复	应用一致的模式
“感觉很无聊”	对比	增加尺寸／颜色／字重变化
“元素似乎随意摆放”	对齐	创建共用边缘
“分组让人困惑”	接近／相似	将相关元素归为一组
“感觉失去平衡”	平衡	重新分配视觉重量

资源

当某项决策需要比上述摘要更深入的信息时，请阅读对应文件。

• references/gestalt-principles.md：深入了解感知分组
• references/visual-hierarchy.md：全面介绍层级技巧
• references/color-theory.md：色彩心理学及应用
• references/typography-fundamentals.md：将字体作为设计元素
• references/composition-rules.md：布局与编排
• assets/principles-checklist.md：评估清单