佰新网络科技广州分公司手机短信验证流程设计

1 验证是验证什么？为什么要验证

验证所存在的需求场景，就类似于人之间打招呼的场景。
首先打招呼前，需要让机器明白即将作出一系列指令的主

体，即要打招呼的是“人”而不是“机器”，所以其验证

目的之一是：对操作者是否为人的身份验证。

当机器知道了这就是要打招呼的对象后，为了满足整个行

为的顺利完成，得需要让机器知道“你”是否有打招呼的

意愿，即验证目的之二是：对操作者是否本人意愿操作的

验证。
所有的验证实质都是在满足以上的目的。

02 流程可视化设计思路
于短信验证流程是比较常规固化的基础流程，在设计思路

上为由抽象场景得出任务流程，再由任务流程具象交互界

面的思路。其中具象交互界面的思路会拆分为考虑“展现

形式”以及“页面元素”，以更好地优化体验操作。

03 场景与流程

场景洞察
目前短信验证的场景大部分存在于登录/注册场景，

修改个人重要信息场景等。

对于这些场景，我们需要洞察的要点主要为：
1.场景触发——触发这个场景的需求原因是什么？
2.场景目的——这个需求实际是为了解决什么问题？
3.场景任务——解决这个问题用户需要执行的任务是什么

？
基于任务的得出，即可以得到用户实际操作的一系列行为

触点，下面需要基于这些行为梳理流程。

流程梳理
流程梳理主要借助泳道图的方式，以流程时间节奏以及参

与角色作为横竖维度划分，梳理如下：
（由于本文主要讨论前台页面设计，其中对后台及第三方

短信平台的行为没有作细致展开。）

前台页面的设计，我们主要关注“用户”和“前台客户端

”两条竖轴的内容。
1.用户竖轴
由此可见用户主要的行为分为四步：
1）输入手机号
2）获取验证码
3）输入验证码
4）提交
这四个行为决定了页面的功能呈现。

2.前台客户端竖轴
主要决定了一些需要在前台展示的基础状态，梳理如下：

其中，流程和状态的梳理只需一次性复盘，后续的类似短

信验证场景都可以快速地查看复用；但对于页面细节的展

示，还是需要根据实际项目场景来分析，所以下面将详细

介绍对于“展现形式”和“页面元素”的思考。

04 展现形式的抉择

页面形式or弹窗形式
首先，先了解两种形式的特性：
1.页面形式
特点：内容承载范围足够大，信息承载能力强；体量重、

给人感觉稳定性更高；一般一页只展示输入验证的功能，

无其他内容干扰。
2.弹窗形式
特点：多为模态弹窗；轻量化、响应快；可以不中断用户

的当前核心操作，令用户聚焦中心更集中以尽快完成验证

进入下一步任务。

了解特性后，我们还需要明确的问题是：短信验证终的

展现形式，并不是由验证流程决定，而是以其所存在的任

务场景来定。因为验证行为一般不会单独存在，肯定会有

前后任务场景的触发，以更好地服务于场景目的的达成。

举个栗子说明
某用户换了新手机号码后，为了在京东上更好地获得订单

支付的短信提醒，需要修改绑定手机号的信息，因此需要

利用新手机号短信验证的手段达到目的。
代入场景洞察分析要点来看：

为了满足“重新绑定手机号”任务的执行完整性与正确性

，短信验证的操作步骤需要介入用户输入操作场景，它应

跟手机号输入信息共同考虑。

在场景基础上结合用户诉求，可发现：
1）当用户需要重新绑定手机号的时候，肯定需要在产品

中有一个稳定可找到的入口。因为这个需求场景不是一次

性的，可能会产生多次，且修改手机号的信息相对为个人

的重要信息，用户会更严谨地对待这个修改需求。由于该

场景任务存在的必要性，该诉求的关键词是：稳定性。

2）当在做短信验证的时候，用户希望能更聚焦，直接地

完成，认知上来讲因为只有修改这一件事情，不应该被其

他东西所打扰。基此的关键词是：无干扰。
可见：结合前面梳理的形式特性，重新绑定手机号的场景

任务更适合利用页面形式来展现。

那么，对于弹窗形式，因为其轻量快速响应，大部分会适

用于一些不好被打断的场景任务。比如在某个一次性的H5

活动页中，用户需要通过以短信验证手段，登录来领

取抽奖奖品。这个场景下选择弹窗形式，让用户有一种就

差这一小步我就能马上领到奖品的意识。若是页面形式的

，则会让用户感觉该验证步骤形式太重，担心是否领取步

骤会很长或是否有成功领到奖品。
由于以上仅举例页面形式的场景，这里再给大家总结一下

要点：

分步验证or不分步验证
由于短信验证流程也算表单设计的其中一种，在做表单设

计时有一个体验建议是：一个页面只做一件事情。

回顾上面总结的“用户”竖轴，用户的四个行为组成的任

务为：
输入手机号→获取验证码→输入验证码→提交
这里实际是要确定两件事情：手机号信息和验证码信息。

在体验过不同竞品后的感触是：一步两步其实对于实际操

作负担并没有那么严重。因为我一心只想着快点完成这个

短信验证流程，从而登陆首页或者成功修改信息。而分步

验证的目的则正好是为了达到专一。所以从体验设计

来讲分步会比不分步更优。

但分步验证也会存在逆向操作成本增加的问题：
如果用户临时发现手机号码填错且已进入输入验证码步骤

，分布操作则需要用户先点击“返回”按钮，清空手机号

输入栏再重新填写。此处增加了一步点击“返回”操作的

成本。不分布操作由于都在当前页面展示，则没有这一步

的成本。

但终基于优先为高频场景考虑来讲，上面问题的考虑优

先级较低，设计师需要明确这个风险，但不影响我们挑选

体验更好的解决方案。
05 页面元素的优化

验证码输入——分数字框or不分数字框

关于这个设计点，其实优劣是比较明显的，因为分数字框

的优势是：
1.能预知即将输入的验证码有多少位，提供了记忆预期。
2.输入出错概率降低。
这些优势都能更好地保障流程的完整性与正确性，所以分

数字框是更优的方式。

但从体验了安卓系统下的短信验证输入后发现，分数字位

会导致一个功能问题是：
在安卓下进行短信验证码复制操作时，大部分场景只能复

制到个数字框中。但该问题应该可以从前端优化中得

到解决，保证用户复制操作的一步到位，不需要返回手动

输入的困境。