distill

消除设计中不必要的复杂性，呈现核心要素，通过彻底简化让设计清晰明了。

必须完成的准备工作

调用 /impeccable — 其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议——如果尚无设计上下文，必须先运行 /impeccable teach。

---

评估当前状态

分析设计显得复杂或杂乱的原因：

1. 识别复杂性来源：

   • 元素过多：按钮彼此争抢注意力、信息冗余、视觉杂乱
   • 变化过多：颜色、字体、字号和样式太多，且没有明确目的
   • 信息过载：所有内容同时呈现，没有渐进式展示
   • 视觉噪声：不必要的边框、阴影、背景和装饰
   • 层级混乱：重点不明确
   • 功能膨胀：选项、操作或后续路径过多

2. 找出核心：

   • 用户的主要目标是什么？（只能有一个）
   • 哪些是真正必要的，哪些只是锦上添花？
   • 哪些内容可以移除、隐藏或合并？
   • 哪 20% 的内容能带来 80% 的价值？

如果无法从代码库中弄清其中任何一点，请直接询问用户，澄清你无法推断的内容。

至关重要：简化不是移除功能，而是消除用户实现目标过程中的障碍。每个元素都必须证明其存在的必要性。

制定简化计划

制定彻底的精简策略：

• 核心目的：这应该完成的唯一一件事是什么？
• 必要元素：实现这一目的真正需要哪些内容？
• 渐进式展示：哪些内容可以等到需要时再显示？
• 整合机会：哪些内容可以合并或整合？

重要：简化很难。要为出色的执行留出空间，就必须舍弃不错的想法。务必果断。

简化设计

从以下维度系统地消除复杂性：

信息架构

• 缩小范围：移除次要操作、可选功能和冗余信息
• 渐进式展示：通过清晰的入口隐藏复杂内容（折叠面板、模态框、分步流程）
• 合并相关操作：合并相似按钮、整合表单、归拢相关内容
• 明确层级：设置一个主要操作、少量次要操作，其余内容作为第三级操作或隐藏
• 移除冗余：如果其他地方已经说过，这里就不要重复

视觉简化

• 精简配色方案：使用 1–2 种颜色加中性色，而不是 5–7 种颜色
• 限制字体样式：最多使用一种字体系列、3–4 种字号和 2–3 种字重
• 移除装饰：消除对层级或功能没有帮助的边框、阴影和背景
• 扁平化结构：减少嵌套，移除不必要的容器——卡片中绝不嵌套卡片
• 移除不必要的卡片：基础布局不需要卡片；改用间距和对齐
• 统一间距：采用统一的间距比例，去掉任意设置的间隔

布局简化

• 线性流程：尽可能用简单的纵向布局替代复杂网格
• 移除侧边栏：将次要内容移至主内容流中，或将其隐藏
• 充分利用宽度：充分使用可用空间，避免复杂的多栏布局
• 统一对齐方式：选择左对齐或居中对齐，并保持一致
• 留出充足的留白：让内容有呼吸空间，不要把所有内容挤在一起

交互简化

• 减少选择：减少按钮和选项，明确后续路径（选择悖论确实存在）
• 设置智能默认值：自动处理常见选择，只在必要时询问
• 行内操作：尽可能用行内编辑替代模态流程
• 减少步骤：注册能否从三步简化为一步？结账流程能否简化？
• 明确行动号召：只提供一个明确的下一步，不要让五种操作彼此争抢注意力

精简内容

• 缩短文案：把每句话缩短一半，再缩短一半
• 使用主动语态：写“保存更改”，而不是“更改将被保存”
• 去除术语：始终使用通俗易懂的语言
• 结构清晰，便于浏览：段落简短，使用项目符号和清晰的标题
• 只保留必要信息：删除营销套话、法律术语和模棱两可的表述
• 删除重复内容：标题不要重复引言，不要反复解释，同一件事只说一次

精简代码

• 删除未使用的代码：清理无用的 CSS、未使用的组件和孤立文件
• 扁平化组件树：减少嵌套层级
• 整合样式：合并相似样式，统一使用实用类
• 减少变体：组件真的需要 12 种变体吗？还是 3 种就能满足 90% 的场景？

切勿：

• 删除必要功能（简单不等于没有功能）
• 为了简洁而牺牲无障碍性（仍需清晰的标签和 ARIA）
• 把内容简化到难以理解（神秘不等于极简）
• 删除用户做决策所需的信息
• 完全取消层级（有些内容就该突出显示）
• 过度简化复杂领域（复杂程度应与实际任务相匹配）

验证精简效果

确保精简后更易于使用：

• 更快完成任务：用户能更快实现目标吗？
• 降低认知负担：用户更容易理解该做什么吗？
• 内容仍然完整：用户仍能使用所有必要功能吗？
• 层级更清晰：用户能一眼看出哪些内容最重要吗？
• 性能更好：更简单的设计加载得更快吗？

记录删减的复杂性

如果删除了功能或选项：

• 说明删除原因
• 考虑是否需要提供其他访问方式
• 记录需要持续关注的用户反馈

请记住：你有出色的品味和判断力。精简是一种自信的表现——知道应该保留什么，也有勇气删除其余部分。正如 Antoine de Saint-Exupéry 所说：“完美并非无可添加，而是无可删减。”