微信号:front_end_talk

介绍:Front-End Talk,煮酒论前端.专注前端开发的技术媒体.

设计更好的表单

2016-07-14 13:14 FETalk

无论是注册流程、多页面的步进还是单纯的数据录入,表单都是最重要的组件之一。这篇文章将会介绍在表单设计中我们该做什么,不该做什么。本文只是一篇常规的设计指南,实际生产过程中,每一条规则都可能有例外。


表单应该是单列的


多列的表单有损用户的垂直注意力


标签应该顶部对齐


相对于左对齐的标签,用户更有可能完成标签顶部对齐的表单。另外,顶部对齐的标签在移动设备中的显示效果通常也更好。不过对于有大量字段需要输入的表单,可以考虑采用标签左对齐,这样可以减少表单高度,让字段一目了然。


标签和对应的输入控件要在视觉上形成一组


标签与输入控件靠近一些,确保用户不会产生疑惑


杜绝大写


大写的单词会增加阅读难度。当然,中文没这毛病


如果选项小于6个,将他们全部展示出来


把选项放在Select中要求用户进行两次点击。只有当选项数目超过6个,才考虑将他们放入select中,如果超过25个,还需要为下拉控件提供搜索功能


不用要占位符替代标签


考虑到能节省不少控件, 用占位符替代标签很诱人。但这样做会导致很多可用性问题


checkbox和radio采用垂直布局,方便扫视


采用垂直布局,用户更方便扫视


文字要能够触发行动


文字要站在用户的角度去描述,增加用户采取行动的机会


错误提示要与对应的控件在一行


当错误发生时,在错误发生的位置后面紧跟错误原因


在表单完成后使用内联验证


不要在用户输入没有完成时对表单进行验证,除非验证提示能对输入提供指导作用,比如实时统计用户名或者密码的字符长度


不要隐藏基本的帮助性文字


对于简单的帮助性文字,直接将其显示在对应的控件周围。对于复杂的文字描述,可以考虑在控件获得焦点后置于其后


区分主要动作和次要动作


现在甚至在讨论次要动作是否应该包括在内


输入控件的长度要反映出内容的可接受长度


对那些具有固定长度的字段请采用该方法,比如电话号码、邮编等。


不要再使用 * 标记必要字段,用“可选”把非必填字段标记出来


虽然*是一个常用的标记必要字段的符号,但仍不能保证所有的用户都能理解其含义,更好的选择是用文字标出非必填字段


把相关字段放在一起


有很多字段的表单可能会让用户不知所措,将相关的字段放置在一起有助于用户更快地进行思考和响应


为什么要问用户?

对于可选的内容,我们应该考虑采用其他的办法去搜集这部分信息而不是直接向用户提出。始终问自己这个问题是否可以通过已有数据推算得到、是否可以推迟甚至完全不需要。

数据获取正逐渐自动化,现在的移动设备和可穿戴设备可以在用户毫不知情的情况下获取大量信息。始终思考是否能购利用社交网络、对话式的UI设计、短信、电子邮件、语音、光字符阅读器(OCR)、位置、指纹和生物特征等来获得我们想要的信息。


有趣很重要

生命短暂、没人想把宝贵的时光浪费在填写表单上。所以,表单务必要友好、有趣,能慢慢吸引用户。要能打破常规,对设计者来说,将公司品牌传达给用户并激发出情感共鸣是自己的重要职责,如果做得好,将会在很大程度上增加用户完成表单的可能性。






 
FETalk 更多文章 【成都前端Meetup】如何进行前端测试 【Meetup #4 活动总结】如何开展前端测试 CSS在大型项目中的结构设计 前端自动化工具推荐 为什么我要使用自己编写的框架(而且你也应该)
猜您喜欢 Mysql分库分表方案 Android换肤技术总结 你妈喊你学UI啦!UI初学者常见问题汇总! 从 SVN 迁移至 Gitlab + Gitflow 总结 关于Android配色(2)