了解如何改进数字表单的设计。

这些最佳实践有助于在设计表单时提供速记。确保始终牢记您的上下文,以确定最佳演示文稿。与设计中的大多数事情一样,最佳实践通常也有例外。

使用标题

UI表单设计终极指南(图1)

标题对于可访问性是必不可少的。屏幕阅读器将每个标签传达给用户。如果没有适当的标签,许多人无法访问表格。

避免使用占位符作为标题

UI表单设计终极指南(图2)

使用占位符作为标题会给短期记忆带来负担。一旦用户开始输入,标题就会消失,用户必须清除输入文本才能再次显示占位符标题。

当占位符太亮或太暗时,它们会产生额外的问题。当太暗时,占位符可能会被误认为是填充输入。太亮时,某些用户可能看不到占位符。

保持标题简短

UI表单设计终极指南(图3)

尽可能避免使用长标题,以便表单易于阅读和扫描。

将字段长度和结构与预期输入匹配

UI表单设计终极指南(图4)

字段的长度提供了答案的范围。 将此用于具有定义字符数的字段,如电话号码、邮政编码等。

表单域应该看起来像表单域

UI表单设计终极指南(图5)

在设计表单时,创造力通常会导致不利的结果。看似创新的想法甚至可以吸引世界上最大的组织,并降低数百甚至数十亿人的可用性。在发现许多用户不知道他们可以与输入进行交互后,谷歌在 2017 年悄悄改变了它的Material设计文本字段。

当涉及到输入字段时,请坚持标准设计约定。如果您决定重新发明轮子,请确保进行彻底的可用性测试。

将表单域与其他元素区分开来

UI表单设计终极指南(图6)

表单域应该在视觉上传达其功能。确保在其他 UI 元素之间添加足够的差异,以便用户无需猜测。

使用适当的输入类型和标签

UI表单设计终极指南(图7)

输入类型使表单更易于访问并增强用户体验。例如,使用正确的输入类型会调用移动设备上的相应键盘(数字与字母)。

设计人员和开发人员通常会忽略一些简单的事情,例如使用收音机而不是复选框来回答有多种选择但只有一个答案的问题。

表格应该是一列

UI表单设计终极指南(图8)

一栏表格更易于扫描并且更适合移动显示。多列会使用户紧张并导致他们意外跳过字段。

与大多数最佳实践一样,此规则也有例外(例如此列表中的下一个)。确保始终牢记您正在设计的上下文以确定最佳演示文稿。

=逻辑上一起的字段应该是内联的=

UI表单设计终极指南(图9)

堆叠姓名、地址和付款信息等相关字段会导致不必要的摩擦,并可能中断用户流程。

=省略不需要的字段

UI表单设计终极指南(图10)

省略可选字段并考虑其他收集数据的方法。总是问自己这个问题是否可以推断、推迟或完全排除。

使操作按钮定义任务指向

UI表单设计终极指南(图11)

提交按钮的文本应该清楚简洁地描述它将调用的操作。用户永远不应该对按下后会发生什么感到困惑。

将标题与其输入分组

UI表单设计终极指南(图12)

显示带有相应输入的标签,以便用户清楚他们正在填写哪个字段。错误通常发生在用户上下滚动页面并进行错误关联时。

避免全部大写

UI表单设计终极指南(图13)

这是句子大小写和标题大小写之间的风格问题,但全部大写从来都不是一个好主意。所有的大写字母都很难阅读、扫描,而且看起来很讨厌。

垂直显示复选框和单选项

UI表单设计终极指南(图14)

垂直显示时,可以更轻松地扫描复选框和单选选项。但是,展示带有相关图形的选项可以为设计增加额外的维度,从而无需垂直展示。

如果<6,则显示所有选择选项

UI表单设计终极指南(图15)

将选项放置在下拉选择器中会隐藏选项,并且需要单击两次才能选择一个选项。当有超过 5 个选项时使用下拉选择器,当超过 25 个选项时在下拉列表中合并搜索。

但是,如果空间有限,例如在某些内联编辑情况下,可以为 6 个以下的选项使用下拉选择器。

内联显示错误

UI表单设计终极指南(图16)

尽量通过简洁明了的方式避免错误。当用户出错时,向用户展示错误发生的位置,提供原因,并说明如何修复它。

按属性分组

UI表单设计终极指南(图17)

创建逻辑组,以便用户可以更快地解释表单中询问的内容并批量管理请求。

区分主要动作和次要动作

UI表单设计终极指南(图18)

使表单的主要操作(例如提交)比次要选项更突出,以避免错误。并始终问问自己是否需要采取次要行动。

包含多步骤表单的进度指示

UI表单设计终极指南(图19)

多步骤表单,又名表单向导,应该指示进度,以便用户知道他们在哪里以及将要发生什么。

避免在模态框上使用模态框

UI表单设计终极指南(图20)

需要多个模态的交互可能会导致用户错误。考虑在模态内进行内联编辑。

始终考虑可访问性

很多时候,设计师不会检查他们的设计的实现,以确保他们满足可访问性基准。