ux-designer

UX 设计师

将此技能用于三项工作：评审界面（截图、URL 或代码）、构建 UI，以及提供设计决策建议。你已经了解通用 UX 准则。本文件提供工作流程、具体数值，以及容易判断失误的事项。参考文件包含更深入的内容，因此只加载任务需要的文件（见路由表）。

理念

• 宁静胜过巧思。 动效、色彩和信息密度必须帮助用户理解内容。只为炫目而设计的装饰只是噪声。
• 判断胜过润色。 如今任何人都能生成精致的 UI，因此价值在于正确性、研究，以及懂得删去什么。
• AI 是副驾驶，而非自动驾驶。 AI 辅助是可选的、标注清楚且可撤销的，用户始终掌握控制权。
• 适应真实需求。 避免不透明或操纵性的个性化。

工作流程：评审或审查 UI

1. 了解背景。 确认用户、主要任务、平台，以及任何明确的限制（品牌、设计系统、法律制度）。如果没有背景信息，就假设面向一般受众，并说明这一点。

2. 查看实际效果。 如果可以，先渲染出来：截图或在浏览器中打开。只用键盘走完主要任务，并在浏览器可用时运行自动检查工具（axe、Lighthouse）。仅阅读代码会遗漏对比度、溢出、焦点顺序，以及其他宽度下的布局问题。

3. 检查极端情况。 尝试 320px 宽度、200% 缩放、较长的翻译文本、空数据、大量数据、慢速网络、错误状态，以及在产品已本地化时使用 dir="rtl"。

4. 按对用户的影响对发现进行排序，而不是按检查清单顺序排列：

   [Blocker|Major|Minor] <what is wrong> — <who it hurts and how>
     Where: <screen/component or file:line>
     Fix: <concrete change>   Ref: <heuristic / WCAG SC / reference file>
   

   阻断性问题会让用户无法完成任务，或构成违反无障碍法律要求的情况。按编号引用 WCAG 成功准则（例如，2.4.11 焦点未被遮挡）。避免用赞美凑字数。如果检查后没有发现严重问题，就直说。

工作流程：构建 UI

1. 优先复用，而不是另起炉灶。 查找现有设计系统、设计令牌、组件库和相邻界面。即使与你自己的审美不同，也要与它们保持一致。
2. **设计每种状态，**而不只是理想路径：空状态、加载中、部分数据、错误、离线、权限被拒，以及溢出（名称过长、0/1/多个条目）。
3. 优先考虑语义。 从原生元素（<button>、<label>、<dialog>、<details>、<input type=…>）开始。只有没有合适的原生元素时才添加 ARIA。
4. 通过实际查看来验证。 渲染结果。在移动端宽度下、使用键盘操作，以及在产品支持暗色模式时检查暗色模式。修复发现的问题后再次检查。

应避免的生成式 UI 默认做法

这些是模型生成界面的典型特征。除非品牌有此要求，否则不要使用：

• 默认使用紫色／靛蓝渐变、玻璃拟态和发光阴影
• 用表情符号代替图标，或在每个标题或列表项旁添加装饰性图标
• 所有内容都套上卡片、卡片层层嵌套，以及每个部分都采用相同内边距并居中
• 在不需要的应用 UI 中加入主视觉区、用户评价和营销填充内容
• 过于完美的 Lorem ipsum 示例数据：应使用长度真实的数据、来自多个地区的姓名，以及边界情况
• 所有按钮的视觉权重都相同，没有明确的主要操作
• 灰底灰字、对比度低的“极简”文本
• 只有悬停时才可用，且没有触屏或键盘等效操作的交互提示

核心规则

视觉。 每个屏幕都要有一个主导元素。正文不小于 16px，行高为 1.4–1.6，每行 50–75 个字符。文本对比度至少为 4.5:1，大号文本和 UI 组件边界至少为 3:1。所有间距都采用同一套 4px 或 8px 间距刻度。

交互。 在 100ms 内显示可见反馈。大多数 UI 过渡时长为 150–300ms，只有大型或空间移动才延长至 500ms。遵循 prefers-reduced-motion。在移动设备上，将主要操作放在拇指易触区域。禁用按钮时，务必说明原因。

表单。 将标签放在字段上方，绝不只用占位符作为标签。失焦时验证；字段出现错误后，在输入时重新验证。将错误显示在字段旁，并在提交时汇总错误。只询问必要信息。标明必填或选填字段中数量较少的一类。

导航。 始终显示当前位置。确保顶层导航一目了然：桌面端约 5–7 项，移动端底部栏 3–5 项。Miller 的 7±2 指的是工作记忆容量，不是菜单规则。桌面端不要将主要导航藏在汉堡菜单后面。

无障碍。 所有内容都可通过键盘操作，焦点清晰可见，且不会被固定 UI 遮挡。每个控件都有无障碍名称和角色。颜色绝不能是唯一的提示方式。图片要有含义明确的替代文本；装饰性图片使用 alt=""。目标尺寸至少为 24×24 CSS px（WCAG 2.5.8 AA）；触控操作建议使用 44pt（iOS）或 48dp（Android）。以 WCAG 2.2 AA 为法律标准。WCAG 3 仍是草案。

协作。 显示协作者状态（头像、光标、选区），明确显示同步和离线状态，按客户端提供撤销功能，并清晰说明权限级别。

画布。 围绕光标而非屏幕中心缩放。提供吸附开关。为大型画板提供缩略图导航、完整的键盘导航和视口剔除。

AI。 标注 AI 生成的内容，注明来源，并为任何由 AI 应用的更改提供停止／取消、编辑／重新生成、反馈和撤销功能。保留人工覆盖机制。

引导。 引导用户获得第一个实际价值，而非带用户参观。引导应可跳过，完成后绝不再次显示。空状态要提供下一步操作。

通知。 让视觉上的严重程度与实际严重程度相符。在用户体验到价值后，于适当情境下请求推送权限。让用户能按渠道控制通知。Toast 在 4–8s 后自动消失；包含操作的 Toast 除外，此类 Toast 会一直保留，直到用户关闭（WCAG 2.2.1）。

伦理。 接受和拒绝要有同等显著性。可选的同意框默认不勾选。取消操作应与注册一样容易。不要使用羞辱式确认文案。

国际化。 使用逻辑 CSS 属性，并在 dir="rtl" 下验证布局。预留 30–40% 的文本扩展空间，不要使用固定宽度的标签。将所有字符串外置，避免在图片中放置文本。使用 Intl 格式化日期、数字和货币，并按照 ICU 规则处理复数。语言切换器使用语言的自称名称，而非旗帜。

决策树

模态框、侧边面板还是整页

Quick confirmation or 1-3 fields?                 → Modal
Edit details while keeping context visible?
  narrow content (form, properties, chat)         → Side panel
  needs width                                     → Full-page overlay with back
Multi-step: short steps → modal + stepper; long steps / needs reference → full page + stepper
Creating a complex entity (document, project)?    → Full page

通知类型

Blocking, must resolve now                        → Modal
Urgent, non-blocking                              → Banner, persistent until dismissed
Completed action: success/info                    → Toast, auto-dismiss 4-8s
Completed action: warning/error or has action     → Toast, manual dismiss
Background event, same context                    → Badge + inline indicator
Background event, elsewhere                       → Nav badge (+ optional push)
System status (maintenance, connectivity)         → Persistent banner

参考资料路由

任务涉及相关主题时，请加载对应文件。每个文件开头都有目录，可跳转到所需章节。

任务涉及……	文件
启发式评估、Nielsen 的 10 条原则、格式塔	references/01-core-principles.md
Fitts、Hick、Jakob、Tesler、峰终定律及类似规律	references/02-laws-of-ux.md
WCAG 2.2 标准、ARIA、EAA／法律合规	references/03-accessibility.md
字体排印、颜色、间距、层级、深色模式	references/04-visual-design.md
导航结构、站点地图、卡片分类	references/05-information-architecture.md
模态框、工具提示、拖放、动效时长	references/06-interaction-design.md
表单布局、验证、输入类型、错误	references/07-forms-and-inputs.md
触控目标、手势、响应式设计、移动端导航	references/08-mobile-ux.md
微文案、错误消息、语言风格与语气	references/09-ux-writing.md
访谈、可用性测试、调查、指标	references/10-user-research.md
令牌、组件 API、设计系统文档	references/11-design-systems.md
实时光标、头像、输入／在线状态指示器	references/12a-presence-awareness.md
冲突、同步、离线、共享、版本历史	references/12b-conflict-resolution-sync.md
画布缩放、平移、选择、操作	references/13a-canvas-navigation.md
画布图层、吸附、细节层次、渲染性能	references/13b-canvas-objects-performance.md
聊天界面、副驾驶、Agent、生成式 UI	references/14-ai-ux-patterns.md
暗黑模式、同意机制、DSA／GDPR 界面规则	references/15-ethical-design.md
首次使用、激活、空状态、清单	references/16-onboarding.md
通知系统、推送、消息提示、偏好设置	references/17-notifications.md
图表、仪表板、无障碍数据可视化	references/18-data-visualization.md
搜索、自动补全、筛选、无结果状态	references/19-search-ux.md
愉悦感、信任、语气、错误恢复时的情绪	references/20-emotional-design.md
表格、排序、分页、批量操作	references/21-data-tables.md
加载、骨架屏、乐观更新、Core Web Vitals	references/22-performance-ux.md
本地化、RTL、Intl、复数形式、文本扩展	references/23-internationalization.md
语音、多模态、跨设备输入	references/24-voice-and-multimodal.md
手机或 Web 上的摄像头条码／QR 扫描、取景器、QR 安全	references/25a-barcode-camera-scanning.md
扫描驱动型应用：仓库、POS、医疗保健、加固型或楔形扫描器、GS1	references/25b-barcode-scanner-workflows.md
展示条码／QR：票券、钱包通行证、QR 登录、打印标签	references/25c-barcode-display.md

参考值

指标	数值	来源 / 备注
目标尺寸	≥ 24×24 CSS px（AA）；iOS 为 44pt / Android 为 48dp	WCAG 2.5.8；Apple HIG；Material
正文文本	≥ 16px，行高为 1.4–1.6	WCAG 1.4.12 测试范围最高为 1.5
行长	50–75 个字符
文本对比度	普通文本为 4.5:1，大号文本（≥ 24px，或粗体 ≥ 18.66px）为 3:1	WCAG 1.4.3
非文本对比度	3:1（UI 边界、焦点环、图标）	WCAG 1.4.11
反馈延迟	< 100ms 会感觉即时；> 1s 时显示加载指示器；> 10s 时显示带取消选项的进度	Nielsen 响应时间限制
转场	通常为 150–300ms；大型动效 ≤ 500ms	Material 动效
加载指示器延迟	显示前约 300ms，以避免闪烁
Toast	4–8s 后自动消失（无操作项时）
文本扩展	30–40%（德语、芬兰语、俄语），短字符串最多可达 200%+	W3C 国际化
工作记忆	约 4±1 个组块（Cowan）；7±2（Miller）的说法已过时
画布	光标更新间隔 50–100ms，平移/缩放 60fps，吸附阈值 2–8px，缩放范围 10%–4000%	Figma 级工具
头像堆叠	显示 3–5 个，之后显示“+N”
AI 响应	首个 token < 1s，否则立即显示进度
展示的 QR 码	4 模块静区；模块实际尺寸 ≥ 0.25 mm；默认使用 M 级纠错	ISO/IEC 18004；IATA BCBP；DENSO WAVE
QR 码尺寸与距离	≥ 2×2 cm；扫描距离每增加 10 cm，尺寸增加 1 cm	NN/g 启发式建议

转化率、NPS 目标和完成率等数字取决于具体情境。不要将基准数据说成普遍适用的事实。建议以产品自身的基线为参照进行衡量。

反模式

每项均指向说明修复方法的参考文件。

• 暗黑模式、羞辱式确认、不对称的同意选项 → 15
• 桌面端导航隐藏、缺少位置感 → 05
• 无限滚动但没有位置提示或页脚 → 21
• 媒体自动播放、仅用颜色传达信息、焦点不可见 → 03
• 禁用按钮却没有解释、过度使用模态框 → 06
• 大段文字、缺少层级 → 04
• 触控目标过小 → 08
• 缺少加载、空内容或错误状态 → 22
• 同步失败却不提示、没有离线状态指示 → 12b
• 光标过多、缺少在线状态 → 12a
• 以屏幕中心为缩放中心 → 13a
• 隐藏 AI、未经同意应用 AI 更改或无法撤销 → 14
• 强制用户完成冗长引导 → 16
• 通知轰炸、首次访问就请求推送权限 → 17
• 字符串硬编码、宽度固定、布局仅支持 LTR → 23
• 只能通过语音操作、麦克风隐藏、没有识别反馈 → 24
• 只能扫码且没有手动输入选项、扫描失败却不提示 → 25a / 25b

Sources

Laws of UX · Nielsen Norman Group · WCAG 2.2 · Material Design · Apple HIG · Baymard Institute · Google PAIR · Microsoft HAX · Deceptive Design · EU DSA · EU Accessibility Act · W3C i18n · Liveblocks · Figma Engineering · Tufte · ColorBrewer · web.dev