设计：功能优先，毫无赘余
立场
好的设计是用户与目标之间最短的诚实路径。形式与功能相辅相成，在最好的作品中，二者融为一体。形式服从功能（Sullivan）；少，但是更好（Rams）。
优先级规则：当形式与功能冲突时，功能永远获胜。 美感由清晰度、比例和适配性赢得，而非以可用性、速度、可访问性或诚实性为代价换取。毫无赘余，毫无轻浮：每个元素都必须通过其承担的职责来证明其存在的合理性。
安静并非平淡。目标是设计在使用中消失（Rams 的“中性工具”，Morrison 和 Fukasawa 的“超常规”，Muji 的“空”），而非自我宣扬的设计。
决策流程
对每个元素、功能、样式选择或动画执行以下步骤：
- 这个元素服务于谁的任务？ 用一句话说明用户和目标。如果说不出来，停下来弄清楚。
- 这个元素的职责是什么？（告知、启用操作、分组、引导、提供反馈、建立信任、辅助识别）。没有职责：删除它。
- 能否将其移除、合并或推迟？ 尝试移除它。如果没有损失，则保持移除。如果失去了一项内容，则询问是否有更简单的元素可以承载它。
- 它是否会损害任何任务？ 检查速度、清晰度、错误率、可访问性、加载、注意力。对功能造成任何可衡量的损害，无论其外观多好，功能都会胜出。
- 最简单的版本是否诚实且完整？ 除非有功能上的理由偏离，否则优先使用传统模式（Jakob 定律）。
- 然后完善形式： 对齐、间距、节奏、层级、一致性。在此阶段的细致是彻底（Rams #8），而非装饰。
当两个选项功能相同时，选择部件更少、状态更少、文字更少的那个。
原理与实践
归属在 references.md 中。此处是意译，非直接引用。
| 原理 | 实践 |
|---|---|
| Rams：有用 | 删除任何不服务于任务的内容。功能、颜色、边框、图标、文案。 |
| Rams：易懂 | 界面自我解释。标签优于神秘图标；状态可见；无需手册。 |
| Rams：不引人注目 | 边框后退，内容领先。中性基础色调，一种主色调用于主要操作。 |
| Rams：诚实 | 没有虚假紧迫感、虚假进度、夸大声明或假装的控制。加载显示真实状态。 |
| Rams：持久 | 避免趋势性风格（玻璃、无故渐变、新颖布局）。使用耐用的字体、网格和标记。 |
| Rams：彻底 | 边缘情况、空/错误/加载状态、长字符串和小细节都是设计的一部分。 |
| Rams：尽可能少的设计 | 减少至本质，然后检查本质是否正确。 |
| Hick 定律 | 更少、分组的选项。每个视图一个主要操作；其余部分渐进式披露。 |
| Fitts 定律 | 频繁和主要的操作目标大且靠近指针/拇指当前所在位置。最小约 44px 触摸目标（WCAG 2.2 建议 CSS 下限 24px）。 |
| Jakob 定律 | 使用熟悉的模式（导航位置、表单行为、图标）。新颖性需要功能回报。 |
| Miller 定律 / 分块 | 不要依赖数 7 个项目；将信息组织成有意义的块，并保持工作集小。 |
| 认知负荷 | 仅显示当前需要的内容。不要让用户跨屏幕记忆；向前传递上下文。 |
| Doherty 阈值 | 在约 400ms 内响应。超过此时间，显示即时反馈、骨架屏或乐观更新；绝不要静默阻塞。 |
| Tesler 定律 | 复杂性是守恒的。将其吸收在系统（默认值、推断、自动化）中，而不是用户端，除非暴露复杂性本身就是目的。 |
| Postel 定律 | 接受多样化的输入（空格、格式、大小写）；输出一致、严格。温和验证，精确解释。 |
| 格式塔：接近性、共同区域、相似性、连通性 | 在边框之前先通过间距分组，边框先于盒子。间距是最便宜的结构。相似的功能，相似的外观。 |
| 审美-可用性效应 | 抛光让事物感觉更容易并购买容忍度，但它可能掩盖真正的可用性缺陷。用真实任务测试；绝不要将其作为发布有缺陷流程的理由。 |
| Von Restorff | 让一个重要的东西与众不同。如果所有内容都被强调，则一无所获。 |
| 序列位置效应、峰终定律 | 将关键项目放在列表和流程的首/末位；使最后一步和错误时刻考虑周全。 |
| Zeigarnik 效应、目标梯度效应 | 在多步骤任务中显示进度并保存部分工作。 |
| Tufte：数据-墨水比 | 在图表和表格中，每个标记都应承载数据。移除图表垃圾、粗网格线、3D、冗余图例；直接标注。 |
| Norman：示能、意符、反馈 | 控件看起来可操作；每个动作获得可见确认；将控件映射到效果；使错误可恢复。 |
| Vignelli / Müller-Brockmann | 一个网格、一个微小的字体比例、少量字体、一致的间距。约束创造一致性。 |
| Munari / Aicher | 用最少的手段解决问题；系统优于一次性；重用组件而非发明。 |
| Krug | 不要让用户思考。假设扫描而非阅读。明显胜于巧妙。 |
| Wroblewski | 表单：更少的字段、顶部对齐标签、内联验证、合理的默认值。移动优先迫使优先级排序。 |
| Frost（原子设计） | 使用标记从小的可重用部分构建；一致性来自系统，而非警惕。 |
| Tognazzini | 使状态可见、保护用户工作、保持交互可逆、支持直接操作、保持键盘路径。 |
| Ive / Rams 工艺 | 解决细节，直到对象看起来不可避免。材料诚实优于装饰。 |
审查清单
功能
- 主要任务可快速完成，主要操作明确无误。
- 每个元素都有一个可命名的职责；没有装饰性元素。
- 每个交互元素都有悬停/焦点/激活/禁用/加载/错误状态。
- 空、错误、离线、缓慢和长内容情况已设计。
- 操作可逆或与风险成比例地确认。
- 文案简洁、具体、以行动为导向；错误说明发生了什么以及如何修复。
- 使用熟悉的模式，除非有功能上的理由破例。
形式（仅在功能通过后）
- 清晰的层级：每个视图一个焦点；通过模糊测试。
- 一致的网格、间距比例和字体比例；少量字体和字重。
- 颜色有限、有目的，且绝不是意义的唯一载体。
- 对齐和节奏精确；没有“差不多”对齐的情况。
诚实度和持久性
- 没有黑暗模式、虚假稀缺性或误导性示能。
- 没有任何东西依赖于一时流行趋势。
反模式
- 装饰：装饰性渐变、阴影、插图、每个标签旁的图标、围绕一切的边框、降低对比度的背景。
- 无端动画：延迟任务的动画、为吸引注意而循环的动画或视差动画。动效必须解释变化（来源、层级、状态），且 UI 反馈保持在约 200 到 300ms 以下。尊重
prefers-reduced-motion。 - 黑暗模式：确认羞耻、隐藏费用、预勾选的订阅、伪装的广告、黄鼠狼式退出、唠叨、虚假倒计时、对同等后果的接受/拒绝使用不对称按钮。
- 神秘肉：没有标签或工具提示的纯图标控件、没有可见替代方案的纯手势操作。
- 选择倾倒：用设置和选项取代好的默认值。
- 重新发明：自定义滚动条、非标准表单控件、为创新而创新的导航。
- 强调膨胀：所有内容都加粗、着色或加徽章。
- 样式先于内容：在内容存在之前设计容器；使用 Lorem Ipsum 审批。
- 用极简主义隐藏：移除标签、示能或状态以求干净。极简意味着必要，而非缺失。
- 展示优先：作品集截图看起来不错，但空状态和错误状态是空白的。
基线（不可协商）
可访问性（WCAG 2.2 AA 最低标准）
- 文本对比度 4.5:1（大字文本和 UI 边界/图标为 3:1）。
- 完整的键盘操作、逻辑焦点顺序、可见的焦点指示器。
- 语义 HTML 优先；ARIA 仅用于填补空白。所有输入都有标签；有意义的图像有 alt 文本。
- 绝不仅仅通过颜色传达意义。支持缩放到 200% 和文本大小调整而不丢失内容。
- 尊重
prefers-reduced-motion和prefers-color-scheme。无每秒闪烁超过 3 次的内容。 - 目标至少 24x24 CSS 像素，触摸目标争取 44x44。
响应式
- 内容优先、移动优先设计；布局适应内容，断点设置在内容断裂处，而非设备名称处。
- 在 320px 宽度下无水平滚动。使用相对单位、流体排版、
min()/clamp()。 - 正文字体至少约 16px，行长约 45 到 75 个字符，行高约 1.4 到 1.6。
- 触摸和指针都适用；悬停绝不是唯一路径。
性能即设计
- 快速是一个特性：精简的素材、无布局偏移、系统字体或少量 Web 字体、增强功能前显示有意义的内容。
何时形式可以主导（少数例外）
形式仅在服务于功能时才能领先。每种使用必须说明所服务功能：
- 识别：帮助人们识别和信任产品的品牌标志、颜色或一致的视觉签名。
- 信任和可信度：专业抛光，其缺失会预示风险（支付、健康、安全）。
- 可读性和扫描性：为方便阅读和寻找而选择的字体比例、空白和对比度。
- 与任务的情感契合：根据上下文匹配语气（医学冷静，儿童学习趣味），当情绪影响完成或舒适度时。
- 有目的的愉悦感：单个、短暂、可跳过、确认成功或教授一个机制的时刻（绝不要在频繁或阻塞路径上）。
- 艺术指导上下文：编辑、营销、游戏和作品集，其中体验本身就是产品。即使在这些情况下，导航、阅读和购买路径仍需保持功能优先。
如果无法将例外表述为“这有助于用户做 X”，则它就不是例外。
工作方法
- 用 2 到 3 句话描述用户、任务和约束条件。
- 内容和结构优先（信息层级、流程），视觉效果最后。
- 使用真实内容、真实数据量和真实边缘情况。
- 从最朴素的传统解决方案开始；仅添加测试或明确需求所证明的内容。
- 使用清单审查；先删除后添加。
- 在报告设计决策时，说明它服务什么功能，并明确说明是否因为损害功能而拒绝了某个令人喜爱的选项。