ui-design-patterns

UI 设计模式

来源：https://github.com/dirnbauer/webconsulting-skills

无需依赖平面设计天赋，也能打造精致、专业用户界面的实用指南。这些模式适用于任何 Web 项目，包括 TYPO3 前端开发。

致谢

这些模式改编自两份优秀的资源：

• Refactoring UI，作者 Adam Wathan 和 Steve Schoger——面向开发者的实用 UI 设计权威指南
• Practical UI（第 2 版），作者 Adham Dannaway——简明实用的 UI 设计指南，帮助打造直观、易访问且美观的界面

我们强烈推荐这两部作品，助你深入了解 UI 设计。

---

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

在深入了解具体模式之前，请先牢记以下基础原则：

尽量降低可用性风险

根据风险评估制定设计决策——也就是评估用户使用界面时可能遇到困难的风险：

• 浅灰色文本看起来可能很简洁，但会带来可读性问题
• 没有标签的图标可能让人无法理解其含义
• 彩色标题可能会被误认为是链接

务必考虑： 视力不佳、电脑使用能力较弱、灵活性受限以及存在认知差异的人群。

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

每个 UI 元素都应有其理由。“看起来不错”不是有建设性的反馈。应能够说明每项设计决策的理由。

元素	合理依据
左对齐文本	边缘整齐，提高可读性
描述性标题	便于快速浏览，也适用于屏幕阅读器
蓝色下划线链接	表示可交互，方便色盲用户识别
分组间距	相关项彼此更近，可减轻认知负担

尽量降低交互成本

交互成本 = 完成任务所需的体力和脑力。可通过以下方式降低成本：

1. 让相关操作彼此靠近（Fitts 定律——目标越近、越大，点击越快）
2. 减少干扰（避免使用吸引注意力、让人分心的元素）
3. 采用渐进式披露（只在需要时呈现复杂信息）

尽量减轻认知负担

认知负担是使用界面所需的脑力。可通过以下方式减轻：

• 将信息拆分成更小、更易消化的部分
• 使用人们已经熟悉的模式
• 移除不必要的元素和选择
• 在视觉上对相关项进行分组

优先建立设计系统

在开始设计前，先创建一套可复用的指南：

• 包含使用规则的调色板
• 字体排版比例
• 间距系统
• 组件模式
• 交互状态

这样可以确保一致性，并加快决策速度。

无障碍访问不容妥协

至少达到 WCAG 2.1 AA 级：

要求	最低比例
小号文本（低于大号文本阈值）	对比度 4.5:1
大号文本（24px+/18pt 常规或 18.66px+/14pt 粗体）	对比度 3:1
UI 元素（边框、图标）	对比度 3:1

切勿仅依赖颜色——务必搭配图标、图案或文本，方便色盲用户识别。

使用常见设计模式

根据雅各布定律，应沿用人们已经熟悉的模式：

• 常规表单字段（而非自定义或陌生样式）
• 标准导航模式
• 符合预期的图标含义
• 熟悉的按钮行为

把创意留给产品独特的价值主张，而不是基本的 UI 惯例。

80/20 法则

大约 80% 的用户只会使用 20% 的功能。应优先优化常见操作路径：

• 优化高频任务，而非边缘情况
• 将设计精力集中在影响最大的地方
• 不要过度设计很少使用的功能

---

1. 从零开始

从功能开始，而不是从布局开始

不要一开始就设计框架（导航、侧边栏、页脚），而要从实际功能入手。

错误做法：

• “应该用顶部导航还是侧边栏？”
• “Logo 应该放在哪里？”

正确做法：

• 先设计核心功能（搜索表单、产品卡片、用户资料）
• 随着功能设计，导航结构自然会显现

细节可以稍后再说

在早期阶段，先忽略字体、阴影和图标。使用粗记号笔或低保真线框图，快速探索布局。

暂缓使用颜色

先用灰度进行设计。这会促使你通过间距、对比度和尺寸来建立层级。之后再用颜色锦上添花。

分阶段迭代

1. 为下一个功能设计一个简单版本
2. 实现它
3. 在可运行的设计基础上迭代
4. 开始下一个功能

保持务实

先设计最小可用版本。不要设计目前还无法实现的功能——先发布可用的内容。

---

2. 层级决定一切

并非所有元素都同等重要

视觉层级能让界面显得“经过设计”。当所有元素都争夺注意力时，就没有任何元素能脱颖而出。

关键： 有意识地弱化次要和第三层信息，同时突出最重要的内容。

不只是尺寸

不要只依靠字号来建立层级。还可以使用：

技巧	效果
字重	强调时使用 600-700，常规时使用 400-500
颜色对比度	主要内容用深色，次要内容用灰色，第三层内容用浅灰色
间距	为重要元素留出更多空间

文本颜色指南：

• 主要内容：深色（例如，slate-900）
• 次要内容：中灰色（例如，slate-600）
• 第三层内容：浅灰色（例如，slate-400）

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

彩色背景上的灰色文本会显得黯淡。应选择与背景色相同色相的颜色，并调整饱和度和明度。

/* 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 */

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

如果主要元素不够突出，不要让它更醒目——而要让与之竞争的元素更低调。

/* Instead of making active nav item bolder... */
/* ...make inactive items softer */
.nav-item { color: var(--slate-400); }
.nav-item.active { color: var(--slate-900); }

标签应是最后的选择

结合上下文往往就不需要标签：

不要这样	使用
“Email：[email protected]”	[email protected]（格式一目了然）
“In stock：12”	“库存剩余 12 件”
“Bedrooms：3”	“3 间卧室”

必要时使用标签，也要弱化它们——数据才是重点。

平衡字重与对比度

厚重的元素（图标、粗体文本）可以通过柔和的颜色来弱化。轻盈的元素（细边框）则可以通过增加字重来突出。

/* 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 */

按钮层级

根据层级而非仅凭语义来设计按钮：

类型	样式	用途
主要	实心、高对比度	页面上的主要操作
次要	描边或较低对比度	不太重要的操作
第三层	链接样式	很少使用的操作

破坏性操作不一定要用红色和粗体。如果“删除”不是主要操作，就将其设计为次要或第三层操作，然后在确认弹窗中使用红色粗体样式。

---

3. 布局与间距

先留出过多的空白

一开始留出宽裕的空间，再逐步缩小，直到满意为止。这样可以确保元素有足够的呼吸空间。

建立间距系统

使用有明确间隔的有限刻度（数值间约相差 25%）：

4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px

以 16px 为基准（浏览器默认字号，且便于整除）。

不必填满整个屏幕

如果内容只需要 600px，就不要把它拉伸到 1200px。边缘多留些空间总不会有坏处。

缩小画布

优先为移动端设计，往往能发现更好的解决方案。从约 400px 的宽度开始，再逐步扩展。

网格并非万能

并非所有元素都应该自适应。侧边栏、图标和头像通常固定尺寸效果更好，而主要内容则可以灵活伸缩。

/* Better than percentage-based sidebar */
.sidebar { width: 280px; flex-shrink: 0; }
.main { flex: 1; min-width: 0; }

相对尺寸无法适应不同屏幕

标题不应在不同屏幕尺寸下始终与正文文本保持比例。移动端上，大型元素应比小型元素缩小得更快。

/* Desktop: 45px headline, 18px body (2.5x ratio) */
/* Mobile: 24px headline, 14px body (1.7x ratio) */

避免间距含义模糊

如果一组元素之间没有可见的分隔符，那么组与组之间的间距必须大于组内元素之间的间距。

/* Form labels should be closer to their inputs than to previous inputs */
.form-group { margin-bottom: 24px; }
.form-label { margin-bottom: 8px; }

---

详细参考

如果任务需要详细示例、较长的模板、故障排查矩阵、附录或上文未包含的章节，请阅读完整指南。对于范围较窄的任务，请勿加载此文件，以便技能遵循渐进式披露。