android 短信 ios9,短信验证码：iOS和安卓端系统的设计方案差异和最优选择

骑猪看日落 2022-10-16 05:50 24阅读 0赞

登录动作往往伴随着验证码，这在iOS和安卓端的实现上存在差异，笔者以此为题进行了分析并提出了相应建议。

![3ae141abc35c548406470eb867d6236f.png][]

大家好，我是chamon，本期的研究社主要研究一下验证码系统在iOS和安卓端的实现差异，还有如何选择设计方案比较合理。

越来越好用的iOS验证码系统

去年6月iOS12发布，苹果系统支持了一键填充验证码的功能。而这个功能在之前的安卓系统就已经存在。

安卓甚至可以实现更方便的“自动读取短信并填充验证码”，不用点击“一键复制验证码”，但是这个实现需要获取短信授权。这个授权其实是一个高风险的授权，涉及信息安全和个人隐私问题(第三方应用可以通过短信授权访问你的短信内容，包括一些隐私和涉及财产安全的短信，所以我自己一般是不允许的)。

经过亲测，几乎很少应用会需要获取我的短信授权，量级比较大的应用仅仅只有百度贴吧。

![37c981229dcbf46dc02b498194f238b4.png][]

可能是这也跟2017年6月1日实施的《网络安全法》41条上面规定的“网络运营者不得收集与其提供的服务无关的个人信息”也有一定的关系。

对于iOS12新出的一键填充验证码功能，我个人是觉得非常方便的。先来分析一下用户的操作路径，传统的获取短信验证码需要经过：

切换程序>点击收到的短信>复制/记住验证码>切换程序>5 输入/黏贴验证码

而优化后的iOS系统操作路径，只需要做1步：点击系统键盘上面“From Message”的验证码。

![1f20e4b1b10c89dae61575988d35e1d2.png][]

相对来说，安卓系统反而没那么便捷(基于不对短信进行第三方授权基础上)。

操作路径如下：

点击收到短信的“一键复制按钮”(3-5秒有效)>点击输入框>长按/双击>点击粘贴选项

其实很多安卓手机都默认用自带的第三方输入法，例如百度输入法、搜狗输入法。这些输入法都有粘贴板，所以上面的路径“长按/双击”就可以替换成“点击输入法的粘贴板一键粘贴”(粘贴板的体验各异，搜狗输入法没有时间限制、百度输入法有3秒左右限制)。

![1fa9ec59ebc5c38cb7020ed5456e075a.png][]

为什么iOS会更便捷好用呢？

因为iOS在收到验证码之后，会弹出系统的键盘，并且获取短信。系统获取短信就不用担心第三方应用嗅探短信造成个人隐私或财产安全漏洞。而且无论用什么第三方应用，用什么第三方输入法，体验都是一致的。

安卓则会因为手机品牌不同，输入法不同的原因造成不一致的体验。

设计一小步，体验一大步

不知道从什么时候开始，一些App就把填写手机号码和填写验证码拆开分成两步。

![507b443c576c33466288e30dd26a2c59.png][]

再然后就是把验证码的输入框按数位拆分，拆成独立的下划线或者是独立的格子。

![637d2bc1665e7bffa5c829d241677266.png][]

虽然只是很简单的改变，但是里面包含的体验却是有了很大的提升。分两步填写的设计相比起同一个页面填写有以下这些好处：

减少单个页面内需要填写的内容，让用户更专注于当前要填写的内容；

在输入手机后需要点击下一步按钮进行确认，这个时候会下意识进行检查；

因为上面两点，大大降低输错手机号所造成的企业短信成本。

而把验证码的输入框按数位拆分，在显示上变得更清晰，更容易校对，减少出错率。

新的填写设计在体验上的优势：

能提前让用户对于验证码的位数有心理预期，体验更舒适；

从位数上限制了输入错误，错误后会自动清空，让用户重新填写，减少校对的耗时。

会变化的体验

但是随着系统层级上的交互改变，原本体验极好的设计方案，体验也会有所变化。

按数位拆分的设计方案早期常见于银行卡号和支付密码的填写。注意，这里是填写，填写需要的是清晰、准确、有填入感。所以，在填写验证码系统用拆分数位的设计方案简直就是再好不过的体验。

![2e4bf344c134d9601e374993cb770d0c.png][]

但当iOS系统的一键复制粘贴验证码出来之后，之前的清晰、准确、有填入感的优势基本上就消失了。

而在安卓系统上，由于一键复制粘贴验证码因授权问题受到限制的时候，拆分数位的设计方案很可能会让用户崩溃。

下面举几个我个人经常碰到的场景：

场景1

辛辛苦苦复制了一串6位的验证码字符，最后却只给了我一个的格子进行粘贴，这很反人类，还有点便秘的感觉。

![36669e7eed727c3e8b806f4cd26c9dd9.png][]

场景2

部分App在点击第一格的时候，App并不给我显示点击反馈，我都不知道自己是否已经点中并开始触发长按。

![788396db755aefb60d4300e78f482db7.png][]

场景3

当我习惯了这种手动粘贴体验之后，App最后竟然让我只能复制第一个字符到第一个格子；剩下的我又要重新去切换程序到短信内容，重新看一遍，记住并填写(当时真的很想卸载App，某些App的体验Bug，图找不到了)。

场景4

有些App可以通过系统粘贴进行粘贴，有些App则完全没有反应(在关闭了系统的验证码的高级安全设置前提下)。

![8c0e3bd26b665c1a4b8c69f226435f64.png][]

![4b6735015424e2bfdccfdcf5ff1e7953.png][]

也许有人会问：我们平时使用安卓系统是有一键复制和一键粘贴，为什么要去手动粘贴这么low？

上面说过了这跟授权问题有关，我去查过meterial design的规范，并没有找到一键粘贴的，只找到了复制和粘贴。也请教过安卓朋友，确认原生系统是没有所谓的一键粘贴的。你

看到的只不过是第三方输入法弹出的粘贴板贴心功能。在默认的系统输入法，只能通过双击或者长按进行粘贴。

设计应该怎么做？

那么我们应该怎么做这个验证码系统的设计呢？

个人给出的建议如下：

1. 分步填写页面会更好

不但用户能更聚焦，降低出错率。而且能减少企业成本。

至于用户修改需要返回上一步耗费的时间成本，既然是用户在降低出错率都能粗心造成的错误，由用户承担一定的修改时间成本也是理所当然的，而且最重要的是，修改并不是高频的行为。

![cb635639c44fb625582e9618ddeabf57.png][]

2. 按数位拆分不适用于安卓

iOS当然还是用拆分数位设计比较好，虽然一键粘贴之后，这种方案变得鸡肋。但是当需要去填写的时候，拆分数位的设计方案还是最优的。

而安卓由于太多限制，包括上面提到过的短信授权，还有信息设置里面的验证码安全设置，都能够让你不能顺利好好粘贴验证码。但是我体验了大部分采用不拆分数位设计方案的App，都没有上面无法粘贴的问题。

![6dcd11ac3b284294b113384cc252e9d8.png][]

既然有好的方案，我们为什么还要自找崩溃呢？

不拆分数位不代表不能变大变清晰，可以通过间距和字号大小来做达到拆分数位的效果(下图仅供参考)。

![87d13b805d63482b2ee3808e5358afb5.png][]

本文由 @Chamon 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

给作者打赏，鼓励TA抓紧创作！赞赏

[3ae141abc35c548406470eb867d6236f.png]: /images/20221014/31fd7da2b0604448b352869b3d222666.png
[37c981229dcbf46dc02b498194f238b4.png]: /images/20221014/0c8a3a63d0644e07a965387a2a069cbe.png
[1f20e4b1b10c89dae61575988d35e1d2.png]: /images/20221014/879110f5bcb6431ca50b164b74de8df5.png
[1fa9ec59ebc5c38cb7020ed5456e075a.png]: /images/20221014/3c34bf9ee199491fb969ef25ad0b4eb7.png
[507b443c576c33466288e30dd26a2c59.png]: /images/20221014/0c014caaf6ca4010b4681b4171123c4a.png
[637d2bc1665e7bffa5c829d241677266.png]: /images/20221014/a4ee183f3473469c87f004b7d96ef0f7.png
[2e4bf344c134d9601e374993cb770d0c.png]: /images/20221014/2cbdbac191764d7881b816e573c708d0.png
[36669e7eed727c3e8b806f4cd26c9dd9.png]: /images/20221014/c4a26f6ccdb248bcbc42a8d8f2dcf8f5.png
[788396db755aefb60d4300e78f482db7.png]: /images/20221014/9128656a1ea44fec9e60a81c64a6c082.png
[8c0e3bd26b665c1a4b8c69f226435f64.png]: /images/20221014/96fcf25931e345b39f0f34551cf52084.png
[4b6735015424e2bfdccfdcf5ff1e7953.png]: /images/20221014/1c9ff19b23dc4c4e8e9b7fbdc5a9607e.png
[cb635639c44fb625582e9618ddeabf57.png]: /images/20221014/b56324002ffa4907be270f05d33ec8ed.png
[6dcd11ac3b284294b113384cc252e9d8.png]: /images/20221014/6b77f1059c9243e884a5439ba77ae026.png
[87d13b805d63482b2ee3808e5358afb5.png]: /images/20221014/792a77dc602045a480dd4888d94ed501.png