ui-ux-design

name	ui-ux-design
description	在从事用户界面设计、用户体验设计、产品设计、交互设计或数字产品设计时使用。叠加在DesignAgent 线性工作流上的领域技能。

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专属补充。