design-principles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Principles

设计原则

The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work.

这些是支配视觉感知与传达的基本法则。这些原则并非主观观点——而是对人类视觉与认知运作方式的客观观察。

When to Use This Skill

何时使用此技能

Making visual design decisions
Evaluating whether a design "works"
Explaining why something feels off
Teaching design fundamentals
Debugging design problems

做出视觉设计决策
评估设计是否“有效”
解释设计为何给人违和感
教授设计基础
排查设计问题

Core Principles

核心原则

1. Visual Hierarchy

1. 视觉层级

The Law: Not all elements are equally important. Design must guide the eye.

Establishing Hierarchy:

Tool	What It Does	Example
Scale	Larger = more important	Hero headlines vs. body text
Weight	Heavier = more important	Bold headings vs. light body
Color	Saturated/contrasting = attention	Primary CTA vs. secondary
Position	Top-left (in LTR) = first seen	Logo placement
Space	More space = more importance	Generous padding around CTAs
Depth	Shadows/elevation = prominence	Floating action buttons

Testing Hierarchy: Blur the design at 50%. Can you still identify:

The primary focal point?
The secondary information?
The action you should take?

法则：并非所有元素的重要性都相同。设计必须引导用户视线。

建立层级的方法:

工具	作用	示例
尺寸	尺寸越大，重要性越高	英雄标题 vs. 正文文本
字重	字重越重，重要性越高	粗体标题 vs. 轻量正文
色彩	饱和度高/对比强烈的颜色更吸引注意力	主要CTA按钮 vs. 次要按钮
位置	左上区域（从左到右阅读场景）最先被看到	Logo放置位置
间距	间距越大，重要性越高	CTA按钮周围预留充足内边距
深度	阴影/悬浮效果提升突出度	浮动操作按钮

层级测试方法: 将设计模糊50%。你是否仍能识别：

主要焦点？
次要信息？
应该执行的操作？

2. Gestalt Principles

2. 格式塔（Gestalt）原则

The Law: The brain organizes visual elements into meaningful groups.

法则：大脑会将视觉元素组织成有意义的群组。

Proximity

接近性

Elements near each other are perceived as related.

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)

In Tailwind:

Related items:
```
space-y-2
```
(8px)
Unrelated groups:
```
space-y-8
```
(32px) or
```
divide-y
```

位置相近的元素会被感知为相关联。

合理示例:  [标签]          [标签]
       [输入框]          [输入框]
       (8px 间距)        (8px 间距)

       (群组间32px间距)

       [标签]          [标签]
       [输入框]          [输入框]

错误示例:   [标签]  [标签]  [标签]  [标签]
       [输入框]  [输入框]  [输入框]  [输入框]
       (均等间距破坏了群组关联)

在Tailwind中的应用:

相关项：
```
space-y-2
```
（8px）
无关群组：
```
space-y-8
```
（32px）或
```
divide-y
```

Similarity

相似性

Elements that look alike appear grouped.

When multiple card types exist, make categories visually distinct:

Same category: same border-radius, shadow, padding
Different category: different color, icon style, or layout

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

当存在多种卡片类型时，要让不同分类在视觉上区分开：

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

Continuity

连续性

The eye follows smooth paths.

Applied to navigation:

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

Lines don't need to be visible—implied lines work.

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

应用于导航：

[首页] → [产品] → [关于我们] → [联系我们]
         ↓
    [分类A]
    [分类B]
    [分类C]

不需要实际绘制线条——隐含的路径同样有效。

Closure

闭合性

The mind completes incomplete shapes.

Useful for:

Logo design (WWF panda, FedEx arrow)
Icon design (implied shapes)
Cards that bleed off screen (implies more content)

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

适用场景：

Logo设计（WWF熊猫标志、FedEx箭头）
图标设计（隐含形状）
超出屏幕边缘的卡片（暗示还有更多内容）

Figure/Ground

图底关系

Clear separation between subject and background.

Common failures:

Text on busy image backgrounds
Low contrast between layers
Unclear what's clickable vs. static

主体与背景需清晰区分。

常见问题：

文字叠加在复杂图片背景上
图层间对比度低
无法区分可点击元素与静态元素

3. The Rule of Thirds

3. 三分法

The Law: Placing subjects at 1/3 intersections creates natural balance.

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

For web layouts:

Hero text left-aligned, hitting left-third
Key visuals placed at intersection points
Whitespace fills remaining thirds

法则：将主体放置在1/3分割线的交点处，能营造自然的平衡感。

+-------+-------+-------+
|       |       |       |
|   ●   |       |       |  ← 焦点位于交点处
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+

在网页布局中的应用：

英雄区文本左对齐，对齐左侧1/3线
关键视觉元素放置在交点位置
留白填充剩余的1/3区域

4. Golden Ratio (1:1.618)

4. 黄金比例（1:1.618）

The Law: Proportions found in nature feel inherently pleasing.

Applications:

Content width to sidebar:
```
1:1.618
```
Heading to body size:
```
1.618:1
```
Spacing multipliers:
```
16px → 26px → 42px
```

Tailwind approximation:

Base unit: 16px (text-base)
Medium:    24px (text-2xl ≈ 16 × 1.5)
Large:     40px (text-4xl ≈ 16 × 2.5)

法则：自然界中存在的比例会给人天生的愉悦感。

应用场景：

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

Tailwind中的近似实现：

基础单位: 16px (text-base)
中等尺寸:    24px (text-2xl ≈ 16 × 1.5)
大尺寸:     40px (text-4xl ≈ 16 × 2.5)

5. Visual Balance

5. 视觉平衡

The Law: Compositions should feel stable, not falling.

Symmetrical Balance

Equal weight on both sides
Formal, stable, traditional
Use for: corporate, luxury, authoritative

Asymmetrical Balance

Unequal elements balanced by visual weight
Dynamic, interesting, modern
Use for: creative, startups, editorial

Visual Weight Factors:

Element	Adds Weight
Size	Larger = heavier
Color	Darker, saturated = heavier
Complexity	Detailed = heavier
Position	Lower = heavier
Isolation	Alone = heavier

法则：构图应给人稳定感，而非失衡感。

对称平衡

两侧视觉重量相等
正式、稳定、传统
适用场景：企业、奢侈品、权威类设计

非对称平衡

通过视觉重量平衡不等的元素
动感、有趣、现代
适用场景：创意类、初创企业、编辑类设计

视觉重量影响因素:

元素	增加重量的因素
尺寸	越大越重
色彩	颜色越深、饱和度越高越重
复杂度	细节越丰富越重
位置	位置越低越重
孤立性	单独存在的元素更重

6. Alignment

6. 对齐

The Law: Elements should share visual lines, even if not explicitly drawn.

Strong Alignment:

[Logo]
_________________________
[Navigation links          ]
_________________________

[Headline              ]
[Subhead               ]
[CTA Button]

(Everything shares left edge)

Weak Alignment:

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

(No consistent edge)

法则：元素应共享视觉对齐线，即使没有明确绘制。

清晰对齐示例:

[Logo]
_________________________
[导航链接          ]
_________________________

[主标题              ]
[副标题               ]
[CTA按钮]

(所有元素共享左边缘对齐)

糟糕对齐示例:

    [Logo]
[导航链接]
    [主标题]
   [副标题   ]
    [CTA按钮]

(无统一对齐边缘)

7. Repetition

7. 重复

The Law: Consistent patterns create unity and learnability.

Elements to keep consistent:

Border radius (all cards same)
Shadow levels (same depth for same importance)
Spacing units (multiples of 4px or 8px)
Color application (primary always means action)
Typography hierarchy (h2 always looks like h2)

法则：一致的模式能营造统一性与易学习性。

需要保持一致的元素：

圆角（所有卡片保持相同）
阴影层级（重要性相同的元素使用相同深度）
间距单位（4px或8px的倍数）
色彩应用（主色始终代表可操作）
排版层级（h2样式保持统一）

8. Contrast

8. 对比

The Law: Difference creates interest and guides attention.

Types of contrast:

Size contrast: Large headings, small captions
Color contrast: Dark on light, warm accents
Weight contrast: Bold headlines, regular body
Style contrast: Serif headings, sans body
Spacing contrast: Tight groups, generous separation

Minimum contrast requirements:

Body text: 4.5:1 ratio (WCAG AA)
Large text (18px+): 3:1 ratio
UI components: 3:1 ratio

法则：差异能创造吸引力并引导注意力。

对比类型：

尺寸对比：大标题与小标题
色彩对比：深色配浅色、暖色强调
字重对比：粗体标题与常规正文
样式对比：衬线标题与无衬线正文
间距对比：紧凑群组与宽松分隔

最低对比度要求:

正文文本：4.5:1对比度（WCAG AA标准）
大文本（18px及以上）：3:1对比度
UI组件：3:1对比度

9. White Space (Negative Space)

9. 留白（负空间）

The Law: What you leave empty is as important as what you fill.

Functions of white space:

Breathing room: Prevents cognitive overload
Grouping: Separates distinct content areas
Emphasis: Isolated elements command attention
Luxury signal: Generous space suggests premium

Common failures:

Cramming elements to "fit more"
Equal spacing everywhere (creates monotony)
Fear of empty space

Tailwind spacing guide:

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

法则：留白的重要性不亚于填充的内容。

留白的作用:

呼吸空间：避免认知过载
分组：分隔不同的内容区域
强调：孤立的元素更吸引注意力
质感体现：充足留白暗示高端品质

常见误区:

堆砌元素以“容纳更多内容”
所有间距均等（导致单调）
惧怕留白

Tailwind间距指南:

紧凑（相关项）:     gap-2 (8px)
标准（同级项）: gap-4 (16px)
区块（群组）:    gap-8 (32px) 或 py-12
页面（大模块）:        gap-16 (64px) 或 py-24

10. Unity

10. 统一性

The Law: All elements should feel like they belong together.

Achieving Unity:

Consistent color palette
Unified typography system
Repeated patterns and components
Aligned grids
Harmonious proportions

Testing Unity: Take any element and place it elsewhere. Does it still feel like it belongs? If not, the system lacks unity.

法则：所有元素应给人属于同一整体的感觉。

实现统一性的方法:

一致的调色板
统一的排版系统
重复的模式与组件
对齐的网格
和谐的比例

统一性测试: 将任意元素移至其他位置。它是否仍看起来属于整体？如果不是，说明设计系统缺乏统一性。

Quick Reference: Principles Applied

快速参考：原则应用

Problem	Principle	Solution
"It feels cluttered"	White Space	Increase padding/margins
"I don't know where to look"	Hierarchy	Establish clear focal point
"It feels disconnected"	Unity/Repetition	Apply consistent patterns
"It feels boring"	Contrast	Add variation in size/color/weight
"Things seem randomly placed"	Alignment	Create shared edges
"The groups are confusing"	Proximity/Similarity	Cluster related items
"It feels off balance"	Balance	Redistribute visual weight

问题	对应原则	解决方案
“设计看起来很杂乱”	留白	增加内边距/外边距
“我不知道该看哪里”	视觉层级	建立清晰的焦点
“设计感觉脱节”	统一性/重复	应用一致的模式
“设计感觉很无聊”	对比	增加尺寸/色彩/字重的变化
“元素摆放看起来很随意”	对齐	创建统一的对齐边缘
“群组划分混乱”	接近性/相似性	将相关项聚类
“设计感觉失衡”	视觉平衡	重新分配视觉重量

Resources

参考资源

references/gestalt-principles.md: Deep dive on perceptual grouping
references/visual-hierarchy.md: Comprehensive hierarchy techniques
references/color-theory.md: Color psychology and application
references/typography-fundamentals.md: Type as design element
references/composition-rules.md: Layout and arrangement
assets/principles-checklist.md: Evaluation checklist

references/gestalt-principles.md: 感知分组深度解析
references/visual-hierarchy.md: 全面的层级构建技巧
references/color-theory.md: 色彩心理学与应用
references/typography-fundamentals.md: 作为设计元素的字体
references/composition-rules.md: 布局与排列规则
assets/principles-checklist.md: 设计评估检查表