uiux-excellence-guide

UI UX 卓越指南

概述

将模糊的 UI 需求转化为可用于生产环境的决策和实施指导。 将视觉品质、清晰度、易用性、无障碍性、响应式表现和性能视为一个整体。

工作流选择

提出更改之前，先选择一个主要工作流：

1. Greenfield：创建新屏幕、功能、产品界面或设计系统部分。
2. Refactor：在保留产品行为的同时改进现有 UI。
3. Audit：在实施前评审、诊断问题或确定修复优先级。

如果用户直接要求实施，就在内部完成工作流并交付修改后的 UI。如果请求含糊但风险较低，请做出合理假设并说明。

通用规则

在所有工作流中应用以下规则：

1. 从用户的任务、受众、平台和成功指标出发。
2. 尽早确定布局节奏：间距阶梯、网格、边距、槽宽和密度。
3. 对间距、排版、颜色、圆角、层级和动效使用语义化令牌。
4. 将微文案、空状态、加载状态和错误状态视为交互设计的一部分。
5. 无障碍约束不可妥协；将任何未满足的项目记录为风险。
6. 只要工具条件允许，交付前就验证实际修改的界面。

需要数值默认值、无障碍阈值、触控目标、动效规则或 Web Vitals 标准时，请阅读 references/uiux-baseline-2026.md。只有在需要完整设计交接或审计报告时，才阅读 references/uiux-delivery-template.md。

Greenfield

1. 明确问题：

• 确定受众、平台、关键用户旅程和成功标准。
• 确认是否已有设计系统；如果没有，则定义最小化令牌契约。

2. 建立结构体系：

• 在装饰性样式之前，先设定间距、网格、边距、槽宽和密度。
• 仅在数据密集或运营类界面中使用 compact。

3. 确定可读性和层级：

• 定义字号阶梯、行高、内容层级，以及简洁且优先体现状态的标签。
• 确保对比度、焦点可见性和非文本交互提示的对比度。

4. 规划动效和状态传达：

• 使用简短、明确的过渡来呈现状态变化并保持空间连续性。
• 提供减少动态效果时的回退行为。

5. 规划验证：

• 在实施前设定 UX、无障碍、响应式和性能验收标准。

Refactor

1. 审查当前界面：

• 梳理摩擦点：困惑、误点、内容难以阅读、层级不佳。
• 找出令牌、间距节奏、响应式行为和交互模式方面的不一致。

2. 确定更改优先级：

• 根据对任务成功率、错误减少和无障碍风险的影响进行排序。
• 优先处理低风险的结构性修复，再进行视觉润色。

3. 在约束下重构：

• 除非明确接受回归，否则保留现有的有效行为。
• 统一使用语义化令牌，并移除一次性数值。
• 在用户受阻之处改进文案、状态反馈和恢复路径。

4. 验证并报告：

• 对比修改界面前后的行为。
• 列出确切修改的文件和预期的用户可见改进。

Audit

1. 先按严重程度排序列出发现的问题。
2. 附上具体证据（适用时注明组件、流程、文件和行号）。
3. 提供可执行的修复方案，不要给出含糊的建议。
4. 区分阻断性问题和改进机会。
5. 如果无法完成检查，请明确说明验证缺口。

输出约定

对于重要的设计或实施工作，按以下顺序返回结果：

1. Direction：简明说明视觉和 UX 方向。
2. Decisions：说明间距、排版、密度、动效、无障碍和性能方面的选择。
3. Implementation：列出确切修改或代码层面的计划。
4. Validation：提供检查清单及测量结果或替代指标。
5. Risks：说明仍未知或尚未测试的事项。

对于小型修复，请简要作答，但仍需说明用户可见的变化、已执行的验证以及剩余风险。

参考资料

• references/uiux-baseline-2026.md：实现默认值和阈值。
• references/uiux-delivery-template.md：适用于设计和实现任务的可复用响应格式。