# UI 设计哲学：让内容与行动成为主角

这套原则用于产品研发中的工作台、工具、后台和内容界面。它提炼自 IELTS Buddy、Study Buddy 与 csc-nuxt 的设计文档和现有样式，不是三套项目细节的合集。具体产品的用户任务、品牌、既有设计系统与可访问性要求优先；公开展示页可以有更强的视觉表达，但不应把营销版式搬进高频操作界面。

## 先组织任务，再设计外观

界面首先回答：用户此刻要做什么、需要看见什么、操作后会发生什么。导航、输入、结果、状态和下一步动作应清楚可找；只为解释界面而写的文案、无法兑现的入口和与内容无关的装饰都应删去。长时间阅读、对话或处理事务的界面要安静，避免让大标题、彩色容器和浮动卡片争夺注意力。

信息密度由任务决定。阅读内容给足行宽、行高与段落节奏；列表和后台优先让人扫描、比较、批量处理。必要信息不能为了“极简”而隐藏，复杂任务也不应被拆成大量只含一项内容的卡片。

## 用一套视觉语言表达层级

- 以黑白中性层级和一套主题色阶建立色板。主题色主要标示主操作、选中和少量重点；成功、警告、危险等状态使用独立语义色，并同时提供文字或图标信号。
- 从少量全局语义令牌定义画布、工作面、内嵌面、强调面、文字、间距、字级、圆角、阴影和动效。页面与组件消费这些角色，不各自发明近似颜色和尺寸。共享组件只在真实复用时建立。
- 默认不靠描边制造层级：并列区域用明度台阶，内嵌内容用色块，真正浮起的菜单或面板用轻阴影，关联内容用间距分组。表格可用表头底色和斑马行，避免网格线把内容切碎。
- 控制可见表面层数。页面已有工作面时，不再套一层整页底板；分组内嵌面与浮起卡片按用途择一，避免卡片里再放卡片。阴影只表达高度，不作为所有元素的装饰。

这是一套层级原则，不是固定的色值配方。IELTS Buddy 的中性色不随主题变化；Study Buddy 与 csc-nuxt 的中性色带有主题色相。新产品先选一种策略，再在全站保持一致。功能确需分隔线或控件边界时，可以明确例外及其语义，但不能让描边重新成为默认布局工具。

## 让控件的形态说明用途

主次操作、输入、导航行、列表行、弹层各有稳定形态和状态。三个项目都偏向简洁按钮、凹陷色块输入与紧凑的行状导航；胶囊圆角适合短按钮或标签，不适合整行入口和大面积容器。控件外观应由统一组件和令牌维护，业务页面只表达业务含义。

交互必须覆盖静置、悬停、焦点、选中、处理中、禁用和失败等实际状态。键盘路径、焦点可辨识性、对比度与触控尺寸不能因为“无描边”而丢失；用明确的底色、文字、图标或其他可见反馈验证效果，不只靠颜色差异。减少非必要动效，并尊重减少动态效果的系统偏好。

## 保持工作上下文

响应式不是把桌面等比缩小。窄屏重新安排导航、栏目和操作顺序，保留同一任务的数据、位置与返回路径；长标题、表格和输入内容不能被装饰或固定尺寸挤掉。工作台中需要独立保持的目录、对话、编辑区可以各自滚动，并把导航与主要操作留在可预期的位置；文章和展示页则可以沿用自然页面滚动。滚动归属由工作流决定，不套用同一种页面结构。

切换任务后应能恢复草稿、选择和来源位置；加载、空内容、失败与权限限制要说明当前事实和可做的下一步。涉及 AI 的界面应把自然语言结果和可用操作放在前面，将工具轨迹降为辅助信息，不把内部参数或原始输出当作用户正文。

## 落地检查

1. 用真实任务走一遍：入口、当前状态、主要动作、结果与返回路径是否连续？
2. 检查同屏层级：是否有多余底板、卡片套卡片、重复标题、无意义文案或过量主题色？
3. 检查令牌与控件：相同角色是否同一种样式，例外是否有功能理由？
4. 在宽屏、窄屏、键盘操作和文字放大时检查可读性、焦点、滚动归属与内容完整性。

具体的状态与组件基础要求见 [界面基础规范](../foundations/interface-foundations.md)。

## 来源与适用边界

本文是对下列本地项目资料的归纳，保留了共同原则，不复制各项目的具体 token 数值、断点和页面结构。来源文档中有设计目标与分阶段迁移记录；不能据此断言每一处现有页面都已完成统一。

| 项目 | 主要参考 | 值得保留的项目差异 |
| --- | --- | --- |
| IELTS Buddy | `IeltsBuddy/DESIGN.md`、`IeltsBuddy/docs/product/ui-design-system.md` | 学习工作台优先；中性色不随主题切换；窄屏强调对话与当前任务的切换。 |
| Study Buddy | `studybuddy/docs/DESIGN.md`、`studybuddy/apps/web/src/theme.css` | 持续阅读与对话；浅暗主题共用语义角色；固定工作台外壳及区域内滚动。 |
| csc-nuxt | `csc-nuxt/docs/ui-spec.md`、`csc-nuxt/app/assets/css/main.css` | 主题色相贯穿中性色阶；页面、组件库与后台共用令牌；内容页与后台按各自密度组织。 |