1.填写域提供清晰可理解可视化的标签
填写域是用户填写表单首先会聚焦的地方,类似有用户名/密码等填写信息,用户需要清楚地了解每个空白域需要填写的信息以及格式。一目了然才能做到不厌烦。
2.字体大小
一般来说,主字体至少14px大小,16px是安全字体大小。
3.合适范围的触摸域
在触摸设备上填写表单的现象越来越常见,Apple一直倡导按钮最小应为44px44px,因为它接近人的手指大小反应的范围。当然如果你在一个长表单中全部使用44px大小的空白域,将会在网页上占据大量空间,因此我建议用32px40px。
Bootstrap默认高度为32px,这是一个很好的基准。
4.合理的输入框大小
每个信息输入框的大小不应该是一致大小,当你在填写邮政编码时,我们知道它是由4-6个数字组成的,因此与用户名的输入框长度相比,它应该更小以达到用户的期望。
5.浏览器默认的点选框机制
点选框的功能一般是用Javascript库实现的,但现在可以纯粹用SVG和CSS实现。
[SVG animation]可以做到样式很漂亮。但是不易用还是在损害用户的利益。
select2所以使用浏览器默认的选择机制才是合理的。
6.可视化错误提示
应在可视化区域让用户接收错误的信息提示。
7.清晰的可选择区域提示
一般情况下用星号* 提示用户此区域选择性填写。
8.选择性隐藏不必填写信息
当两部分信息是独立存在时,可以逻辑性地隐藏部分填写信息。例如,在电商环境下,用户的支票地址信息很可能就是用户接收发货的的地址,这时可以隐藏地址这部分输入框的填写,待用户需要时再出现即可。
9.精简输入信息
尽量避免不必要信息的填写特别是数字。
10.输入样式的提醒
当被要求填写用户名、邮件地址、电话号码等信息时,应给出输入样式的范例。