表单设计

设计更好的形式
设计师常犯的错误以及如何解决这些错误

image.png

无论是注册流程，多视图步骤还是单调数据输入界面，表单都是数字产品设计的重要组成部分之一。本文重点介绍了表单设计的常见做法和注意事项。请记住，这些是一般准则，每条规则都有例外。

表格应该是一列

image.png

多列破坏用户垂直势头。

顶部对齐标签

image.png

用户以比左对齐标签更高的速率完成顶部对齐的标签形式。顶部对齐的标签在移动设备上也可以很好地翻译 但是，考虑将左对齐标签用于具有可变选项的大型数据集条目，因为它们更容易一起扫描，它们会降低高度，并提示比顶部对齐标签更多的考虑。
用他们的输入组标签

image.png

将标签和输入紧密地放在一起，确保字段之间有足够的高度，以便用户不会感到困惑。
避免全部大写

image.png

所有上限更难以阅读和扫描。
如果在6以下显示所有选项

image.png

将选项放置在选择器下拉菜单中需要两次点击，并隐藏选项。如果有超过5个选项，请使用输入选择器。如果有超过25个选项，则在下拉菜单中加入上下文搜索。
抵制使用占位符文本作为标签

image.png

image.png

通过使用占位符文本作为标签来优化空间是很诱人的。这导致了许多可用性问题，这些问题由尼尔森诺曼集团的凯蒂谢尔温总结。

---

为了便于扫描，将复选框（和收音机）置于彼此之下

image.png

将复选框放在下面可以轻松扫描。
使CTA具有描述性

image.png

行动呼吁应说明意图。
内联指定错误

image.png

向用户显示发生错误的位置并提供原因。
在用户填写该字段后使用内联验证（除非在过程中帮助他们）

不要在用户输入时使用内联验证 - 除非它帮助他们 - 例如创建密码，用户名或带字符数的消息。

---

不要隐藏基本帮手文本

[图片上传失败...(image-2de964-1526630337323)]

尽可能暴露基本帮助文本。对于复杂的辅助文本，请考虑将其放在焦点状态的输入旁边。

---

区分主要和次要行动

[图片上传失败...(image-9a5e21-1526630337323)]

关于是否应该包括次要选项还有更大的哲学争论。

---

使用字段长度作为可供件

[图片上传失败...(image-b43f07-1526630337323)]

领域的长度提供了答案的长度。对于具有定义的字符数的字段，如电话号码，邮政编码等

---

沟*和表示可选字段

[图片上传失败...(image-67b397-1526630337323)]

用户并不总是知道所需字段标记（*）的含义。相反，最好是表示可选字段。

---

集团相关信息

[图片上传失败...(image-a8376d-1526630337323)]

用户分批思考，长时间的形式会感到压倒性的。通过创建逻辑组，用户可以更快地理解表单。

---

为什么这么问？

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

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

---

让它变得有趣

生命短暂。没有人想填写表格。会话。好笑。逐渐参与。做到意外。设计师的角色是表达他们公司的品牌以引发情绪反应。如果做得对，它会提高完成率。只要确保你没有违反上面列出的规则。

---

我希望这篇文章能帮助你设计更好的表格。如果您正在设计一个您希望得到我的反馈的设计，请加入这个评论平台，并与我一起在andrewcoyle55 [@] gmail上分享您的设计。

期待您的设计。我希望我能帮上忙。

[图片上传失败...(image-55c38-1526630337322)]

分享您的工作并通过https://ohapollo.com/sign-up/获取反馈意见