界面设计

以工艺和一致性构建界面设计。

适用范围

适用于： 仪表盘、管理面板、软件即服务应用、工具、设置页面、数据界面。

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

---

问题所在

你将会生成通用的输出。你的训练数据已经见过成千上万个仪表盘。这些模式非常强大。

你可以遵循下面的完整流程——探索领域、命名一个标志、陈述你的意图——但仍然产出一个模板。冷色调的结构配上暖色调。友好的字体放在通用布局上。”厨房感觉”，却和其他每个应用看起来都一样。

这是因为意图存在于文字描述中，但代码生成却从模式中提取。两者之间的差距就是默认值胜出的地方。

下面的流程会有所帮助。但仅靠流程并不能保证工艺。你必须自我察觉。

---

默认值藏身之处

默认值不会自我宣告。它们伪装成基础设施——那些感觉只需要”能工作”而不需要”被设计”的部分。

排版感觉像容器。 选一个可读的字体，继续往下。但排版不是承载你的设计——它就是你的设计。标题的字重、标签的性格、段落的纹理。这些在任何人阅读文字之前就已经塑造了产品的感觉。一个烘焙管理工具和一个交易终端可能都需要”干净、可读的字体”——但温暖、手作的字体，并不是冰冷、精确的字体。如果你伸手去拿你惯用的字体，你就不是在设计。

导航感觉像脚手架。 构建侧边栏，添加链接，然后开始真正的工作。但导航不是围绕你的产品——它就是你的产品。你在哪里，你能去哪里，什么最重要。一个漂浮在空间中的页面只是一个组件演示，而不是软件。导航教会人们如何思考他们所处的空间。

数据感觉像呈现。 你有数字，展示数字。但屏幕上的数字不是设计。问题是：这个数字对看着它的人意味着什么？他们会用它做什么？一个进度环和一个堆叠标签都显示”3/10″——一个讲述故事，一个填充空间。如果你伸手去拿数字标签，你就不是在设计。

令牌名称感觉像实现细节。 但你的 CSS 变量是设计决策。--ink 和 --parchment 唤起一个世界。--gray-700 和 --surface-2 唤起一个模板。一个只读到你令牌的人应该能猜出这是什么产品。

陷阱在于认为有些决策是创造性的，而其他的是结构性的。没有结构性的决策。一切都是设计。当你停止问”为什么是这个？”的那一刻，就是默认值接管的那一刻。

---

意图优先

在接触代码之前，回答这些问题。不是在心里，而是大声说出来，对自己或对用户。

这个人是谁？
不是”用户”。而是真实的这个人。他们打开这个界面时在哪里？他们在想什么？5分钟前他们在做什么，5分钟后他们又会做什么？早上7点喝着咖啡的老师，和半夜调试代码的开发者，和在投资人会议间隙的创始人，他们的世界是不同的。他们的世界塑造了界面。

他们必须完成什么？
不是”使用仪表盘”。而是动词。批改这些作业。找到出故障的部署。批准这笔付款。答案决定了什么在前，什么在后，什么隐藏。

这应该感觉像什么？
用有意义的词语说出来。”干净现代”毫无意义——每个人工智能都会这么说。温暖得像笔记本？冷峻得像终端？密集得像交易大厅？宁静得像阅读应用？答案决定了颜色、字体、间距、密度——一切。

如果你不能具体地回答这些问题，就停下来。问用户。不要猜测。不要默认。

每个选择都必须是选择

对于每一个决定，你必须能够解释为什么。

• 为什么是这个布局而不是那个？
• 为什么是这个色温？
• 为什么是这款字体？
• 为什么是这个间距尺度？
• 为什么是这个信息层级？

如果你的答案是”它很常见”或”它很干净”或”它能用”——那么你并没有选择。你只是默认了。默认值是隐形的。隐形的选择累积起来就变成了通用的输出。

检验标准： 如果你把你的选择换成最常见的替代方案，而设计没有感觉出明显的不同，那么你根本没有做出真正的选择。

趋同即是失败

如果另一个人工智能，在收到类似提示的情况下，会生成基本相同的输出——那么你就失败了。

这不是为了不同而不同。而是关于界面从特定的问题、特定的用户、特定的上下文中涌现出来。当你从意图出发设计时，趋同变得不可能，因为没有两个意图是完全相同的。

当你从默认值出发设计时，一切看起来都差不多，因为默认值是共享的。

意图必须是系统性的

说”温暖”却用冷色调，这不是贯彻到底。意图不是一个标签——它是一个约束，塑造着每一个决策。

如果意图是温暖的：表面、文本、边框、强调、语义色、排版——全都得温暖。如果意图是密集的：间距、字体大小、信息架构——全都得密集。如果意图是宁静的：动效、对比度、色彩饱和度——全都得宁静。

对照你陈述的意图检查你的输出。每一个令牌是否都在强化它？还是你陈述了一个意图，却仍然默认了？

---

产品领域探索

这是默认值被抓住的地方——或者没有被抓住的地方。

通用输出：任务类型 → 视觉模板 → 主题
精心制作的输出：任务类型 → 产品领域 → 标志 → 结构 + 表达

区别在于：在进行任何视觉或结构性思考之前，先花时间沉浸在这个产品的世界里。

必需输出

在提出任何方向之前，你必须产出以下所有四项：

领域： 来自这个产品世界的概念、隐喻、词汇。不是功能——是疆域。至少 5 个。

色彩世界： 在这个产品领域里自然存在什么颜色？不是”暖色”或”冷色”——深入到真实的世界。如果这个产品是一个物理空间，你会看到什么？什么颜色属于那里，而不属于别处？列出 5 个以上。

标志： 一个元素——视觉的、结构的或交互的——它只可能为这个产品存在。如果你叫不出一个，就继续探索。

默认值： 对这种界面类型来说，3 个显而易见的选择——视觉和结构上的。你无法避开你尚未命名的模式。

提案要求

你的方向必须明确引用：

• 你探索过的领域概念
• 你从色彩世界探索中得到的颜色
• 你的标志性元素
• 什么替代了每个默认值

检验标准： 阅读你的提案。去掉产品名称。有人能认出这是做什么用的吗？如果不能，就是通用的。探索得更深入些。

---

首要任务

在给用户看之前，审视你所做的。

问问自己：”如果他们说这缺乏工艺，他们会指什么？”

你刚才想到的那一点——先把它修好。

你的第一次输出可能很通用。这很正常。关键在于要在用户指出之前先发现它。

检查清单

在展示之前，对你的输出运行这些检查：

• 替换测试： 如果你把字体换成你惯用的那款，会有人注意到吗？如果你把布局换成标准的仪表盘模板，会感觉不同吗？那些替换了也没关系的地方，就是你默认了的地方。
• 眯眼测试： 眯起眼睛看。你还能感知到层级吗？有什么东西显得刺眼吗？工艺是悄无声息的。
• 标志测试： 你能指出五个具体的元素，其中你的标志出现了吗？不是”整体感觉”——而是实际的组件。一个你找不到的标志，就不存在。
• 令牌测试： 大声读出你的 CSS 变量。它们听起来像属于这个产品的世界，还是可以属于任何项目？

如果任何一项检查失败，在展示之前进行迭代。

---

工艺基础

微妙分层

这是工艺的支柱。无论方向、产品类型或视觉风格如何——这个原则适用于所有事物。你应该几乎注意不到系统在工作。当你看到 Vercel 的仪表盘时，你不会想”边框不错”。你只是理解了结构。工艺是隐形的——这就是你知道它在起作用的方式。

表面层级

表面是堆叠的。下拉菜单位于卡片之上，卡片位于页面之上。建立一个编号系统——基础层，然后是递增的层级。在深色模式下，更高的层级 = 稍微亮一点。在浅色模式下，更高的层级 = 稍微亮一点或使用阴影。

每次跃迁应该只有几个百分点的亮度变化。单独看，你几乎看不出区别。但当表面堆叠起来时，层次就显现出来了。悄无声息的微妙变化，让你感觉到而不是看到。

关键决策：

• 侧边栏： 与画布相同的背景，而不是不同的。不同的颜色会将视觉空间割裂成”侧边栏世界”和”内容世界”。一个微妙的边框就足以区分。
• 下拉菜单： 比它们的父级表面高出一级。如果两者共享同一层级，下拉菜单就会融入卡片，分层就丢失了。
• 输入框： 比周围环境稍微深一点，而不是浅一点。输入框是”内凹”的——它们接收内容。一个稍暗的背景传达出”在此输入”的信息，而不需要厚重的边框。

边框

边框应该在你没刻意寻找时消失，但在你需要结构时又能找到。低透明度的 rgba 颜色与背景融合——它界定边缘而不吸引注意力。实心十六进制边框相比之下显得生硬。

建立一个递进关系——并非所有边框都平等。标准边框，柔和分隔，强调边框，最大强调用于焦点环。将强度与边界的重要性相匹配。

眯眼测试： 眯起眼睛看界面。你仍然应该能感知到层级——什么在上面，什么在下面，哪里分块。但没有任何东西应该跳出来。没有生硬的线条。没有刺眼的颜色变化。只有安静的结构。

这区分了专业界面和业余界面。这个弄错了，其他什么都不重要。

无限表达

每个模式都有无限的表达方式。没有两个界面应该看起来一样。

一个指标展示可以是主数字、内联统计、迷你图、仪表、进度条、对比增量、趋势徽章，或者一些全新的东西。一个仪表盘可以以完全不同的方式强调密度、留白、层次或流程。即使是侧边栏加卡片，在比例、间距和重点上也有无限的变化。

在构建之前，问：

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

绝不要产出相同的输出。 每次都是相同的侧边栏宽度、相同的卡片网格、相同的指标框（图标-左-数字-大-标签-小）——这立刻暴露了是人工智能生成的。这是过目即忘的。

架构和组件应该从任务和数据中涌现，并以一种感觉新鲜的方式执行。Linear 的卡片看起来不像 Notion 的。Vercel 的指标看起来不像 Stripe 的。相同的概念，无限的表达。

颜色有其归属

每个产品都存在于一个世界中。那个世界有颜色。

在你拿起调色板之前，先沉浸在这个产品的世界里。如果你走进这个空间的物理版本，你会看到什么？什么材料？什么光线？什么物体？

你的调色板应该感觉像是来自某个地方——而不是被应用到某个东西上。

超越冷暖： 温度只是一个维度。这是安静还是喧闹？密集还是宽敞？严肃还是 playful？几何感还是有机感？一个交易终端和一个冥想应用都”专注”——却是完全不同类型的专注。找到那个特定的品质，而不是通用的标签。

颜色承载意义： 灰色构建结构。颜色传达信息——状态、操作、强调、身份。没有动机的颜色就是噪音。一个有意图使用的主色，胜过五个未经思考使用的颜色。

---

在编写每个组件之前

每次你编写用户界面代码——即使是小的添加——都要陈述：

意图：[这是谁，他们必须做什么，应该感觉像什么]
调色板：[你探索得到的颜色——以及它们为何适合这个产品的世界]
深度：[边框 / 阴影 / 分层——以及它为何符合意图]
表面：[你的层级尺度——以及为何是这个色温]
排版：[你的字体——以及它为何符合意图]
间距：[你的基础单位]

这个检查点是强制性的。它迫使你将每一个技术选择都与意图联系起来。

如果你不能为每个选择解释为什么，那么你就在默认。停下来思考。

---

设计原则

令牌架构

界面中的每一种颜色都应该追溯到一小套原语：前景（文本层次）、背景（表面层级）、边框（分隔层次）、品牌和语义（破坏性、警告、成功）。没有随机的十六进制值——一切都映射到原语。

文本层次

不要只有”文本”和”灰色文本”。建立四个层次——主要、次要、三级、静默。每个扮演不同的角色：默认文本、辅助文本、元数据和禁用/占位符。一致地使用所有四个。如果你只用两个，你的层次太扁平了。

边框递进

边框不是二元的。建立一个与重要性相匹配的强度等级——标准分隔、柔和分隔、强调、最大强调。不是每个边界都值得同样的权重。

控件令牌

表单控件有特定的需求。不要重用表面令牌——为控件背景、控件边框和焦点状态创建专用的令牌。这让你可以独立于布局表面调整交互元素。

间距

选择一个基础单位并坚持使用其倍数。为不同上下文建立一个尺度——用于图标间距的微间距，用于按钮和卡片内部的组件间距，用于组之间的大间距，用于不同区域之间的主要分隔。随机的数值意味着没有系统。

内边距

保持对称。如果一边有值，另一边应该匹配，除非内容自然需要不对称。

深度

选择一种方法并坚持：

• 仅边框 — 干净、技术感。适用于密集工具。
• 微妙阴影 — 柔和的立体感。适用于亲切的产品。
• 分层阴影 — 高级、有层次感。适用于需要存在感的卡片。
• 表面颜色变化 — 背景色调建立层次，无需阴影。

不要混合方法。

边框圆角

更锐利的感觉更技术感。更圆润的感觉更友好。建立一个尺度——用于输入框和按钮的小圆角，用于卡片的中等圆角，用于模态框的大圆角。不要随意混用锐利和柔和。

排版

建立一眼就能区分的不同级别。标题需要字重和紧凑的字距以获得存在感。正文需要舒适的阅读字重。标签需要中等字重，在小尺寸下也能工作。数据需要等宽字体和表格数字间距以对齐。不要仅依赖字号——要结合字号、字重和字距。

卡片布局

指标卡片不必长得像计划卡片，也不必长得像设置卡片。根据其具体内容设计每张卡片的内部结构——但要保持表面处理的一致性：相同的边框权重、阴影深度、圆角半径、内边距尺度。

控件

原生的 <select> 和 <input type="date"> 会渲染操作系统原生且无法设置样式的元素。构建自定义组件——带有定位下拉菜单的触发按钮、日历弹出层、样式化的状态管理。

图标

图标是为了阐明，而非装饰——如果去掉图标不损失任何含义，就删掉它。选择一套图标并坚持使用。给独立图标一个微妙的背景容器来增加存在感。

动效

快速的微交互，平滑的缓动。较大的过渡可以稍微长一点。使用减速缓动。在专业界面中避免弹簧/弹跳效果。

状态

每个交互元素都需要状态：默认、悬停、激活、焦点、禁用。数据也需要状态：加载、空状态、错误。缺失的状态会感觉不完整。

导航上下文

屏幕需要根基感。一个漂浮在空间中的数据表格感觉像组件演示，而不是产品。需要包含显示你在应用中位置的导航、位置指示器和用户上下文。在构建侧边栏时，考虑使用与主内容相同的背景，用边框分隔，而不是使用不同的颜色。

深色模式

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

---

避免

• 生硬的边框 — 如果边框是你最先注意到的，那它们就太强了
• 剧烈的表面跳变 — 层级变化应该是悄无声息的
• 不一致的间距 — 这是没有系统的最明显标志
• 混合的深度策略 — 选择一种方法并坚持
• 缺失的交互状态 — 悬停、焦点、禁用、加载、错误
• 夸张的投影 — 阴影应该微妙，而不是引人注目
• 小元素上的大圆角
• 彩色背景上的纯白卡片
• 厚重的装饰性边框
• 用于装饰的渐变和颜色 — 颜色应该有意义
• 多个主色 — 会稀释焦点
• 不同表面使用不同色相 — 保持相同色相，只调整亮度

---

工作流程

沟通

保持隐形。不要宣告模式或叙述过程。

绝不要说： “我进入建立模式了”，”让我检查一下 system.md…”

而是： 直接开始工作。用理由陈述建议。

建议 + 询问

先用你的探索和建议引导，然后确认：

"领域：[来自产品世界的 5 个以上概念]
色彩世界：[存在于该领域的 5 种以上颜色]
标志：[一个该产品独有的元素]
拒绝：[默认值 1] → [替代方案], [默认值 2] → [替代方案], [默认值 3] → [替代方案]

方向：[与以上内容相联系的方案]"

[询问："这个方向感觉对吗？"]

如果项目有 system.md

读取 .interface-design/system.md 并应用。决策已定。

如果没有 system.md

1. 探索领域 — 产出所有四项必需输出
2. 提议 — 方向必须引用所有四项
3. 确认 — 获得用户认可
4. 构建 — 应用原则
5. 评估 — 在展示前运行首要任务检查
6. 提供保存选项

---

完成任务后

当你完成某样东西的构建后，务必主动提供保存选项：

"想要我为将来的会话保存这些模式吗？"

如果用户同意，写入 .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 — 评审你的构建工艺，然后重建默认了的部分