interface-design

界面设计

以精湛工艺和一致性构建界面。

适用范围

适用于： 仪表板、管理面板、SaaS 应用、工具、设置页面、数据界面。

不适用于： 落地页、营销网站、营销活动页面。请将这些需求转至 /frontend-design。

---

问题所在

你生成的内容会很普通。你的训练数据中有成千上万个仪表板。这些模式根深蒂固。

你可以遵循下面的整个流程——探索领域、确定标志性特色、阐明意图——最终仍然做出一个模板。冷冰冰的结构搭配暖色。普通布局搭配友好的字体。所谓的“厨房氛围”，看起来却和其他应用如出一辙。

这是因为意图存在于文字中，而代码生成会调用模式。两者之间的落差，正是默认做法占上风的地方。

下面的流程会有所帮助。但仅有流程并不能保证精湛设计。你必须及时发现自己陷入了惯性。

---

默认做法藏在哪里

默认做法不会主动显露。它们伪装成基础设施——那些看似只要能用就行、不需要设计的部分。

排版看起来像个容器。 选一种易读的字体，然后继续。但排版不是承载设计的东西——它就是设计本身。标题的字重、标签的个性、段落的质感。在任何人读到文字之前，这些就决定了产品给人的感觉。烘焙店管理工具和交易终端或许都需要“简洁易读的字体”，但温暖、手作感的字体，和冷静、精准的字体并不是一回事。如果你又选了平时常用的字体，那就不是在做设计。

导航看起来像脚手架。 搭建侧边栏，添加链接，然后开始真正的工作。但导航不是环绕在产品外的东西——它就是产品本身。你身处何处、可以前往何处、什么最重要。漂浮在空中的页面只是组件演示，不是软件。导航教会人们如何理解他们所处的空间。

数据看起来像展示内容。 你有数字，就把数字展示出来。但屏幕上的数字并不等于设计。真正的问题是：这个数字对正在查看它的人意味着什么？他们会据此采取什么行动？进度环和堆叠标签都能展示“10 项中的 3 项”——前者讲述了一个故事，后者只是填充空间。如果你又用了“数字加标签”的老套路，那就不是在做设计。

设计令牌的名称看起来像实现细节。 但 CSS 变量也是设计决策。--ink 和 --parchment 会唤起一个世界。--gray-700 和 --surface-2 则让人想到一个模板。只看你的令牌，读者就应该能猜出这是哪种产品。

陷阱在于认为有些决策是创意性的，而另一些是结构性的。没有什么结构性决策，一切都是设计。当你不再追问“为什么要这样？”的那一刻，默认做法就会接管一切。

---

从意图出发

动手写代码前，先回答这些问题。不要只在心里想——要大声说出来，对自己说，或告诉用户。

这个人是谁？
不要说“用户”，而要说具体的人。他们打开界面时身在何处？在想什么？5 分钟前做了什么，5 分钟后又要做什么？早上 7 点喝着咖啡的教师、午夜调试问题的开发者，以及奔波于投资者会议之间的创始人，彼此都不一样。他们的生活会塑造界面。

他们必须完成什么？
不要说“使用仪表板”，而要用具体的动词。批改这些作业。找到故障的部署。批准这笔付款。答案决定了什么内容应当优先展示、接下来展示什么、哪些内容应当隐藏。

界面应该给人什么感觉？
用有实际意义的词语描述。“简洁现代”毫无意义——每个 AI 都会这么说。像笔记本一样温暖？像终端一样冷峻？像交易大厅一样密集？像阅读应用一样平和？答案会影响颜色、字体、间距、信息密度——一切。

如果你无法具体回答这些问题，就先停下来问用户。不要猜，也不要套用默认做法。

每个选择都必须是经过选择的

每个决定，你都必须能够解释原因。

• 为什么选这种布局，而不是另一种？
• 为什么选这种色温？
• 为什么选这种字体？
• 为什么选这种间距比例？
• 为什么选这种信息层级？

如果你的答案是“很常见”“很简洁”或“能用”，那你就没有做出选择，而是默认了。默认设置不易察觉。不易察觉的选择层层叠加，最终就会产出千篇一律的设计。

**检验方法：**如果你把自己的选择换成最常见的替代方案，设计却没有明显变化，那你就从未真正做出选择。

千篇一律就是失败

如果另一个 AI 得到类似的提示词，也会产出大致相同的结果，那你就失败了。

这不是为了标新立异而标新立异，而是要让界面从特定问题、特定用户和特定情境中自然生发。当你从意图出发设计时，千篇一律就不可能发生，因为没有两种意图完全相同。

当你依赖默认设置时，一切看起来都一样，因为大家用的都是相同的默认设置。

意图必须贯穿整个系统

嘴上说“温暖”，却使用冷色调，这不算贯彻意图。意图不是标签，而是塑造每个决定的约束。

如果意图是温暖的：表面、文本、边框、强调色、语义色和字体，都要是温暖的。如果意图是紧凑的：间距、字号和信息架构，都要紧凑。如果意图是平静的：动效、对比度和色彩饱和度，都要平和。

对照你声明的意图检查产出。每个设计令牌都在强化意图吗？还是你声明了意图，最后却依然选择了默认设置？

---

探索产品领域

这里最容易暴露默认设置——也可能不会。

通用产出：任务类型 → 视觉模板 → 主题 精心打造的产出：任务类型 → 产品领域 → 标志性元素 → 结构 + 表达

区别在于：开始思考视觉或结构之前，是否先深入了解产品的世界。

必需产出

在完成以下四项之前，不要提出任何方向：

**领域：**来自这个产品世界的概念、隐喻和词汇。不是功能，而是领域本身。至少列出 5 项。

**色彩世界：**这个产品领域中自然存在什么颜色？不要只说“暖色”或“冷色”，要深入真实的场景。如果这个产品是一个实体空间，你会看到什么？有哪些颜色属于这里，却不属于别处？列出 5 种以上。

**标志性元素：**一个只有这个产品才可能拥有的视觉、结构或交互元素。如果你说不出一个，就继续探索。

**默认设置：**这种界面类型中 3 个显而易见的选择——视觉和结构方面都要有。你无法规避尚未明确指出的模式。

提案要求

你的设计方向必须明确提及：

• 你探索过的领域概念
• 色彩世界探索中的颜色
• 你的标志性元素
• 每个默认设置的替代方案

**检验方法：**读一遍你的提案。删掉产品名称后，有人还能认出它的用途吗？如果不能，那就太过泛泛。继续深入探索。

---

任务要求

在向用户展示之前，先审视自己的作品。

问问自己：“如果对方说这缺乏匠心，他们指的会是什么？”

你刚刚想到的那个问题——先解决它。

你的第一个产出很可能很普通。这很正常。关键在于，在用户发现之前，先把问题找出来。

检查

展示前，先用以下方法检查你的输出：

• **替换测试：**如果把字体换成你常用的字体，会有人注意到吗？如果把布局换成标准仪表板模板，感觉会不一样吗？那些换了也无所谓的地方，就是你默认处理的地方。

• **眯眼测试：**眯起眼睛。你还能看出层次吗？有没有什么元素格外刺眼？精湛的工艺低调而含蓄。

• **标志测试：**你能指出 5 个具体元素，说明你的标志性风格体现在哪里吗？不是“整体感觉”，而是实际的组件。找不到具体位置的标志性风格，就等于不存在。

• **设计令牌测试：**大声读出你的 CSS 变量。它们听起来像是属于这个产品的世界，还是放在哪个项目里都合适？

如果任何一项检查未通过，请先迭代，再展示。

---

工艺基础

微妙的层次

这是工艺的支柱。无论设计方向、产品类型或视觉风格如何，这项原则都适用于所有内容。你几乎不该察觉系统正在发挥作用。查看 Vercel 的仪表板时，你不会想“边框真不错”，而是会自然理解其结构。工艺是隐形的——这正说明它发挥了作用。

表面层级

表面层层叠加。下拉菜单位于卡片之上，卡片位于页面之上。建立一套编号系统：从基础层开始，再逐步提高层级。在深色模式下，层级越高，颜色就略微越亮。在浅色模式下，层级越高，颜色也略微越亮，或者使用阴影。

每次层级变化的亮度差异只需几个百分点。单独查看时，你几乎看不出差别。但表面叠加后，层次就会显现。这些变化微妙得几乎难以察觉，却能让人感受到，而非看出来。

关键决策：

• **侧边栏：**与画布使用相同的背景色，而不是不同的颜色。不同颜色会将视觉空间割裂成“侧边栏世界”和“内容世界”。细微的边框就足以区分。
• **下拉菜单：**比其父级表面高一个层级。如果两者处于同一层级，下拉菜单就会融入卡片，失去层次感。
• **输入框：**背景色应略深于周围区域，而不是更浅。输入框是“内嵌”的——用于接收内容。较深的背景能在不使用粗重边框的情况下提示“在此输入”。

边框

不刻意寻找时，边框应当隐而不见；需要划分结构时，又应当能够找到。低不透明度的 rgba 会与背景融合，既能勾勒边缘，又不会喧宾夺主。相比之下，纯色的十六进制边框显得生硬。

建立一套递进体系——并非所有边框都相同。设置标准边框、柔和分隔线、强调边框，以及用于焦点环的最高强调级别。根据边界的重要性匹配其视觉强度。

**眯眼测试：**眯起眼睛看界面。你仍应能看出层次——什么在上、什么在下，哪些位置划分了不同区域。但不应有任何元素格外抢眼。没有生硬的线条，没有突兀的颜色变化，只有宁静而清晰的结构。

这正是专业界面与业余界面的区别。如果这一点没做好，其他一切都无关紧要。

无限表现形式

每种模式都有无限种表现形式。没有两个界面应该看起来一样。

指标展示可以是醒目的大数字、行内统计数据、迷你折线图、仪表盘、进度条、对比差值、趋势徽标，或其他新形式。仪表板可以通过截然不同的方式强调信息密度、留白、层级或流动感。即使只是侧边栏加卡片，也有无数种比例、间距和重点安排方式。

开始构建前，先问自己：

• 用户在这里最常做的那件事是什么？
• 哪些产品出色地解决了类似问题？研究它们。
• 为什么这个界面会让人觉得是为其用途量身设计的，而不是套用模板？

绝不生成千篇一律的结果。 每次都是相同宽度的侧边栏、相同的卡片网格、相同的指标框（左侧图标、大号数字、小号标签）——这会让人立刻觉得是 AI 生成的，令人毫无印象。

架构和组件应根据任务和数据自然形成，并以令人耳目一新的方式实现。Linear 的卡片不像 Notion 的卡片。Vercel 的指标展示不像 Stripe 的指标展示。概念相同，表现形式却无限。

色彩自有其境

每款产品都存在于一个世界中。那个世界有自己的色彩。

选择配色前，先花时间了解产品所处的世界。走进这个空间的实体版本，你会看到什么？有什么材质？什么光线？什么物件？

你的配色应让人觉得源自某处，而不是被套用到某物上。

不止于冷暖： 色温只是一个维度。这种界面是安静还是喧闹？密集还是开阔？严肃还是活泼？几何还是有机？交易终端和冥想应用都可以是“专注”的，但专注的方式截然不同。找到具体的特质，而不是笼统的标签。

色彩承载意义： 灰色构建结构。色彩负责传达——状态、操作、强调、身份。缺乏理由的色彩只是噪声。有意识地使用一种强调色，胜过不假思索地使用五种颜色。

---

编写每个组件之前

每次编写 UI 代码时——即使只是小幅增补——都要说明：

Intent: [who is this human, what must they do, how should it feel]
Palette: [colors from your exploration — and WHY they fit this product's world]
Depth: [borders / shadows / layered — and WHY this fits the intent]
Surfaces: [your elevation scale — and WHY this color temperature]
Typography: [your typeface — and WHY it fits the intent]
Spacing: [your base unit]

此检查点是强制要求。它促使你将每个技术选择与设计意图联系起来。

如果你无法解释每项选择的原因，那就是在默认套用方案。停下来思考。

---

设计原则

设计令牌架构

界面中的每种颜色都应追溯到一小组基础令牌：前景色（文本层级）、背景色（表面层级）、边框色（分隔层级）、品牌色和语义色（危险、警告、成功）。不要使用随意的十六进制值——所有颜色都应映射到基础令牌。

文本层级

不要只区分“文本”和“灰色文本”。建立四个层级——主要、次要、三级和弱化。每个层级都有不同用途：默认文本、辅助文本、元数据以及禁用或占位文本。始终如一地使用这四个层级。如果只用两个，层级就会过于扁平。

边框层级

边框并非只有有或无。建立一个与重要性相匹配的尺度——标准分隔、柔和分隔、强调和最强强调。并非每条边界都值得同等突出。

控件令牌

表单控件有特定需求。不要复用表面令牌——应为控件背景、控件边框和焦点状态创建专用令牌。这样就能将交互元素与布局表面分别调整。

间距

选定一个基础单位，并始终使用它的倍数。针对不同场景建立间距尺度——图标间的微间距、按钮和卡片内的组件间距、组与组之间的区块间距，以及不同区域之间的主要分隔。随意的数值意味着没有体系。

内边距

保持对称。如果一侧设置了数值，其他侧也应一致，除非内容本身自然需要不对称。

层次

选择一种方案并坚持使用：

• 仅边框 — 简洁、专业。适用于内容密集的工具。
• 微妙阴影 — 柔和、轻盈。适用于亲和力强的产品。
• 多层阴影 — 高端、有层次感。适用于需要突出呈现的卡片。
• 表面颜色变化 — 通过背景色调建立层级，无需阴影。

不要混用方案。

圆角

棱角分明显得专业，圆润则显得亲切。建立一套规范：输入框和按钮使用小圆角，卡片使用中等圆角，模态框使用大圆角。不要随意混用尖锐和柔和的样式。

排版

建立一眼就能区分的层级。标题需要有足够的字重和紧凑的字距，以突出呈现。正文需要舒适的字重，以便阅读。标签需要中等字重，确保在较小字号下也清晰可读。数据需要使用等宽字体，并采用等宽数字间距，以便对齐。不要只依赖字号——要结合字号、字重和字间距。

卡片布局

指标卡不必做成计划卡的样子，计划卡也不必做成设置卡的样子。根据每张卡片的具体内容设计其内部结构，同时保持表面样式一致：边框粗细、阴影深度、圆角半径和内边距比例都应相同。

控件

原生的 <select> 和 <input type="date"> 会渲染操作系统原生元素，无法进行样式设置。请构建自定义组件，例如带定位下拉菜单的触发按钮、日历弹出层，以及经过样式处理的状态管理。

图标

图标用于说明，而非装饰——如果移除图标不会损失任何含义，就移除它。选择一套图标并坚持使用。为独立图标添加微妙的背景容器，让其更醒目。

动画

微交互应快速流畅，缓动应自然。较大的过渡可以稍长一些。使用减速缓动。专业界面应避免弹簧或弹跳效果。

状态

每个交互元素都需要具备各种状态：默认、悬停、激活、焦点、禁用。数据也需要有相应状态：加载中、空状态、错误。缺少状态会让界面显得有问题。

导航上下文

界面需要明确其所处位置。漂浮在空间中的数据表看起来像组件演示，而不是产品。应显示导航，让用户知道自己在应用中的位置；添加位置指示器和用户上下文。构建侧边栏时，可以考虑让其与主内容使用相同的背景色，通过边框进行区分，而不是使用不同颜色。

深色模式

深色界面有不同的需求。在深色背景上，阴影不够明显——应更多依靠边框来界定。语义颜色（成功、警告、错误）通常需要稍微降低饱和度。层级系统仍然适用，只需反转明暗值。

---

避免

• 刺眼的边框 — 如果边框是最先映入眼帘的元素，那它就太突兀了
• 明显的表面跳变 — 高度变化应尽可能不引人注意
• 间距不一致 — 这是缺乏设计系统最明显的表现
• 混用深度策略 — 选择一种方案并坚持使用
• 缺少交互状态 — 悬停、焦点、禁用、加载中、错误
• 明显的投影 — 阴影应当微妙，而非引人注目
• 小元素使用大圆角
• 在彩色背景上使用纯白卡片
• 粗重的装饰性边框
• 用渐变和颜色进行装饰 — 颜色应当有明确含义
• 使用多种强调色 — 会分散注意力
• 不同表面使用不同色相 — 保持色相一致，只调整明度

---

工作流

沟通

保持低调。不要宣布模式，也不要叙述过程。

切勿说：“我正在使用 ESTABLISH MODE”“让我检查一下 system.md……”

**应该这样做：**直接开始工作。提出建议并说明理由。

提出建议并征求确认

先说明探索结果和建议，然后征求确认：

"Domain: [5+ concepts from the product's world]
Color world: [5+ colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default 1] → [alternative], [default 2] → [alternative], [default 3] → [alternative]

Direction: [approach that connects to the above]"

[Ask: "Does that direction feel right?"]

如果项目有 system.md

阅读 .interface-design/system.md 并遵照执行。设计决策已经确定。

如果没有 system.md

1. 探索领域 — 产出全部四项必需内容
2. 提出方案 — 方向必须涵盖全部四项内容
3. 征求确认 — 获得用户认可
4. 构建 — 应用设计原则
5. 评估 — 展示前运行强制检查
6. 提议保存

完成任务后

完成构建后，务必主动提出保存：

"Want me to save these patterns for future sessions?"

如果对方同意，则写入 .interface-design/system.md：

• 方向与感觉
• 深度策略（边框／阴影／分层）
• 间距基本单位
• 关键组件模式

要保存的内容

当某个组件使用 2 次或更多、可在项目中复用，或具有值得记住的特定尺寸时，添加其模式。不要保存一次性组件、临时实验，或更适合通过属性处理的变体。

一致性检查

如果 system.md 定义了相关值，请据此检查：间距是否遵循所定义的网格，深度是否始终采用声明的策略，颜色是否来自所定义的调色板，以及是否复用了已记录的模式，而非重新设计。

这会产生累积效应——每次保存都会让后续工作更快、更一致。

---

深入了解

如需了解特定主题的更多细节：

• references/principles.md — 代码示例、具体数值、深色模式
• references/validation.md — 内存管理、何时更新 system.md
• references/critique.md — 构建完成后的工艺审查流程

命令

• /interface-design:status — 当前系统状态
• /interface-design:audit — 检查代码是否符合系统
• /interface-design:extract — 从代码中提取模式
• /interface-design:critique — 审查构建的工艺水平，然后重新构建默认处理的部分