什么标签用于在表单中构建复选框_表单更好的的设计形式「译文」「转载」

本文探讨了表单设计的重要性和常见注意事项,包括表格布局、标签对齐、选项展示、占位符文本使用、复选框排列、描述性按钮、错误提示和内联验证等。建议设计师遵循这些原则,以提高用户填写表单的效率和体验,同时提醒避免使用全大写、过多的选项和隐藏基本辅助文本。通过创造性的方法,如利用自动化数据输入和品牌表达,可以使表单设计更具吸引力。
摘要由CSDN通过智能技术生成

bffbbc69f2ffedca0b9c56f074c213ae.png

无论是注册流程,多视图步进器还是单调的数据输入界面,表单都是数字产品设计中最重要的组成部分之一。本文重点介绍表单设计的常见注意事项。这些是一些常用的规则,当然每条规则都有例外。

表格应该是一列

3a9e7030557ef209802b10b90a75f6ac.png

多列会破坏用户的垂直视角,切换视角会增加用户的使用成本。

顶部对齐标签

da05c097b25aad414de97547fa178566.png

顶对齐以对比左对齐用户更高效率的完成表单填写。顶部对齐的标签在移动设备上也可以很好的使用。但是,对于具有可变选项的大型数据集条目,请考虑使用左对齐标签,因为它们更容易一起扫描,它们降低了高度,并且比顶部对齐的标签更值得考虑。

将标签及其输入分组

f702cfe61ea0b9a7a0709f48d803099f.png

将标签和输入放在一起,确保字段之间有足够的高度,这样用户就不会感到困惑,能够很轻易分清哪一个标题和内容框是一组的。

避免全部大写

954645a2e721dcb7746e2c7e0b8143c2.png

全部大写字母不符合我们的阅读习惯。

全部显示低于6个的选项按钮

5078c4a11c1dc5cceaaa1e830305581a.png

在选择器下拉列表中放置选项至少需要两次单击,并且还要隐藏选项内容。如果有超过5个选项,请使用输入选择器。如果有超过5个选项,则在下拉列表中包含上下文搜索。

使用占位符文本作为标签抵制

a7ddcab6648c815ed9f4774fbfaa75e7.png

通过将占位符文本用作标签来优化空间很有诱惑力。但是尼尔森诺曼集团的凯蒂·舍温总结了许多可用性问题。

为了方便浏览将复选框(和无线电)放在彼此之下

ad7de33457c656ee3b9e9404df9ec559.png

将复选框放在彼此之下可以更容易浏览。

使引导按钮(CTA)具有描述性

8a9a4ac93575c30da88fff238678822d.png

引导按钮应该意图明确。

错误提示

76f2e4a636ae5b43f3ba4a413e9186ef.png

在用户发生错误的位置显示提示并说明原因。

在用户填写内容后使用内联验证

be84f53b1888c1015d4d620bc63b3195.png

用户是输入状态时不要使用内联验证,除非它能带来提示帮助,例如创建密码、用户名或带字符数的消息时。

不要隐藏基本的辅助文本

2bf5fbdc1fd565e7c54681de5727f1e6.png

尽可能在输入框旁边展示辅助文本。对于复杂的辅助文本,请考虑在聚焦状态期间将其放在输入旁边。

区分主要功能和次要功能

d62834fbeb3acb7d3e93167ce6699863.png

当用户输入后,在引导按钮上提供一些变化,不但可以引导用户还可以区分功能的主次

使用字段长度作为输入框的长度

ed2a7b62f98dab7efe2edbdb5b9ab687.png

输入框的长度提供了答案的长度。可以将此用于已知字符数的字段,如电话号码、邮政编码等。

尝试抛弃 * 并表示可选输入

f6c6cda845ea2f9d939cc272483cdc45.png

用户并不总是知道所需字段标记(*)意味着什么。相反最好清晰的表示那些内容选项是可选的。

整合相关信息

e6c4a4f148e4daa8d847ec48bf64cc76.png

让用户分批思考,冗长的表单会让人感到压力。通过创建分组,用户可以更快地理解表单。

为什么一定要选择让用户输入来收集信息呢?

省略输入框考虑其他收集数据的方法。始终问自己这个问题是否可以推断、推迟、或完全排除。

数据输入越来越自动化。例如,移动和可穿戴设备在没有用户意识的情况下收集大量数据。想一想你可以利用社交软件、短信、电子邮件、语音、位置、指纹、生物识别等方法。

让它变得有趣

没有人想填写表格。设计师的角色是通过表达自己公司的品牌来引发情感反应。如果操作得当将会提高完成率。请确保您没有违背上面列出的这些规则。

作者:Andrew Coyle

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值