作者网址:https://uxdesign.cc/@CoyleAndrew
原文地址:Design Better Forms
译者:mantfly
此文由非专业人士翻译自Medium,仍在不断修订中。
在设计表单的过程中,设计师常常遇到的问题,以及如何解决它们。
表单最好是一列
多列表单会影响用户的垂直方向感
标签和表格对齐
标签顶部对齐的表格比左对齐让用户完成度更高,并且顶部对齐的标签在移动端更容易转换。然而,为了更容易浏览,多数据多选择入口用左对齐的标签,相比顶对齐标签,可以减少高度,做更多提示。
将标签和输入框分组
标签和输入框放在一起,确保组与组之间空间足够大让用户不会混淆。
避免全大写
全大写不容易阅读浏览。
选项少于6个可以全部展示
下拉列表需要两次点击并且隐藏了选项,超过5个选项就使用输入选择器,超过25个选项就用相关搜索的下拉菜单。
不要把标签放在输入框里
把标签放输入框可以优化空间,尼尔森诺曼集团的Katie Sherwin总结过这个方式导致的一些使用问题。
把复选框(和单选按钮)一行行列出来以便浏览
给出明确响应的描述(CTAs: call to action)
明确的响应表明意图。
标明填写的错误
给用户标出哪里出错了并给出原因。
当用户打字的时候不要给错误提示(除非对他们打字过程有帮助)
不要隐藏基础的提示信息
尽可能保留基本的帮助信息。对于复杂的帮助信息,可以在点击输入框后出现在输入框后面。
把主要步骤和次要步骤区分开来
使用字段长度作为输入框长度
输入框的长度容纳内容的长度。类似电话号码、邮编等等可以用到。
不要用*号来表示必填项目
用户常常不知道*表达的是什么,相反,去设置可选填的会更好。
把相关的信息放在一起
用户的思考的时间是集中的,太长的表单会让人疲劳。有逻辑的分组会让用户更快熟悉表单。