ahaoai UI/UX 设计（UI/UX Design）
不可协商的规则
硬性门槛：用户需求和用户行为必须驱动结构。在设计任何界面之前，先理解用户的目标、上下文和痛点。没有用户研究就没有线框图。
概述
UI/UX设计的领域专属方法论层。数字产品设计有自己的逻辑——从用户需求开始，经过信息架构和交互设计，最终到视觉界面设计。此技能叠加在DesignAgent 线性流程上（01-intake → 02-discover → 03-strategy → 04-generate → 05-review → 06-deliver → 07-learn），在每个阶段注入UX专属框架。
何时使用
- 网页或移动应用设计
- 产品设计和功能开发
- 交互和动效设计
- 设计系统创建
- 服务设计和用户旅程映射
- 改版或功能增强
何时不使用
- "把这个按钮颜色改一下" → 修改，不是设计
- "这个的WCAG对比度是多少？" → 查找
- 代码实现或前端开发（这是设计方法论）
- 快速落地页，不需要用户研究（使用精简模式）
UI/UX专属流程
阶段1：调研和发现（叠加01-intake → 02-discover）
- 用户研究：目标、行为、痛点、使用上下文
- 竞争分析：直接竞争者、标杆产品、设计模式
- 启发式评估：如为改版，对照可用性启发式审计当前产品
- 数据分析：用户行为的定量数据（如有）
- 无障碍审计：当前无障碍合规现状
阶段2：UX策略（叠加03-strategy）
在设计界面之前定义体验策略：
- 用户画像：1-3个主要用户原型，包含目标和痛点
- 用户旅程图：当前状态（现状）和期望状态（目标）
- 信息架构：内容清单、站点地图、导航结构
- 交互模型：用户如何完成关键任务？
- 设计原则：3-5条指导原则（例如："每屏一个任务"）
- 成功指标：可用性目标、转化目标、NPS、任务成功率
阶段3：设计和原型（叠加04-generate）
- 线框图：关键界面和流程的低保真布局
- 交互原型：用于测试关键用户流程的可点击原型
- 视觉设计：UI设计系统——色彩、字体、组件、间距
- 响应式行为：设计在不同断点下如何适配
- 动效设计：过渡、微交互、反馈状态
- 如需探索视觉风格，调用 designing-with-ai 进行UI探索
- 调用 visual-research 获取竞品UI模式和灵感
阶段4：用户测试和迭代（叠加05-review）
- 可用性测试：与真实用户测试，观察行为
- 无障碍测试：对比度、屏幕朗读器、键盘导航
- 设计审查：对照UX策略、设计原则、成功指标审查
- 利益相关者审查：用理由展示，用标准引导反馈
- 迭代：修复必须修复的问题，记录决策
阶段5：交付和上线（叠加06-deliver → 07-learn）
- 设计系统文档：组件、状态、变体、使用指南
- 开发者交付：规格、资产、原型、行为文档
- QA和实施支持：审查实施结果，发现问题
- 发布和验证：上线后对照成功指标衡量
- 学习：记录有效做法、改进点、可复用模式
理性化预防
| 借口 | 事实 |
|---|---|
| "我先做界面，再理清流程" | 结构先于表面。信息架构和旅程图先于视觉设计。 |
| "用户自己会搞明白的" | 如果用户需要"搞明白"，那就是糟糕的UX。为清晰而设计。 |
| "无障碍后面再修复" | 无障碍不是润色步骤。从一开始就为之设计。 |
| "一个原型就够了" | 测试多种方案。用户会让你惊讶。 |
危险信号
- 你在没有用户画像或旅程图的情况下设计界面
- 信息架构没有被定义
- 无障碍没有被考虑
- 你没有与真实用户测试过
- 流程只在"理想路径"上有效
验证
- 用户研究已完成（画像、目标、痛点）
- UX策略已记录（旅程图、信息架构、设计原则）
- 线框图和交互原型已创建
- UI设计系统已开发（色彩、字体、组件）
- 已与真实用户进行可用性测试
- 无障碍合规性已检查
- 交付文档已准备（规格、资产、行为）
→ 从 01-intake 开始，然后按照线性流程加上UI/UX专属补充。