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

这套原则用于产品研发中的工作台、工具、后台和内容界面。参考了 `words-app-yunxiao` 的现行项目约定与学习界面实践，但不复制它的词汇学习流程或配色。具体产品的用户任务、品牌、既有设计系统与可访问性要求优先。

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

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

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

复杂功能可以分成三层：默认显示当前任务和主要动作；用短句解释会影响选择的原因或结果；详细依据留给主动展开。`words-app-yunxiao` 在学习流程中用这套顺序呈现行动、解释和证据。其他产品应按真实任务判断层次，不能把关键条件藏进“了解更多”。

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

- 以黑白中性层级和主题色阶建立色板。主题色主要标示主操作、选中和少量重点；状态变化同时提供文字或图标信号。
- 从少量全局语义令牌定义画布、工作面、内嵌面、强调面、文字、间距、字级和圆角。页面与组件消费这些角色，不各自发明近似颜色和尺寸。共享组件只在真实复用时建立。
- 用明度台阶和色块拼接表达层级；相邻表面无法用明度区分时，才使用统一的浅灰细线。表格可用表头底色和斑马行，避免网格线把内容切碎。
- 控制可见表面层数。页面已有工作面时，不再套一层整页底板；避免卡片里再放卡片。

这是一套层级原则，不是固定的色值配方。新产品使用两种主题色、从它们派生的两种辅助色及白灰黑色阶；具体值由项目令牌确定。功能确需分隔线或控件边界时，使用同一种 1px 浅灰细线，不能让描边重新成为默认布局工具。渐变、阴影和透明度都不承担界面层级；某产品已明确批准的素材例外也不自动扩展到其他页面。

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

主次操作、输入、导航行、列表行、弹层各有稳定形态和状态。简洁按钮、色块输入与紧凑的行状导航适合高频工作界面；圆角应由统一令牌维护，业务页面只表达业务含义。

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

## 保持工作上下文

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

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

## 落地检查

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

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

## 适用边界

本文只说明跨项目可复用的层级与交互原则。具体色值、断点、组件状态和页面结构由目标项目的设计系统决定，并在实际页面中验证。