Back to Details

ui-design-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Design Patterns

UI设计模式

Practical guidelines for creating polished, professional user interfaces without relying on graphic design talent. These patterns work for any web project, including TYPO3 frontend development.
无需依赖专业平面设计能力，即可打造精致、专业用户界面的实用指南。这些模式适用于任何Web项目，包括TYPO3前端开发。

Acknowledgements

致谢

These patterns are adapted from two excellent resources:
  • Refactoring UI by Adam Wathan & Steve Schoger — The definitive guide to practical UI design for developers
  • Practical UI (2nd Edition) by Adham Dannaway — Quick and practical UI design guidelines for intuitive, accessible, and beautiful interfaces
We highly recommend both works for deepening your UI design knowledge.
这些模式改编自两份优质资源：
  • Refactoring UI（作者Adam Wathan & Steve Schoger）——面向开发者的实用UI设计权威指南
  • Practical UI（第二版）（作者Adham Dannaway）——打造直观、无障碍且美观界面的快速实用UI设计准则
我们强烈推荐这两份资料，帮助你深化UI设计知识。

0. Core Principles (from Practical UI)

0. 核心原则（来自Practical UI）

Before diving into specific patterns, internalize these foundational principles:
在深入学习具体模式之前，请先掌握这些基础原则：

Minimize Usability Risks

最小化可用性风险

Base design decisions on risk assessment—the risk that someone could have difficulty using an interface:
  • Light grey text may look sleek but risks readability issues
  • Icons without labels risk confusion about meaning
  • Colored heading text risks being mistaken for links
Always consider: people with poor eyesight, low computer literacy, reduced dexterity, and cognitive differences.
基于风险评估做出设计决策——即用户在使用界面时可能遇到的困难：
  • 浅灰色文本看似简洁，但存在可读性问题风险
  • 无标签图标可能导致用户对含义产生困惑
  • 彩色标题文本可能被误认为是链接
始终考虑：视力不佳、计算机操作能力较弱、肢体灵活性受限以及认知有差异的用户。

Have a Logical Reason for Every Design Detail

每个设计细节都要有合理依据

Every UI element should have a rationale. "That looks nice" is not constructive feedback. Be able to articulate why each design decision was made.
ElementLogical Reason
Left-aligned textCreates neat edge, improves readability
Descriptive headingsScannable, works with screen readers
Blue underlined linksIndicates interactivity, accessible for color blind
Grouped spacingRelated items closer together reduce cognitive load
每个UI元素都应有设计理由。“看起来不错”并非有建设性的反馈。你需要能够清晰阐述每个设计决策的原因。
元素合理依据
左对齐文本形成整齐的边缘，提升可读性
描述性标题便于快速扫描，适配屏幕阅读器
蓝色下划线链接明确指示交互性，对色盲用户友好
分组间距相关元素靠近排布，降低认知负荷

Minimize Interaction Cost

最小化交互成本

Interaction cost = physical + mental effort to complete a task. Reduce it by:
  1. Keep related actions close (Fitts's Law—closer/larger targets are faster to click)
  2. Reduce distractions (avoid attention-grabbing elements that pull focus)
  3. Use progressive disclosure (reveal complexity only when needed)
交互成本 = 完成任务所需的体力 + 脑力消耗。可通过以下方式降低交互成本：
  1. 相关操作就近放置（菲茨定律——目标越近/越大，点击速度越快）
  2. 减少干扰（避免分散注意力的元素）
  3. 逐步展示信息（仅在需要时揭示复杂内容）

Minimize Cognitive Load

最小化认知负荷

Cognitive load is the mental effort required to use an interface. Reduce it by:
  • Breaking information into smaller, digestible chunks
  • Using familiar patterns people already understand
  • Removing unnecessary elements and decisions
  • Grouping related items visually
认知负荷是用户使用界面所需的脑力消耗。可通过以下方式降低认知负荷：
  • 将信息拆分为更小、更易消化的模块
  • 使用用户已熟悉的设计模式
  • 移除不必要的元素和决策选项
  • 视觉上对相关元素进行分组

Design System First

先建立设计系统

Create a system of reusable guidelines before designing:
  • Color palette with usage rules
  • Typography scale
  • Spacing system
  • Component patterns
  • Interaction states
This ensures consistency and speeds up decision-making.
在开始设计前，先创建一套可复用的设计准则：
  • 带有使用规则的调色板
  • 排版层级
  • 间距系统
  • 组件模式
  • 交互状态
这能确保设计一致性，并加快决策速度。

Accessibility is Non-Negotiable

无障碍设计是硬性要求

Meet WCAG 2.1 Level AA at minimum:
RequirementMinimum Ratio
Small text (≤18px)4.5:1 contrast
Large text (>18px bold or >24px)3:1 contrast
UI elements (borders, icons)3:1 contrast
Never rely on color alone—always pair with icons, patterns, or text for color blind users.
至少要满足WCAG 2.1 AA级别标准：
要求最小对比度
小文本（≤18px）4.5:1
大文本（>18px粗体或>24px）3:1
UI元素（边框、图标）3:1
绝不能仅依赖颜色——始终搭配图标、图案或文本，以便色盲用户识别。

Use Common Design Patterns

使用通用设计模式

Per Jakob's Law, stick with patterns people already know:
  • Conventional form fields (not custom/unfamiliar styles)
  • Standard navigation patterns
  • Expected icon meanings
  • Familiar button behaviors
Save creativity for your product's unique value proposition, not basic UI conventions.
根据雅各布定律，坚持使用用户已熟悉的模式：
  • 常规表单字段（而非自定义/陌生样式）
  • 标准导航模式
  • 用户熟知含义的图标
  • 符合预期的按钮行为
将创意用于产品的独特价值主张，而非基础UI惯例。

The 80/20 Rule

二八法则

Roughly 80% of users use 20% of features. Prioritize the common paths:
  • Optimize for frequent tasks, not edge cases
  • Focus design effort where it has the largest impact
  • Don't over-engineer rarely-used features
约80%的用户仅使用20%的功能。优先优化常用路径：
  • 针对高频任务进行优化，而非边缘场景
  • 将设计精力投入到影响最大的环节
  • 不要过度设计极少使用的功能

1. Starting from Scratch

1. 从零开始设计

Start with a Feature, Not a Layout

从功能入手，而非布局

Don't begin by designing the shell (navigation, sidebar, footer). Start with actual functionality.
Wrong approach:
  • "Should it have a top nav or sidebar?"
  • "Where should the logo go?"
Right approach:
  • Design the core feature first (search form, product card, user profile)
  • The navigation will reveal itself as you design features
不要从设计框架（导航、侧边栏、页脚）开始。先从实际功能着手。
错误方式：
  • “应该用顶部导航还是侧边栏？”
  • “Logo应该放在哪里？”
正确方式：
  • 先设计核心功能（搜索表单、产品卡片、用户资料）
  • 导航会在你设计功能的过程中自然成型

Detail Comes Later

细节稍后完善

In early stages, ignore typefaces, shadows, and icons. Use thick markers or low-fidelity wireframes to explore layouts quickly.
在早期阶段，忽略字体、阴影和图标。使用粗马克笔或低保真线框图快速探索布局。

Hold the Color

先不要用颜色

Design in grayscale first. This forces you to use spacing, contrast, and size to create hierarchy. Color comes later as enhancement.
先以灰度模式设计。这会迫使你通过间距、对比度和尺寸来创建层级。颜色仅作为后期的增强手段。

Work in Cycles

循环迭代工作

  1. Design a simple version of the next feature
  2. Build it
  3. Iterate on the working design
  4. Move to the next feature
  1. 设计下一个功能的简单版本
  2. 构建该版本
  3. 在可运行的设计基础上迭代优化
  4. 转向下一个功能

Be a Pessimist

做个“悲观主义者”

Design the smallest useful version first. Don't design features you can't build yet—ship what works.
先设计最小可用版本。不要设计你目前还无法实现的功能——先交付可用的内容。

2. Hierarchy is Everything

2. 层级是关键

Not All Elements Are Equal

并非所有元素都同等重要

Visual hierarchy makes interfaces feel "designed". When everything competes for attention, nothing stands out.
The key: Deliberately de-emphasize secondary and tertiary information while highlighting what matters most.
视觉层级让界面看起来“经过设计”。当所有元素都争夺注意力时，没有任何元素会脱颖而出。
关键：刻意弱化次要和三级信息，同时突出最重要的内容。

Size Isn't Everything

尺寸不是唯一手段

Don't rely solely on font size for hierarchy. Use:
TechniqueEffect
Font weight600-700 for emphasis, 400-500 for normal
Color contrastDark for primary, grey for secondary, light grey for tertiary
SpacingMore space around important elements
Color guidelines for text:
  • Primary content: Dark color (e.g., 
    slate-900
    )
  • Secondary content: Medium grey (e.g., 
    slate-600
    )
  • Tertiary content: Light grey (e.g., 
    slate-400
    )
不要仅依赖字体大小来构建层级。可以使用：
技巧效果
字体粗细600-700字重用于强调，400-500字重用于常规文本
颜色对比度深色用于主要内容，中灰色用于次要内容，浅灰色用于三级内容
间距重要元素周围预留更多空间
文本颜色准则：
  • 主要内容：深色（例如
    slate-900
    ）
  • 次要内容：中灰色（例如
    slate-600
    ）
  • 三级内容：浅灰色（例如
    slate-400
    ）

Don't Use Grey Text on Colored Backgrounds

不要在彩色背景上使用灰色文本

Grey text on colored backgrounds looks washed out. Instead, pick a color with the same hue as the background, adjusting saturation and lightness.
css
/* Bad: Grey on blue background */
background: hsl(220, 80%, 50%);
color: #888888; /* Looks dull */

/* Good: Tinted text matching background hue */
background: hsl(220, 80%, 50%);
color: hsl(220, 60%, 85%); /* Harmonious and readable */
彩色背景上的灰色文本会显得暗淡。相反，选择与背景色调相同的颜色，调整饱和度和亮度。
css
/* 错误示例：蓝色背景配灰色文本 */
background: hsl(220, 80%, 50%);
color: #888888; /* 看起来暗淡无光 */

/* 正确示例：与背景色调匹配的着色文本 */
background: hsl(220, 80%, 50%);
color: hsl(220, 60%, 85%); /* 和谐且可读 */

Emphasize by De-emphasizing

通过弱化其他元素来突出重点

If a primary element doesn't stand out, don't make it louder—make competing elements quieter.
css
/* Instead of making active nav item bolder... */
/* ...make inactive items softer */
.nav-item { color: var(--slate-400); }
.nav-item.active { color: var(--slate-900); }
如果主要元素不够突出，不要让它更“醒目”——而是让竞争元素更“低调”。
css
/* 不要让活跃导航项更粗... */
/* ...而是让非活跃项更柔和 */
.nav-item { color: var(--slate-400); }
.nav-item.active { color: var(--slate-900); }

Labels Are a Last Resort

标签是最后选择

Context often eliminates the need for labels:
Instead ofUse
"Email: john@example.com"john@example.com (format is obvious)
"In stock: 12""12 left in stock"
"Bedrooms: 3""3 bedrooms"
When labels are necessary, de-emphasize them—the data is what matters.
上下文通常可以消除对标签的需求：
不要用改用
"Email: john@example.com"john@example.com（格式显而易见）
"In stock: 12""仅剩12件库存"
"Bedrooms: 3""3间卧室"
当必须使用标签时，弱化标签样式——数据才是重点。

Balance Weight and Contrast

平衡重量与对比度

Heavy elements (icons, bold text) can be de-emphasized with softer colors. Light elements (thin borders) can be emphasized with increased weight.
css
/* Icon feels too heavy? Reduce contrast */
.icon { color: var(--slate-400); } /* Instead of slate-900 */

/* Border too subtle? Increase width */
border: 2px solid hsl(210, 23%, 95%); /* Instead of 1px darker */
厚重元素（图标、粗体文本）可以通过柔和的颜色来弱化。轻盈元素（细边框）可以通过增加重量来突出。
css
/* 图标感觉太重？降低对比度 */
.icon { color: var(--slate-400); } /* 而非slate-900 */

/* 边框太不明显？增加宽度 */
border: 2px solid hsl(210, 23%, 95%); /* 而非1px深色边框 */

Button Hierarchy

按钮层级

Design buttons based on hierarchy, not just semantics:
TypeStyleUse for
PrimarySolid, high contrastMain action on page
SecondaryOutline or lower contrastLess important actions
TertiaryLink styleSeldom-used actions
Destructive actions aren't automatically red and bold. If "Delete" isn't the primary action, style it as secondary or tertiary, then use bold red styling in the confirmation modal.
根据层级而非仅语义来设计按钮：
类型样式适用场景
主要按钮实心、高对比度页面上的核心操作
次要按钮轮廓或低对比度填充不太重要的操作
三级按钮链接样式极少使用的操作
破坏性操作并非自动使用红色粗体样式。如果“删除”不是主要操作，将其设计为次要或三级按钮，然后在确认模态框中使用粗体红色样式。

3. Layout and Spacing

3. 布局与间距

Start with Too Much White Space

从过多留白开始

Begin with excessive space, then remove until satisfied. This ensures elements breathe properly.
先预留过多空间，然后逐步移除直到满意。这能确保元素有足够的呼吸空间。

Establish a Spacing System

建立间距系统

Use a constrained scale with meaningful jumps (~25% between values):
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
Base on 16px (default browser font size, divides nicely).
使用具有有意义跳跃的约束性比例（各值之间约25%的差距）：
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
基于16px（浏览器默认字体大小，便于分割）。

You Don't Have to Fill the Screen

不必填满整个屏幕

If content only needs 600px, don't stretch it to 1200px. Extra space around edges never hurts.
如果内容只需要600px宽度，不要将其拉伸到1200px。边缘的额外空间永远不会有坏处。

Shrink the Canvas

缩小画布

Designing for mobile first often reveals better solutions. Start with ~400px width, then expand.
先为移动端设计往往能找到更好的解决方案。从约400px宽度开始，然后再扩展。

Grids Are Overrated

网格并非万能

Not all elements should be fluid. Sidebars, icons, and avatars often work better with fixed sizes while main content flexes.
css
/* Better than percentage-based sidebar */
.sidebar { width: 280px; flex-shrink: 0; }
.main { flex: 1; min-width: 0; }
并非所有元素都应该是流式的。侧边栏、图标和头像通常使用固定尺寸效果更好，而主内容区域可以自适应。
css
/* 优于百分比宽度的侧边栏 */
.sidebar { width: 280px; flex-shrink: 0; }
.main { flex: 1; min-width: 0; }

Relative Sizing Doesn't Scale

相对尺寸无法自适应缩放

Headlines shouldn't stay proportional to body text across screen sizes. Large elements should shrink faster than small ones on mobile.
css
/* Desktop: 45px headline, 18px body (2.5x ratio) */
/* Mobile: 24px headline, 14px body (1.7x ratio) */
标题不应在所有屏幕尺寸上都与正文保持比例。在移动端，大元素应该比小元素缩小得更快。
css
/* 桌面端：45px标题，18px正文（2.5倍比例） */
/* 移动端：24px标题，14px正文（1.7倍比例） */

Avoid Ambiguous Spacing

避免模糊的间距

When elements are grouped without visible separators, the spacing between groups must be greater than spacing within groups.
css
/* Form labels should be closer to their inputs than to previous inputs */
.form-group { margin-bottom: 24px; }
.form-label { margin-bottom: 8px; }
当元素分组且无可见分隔符时，组与组之间的间距必须大于组内元素的间距。
css
/* 表单标签应与其输入框更靠近，而不是与上一个输入框靠近 */
.form-group { margin-bottom: 24px; }
.form-label { margin-bottom: 8px; }

4. Designing Text

4. 文本设计

Establish a Type Scale

建立排版层级

Hand-pick sizes rather than using mathematical ratios:
12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px
Use 
px
or 
rem
, not 
em
(to avoid compounding issues with nesting).
手动选择尺寸，而非使用数学比例：
12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px
使用
px
或
rem
，不要使用
em
（避免嵌套时的复合问题）。

Use Good Fonts

使用优质字体

Safe choices:
  • System font stack for familiarity
  • Fonts with 5+ weights indicate quality craftsmanship
  • High x-height fonts for UI text (better legibility at small sizes)
Filter by weight count on Google Fonts to find quality options.
安全选择：
  • 系统字体栈，提升熟悉感
  • 拥有5种以上字重的字体，表明其制作精良
  • 高x高度的字体，适合UI文本（小尺寸下可读性更好）
在Google Fonts上按字重数量筛选，找到优质字体选项。

Keep Line Length in Check

控制行长度

Optimal: 45-75 characters per line (20-35em width).
css
.prose { max-width: 65ch; } /* Character-based width */
最佳：每行45-75个字符（20-35em宽度）。
css
.prose { max-width: 65ch; } /* 基于字符的宽度 */

Baseline, Not Center

基线对齐，而非居中

When mixing font sizes on one line, align by baseline, not vertical center.
css
.header-row { align-items: baseline; } /* Not center */
当一行中混合不同字体大小时，按基线对齐，而非垂直居中。
css
.header-row { align-items: baseline; } /* 不是center */

Line Height Is Proportional

行高与字体大小成比例

Font SizeLine Height
Small text (14px)1.5-1.75
Body (16-18px)1.5-1.65
Headlines (24px+)1.1-1.25
Large headlines (36px+)1.0-1.1
Wider paragraphs need taller line heights.
字体大小行高
小文本（14px）1.5-1.75
正文（16-18px）1.5-1.65
标题（24px+）1.1-1.25
大标题（36px+）1.0-1.1
较宽的段落需要更大的行高。

Not Every Link Needs a Color

并非所有链接都需要颜色

In link-heavy interfaces, use subtle differentiation (font weight, darker color) instead of blue underlines everywhere. Reserve bold link styling for important navigation.
在链接密集的界面中，使用细微的差异（字体粗细、深色）代替到处都是的蓝色下划线。仅对重要导航使用粗体链接样式。

Align with Readability in Mind

以可读性为目标对齐文本

  • Left-align most text
  • Center only short, independent blocks (headings, CTAs)
  • Right-align numbers in tables for easy comparison
  • Hyphenate justified text
  • 大多数文本左对齐
  • 仅短的独立块（标题、CTA）居中对齐
  • 表格中的数字右对齐，便于比较
  • 两端对齐的文本需要连字符连接

Use Letter-Spacing Effectively

有效使用字间距

  • Tighten headlines slightly: 
    letter-spacing: -0.02em;
  • Widen all-caps text: 
    letter-spacing: 0.05em;
  • Leave body text alone
  • 标题略微收紧：
    letter-spacing: -0.02em;
  • 全大写文本加宽：
    letter-spacing: 0.05em;
  • 正文保持默认字间距

5. Working with Color

5. 色彩运用

Ditch Hex for HSL

用HSL替代Hex

HSL (Hue, Saturation, Lightness) makes color relationships intuitive:
css
/* HSL is easier to reason about */
--primary-500: hsl(220, 80%, 50%);
--primary-600: hsl(220, 80%, 40%); /* Just darken lightness */
--primary-400: hsl(220, 80%, 60%); /* Just lighten */
HSL（色相、饱和度、亮度）让色彩关系更直观：
css
/* HSL更易于推理 */
--primary-500: hsl(220, 80%, 50%);
--primary-600: hsl(220, 80%, 40%); /* 只需降低亮度 */
--primary-400: hsl(220, 80%, 60%); /* 只需提高亮度 */

You Need More Colors Than You Think

你需要的颜色比想象中多

A complete palette includes:
CategoryShades Needed
Greys8-10 shades (true black looks unnatural)
Primary5-10 shades
Accent colors5-10 shades each (red, yellow, green, etc.)
完整的调色板包括：
类别需要的色调数量
灰色系8-10种色调（纯黑色看起来不自然）
主色调5-10种色调
强调色每种5-10种色调（红色、黄色、绿色等）

Define Shades Up Front

预先定义色调

Don't use 
lighten()
or 
darken()
functions. Pre-define all shades:
  1. Pick your base color (good for button backgrounds)
  2. Pick your darkest shade (for text on light backgrounds)
  3. Pick your lightest shade (for tinted backgrounds)
  4. Fill in 6-7 shades between them
不要使用
lighten()
或
darken()
函数。预先定义所有色调：
  1. 选择你的基础颜色（适合按钮背景）
  2. 选择最深的色调（用于浅色背景上的文本）
  3. 选择最浅的色调（用于着色背景）
  4. 在它们之间填充6-7种色调

Don't Let Lightness Kill Saturation

不要让亮度降低饱和度

As lightness approaches 0% or 100%, increase saturation to maintain vibrancy.
当亮度接近0%或100%时，提高饱和度以保持色彩活力。

Perceived Brightness Varies by Hue

不同色相的感知亮度不同

Yellow appears brighter than blue at the same lightness. To make a color lighter without washing it out, rotate hue toward yellow, cyan, or magenta. To darken, rotate toward red, green, or blue.
相同亮度下，黄色看起来比蓝色更亮。要让颜色变浅而不显得暗淡，将色相向黄色、青色或品红色调整。要让颜色变暗，将色相向红色、绿色或蓝色调整。

Greys Don't Have to Be Grey

灰色不一定是纯灰色

Saturate greys slightly for personality:
  • Cool greys: Add blue (hue ~210)
  • Warm greys: Add yellow/orange (hue ~40)
css
--grey-500: hsl(210, 10%, 50%); /* Cool grey */
--grey-500-warm: hsl(40, 10%, 50%); /* Warm grey */
略微增加灰色的饱和度以赋予个性：
  • 冷灰色：添加蓝色（色相~210）
  • 暖灰色：添加黄色/橙色（色相~40）
css
--grey-500: hsl(210, 10%, 50%); /* 冷灰色 */
--grey-500-warm: hsl(40, 10%, 50%); /* 暖灰色 */

Accessible Contrast

无障碍对比度

Text TypeMinimum Ratio
Body text (<18px)4.5:1
Large text (18px+ bold or 24px+)3:1
Flip the contrast when colored backgrounds make white text too dark—use dark colored text on light colored backgrounds instead.
文本类型最小对比度
正文（<18px）4.5:1
大文本（18px+粗体或24px+）3:1
当彩色背景使白色文本显得太暗时，反转对比度——改用浅色背景配深色文本。

Don't Rely on Color Alone

绝不能仅依赖颜色

Always pair color with another indicator (icons, patterns, text) for colorblind users.
始终为色盲用户搭配另一种指示符（图标、图案、文本）。

System Colors for Status

状态使用系统色

Use traffic light colors with familiar meanings:
ColorUsageWhen to Use
RedErrorNegative messages, failures requiring attention
AmberWarningCaution, potentially risky actions
GreenSuccessPositive messages, completed actions
Always pair with icons for color blind accessibility.
使用具有通用含义的交通灯颜色：
颜色用途使用场景
红色错误负面消息、需要关注的失败操作
琥珀色警告注意事项、有潜在风险的操作
绿色成功正面消息、已完成的操作
始终搭配图标，提升色盲用户的可访问性。

APCA: The Future of Contrast Measurement

APCA：对比度测量的未来

WCAG 3 introduces the Accessible Perceptual Contrast Algorithm (APCA)—a more accurate contrast measurement:
APCA ValueUse For
≥90Preferred for body text (14px+)
≥75Minimum for body text (18px+)
≥60Other text (24px or 16px bold+)
≥45Large text (36px or 24px bold+), UI elements
≥30Placeholder text, disabled buttons
≥15Non-text decorative elements
Key difference: APCA handles dark backgrounds better than WCAG 2, and swapping text/background colors affects the score.
WCAG 3引入了Accessible Perceptual Contrast Algorithm (APCA)——更准确的对比度测量方法：
APCA值适用场景
≥90正文文本（14px+）的首选值
≥75正文文本（18px+）的最小值
≥60其他文本（24px或16px粗体+）
≥45大文本（36px或24px粗体+）、UI元素
≥30占位符文本、禁用按钮
≥15非文本装饰元素
主要区别：APCA比WCAG 2更适合深色背景，且交换文本/背景颜色会影响分数。

Transparent Colors for Flexibility

透明色提升灵活性

Use transparent colors (with alpha values) for:
  • Hover states that work on any background
  • Overlays that adapt to underlying content
  • Subtle backgrounds that maintain harmony
css
/* Transparent overlays that work on any background */
--hover-overlay: hsla(0, 0%, 0%, 0.05);
--active-overlay: hsla(0, 0%, 0%, 0.1);
--disabled-overlay: hsla(0, 0%, 100%, 0.5);
使用带透明度的颜色（含alpha值）用于：
  • 可在任何背景上生效的悬停状态
  • 适配底层内容的遮罩层
  • 保持和谐的微妙背景
css
/* 可在任何背景上生效的透明遮罩 */
--hover-overlay: hsla(0, 0%, 0%, 0.05);
--active-overlay: hsla(0, 0%, 0%, 0.1);
--disabled-overlay: hsla(0, 0%, 100%, 0.5);

6. Creating Depth

6. 创建层次感

Emulate a Light Source

模拟光源

Light comes from above. Apply this consistently:
  • Raised elements: Lighter top edge, shadow below
  • Inset elements: Shadow at top, lighter bottom edge
css
/* Raised button */
.button {
  box-shadow: 
    inset 0 1px 0 hsl(220, 80%, 70%), /* Light top edge */
    0 1px 3px hsla(0, 0%, 0%, 0.2);    /* Shadow below */
}

/* Inset input */
.input {
  box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 0.1);
}
光源来自上方。保持这一一致性：
  • 凸起元素：顶部边缘更亮，下方有阴影
  • 凹陷元素：顶部有阴影，底部边缘更亮
css
/* 凸起按钮 */
.button {
  box-shadow: 
    inset 0 1px 0 hsl(220, 80%, 70%), /* 亮顶部边缘 */
    0 1px 3px hsla(0, 0%, 0%, 0.2);    /* 下方阴影 */
}

/* 凹陷输入框 */
.input {
  box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 0.1);
}

Use Shadows to Convey Elevation

使用阴影传达层级

ElevationShadowUse for
Low
0 1px 3px rgba(0,0,0,0.12)
Buttons, cards
Medium
0 4px 6px rgba(0,0,0,0.1)
Dropdowns, popovers
High
0 15px 35px rgba(0,0,0,0.15)
Modals, dialogs
Define 5 shadow levels and stick to them.
层级阴影适用场景
低
0 1px 3px rgba(0,0,0,0.12)
按钮、卡片
中
0 4px 6px rgba(0,0,0,0.1)
下拉菜单、弹出框
高
0 15px 35px rgba(0,0,0,0.15)
模态框、对话框
定义5种阴影层级并坚持使用。

Shadows Can Have Two Parts

阴影可以包含两部分

Combine a large soft shadow (direct light) with a small tight shadow (ambient occlusion):
css
box-shadow: 
  0 4px 6px rgba(0, 0, 0, 0.07),   /* Large, soft */
  0 1px 3px rgba(0, 0, 0, 0.1);    /* Small, tight */
The tight shadow fades at higher elevations.
将大的软阴影（直射光）与小的硬阴影（环境光遮蔽）结合：
css
box-shadow: 
  0 4px 6px rgba(0, 0, 0, 0.07),   /* 大而软 */
  0 1px 3px rgba(0, 0, 0, 0.1);    /* 小而硬 */
层级越高，硬阴影越淡。

Flat Designs Can Have Depth

扁平化设计也可以有层次感

Without shadows:
  • Use lighter colors for raised elements
  • Use darker colors for inset elements
  • Use solid offset shadows (no blur) for flat aesthetic with depth
不使用阴影时：
  • 使用更浅的颜色表示凸起元素
  • 使用更深的颜色表示凹陷元素
  • 使用实心偏移阴影（无模糊）实现扁平化美学同时保留层次感

Overlap Elements to Create Layers

元素重叠创建图层

Let cards cross background boundaries. Overlap images with invisible borders to prevent clashing.
让卡片跨越背景边界。用不可见边框重叠图片，避免冲突。

7. Working with Images

7. 图片运用

Use Good Photos

使用优质图片

Bad photos ruin designs. Hire professionals or use quality stock (Unsplash, etc.). Don't use smartphone placeholders.
劣质图片会毁掉设计。聘请专业摄影师或使用优质图库（如Unsplash等）。不要使用手机拍摄的占位图。

Text on Images Needs Consistent Contrast

图片上的文本需要一致的对比度

When placing text over images:
  1. Add overlay: Semi-transparent black (for light text) or white (for dark text)
  2. Lower contrast: Reduce image contrast, adjust brightness
  3. Colorize: Desaturate + multiply blend with brand color
  4. Text shadow: Large blur radius, no offset (glow effect)
在图片上放置文本时：
  1. 添加遮罩层：半透明黑色（用于浅色文本）或白色（用于深色文本）
  2. 降低对比度：降低图片对比度，调整亮度
  3. 着色处理：去饱和 + 与品牌颜色相乘混合
  4. 文本阴影：大模糊半径，无偏移（发光效果）

Everything Has an Intended Size

所有元素都有其预期尺寸

  • Don't scale up icons designed for 16-24px—they look chunky
  • Don't scale down screenshots—details become illegible
  • Redraw logos for small sizes (favicons)
Wrap small icons in colored shapes to fill larger spaces:
html
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
  <svg class="w-6 h-6 text-blue-600"><!-- Icon --></svg>
</div>
  • 不要放大为16-24px设计的图标——它们会显得臃肿
  • 不要缩小截图——细节会变得难以辨认
  • 重新绘制小尺寸的Logo（如网站图标）
将小图标包裹在彩色形状中，填充更大的空间：
html
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
  <svg class="w-6 h-6 text-blue-600"><!-- 图标 --></svg>
</div>

User-Uploaded Content

用户上传内容

  • Force consistent aspect ratios with 
    object-fit: cover
  • Prevent background bleed with subtle inner shadows
  • Control dimensions with fixed containers
css
.user-image {
  object-fit: cover;
  aspect-ratio: 16/9;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
  • 使用
    object-fit: cover
    强制统一宽高比
  • 使用细微的内阴影防止背景溢出
  • 使用固定容器控制尺寸
css
.user-image {
  object-fit: cover;
  aspect-ratio: 16/9;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

8. Copywriting for UI

8. UI文案撰写

Clear interface text is as important as visual design. Poor copy creates confusion and increases cognitive load.
清晰的界面文案与视觉设计同样重要。糟糕的文案会造成困惑并增加认知负荷。

Be Concise

简洁明了

Remove unnecessary words. Every word should earn its place.
VerboseConcise
"Click here to submit your form""Submit"
"In order to continue, please...""To continue..."
"Are you sure you want to delete?""Delete this item?"
移除不必要的词汇。每个词汇都要有存在的价值。
冗长表述简洁表述
"点击此处提交表单""提交"
"为了继续，请...""要继续..."
"你确定要删除吗？""删除此项目？"

Use Sentence Case

使用句子大小写

Sentence case is easier to read than Title Case or ALL CAPS:
  • Good: "Create new account"
  • Avoid: "Create New Account"
  • Never: "CREATE NEW ACCOUNT"
句子大小写比标题大小写或全大写更易读：
  • 推荐："Create new account"（保持原英文，因为是UI文案示例）
  • 避免："Create New Account"
  • 绝不："CREATE NEW ACCOUNT"

Front-Load Text

前置关键信息

Put the most important information first. Users scan—don't bury key info.
Back-loadedFront-loaded
"To reset your password, click here""Reset password"
"If you need help, contact support""Contact support for help"
把最重要的信息放在前面。用户会快速扫描——不要隐藏关键信息。
后置关键信息前置关键信息
"要重置密码，请点击此处""重置密码"
"如果你需要帮助，请联系支持人员""联系支持人员获取帮助"

Use Plain Language

使用平实语言

Write at an 8th-grade reading level. Avoid jargon and technical terms.
ComplexSimple
"Authenticate your credentials""Sign in"
"Terminate session""Log out"
"Insufficient permissions""You don't have access"
以8年级阅读水平撰写。避免行话和技术术语。
复杂表述简单表述
"Authenticate your credentials""登录"
"Terminate session""登出"
"Insufficient permissions""你没有访问权限"

Write Clear Error Messages

撰写清晰的错误消息

Good error messages:
  1. Explain what happened (not just "Error")
  2. Suggest how to fix it (actionable guidance)
  3. Use human language (not error codes)
BadGood
"Error 403""You don't have permission to view this page"
"Invalid input""Please enter a valid email address"
"Request failed""Couldn't save changes. Check your connection and try again"
优质错误消息：
  1. 解释发生了什么（不只是“错误”）
  2. 建议解决方法（可操作的指导）
  3. 使用人类语言（不要用错误代码）
糟糕示例优质示例
"Error 403""你没有权限查看此页面"
"Invalid input""请输入有效的电子邮件地址"
"Request failed""无法保存更改。请检查网络连接后重试"

Consistent Vocabulary

词汇保持一致

Use the same words for the same concepts throughout:
  • Pick "Sign in" or "Log in"—not both
  • Pick "Settings" or "Preferences"—not both
  • Pick "Delete" or "Remove"—not both
对相同概念始终使用相同词汇：
  • 选择“Sign in”或“Log in”——不要同时使用
  • 选择“Settings”或“Preferences”——不要同时使用
  • 选择“Delete”或“Remove”——不要同时使用

Button Labels

按钮标签

Use action verbs that describe what happens:
VagueSpecific
"OK""Save changes"
"Submit""Create account"
"Yes""Delete message"
使用描述操作结果的动作动词：
模糊标签具体标签
"OK""保存更改"
"Submit""创建账户"
"Yes""删除消息"

9. Forms and Buttons

9. 表单与按钮

Button Weights

按钮权重

Define three distinct button styles based on importance:
WeightStyleUse For
PrimarySolid, high contrast, brand colorMain action (one per screen)
SecondaryOutline or muted fillAlternative actions
TertiaryText-only, link styleLeast important actions
根据重要性定义三种不同的按钮样式：
权重样式适用场景
主要实心、高对比度、品牌色核心操作（每页一个）
次要轮廓或低饱和度填充替代操作
三级纯文本、链接样式最不重要的操作

Form Field Best Practices

表单字段最佳实践

  1. Use conventional styles—don't reinvent form fields
  2. Visible borders—minimum 3:1 contrast ratio
  3. Clear focus states—visible keyboard focus indicators
  4. Inline validation—show errors as users type, not only on submit
  5. Helpful placeholders—example input, not labels
  1. 使用常规样式——不要重新发明表单字段
  2. 可见边框——最小3:1对比度
  3. 清晰的焦点状态——可见的键盘焦点指示器
  4. 实时验证——用户输入时显示错误，而非仅在提交时
  5. 有用的占位符——示例输入，而非标签

Form Layout

表单布局

  • One column for most forms (faster to complete)
  • Group related fields with clear visual separation
  • Labels above inputs (faster scanning than left-aligned labels)
  • Required field indicators—mark optional fields, not required ones
  • 大多数表单使用单列布局（填写速度更快）
  • 分组相关字段，并使用清晰的视觉分隔
  • 标签放在输入框上方（比左对齐标签扫描速度更快）
  • 必填字段指示——标记可选字段，而非必填字段

Avoid Disabled Buttons

避免使用禁用按钮

Disabled buttons create confusion. Instead:
  • Hide buttons until they're usable
  • Show buttons but explain why action isn't available
  • Use inline validation to guide users
css
/* If you must use disabled buttons */
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
禁用按钮会造成困惑。替代方案：
  • 直到按钮可用时再显示
  • 显示按钮，但解释为何无法执行操作
  • 使用实时验证引导用户
css
/* 如果你必须使用禁用按钮 */
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

10. Finishing Touches

10. 收尾优化

Supercharge the Defaults

优化默认样式

DefaultUpgrade
Bullet pointsCustom icons (checkmarks, locks, stars)
Quote marksLarge, colored quote symbols
LinksBold, custom underline overlapping text
CheckboxesBrand-colored custom controls
默认样式升级样式
项目符号自定义图标（对勾、锁、星星）
引号大尺寸、彩色的引号符号
链接粗体、与文本重叠的自定义下划线
复选框品牌色的自定义控件

Add Color with Accent Borders

用强调色边框增添色彩

A 4px colored border adds polish without design skills:
css
/* Top of cards */
.card { border-top: 4px solid var(--primary-500); }

/* Side of alerts */
.alert { border-left: 4px solid var(--warning-500); }

/* Under headlines */
.headline::after { 
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary-500);
  margin-top: 12px;
}
4px的彩色边框无需设计技巧即可增添精致感：
css
/* 卡片顶部 */
.card { border-top: 4px solid var(--primary-500); }

/* 提示框侧边 */
.alert { border-left: 4px solid var(--warning-500); }

/* 标题下方 */
.headline::after { 
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary-500);
  margin-top: 12px;
}

Decorate Backgrounds

装饰背景

Break monotony with:
  • Subtle background color changes between sections
  • Gradients (keep hues within 30° of each other)
  • Low-contrast repeating patterns
  • Simple geometric shapes or illustrations
通过以下方式打破单调：
  • 各部分之间使用细微的背景色变化
  • 渐变（保持色相在30°以内）
  • 低对比度的重复图案
  • 简单的几何形状或插图

Don't Overlook Empty States

不要忽略空状态

Empty states are first impressions. Include:
  • Illustrations or icons
  • Clear call-to-action
  • Hide filters/tabs until content exists
空状态是第一印象。空状态应包含：
  • 插图或图标
  • 清晰的行动号召
  • 有内容前隐藏筛选器/标签页

Use Fewer Borders

减少边框使用

Instead of borders for separation:
AlternativeWhen to Use
Box shadowsOutline elements on same-color backgrounds
Different background colorsAdjacent sections
Extra spacingGroup separation
替代边框进行分隔的方式：
替代方案使用场景
盒阴影同色背景上的元素轮廓
不同背景色相邻区域
额外间距组之间的分隔

Think Outside the Box

跳出思维定式

Challenge assumptions about component design:
  • Dropdowns can have multiple columns, icons, and descriptions
  • Tables can combine columns and add hierarchy
  • Radio buttons can be selectable cards
  • Forms can use creative layouts
挑战组件设计的常规假设：
  • 下拉菜单可以有多列、图标和描述
  • 表格可以合并列并增加层级
  • 单选按钮可以设计为可选择的卡片
  • 表单可以使用创意布局

11. Leveling Up

11. 提升技能

Look for Decisions You Wouldn't Have Made

留意你不会做出的决策

Study designs you admire. Notice unconventional choices:
  • Inverted datepicker colors
  • Buttons inside inputs
  • Two-color headlines
研究你欣赏的设计。注意非常规选择：
  • 反转颜色的日期选择器
  • 输入框内的按钮
  • 双色标题

Rebuild Favorite Interfaces

重建你喜欢的界面

Recreate designs from scratch without inspecting code. Discovering why your version differs teaches lasting lessons.
从零开始重新创建设计，不要查看代码。发现你的版本与原设计的差异，能学到持久的经验。

Quick Reference: System Recommendations

快速参考：系统建议

Spacing Scale

间距比例

css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;
css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;

Type Scale

排版比例

css
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
--text-6xl: 60px;
css
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
--text-6xl: 60px;

Shadow Scale

阴影比例

css
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
css
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

Border Radius Scale

圆角比例

css
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-full: 9999px;
css
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-full: 9999px;

Interaction States

交互状态

Every interactive element needs clear state feedback:
css
/* Button states example */
.button {
  background: var(--primary-500);
  transition: all 0.15s ease;
}
.button:hover {
  background: var(--primary-600);
}
.button:active {
  background: var(--primary-700);
  transform: translateY(1px);
}
.button:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
每个交互元素都需要清晰的状态反馈：
css
/* 按钮状态示例 */
.button {
  background: var(--primary-500);
  transition: all 0.15s ease;
}
.button:hover {
  background: var(--primary-600);
}
.button:active {
  background: var(--primary-700);
  transform: translateY(1px);
}
.button:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

WCAG 2.1 AA Checklist

WCAG 2.1 AA检查清单

RequirementTarget
Text contrast (small)4.5:1 minimum
Text contrast (large)3:1 minimum
UI component contrast3:1 minimum
Focus indicatorsVisible, 3:1 contrast
Touch targets44×44px minimum
Color independenceNever color alone
Text resizeWorks at 200% zoom
For deeper learning, study the source materials: Refactoring UI and Practical UI
要求目标值
小文本对比度最小4.5:1
大文本对比度最小3:1
UI组件对比度最小3:1
焦点指示器可见，对比度3:1
触摸目标最小44×44px
颜色独立性绝不能仅依赖颜色
文本缩放200%缩放时正常显示
如需深入学习，请研究原始资料：Refactoring UI 和 Practical UI