恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【研究社】验证码_iOS和安卓端验证码系统的设计差异
0.0°
2019-11-08 原创文章 经验/观点 举报 1336 1 1 0

今天研究的课题是:验证码系统到底应该怎么设计比较合理?



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


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


去年6月iOS12发布,苹果系统支持了一键填充验证码的功能。而这个功能在之前的安卓系统就已经存在。安卓甚至可以实现更方便的“自动读取短信并填充验证码”不用点击“一键复制验证码”。但是这个实现需要获取短信授权,这个授权其实是一个高风险的授权,涉及信息安全和个人隐私问题(第三方应用可以通过短信授权访问你的短信内容,包括一些隐私和涉及财产安全的短信,所以我自己一般是不允许的)

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



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


对于iOS12新出的一键填充验证码功能,我个人是觉得非常方便的!
先来分析一下用户的操作路径,传统的获取短信验证码需要经过:
1 切换程序—》2 点击收到的短信 —》3 复制/记住验证码 —》4 切换程序 —》5 输入/黏贴验证码。
而优化后的iOS系统操作路径,只需要做1步:
1 点击系统键盘上面“From Message”的验证码。


相对来说,安卓系统反而没那么便捷(基于不对短信进行第三方授权基础上)。
操作路径如下:
1 点击收到短信的一键复制按钮”(3-5秒有效)—》2 点击输入框 —》3 长按/双击 —》4 点击粘贴选项。


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



为什么iOS会更便捷好用呢?因为iOS在收到验证码之后,会弹出系统的键盘,并且获取短信。系统获取短信就不用担心第三方应用嗅探短信造成个人隐私或财产安全漏洞。而且无论用什么第三方应用,用什么第三方输入法,体验都是一致的。安卓则会因为手机品牌不同,输入法不同的原因造成不一致的体验。


  设计一小步,体验一大步  


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


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


虽然只是很简单的改变,但是里面包含的体验却是有了很大的提升。分两步填写的设计相比起同一个页面填写有以下这些好处:
1、减少单个页面内需要填写的内容,让用户更专注于当前要填写的内容;
2、在输入手机后需要点击下一步按钮进行确认,这个时候会下意识进行检查。
3、因为上面两点,大大降低输错手机号所造成的企业短信成本。

而把验证码的输入框按数位拆分,在显示上变得更清晰,更容易校对,减少出错率。
新的填写设计在体验上的优势:1、能提前让用户对于验证码的位数有心理预期,体验更舒适;2、从位数上限制了输入错误,错误后会自动清空,让用户重新填写,减少一一校对的耗时。


  会变化的体验   

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


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


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

而在安卓系统上,由于一键复制粘贴验证码因为授权问题受到限制的时候,拆分数位的设计方案可能会让用户崩溃。下面举几个我个人经常碰到的场景:


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




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




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


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



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



上面说过了这跟授权问题有关,我去查过meterial design 的规范,并没有找到一键粘贴的,只找到了复制和粘贴,也请教过安卓朋友,确认原生系统是没有所谓的一键粘贴的。你看到的只不过是第三方输入法弹出的粘贴板贴心提示。在默认的系统输入法,只能通过双击或者长按进行粘贴。


  设计应该怎么做? 


那么我们应该怎么做这个验证码系统的设计呢?
个人给出的建议如下:

1、分步填写页面会更好
不但用户能更聚焦,降低出错率。而且能减少企业成本。至于用户修改需要返回上一步耗费的时间成本,既然是用户在降低出错率都能粗心造成的错误,由用户承担一定的修改时间成本也是理所当然的,而且最重要的是,修改并不是高频的行为。


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


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


既然有好的方案,我们为什么还要自找崩溃呢?当然不拆分数位不代表不能变大变清晰。可以通过间距和字号大小来做达到拆分数位的效果。(下图仅供参考)


其实以上都是废话,因为还有一个比短信验证码更好用的手机号码一键登录。嘿嘿



 更多历史文章:

1、【研究社001期】启动图的适配方案

2、【理论社001】微交互的构成要素

3、【理论社002】尼尔森交互设计十大原则

4、【日交互007】首页金刚区常驻导航栏入



有兴趣讨论更多交互和视觉方案的可以关注公号“熊社”,后台留言微信号即可。

Powered by Froala Editor

更新:2019-11-08

收藏

1人已收藏

熊大chamon

翔是一口一口吃出来的

  • 9

    作品

  • 13

    粉丝

  • 15

    关注

  • 【体验社004】外卖快递正序还是倒序好
  • 【交互】交互设计基础元素与定义
  • 小银弹
  • 卡片式设计的优点和不适用性

    猜你喜欢

      2019-11-08 原创文章 经验/观点 举报 1336 1 1 0

      【研究社】验证码_iOS和安卓端验证码系统的设计差异

      0.0°

      你确定要举报【研究社】验证码_iOS和安卓端验证码系统的设计差异

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年11月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录