「译」设计更好的表单

欢迎关注我的微信公众号：Shyanne

主要介绍了设计师经常会犯的错误以及如何来修正这些错误。

无论这是一个注册流程，或者是多视图的步进器（a multi-view stepper），还是单调的数据输入界面，表单都是数字产品中最重要的组成成分之一。本文重点介绍表单设计的常规注意事项，但是这些仅仅是 一般性的准则，每个准则在实际的应用中都会有例外的。

01 表格最好为一列

多列会干扰用户垂直动量（vertical momentum）。

02 顶部对其标签

实验证明，在进行信息输入的时候，相比于左侧对其的标签而言，顶部对齐的标签速率要快很多。顶部对齐的标签在移动设备上也可以有很好的应用。但是，当我们对大数据条目进行输入的时候，仍然推荐使用左侧对齐的方式，因为相比于顶部对齐标签而言，左侧对齐的方式使所有的标签更容易被用户一起看到，同时，还会降低页面的高度，并会促使更多需要考虑的因素。

03 将标签和输入框进行群组

把标签和对应的输入框放在一起，确保不同的标签之间有足够的高度，这样用户就不会感到困惑。

 04 避免全部使用大写字母

全部使用大写字母会使用户难以阅读和浏览。

05 若选项少于6个，则全部展示

把选项放在下拉框中，不仅隐藏了可选的内容，而且要求用户进行两次点击。如果有大于等于6个选项，则推荐使用输入选择器。如果有超过25个选项，则在下拉列表中加入上下文搜索。

06 不要将标签作为占位符使用

通过将占位符文本作为标签来优化页面空间，对设计师而言是具有诱惑力的。但这会引起很多问题，尼尔森诺曼团队的Katie Sherwin已经对此进行了总结：

将一些重要的信息，作为占字符放在表单中，会使得用户难以记住信息填写的内容是什么，并且，不便于用户检查和修正错误。同时，会给有视觉和认知障碍的用户带来额外的负担。

Katie Sherwin《Placeholders in Form Fields Are Harmful》

07 为了便于阅读，将复选框（单选框）竖向排放

为了便于阅读，建议将复选框（单选框）竖向排放

08 使CTA按钮上的文本具有描述性

按钮应当能够陈述意图。

CTA全称Call-To-Action，即用户响应行动或叫用户行为召唤，它是Web和App上的关键UI元素，如购买、提交等操作。

09 通过内联指出错误

可以的情况下，告诉用户哪里有问题，为什么有问题。

10 用户填写完字段后再进行验证（除非在过程中的提醒能够帮助到用户）

当用户填写密码、用户名或者带有字数限制的信息时，不要使用内联验证（即立即响应式验证），除非立即响应式的验证能够给予用户帮助。

11 不要隐藏基本的帮助信息

尽可能地展示出最基本的帮助信息。对于复杂的帮助文本，请考虑在聚焦状态下将其放置在输入框旁边。

12 区分主次行为

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

13 输入框的长度与字段长度相匹配

根据所需填写内容的长度来决定输入框的长度。将此用于字符数确定的字段，比如手机号码、邮政编码等的。

14 抛弃“*”并表明可选字段

用户并不是都知道必填字段标记“*”的含义，相反，标明哪些字段可以选填是更加友好的。

15 对相关联的信息进行群组

让用户进行分批次思考，长长的表单会让人感到不知所措。通过创建逻辑组，用户将更快地理解表单。

思考

省略一些可选的字段，并且考虑是否可以通过其他方式来进行信息的收集。坚持问自己，要求用户填写的信息是否可以通过推断、推迟或者完全排除等方法避免让用户输入。

数据的输入将越来越自动化。例如，移动和可穿戴设备在用户无意识的状态下，收集了用户大量的信息。想一想如何利用社交、会话界面、短信、电子邮件、语音、OCR、定位、指纹、生物识别等信息。

让表单有趣

韶光易逝，没有用户喜欢填写表单。通过会话的形式，做得有趣，让用户逐渐参与，并且做得超出用户的预期。设计师的角色就是表达公司的品牌并且引起用户的情感反应。如果设计的好，将会提高完成率。只要确保你不违反上述基本准则。

原文地址：https://uxdesign.cc/design-better-forms-96fadca0f49c

引用文章《Placeholders in Form Fields Are Harmful》地址：https://www.nngroup.com/articles/form-design-placeholders/