最近在工作中遇到了表单填写,涉及了web端 移动端,而移动端又思考了H5写的wap页面已经原生app,有了一些小想法。
举个栗子:
常见【忘记密码】这么一个使用场景,需要输入或点击的信息有以下几个:
1.绑定的手机号或者邮箱
2.输入一个验证码
3.向该手机号/邮箱发送动态码(此处考虑邮箱也是验证码而非验证链接的情况)
4.输入收到的动态码
5.修改后的新密码
6.确认修改后的新密码
这里可以看到,在第2步、第4步,都会有一个系统判定,所以在这两步其实是可以拆解的。
其中第2步为非必须过程(多在web端设置,需要此过程是防止脚本恶意攻击,待验证)
而第4步对于忘记密码来说是不可跳过的一步强判定
web端最简单的粗暴的思路
如我司之前设计的页面,所有信息堆积在一个页面。验证码可以系统即时判定,但是动态码就比较困难,如果动态码之后的信息输错,前面的表单内容需要再填一遍。
web端常规的思路
由一个引导流程,引导用户完成表单填写,在2、4两步需要系统判定的地方都有一个分步
写到这儿...我tm卡壳了。。。
本来主要是想写原生app因为速度快,可以单个逐一填写,而wap端因为是在页面,每次跳转都要重新读写页面,所以尽可能所有内容都在一个页面填写,分段即可。
上图吧,不管了
可以看出在移动端不管是app还是wap,都会尽量让表单是可选择内容,而非填写内容。
细细看来分步式好像并没有什么优点,如果都是填写内容,保证表单不要和键盘冲突就好。
好吧,以上只是自己尝试第一次写交互的文,比较乱,凑合了。