优秀表单设计原则

在设计页面的时候,表单是一种使用率非常高的元素。

这篇文章将会讲解设计师在设计页面时表单时经常会犯的一些错误。

请注意,文章中所说的都是一般性规则,在实际工作中,每一个规则都有例外情况。

表单应该为单栏式样

多栏式样表单会扰乱用户的垂直动量。

说明标签放在输入框上面

数据显示,当说明标签在输入框上面的时候,用户完成表单的几率要远高于标签位于输入框左边的时候。顶部说明标签在移动设备上也能更好的显示。然而,如果输入框数量较多,你可以考虑将标签放在输入框左边,因为这样做可以降低表单的高度。

缩小文字和输入框的距离

让说明标签紧挨着对应的输入框,还要确保每一个输入区域之间要留有足够的高度,以免用户混淆。

避免使用全大写文字

完全大写的单词会给用户造成阅读困难。

如果待选项少于6个,则在表单中全部显示

用下来菜单的方式显示带选项,需要用户进行两次点击。只有在带选项多于6个的时候才应考虑下拉菜单。

避免使用占位文本代替说明标签

很多人都喜欢用占位文本代替说明标签,觉得这样可以优化空间。但是这会导致很多可用性方面的问题。

将复选框垂直排列

将复选框垂直排列,易于用户检索

CTA更具描述性

行为召唤按钮要突出其目的。

对出错信息进行具体说明

向用户展示究竟是哪里出了错,并且给出出错原因。

在用户完成输入之前不要出现错误提示(除非这样做能够更好的帮助他们完成流程)。

用户在输入的过程当中不要出现出错提示,例如他们在输入密码和用户名的时候。

不要隐藏基本的帮助文本

尽可能的显示基本的帮助文档。对于那些复杂的帮助文档,可以考虑将其发在输入框旁边。

突出显示主要的行为召唤按钮

很多人都在讨论一个问题:是否应该在页面中去除次要行为召唤按钮

输入框长度与输入文字长度相匹配

输入框的长度应该与用户输入文本的长度相对应。在设计电话号码、邮政编码等输入框的时候,你一定要考虑到这一点。

去除*,直接写上可选的字样

很多用户都不知道*这个符号代表的是什么意思。你应该去掉这个服务,在标签边上直接写上“可选”的字样。

标注文本群组信息

用户都有批量思维,较长的表单会让他们感到困惑。通过创建逻辑群组,用户能够更快的理解表单的构成。

通过其他方式获得数据

移 除那些可选输入框,考虑用其他的方式来获得数据。例如,移动设备和可穿戴设备都可以帮你获得很多用户的相关数据,你完全可以利用他们来减少用户的数据输入 成本。考虑一下你是否可以通过社交媒体、会话式UI、SMS、电子邮件、OCR、定位、指纹和生理指标等方式来获得目标数据。

把表单做的有趣

生 命很短暂,谁也不想把时间浪费在填无聊的表单上。你可以把你的表单做成会话式的,把它做的有趣,让用户在填表的过程中获得快感。设计师的指责是传递公司的 品牌,来引出用户的情感反应。如果做的好,表单的完成率可以提高。只要不违反上面提到的基本规则,你可以尽情发挥创意。

余下全文(1/3)
分享这篇文章:

请关注我们:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注