web-design-mastery

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Design Mastery

Web设计精通指南

Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.

基于Adam Wathan和Steve Schoger所著《Refactoring UI》的生产级UI设计原则。

Core Design Workflow

核心设计工作流

1. Start with a Feature, Not a Layout

1. 从功能入手，而非布局

Design the actual piece of functionality first
Don't start with navigation, sidebar, or shell
Details come later—work in grayscale first
Don't design too much—work in cycles

先设计实际的功能模块
不要从导航栏、侧边栏或框架开始
先以灰度模式设计，细节后续完善
不要过度设计，分阶段迭代

2. Establish Systems Before Designing

2. 先建立系统，再开展设计

Define these systems up front to eliminate decision fatigue:

Spacing Scale (px):

Token	Size	Use Case
1	4	Micro gaps
2	8	Tight, within components
3	12	Related elements
4	16	Section padding
6	24	Between sections
8	32	Major separation
12	48	Large gaps
16	64	Hero spacing
24	96	Maximum separation

Type Scale (px):

Size	Use Case
12	Labels, meta, fine print
14	Body text, default
16	Emphasis, subheadings
18	Section headings
20	Card titles
24	Page section titles
30	Page headings
36	Hero subheading
48	Hero heading
60-72	Display text

Shadow Scale (5 levels):

Level	Use Case
1	Buttons, subtle lift
2	Cards, inputs
3	Dropdowns, popovers
4	Sticky elements
5	Modals, dialogs

预先定义以下系统，消除决策疲劳：

间距比例（像素）：

标识	尺寸	适用场景
1	4	微小间隙
2	8	组件内部紧凑间距
3	12	关联元素间间距
4	16	区块内边距
6	24	区块间间距
8	32	主要区域分隔
12	48	大间隙
16	64	Hero区域间距
24	96	最大分隔间距

字体比例（像素）：

尺寸	适用场景
12	标签、元数据、小字说明
14	正文文本、默认字体
16	强调文本、子标题
18	区块标题
20	卡片标题
24	页面区块标题
30	页面标题
36	Hero区域子标题
48	Hero区域标题
60-72	展示型文本

阴影层级（5级）：

层级	适用场景
1	按钮、轻微悬浮效果
2	卡片、输入框
3	下拉菜单、弹出框
4	固定定位元素
5	模态框、对话框

3. Build Hierarchy, Not Decoration

3. 构建层级，而非装饰

Primary: Dark color (headlines, key actions)
Secondary: Grey (supporting text, dates)
Tertiary: Light grey (metadata, copyright)

Key principles:

Size isn't everything—use weight and color
Emphasize by de-emphasizing competing elements
Labels are a last resort—combine with values
Semantics are secondary to hierarchy

主层级：深色（标题、关键操作元素）
次层级：灰色（辅助文本、日期）
第三层级：浅灰色（元数据、版权信息）

核心原则：

尺寸不是唯一因素——结合字重与色彩
通过弱化其他元素来突出重点
标签是最后选择——尽量与内容值结合展示
语义性次于层级结构

4. Apply Depth Meaningfully

4. 有意义地运用层次感

Light comes from above
Shadows convey elevation (closer = more attention)
Use two-part shadows for premium look
Consider overlapping elements for layers

光源来自上方
阴影传达元素层级（越靠近用户，越受关注）
使用双层阴影打造高端质感
考虑元素重叠来构建图层

5. Finish with Polish

5. 细节优化收尾

Supercharge defaults (bullets → icons, style quotes)
Add accent borders for visual interest
Design empty states as first impressions
Use fewer borders—prefer shadows or spacing

优化默认样式（项目符号→图标，美化引用文本）
添加装饰性边框提升视觉吸引力
将空状态设计作为第一印象展示
减少边框使用——优先选择阴影或间距

Color System

色彩系统

Categories needed:

Greys (8-10 shades): Text, backgrounds, panels, borders
Primary (5-10 shades): Actions, active states, links
Accents (per semantic): Success, warning, error states

Process for defining shades:

Pick base color (500) that works as button background
Pick edges (100 for tinted bg, 900 for text)
Fill gaps: 700, 300 → 800, 600, 400, 200

Key rules:

Use HSL for intuitive adjustments
Increase saturation at lightness extremes
Rotate hue toward bright (60°, 180°, 300°) for lighter
Greys can be warm (yellow/orange tint) or cool (blue tint)
Accessibility: 4.5:1 contrast for normal text, 3:1 for large

所需色彩类别：

灰色系（8-10种色调）：文本、背景、面板、边框
主色调（5-10种色调）：操作按钮、激活状态、链接
语义强调色：成功、警告、错误状态

色调定义流程：

选择基础色（500色调）作为按钮背景色
确定两端色调（100色调用于浅色背景，900色调用于文本）
填充中间色调：700、300 → 800、600、400、200

核心规则：

使用HSL进行直观调整
在亮度极值处提高饱和度
亮色色调向明亮色相（60°、180°、300°）偏移
灰色系可偏暖（黄/橙色调）或偏冷（蓝色调）
无障碍性：普通文本对比度≥4.5:1，大文本对比度≥3:1

Anti-Patterns

反模式

NEVER do:

Grey text on colored backgrounds (hand-pick colors instead)
Fill the whole screen when content needs less
Use grids religiously (fixed widths often better)
Ambiguous spacing (more space between groups than within)
Relative sizing that doesn't scale
Scale icons beyond intended size
Rely on color alone for meaning

绝对不要做这些：

在彩色背景上使用灰色文本（应手动选择适配色彩）
内容较少时仍填满整个屏幕
刻板使用网格布局（固定宽度通常效果更好）
间距模糊（组间间距不应小于组内间距）
使用无法缩放的相对尺寸
超出预设尺寸缩放图标
仅依赖色彩传达信息

Reference Files

参考文档

For detailed guidance on specific topics:

Topic	File	When to Read
Visual hierarchy, labels, emphasis	hierarchy.md	Balancing element importance
Spacing, white space, layout grids	spacing-layout.md	Layout decisions
Typography, fonts, line-height	typography.md	Text styling
HSL, shades, accessibility	color.md	Color palette creation
Shadows, elevation, layers	depth.md	Adding depth to UI
Borders, backgrounds, empty states	finishing-touches.md	Polishing design

如需特定主题的详细指导：

主题	文档	阅读时机
视觉层级、标签、强调	hierarchy.md	平衡元素重要性时
间距、留白、布局网格	spacing-layout.md	做布局决策时
排版、字体、行高	typography.md	文本样式设计时
HSL、色调、无障碍性	color.md	创建色彩调色板时
阴影、层级、图层	depth.md	为UI添加层次感时
边框、背景、空状态	finishing-touches.md	做细节优化时