别让用户在第三步弃坑：vibe 项目的多步骤向导实战

本文讲的不是“把一个长表单切成几页”这么简单。一个多步骤向导真正的考验，是用户在第三步卡住、关掉页面、第二天回来时，你的东西还能不能把他接住。很多 vibe 项目的向导死在同一个地方：步骤是按数据库表切的，进度条是按页数算的，返回上一页就丢数据，草稿全靠浏览器缓存撑着。用户不是在跟你的数据模型打交道，他是在完成一件自己的事。

本文所有示例均为虚构，包括“青禾小店”开店向导、“云帆出行”司机入驻流程等产品名、人物和数字，都是为了讲清楚做法编出来的，不要当成真实产品案例去引用。

先判断：这个流程到底该不该拆

不是所有长流程都值得拆。先数三个数：字段总数、必填项数、用户完成它需要做的“决定”有几个。如果字段不到十个、没有分支、用户一口气能填完，别拆，拆了反而多出点击和等待。反过来，出现下面任何一种情况，就该认真考虑拆步骤：字段超过二十个；中间有需要等待的环节，比如上传证件、等验证码、等人工审核；不同用户走不同分支，比如个人和企业走的资料完全不一样；用户需要先准备材料，填到一半大概率要去翻另一份文件。

还有一个更直接的判断法：让一个没见过这个产品的人口头说一遍他要做什么。如果他说的是“先注册，再传资料，再设收款，最后上架”，这就是天然的步骤边界。如果他说的是“就填一张表”，那就别硬拆。步骤边界要贴合用户嘴里的话，而不是你后台的表名。后台有用户表、店铺表、收款表，不代表用户心里有三张表。

虚构示例：青禾小店的开店流程一开始按后台切成了“账号信息、店铺信息、资质信息、结算信息”四步，上线后发现第二步流失最高。访谈后才发现，用户心里根本没有“资质信息”这个概念，他们的说法是“我得先证明这家店是我的”。后来把第二步改名为“证明这家店是你的”，并把营业执照、门头照片、身份证放在同一步里，流失就降下来了。名字改了，字段一个没动，效果却不一样，因为步骤名终于说的是用户的任务，而不是你的表名。

步骤怎么切：按用户心智，不按数据库表

切步骤有三条可用规则。第一，一步只做一件事，而且这件事能用一句话说清楚，比如“告诉我们你是谁”“选一个收款方式”“确认一遍再提交”。如果一步的标题需要用顿号才能说完，这一步就太大了。第二，把“要动脑子的决定”和“纯抄写的信息”分开。选套餐、定价格、写介绍是决定，填手机号、贴证件是抄写，两类混在一起，用户会在抄写时被迫做决定，疲劳感翻倍。第三，把需要等的东西单独成步或提前告知。上传证件要拍照、要等识别，就别把它塞在五个字段中间，让用户在一个长页里一边等识别一边填别的。

步骤数量也有讲究。三到五步最常见，超过七步就要警惕：要么是流程本身太长，需要砍字段；要么是切得太碎，用户每点一次“下一步”都在想“到底还有几步”。如果确实需要七步以上，考虑把后面的步骤折叠成“可选”或“稍后补”，先让用户把主流程走通。主流程的定义很简单：不走完它，用户就什么都得不到；可选步骤是不走完也能先用起来的部分。

分支的处理方式决定向导做得像不像人话。不要让用户先选一堆自己看不懂的分类，再根据分类跳步骤。更好的做法是：先问一个用户一定答得上来的问题，再用答案分流。比如开店向导先问“你是个人开店还是企业开店”，而不是先问“请选择主体类型：个体工商户／有限公司／合伙企业”。前者是用户自己的身份，后者是工商术语。分流问题最多问两个，问完立刻让用户看到变化：下一步的标题、字段、提示都跟着变，让他确信自己的选择起了作用。

每一步的标题和副标题要写成人话。标题说任务，副标题说这一步要花多久、需要准备什么。例如标题“设置收款方式”，副标题“大约一分钟，需要一张你本人的银行卡”。不要写“完善结算信息”这种只有开发能看懂的话。副标题里的时间要是实话：说一分钟，结果用户花了五分钟，他对后面所有步骤的信任都会打折。

进度指示怎么做才不骗人

进度条最容易骗人，也最容易被用户识破。按页数算进度是最常见的骗法：五步向导，用户走到第三步，进度条显示百分之六十，但第三步里有上传证件和等待审核，实际工作量可能只完成了三分之一。用户在第四步发现进度条几乎不动时，就会觉得被耍了。

诚实的做法有三种，选一种并坚持到底。第一种是步骤式：只显示“第几步，共几步”，不显示百分比，不承诺工作量。第二种是加权式：按每步的字段数和难度估算权重，难的步骤占的进度多一点，但要在文案里说明这只是估算。第三种是里程碑式：不画连续进度条，只标出几个关键节点，比如“资料已提交”“审核中”“已开通”，适合有人工审核的长流程。三种里最不容易出错的是第一种，尤其适合第一次上线的 vibe 项目。

还有几个细节决定进度指示可不可信。已经完成的步骤要允许点回去看，不要把已完成步骤锁死；当前步骤要明确标出，不能只靠颜色区分，因为色弱用户可能分不清；如果总步数会因为分支变化而改变，要在分流的那一刻就更新总数，不要让用户走到一半突然发现“共五步”变成了“共七步”。分支导致的步数变化，提前一句话说明比事后解释管用：“企业开店会多一步资质审核。”

不要在进度条上玩花样：不要用“还差一步就完成”去诱导用户填他本来不想填的可选信息；不要把“提交成功”算成一步，让用户以为提交后还有事。提交成功就是终点，终点页要说清楚接下来会发生什么、什么时候有反馈、用户现在能做什么，而不是只放一个大大的对勾。

返回上一步，不能丢数据

这是向导最基本的体面：用户点“上一步”，回来时之前填的东西必须原样在那里。实现上只有一条硬规矩：步骤之间的数据存在向导自己的状态里，而不是存在某个步骤的页面组件里。页面切走了，组件销毁了，数据不能跟着销毁。用一个统一的草稿对象承载全部步骤的数据，每一步只读写自己负责的字段，切换步骤只是换视图，不碰数据。

有三种返回场景要分别测一遍。第一种是点“上一步”按钮返回，这是最常见的，必须零丢失。第二种是点顶部步骤条直接跳回某一步，跳过去再跳回来，数据也要在。第三种是浏览器点后退按钮：这里最容易翻车，因为很多单页应用没有处理浏览器历史，导致后退直接退出了向导。办法是让每一步对应一个可前进后退的历史记录，或者拦截后退并把它映射成“回上一步”，同时给用户一个明确的退出路径，不要让他觉得被困住了。

返回时还有两个容易被忽略的点。一是修改前面步骤的内容后，后面步骤里依赖它的字段要不要跟着变。比如用户在第一步改了“个人还是企业”，第二步的字段列表就变了，旧的企业字段残留下来会变成脏数据。规则是：上游关键字段一改，下游依赖字段要清空并提示用户重新确认，不要悄悄保留。二是返回后不要把用户扔回页面顶部就完事，如果他之前在页面下方填表，返回后最好回到他离开时的滚动位置，至少不要让他重新找自己填到哪儿了。

草稿保存与断点续填：用户关掉页面也能回来

草稿保存不是锦上添花，是长向导的标配。用户填到一半被电话打断、手机没电、网络断了，这些都是常态，不是例外。草稿要做到三点：自动保存、随时可续、用户看得见。

自动保存的时机要选对：字段失焦时保存一次、步骤切换时保存一次、每隔一段时间也保存一次，不要等用户点“保存草稿”才保存。很多用户根本不会主动点保存，他们默认你替他存着。保存失败时要让用户知道，不要静默丢数据：顶部出现一条不打扰的提示“草稿保存失败，请检查网络”，比什么都不说强得多。保存成功则不需要每一次都弹窗，用一个低调的“已自动保存 HH:MM”就够了。

草稿存在哪里，决定了它能撑多久。只存在浏览器本地存储里，换个设备就没了；只存在服务器上，没登录的用户就存不了。务实的分层是：未登录用户先存本地，登录后立刻同步到服务器并合并；已登录用户直接存服务器，本地留一份兜底。合并时要定好冲突规则：以服务器上的更新时间较新的为准，同时把本地未同步的字段列出来让用户确认，不要静默覆盖。

断点续填的入口要显眼。用户第二天回来，应该在首页或列表里一眼看到“你有一个未完成的开店申请，继续完成”，点进去直接回到他离开的那一步，而不是回到第一步重新开始。续填时还要做一件事：把草稿里过期的信息标出来。比如验证码过期了、上传的证件图片失效了、之前选的套餐下架了，这些要逐项提醒用户重新确认，而不是等到最后提交时才一次性报错。

草稿也要有保质期和清理规则。写清楚草稿保留多久，比如三十天，到期前提醒一次，到期后清理并告知用户。没有保质期的草稿会越积越多，最后变成一堆谁也不敢删的脏数据。清理时不要悄悄删，给用户一次“还想继续吗”的机会。

每步校验和最终提交校验，怎么分工

校验分工不清，向导就会变成“每一步都拦着你，最后一步还拦你一次”。合理的分工是：每步只校验本步骤内、用户现在就能改的东西；最终提交时再做跨步骤的、需要全局信息才能判断的校验。举个例子：手机号格式错了，在填写手机号那一步就拦住；但“收款人与店铺负责人不是同一人”这种需要跨步骤比对的规则，放到最后统一校验，因为用户在前面步骤里还看不到后面的信息，提前拦他也没用。

每步校验的时机也有讲究。用户正在输入时不要逐字报错，等他填完这个字段、焦点离开时再校验；点“下一步”时把本步所有错误一次性列出来，并把焦点移到第一个错误字段，而不是只在页面顶部放一句“请检查输入”。错误文案要说清怎么改，不要只说“格式不正确”。比如“手机号应为十一位数字，你填了十位”就比“手机号格式错误”有用得多。至于校验规则本身怎么写、错误文案怎么措辞，那是表单校验那篇指南的主题，本篇只定分工，不展开复述。

最终提交校验要做两件事。第一，把所有步骤的数据再跑一遍完整校验，因为用户可能通过返回修改了上游字段，导致下游数据失效。第二，提交前给用户一个核对页，把关键信息按步骤汇总成一张清单，让用户自己看一遍再点提交。核对页上每个条目都要能点回去改，改完直接回到核对页，不要把用户扔回流程起点。提交按钮在提交过程中要置灰并显示“提交中”，防止重复点击产生两条记录；提交失败要保留全部数据并说清失败原因和下一步，别让用户从头再来。

移动端长向导：折叠、分页与拇指区的取舍

移动端做长向导，最忌讳把桌面端的步骤条原样缩小塞进手机屏幕。五个圆点加连线在手机上挤成一团，用户根本点不准。移动端的做法是：顶部只显示“第 3 步，共 5 步：设置收款”这一行文字，步骤条只在用户点开时展开成完整列表。文字进度比图形进度在小屏上更可靠，也更省空间。

长步骤在移动端要拆成“屏内折叠”。一个步骤里如果有超过一屏的内容，把次要字段收进可展开的区块，默认只展开必填部分，展开按钮要写明里面是什么，比如“展开填写发票信息（可选）”。不要用“更多”这种什么都没说的词。折叠的区块展开后，页面要自动滚动到该区块顶部，别让用户自己找。

按钮位置是移动端最容易被忽视的坑。下一步、上一步要放在拇指够得着的底部固定区，而不是只放在长页面的最底下，否则用户每填完一屏都要滑到底才能继续。固定底部栏要留出安全区，避开手机底部的手势条；同时内容区的底部要留出足够的 padding，防止最后一行字段被固定栏挡住。键盘弹起时，固定栏要跟着收起来或让位，不要挡住正在输入的字段，这是移动端向导翻车率最高的细节之一，提测前务必在真机上走一遍。

移动端还要处理“填一半被打断”更频繁的现实：来电、切换应用、锁屏都可能导致页面被系统回收。所以移动端的自动保存间隔要比桌面端更短，恢复时要优先恢复到用户离开的那一步和那个字段，而不是只恢复到步骤开头。

放弃率高的步骤，怎么定位，怎么精简

先埋点，再动手改。每个步骤至少记四个数：进入人数、完成人数、下一步点击率、返回上一页的人数。放弃率最高的步骤通常不是字段最多的那一步，而是“用户没想到要准备东西”的那一步：比如突然要上传证件、突然要填一个他不知道的编号、突然要他做决定。定位时要把“从这一步退出的人”和“从这一步返回上一步的人”分开看：退出多，说明这一步本身有问题；返回多，说明前面的步骤给了用户错误预期，他回来改东西。

找到问题步骤后，按顺序做四件事。第一，砍字段：把“有了更好”但不是“没有不行”的字段移到可选或稍后补，必填项只留真正拦得住流程的。第二，提前告知：在上一步的副标题或步骤开始处告诉用户这一步需要什么材料，让他有准备再进来，而不是进来才发现要去翻文件。第三，拆决定：把一个难决定拆成两步，先问简单的，再问难的；或者给默认值，让用户改而不是从零选。第四，降门槛：允许用户跳过这一步先往后走，系统记住他欠了什么，之后在显眼处提醒他补齐，而不是把他卡在原地。

虚构示例：云帆出行司机入驻流程的第三步“车辆信息”放弃率最高，埋点发现大量用户在这一步停留超过十分钟后退出。访谈发现，很多人不知道车辆识别码在哪里找。改法没有动字段，只是加了一张图：打开车门侧边、行驶证上哪里能找到识别码，并把“不知道在哪”做成一个可点的提示。放弃率降下来，不是因为流程变短了，而是因为用户不再因为“不知道”而卡住。精简不等于一味砍字段，有时候加一句解释比砍三个字段更有效。

改完一轮要再看一周数据，不要凭感觉宣布胜利。只改一个变量再对比：同一周改了字段又改了文案又换了顺序，数据变好了也不知道是哪一项起的作用。一次改一项，改完看数据，再决定下一项。

一份可以直接照抄的步骤设计清单

开工前逐项打勾。流程层面：字段总数、必填项数、分支数已数过；每一步都能用一句话说清任务；步骤名是用户的任务语言，不是表名；可选步骤已从主流程里摘出来。进度层面：进度算法已定好是步骤式、加权式还是里程碑式；分支导致步数变化时有提前说明；已完成步骤可点回；提交成功页说清下一步和反馈时间。

数据层面：步骤间数据存在统一草稿对象里，切换步骤不丢数据；浏览器后退已映射为回上一步；上游关键字段修改后下游依赖字段有清空与提醒规则；自动保存时机、失败提示、保存时间显示已定好；断点续填入口显眼，过期信息有逐项提醒；草稿保质期和清理规则已写进产品文案。

校验与提交层面：每步只校验本步可改项，最终提交做跨步骤校验和完整重跑；核对页可逐项点回修改；提交中按钮置灰防重复；提交失败保留数据并说清原因。移动端层面：顶部用文字进度而非挤成一团的步骤条；长步骤次要字段已折叠且展开按钮写明内容；底部按钮固定在拇指区并避开手势条；键盘弹起时固定栏不挡输入框；真机上完整走通过一遍。

状态机要点：把向导画成一张图再写代码

向导写崩，往往是因为状态是散落在各个页面里的布尔值：这一页有个是否已填，那一页有个是否已上传，合起来没人说得清向导到底处在什么状态。动手写代码之前，先把向导画成一张状态机图，状态不超过七个，常见的就这些：未开始、进行中、待补充、待审核、已完成、已放弃、已过期。每个状态写清它能往哪个状态走、触发条件是什么、用户在该状态下能看到什么。

有三条状态机规则值得钉在墙上。第一，任何一步的保存动作都不能直接把状态推到“已完成”，只有最终提交成功才能。第二，“待补充”是一个正式状态，不是“进行中”里将就一下：用户跳过了可选步骤，系统要记下他欠了什么、去哪里补，而不是假装流程走完了。第三，状态变化要留记录：用户什么时候进入待审核、什么时候被打回补充、打回原因是什么，这些记录既是客服处理客诉的依据，也是你定位放弃率的原始数据。状态机图画完后，让没参与开发的人照着图走一遍流程，走不通的地方就是图还没画对。

最后说一句大实话：向导做得好不好，用户不会夸你，他只会默默走完。但向导做得不好，用户会立刻用脚投票。把步骤切成用户心里的样子，把进度说诚实，把数据存稳，把断点接住，这四件事做到了，向导就已经超过了大多数 vibe 项目。