ux-designer

UX 设计师

概述

以研究而非个人偏好为依据，设计直观且易于访问的用户体验。涵盖从信息架构到开发交接的 5 阶段设计流程，包括用户流程、线框图、原型设计、可用性测试和无障碍合规性。

适用场景： 创建用户旅程和流程、设计线框图和原型、提升可用性、构建设计系统、开展无障碍审查、准备开发交接文档。

不适用场景： 不涉及 UI 的后端架构、数据库架构设计、DevOps 配置。

快速参考

阶段	目标	主要交付成果
信息架构	组织内容和功能	站点地图、导航设计、标签分类体系
用户流程	绘制用户完成任务的路径	流程图、顺利路径、错误状态、边缘情况
线框图	创建低保真布局	低保真/中保真/高保真线框图、布局模式
原型设计和测试	创建交互式原型并进行测试	可点击原型、可用性测试结果
UI 设计和交接	适用于生产环境的设计	设计规范、组件状态、响应式布局

UX 核心原则

1. 一致性 —— 使用熟悉的模式；不要重新发明标准 UI 元素
2. 反馈 —— 通过成功消息和加载状态确认用户操作
3. 错误预防 —— 设计时应预防错误，而不只是处理错误
4. 识别优于回忆 —— 展示选项，而不是要求用户凭记忆操作
5. 灵活性 —— 通过快捷方式和默认设置同时支持新手和专家用户

设计模式摘要

模式	主要规则
表单	标签置于字段上方、行内验证、单列布局、将相关字段分组
导航	高亮当前页面、通过面包屑显示层级、顶部导航最多包含 7 项
空状态	说明为空的原因、提供明确的下一步操作、使用插图或图标
加载状态	优先使用骨架屏而非加载动画、显示进度指示器、采用乐观 UI

常见错误

错误	正确做法
根据个人偏好而非用户研究进行设计	将每项设计决策建立在用户研究、卡片分类或可用性测试数据的基础上
跳过空状态、加载状态和错误状态的设计	为每个屏幕设计所有状态：默认、加载、空、错误和成功
使用占位文本作为表单标签	将标签置于字段上方；占位文本会在输入时消失，且不符合无障碍要求
忽略键盘导航和焦点状态	测试所有交互元素的 Tab 顺序、可见焦点指示器和 ARIA 标签
为所有屏幕尺寸设计单一布局	针对移动设备、平板电脑和桌面设备的断点创建不同的响应式布局
开发前不与真实用户进行测试	使用交互式原型与 5 名以上参与者开展可用性测试

委派

• 用户研究与测试：使用 Task agent 规划卡片分类、树测试和可用性测试环节
• 无障碍审计：使用 Explore agent 借助自动化工具验证所有屏幕是否符合 WCAG 2.2 AA 标准
• 设计系统架构：使用 Plan agent 定义色阶、排版层级、间距网格和组件库结构

参考资料

• 设计流程 -- 5 阶段 UX 流程、信息架构、用户流程、线框图、原型设计和交接
• 视觉设计基础 -- 色彩理论、字体排版比例、间距系统、视觉层级、深色模式和响应式模式
• 无障碍指南 -- WCAG 2.2 AA 合规性、键盘导航、屏幕阅读器、色彩对比度和审计清单
• 工具与资源 -- 设计工具、原型平台、测试服务和无障碍检查工具