| 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。为清晰而设计。 |
| "无障碍后面再修复" | 无障碍不是润色步骤。从一开始就为之设计。 |
| "一个原型就够了" | 测试多种方案。用户会让你惊讶。 |
危险信号
- 你在没有用户画像或旅程图的情况下设计界面
- 信息架构没有被定义
- 无障碍没有被考虑
- 你没有与真实用户测试过
- 流程只在"理想路径"上有效
验证
→ 从 01-intake 开始,然后按照线性流程加上UI/UX专属补充。