用户体验
UX 从头到尾

一份完整的图解指南,帮助理解以人为本的设计

01 — 定义

什么是用户体验?

UX(User Experience,用户体验)是一个人在与数字产品互动时形成的整体感受。它不仅关乎产品看起来怎么样,还关乎使用时 感觉如何:是否直观、有用、令人满意。

以人为本
设计决策始终从用户真实的需求、动机和使用情境出发。
不只是美观
UX 涵盖信息架构、导航流程、无障碍和性能,而不仅仅是视觉外观。
基于证据
决策要用数据支撑:可用性测试、访谈和真实的行为指标。
迭代过程
UX 并不随着上线而结束:它会根据反馈和新的需求不断演进。

02 — 关键区别

UX 与 UI:有什么区别?

UX
用户研究
信息架构
用户旅程图
可用性测试
线框图和原型
vs
UI
色彩与字体
图标与插图
视觉组件
动画与过渡
风格指南

UX = 如何运作 · UI = 看起来怎样 · 两者相辅相成

03 — 方法

UX 设计流程

1
调研(Research)
用户访谈、问卷调查、竞品分析以及使用情境研究。目的是弄清楚用户是谁,以及他们面临哪些真实的问题。
工具:访谈、问卷、数据分析
2
定义(Define)
把信息归纳为虚构角色(用户画像)、同理心地图和问题陈述。回答:我们要解决什么问题,为谁解决?
工具:用户画像、用户旅程图、HMW
3
构思(Ideate)
头脑风暴、亲和图和集体创意技巧。先不加筛选地产生大量想法,再从中挑选最有希望的。
工具:疯狂 8 分钟(crazy 8s)、我们可以如何(how might we)、草图
4
原型(Prototype)
制作低保真或高保真的方案表现形式:从纸上草图到交互原型。目的是尽快把想法变成看得见的东西。
工具:Figma、Balsamiq、Marvel
5
验证(Test)
与真实用户一起测试,发现可用性问题。测试结果再次反馈到调研阶段,形成闭合的迭代循环。
工具:主持式测试、眼动追踪、A/B 测试

04 — 基础

尼尔森十大可用性原则

1
系统状态可见
系统应始终让用户知道正在发生什么。
2
与现实世界一致
使用用户的语言,而不是系统的语言。
3
用户控制与自由
让用户可以轻松撤销和重做操作。
4
一致性与标准
相同的元素应始终以相同的方式运作。
5
预防错误
预防错误胜过显示错误信息。
6
识别 > 回忆
展示选项;不要迫使用户记忆。
7
灵活与高效
为熟练用户提供快捷方式,为新手保持简单。
8
极简设计
去掉对主要流程没有价值的内容。
9
帮助识别错误
清晰的提示信息,解释问题并给出解决办法。
10
帮助与文档
必要时提供易于查找和使用的文档。

05 — 常见错误

UX 中应避免什么?

✗
不研究用户就开始设计
→ 设计之前至少做 5 次访谈
✗
把美观放在功能之上
→ 漂亮却看不见的按钮是没用的按钮
✗
不和真实用户一起测试
→ 5 个用户就能发现 85% 的可用性问题
✗
一开始就忽视无障碍
→ 从设计阶段起就遵循 WCAG 2.1 指南
✗
产品上线后不再迭代
→ 收集数据,找出摩擦点,持续改进

06 — 资源

UX 必备工具

原型设计
Figma
在云端协作设计和制作原型
调研
Maze
远程和自动化的可用性测试
分析
Hotjar
热力图和会话录制
问卷
Typeform
收集反馈的表单和问卷
协作
Miro
用于工作坊和构思的数字白板
流程
Whimsical
快速绘制流程图和线框图

“设计不仅仅是看起来和摸起来的样子。设计是它如何运作。”

— 史蒂夫·乔布斯