MODULE 02 / LESSON 02

用户流程:先画完一件事

把入口、判断、操作、反馈与退出串起来。

6 / 60 课建立设计认知

先理解这个概念

用户流程描述从目标到结果的步骤,页面只是承载步骤的容器。除了成功路径,还要画出取消、失败、权限不足和中断后继续。流程图里的判断节点应该来自真实条件。

流程图应表达条件变化,而不只是页面顺序。“提交”是动作,“正在提交”是状态,“服务器接受”是事件。把三者区分后,就能发现重复提交、请求超时和用户离开等问题。尤其在联网操作里,客户端不知道结果并不等于服务端没有执行,界面不能随意把超时解释成彻底失败。

用程序员的语言说

像状态机和分支覆盖,不能只实现 happy path。

记住这三个原则

  1. 01

    从触发任务的入口开始,到用户确认结果结束。

  2. 02

    标出系统动作与用户动作,避免把等待误当成操作。

  3. 03

    每个失败分支给出可恢复路径。

实际设计时,分三步做

  1. STEP 01

    写出起点和终点,并给每一步标注由用户还是系统推动。用真实条件命名分支,例如“验证码是否过期”。

  2. STEP 02

    逐个加入取消、超时、权限变化、重复操作和中途退出。标记用户输入与系统记录在哪一步保存。

  3. STEP 03

    检查每条分支是否到达可解释的结果:成功、仍在处理、可重试或需要帮助。避免出现只能刷新才能离开的死路。

一个容易理解的例子

BEFORE / 常见问题

上传流程只画“选文件 → 上传 → 成功”。

AFTER / 可以这样改

补上格式校验、进度、取消、失败重试、重复文件与完成后的查看入口。

用户最需要帮助的时刻常常是主流程之外。

展开看:从场景到设计决定

修改邮箱先输入新地址,再验证,成功后才更新账号邮箱。验证码错误可重填,过期可重发;用户关闭页面时旧邮箱仍有效。提交验证请求超时后,应允许查询当前绑定状态,避免把成功的操作当失败重复执行。最终确认页要显示实际生效的新邮箱,并说明后续登录使用哪个地址。

适用边界与取舍

额外一步不总是负担。不可逆或高影响操作需要让用户核对对象与后果;相反,能安全撤销的低风险操作通常不值得每次打断确认。

YOUR TURN

把这个原则用一次

先做一个小判断

设计修改邮箱的失败分支。

再完成一份设计练习

画一个删除云端文件的流程,加入断网、误删、刷新和在另一设备删除四种情况。

容易踩的坑

流程越短不一定越好。高风险动作需要适当确认与可逆性。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3