提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
设计更好的表格
原作者 Andrew Coyle
原文来源 https://uxdesign.cc/design-better-forms-96fadca0f49c
设计师常犯的错误以及如何解决他们
无论是注册流程,多视图步进器,还是单调的数据输入界面,表格是数字产品设计中最重要组成部分之一。本文重点介绍表格设计的常见注意事项。
请记住,这些是一般准则,每条规则都有例外。
表格应该是一栏
多列会破坏用户的垂直动量
顶部对齐标签
用户以比左对齐标签高得多的速率完成顶部对齐的标记形式。顶部对齐的标签在移动设备上也可以很好。但是,考虑使用左对齐标签进行具有可变选项的大型数据集条目,因为它们更容易一起扫描,他们会降低高度,并提示比顶部对齐标签更多考虑因素。
用他们的输入分组标签
将标签和输入放在一起,并确保它们之间有足够的高度,这样用户就不会感到困惑。
避免全部大写
全部大写字母会更难阅读和扫描
如果选项少于6个,则显示所有选择选项
在选择器下拉列表中放置选项需要两次单击,并隐藏选项。如果有超过5个选项,请使用输入选择器。如果有超过25个选项,则在下拉列表中加入上下文搜索。
不要使用占位符文本作为标签
通过将占位符文本用作标签来优化空间是很诱人的。 这导致了尼尔森诺曼集团的凯蒂•舍温(Katie Sherwin)总结的许多可用性问题。
将复选框(和无线电)放在彼此之下以便进行扫描
将复选框放在彼此之下可以轻松扫描。
使CTA具有描述性
行动呼吁应说明其意图。
内联指定错误
向用户显示错误发生的位置并提供原因。
在用户填写字段后使用内联验证(除非在此过程中帮助他们)
用户输入时不要使用内联验证 - 除非它有帮助 - 例如创建密码,用户名或带字符数的消息。
不要隐藏基本的帮助文本
尽可能公开辅助文本。对于复杂的辅助文本,请考虑在聚焦状态期间将其放在输入旁边。
区分主要行动和次要行动
关于是否应该包括次要选项,存在更大的哲学争论。
使用字段长度作为可供性
场地的长度提供了答案的长度。将此用于具有已定义字符数的字段,如电话号码,邮政编码等。
抛弃*并表示可选字段
用户并不总是知道所需字段标记(*)隐含的内容。相反,最好表示可选字段。
集团相关信息
用户分批思考,长形式可能会让人感到压力。通过创建逻辑组,用户可以更快地理解表单。
为什么这么问?
省略可选字段并考虑其他收集数据的方法。始终问自己这个问题是否可以推断,推迟或完全排除。
数据输入越来越自动化。例如,移动和可穿戴设备在没有用户意识的情况下收集大量数据。会话 UI,短信,电子邮件,语音,OCR,位置,指纹,生物识别等。
让它变得有趣
生命短暂。没人想填表格。要健谈。搞笑点。逐步进行。做意想不到的事。设计师的角色是表达他们公司的品牌,以引起一种情感的反应。如果做得正确,就会提高完成率。确保你没有违反上面列出的规则。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册