从【忘记密码】看“分步填写”与“整体填写”体验上的差别

最近在工作中遇到了表单填写,涉及了web端 移动端,而移动端又思考了H5写的wap页面已经原生app,有了一些小想法。

举个栗子:

常见【忘记密码】这么一个使用场景,需要输入或点击的信息有以下几个:

1.绑定的手机号或者邮箱

2.输入一个验证码

3.向该手机号/邮箱发送动态码(此处考虑邮箱也是验证码而非验证链接的情况)

4.输入收到的动态码

5.修改后的新密码

6.确认修改后的新密码

这里可以看到,在第2步、第4步,都会有一个系统判定,所以在这两步其实是可以拆解的。

其中第2步为非必须过程(多在web端设置,需要此过程是防止脚本恶意攻击,待验证)

而第4步对于忘记密码来说是不可跳过的一步强判定


web端最简单的粗暴的思路

我司没推敲输出的页面

如我司之前设计的页面,所有信息堆积在一个页面。验证码可以系统即时判定,但是动态码就比较困难,如果动态码之后的信息输错,前面的表单内容需要再填一遍。

web端常规的思路


百度找回密码1


百度找回密码2


由一个引导流程,引导用户完成表单填写,在2、4两步需要系统判定的地方都有一个分步

写到这儿...我tm卡壳了。。。

本来主要是想写原生app因为速度快,可以单个逐一填写,而wap端因为是在页面,每次跳转都要重新读写页面,所以尽可能所有内容都在一个页面填写,分段即可。

上图吧,不管了

图1图2是小猪租房的编辑资料,图3是滴滴出行

可以看出在移动端不管是app还是wap,都会尽量让表单是可选择内容,而非填写内容。

细细看来分步式好像并没有什么优点,如果都是填写内容,保证表单不要和键盘冲突就好。


好吧,以上只是自己尝试第一次写交互的文,比较乱,凑合了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,236评论 22 257
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,252评论 4 61
  • 海芬把吸尘器塞回墙角。这是个阳光明媚的早晨,阳光透过大得离谱的落地窗洒在这间两居室的光滑地板上。周六的早晨...
    吃了吗您那阅读 195评论 4 1
  • 今夜本应暖,未道雨清寒。相约同沐月明,只剩梦中颜。寞客初为陌客,微雨难浇思语,谁解苦中眠。有酒随君醉,无伴怎堪怜。...
    风雨繁花阅读 391评论 0 5