设计思路:
1、起始状态时,验证按钮置灰,登录按钮置灰。
2、输入手机号码,且经过验证为11位时,验证按钮变为亮色,提示用户可以点击。
3、点击验证后,发送验证码短信,同时按钮置灰,进入20秒倒计时。之所以选择20秒,是因为经过实际测试,60秒等待时间过长,若改为20秒以内,有可能由于信号原因导致连续发了两次验证码后,用户才收到。
4、输入验证码,检验为4位或6位的正确验证码个数时,则登录按钮变亮色,提示用户可以点击登录。
5、若在验证码栏输入状态超过5秒,输入框右侧的撤销按钮会变为“没收到?”。点击此提示,则会调起短信,给开发者发送一个验证码短信,发送后则验证登录。
6、在输入框输入任何内容时,在输入框右侧会出现X图标(撤销按钮),点击全部撤销已输入内容。在输入框中无任何输入内容时,不会出现撤销按钮。
7、之所以把“验证”放在上面,是体验了多个App后,分析认为手机验证这种交互方式已被用户熟知。输入手机号码后自然而然的进行验证。而放在下面,用户的思考过程则是发现需要验证码,然后点击验证。后者不如前者更流畅、更直接、不用思考。
8、从美学角度来看,使用同样的元素营造统一,而后又打破这种统一,产生对比。