设计更好的表格

原文及链接：Design Better Forms https://uxdesign.cc/design-better-forms-96fadca0f49c?source=userActivityShare-3b1b3ee937bb-1497488533&from=timeline&isappinstalled=0

---

设计者犯的共同错误和如何修正他们。

无论是一个注册流程（signup flow）一个多视图步进（multi-view stepper）还是一个单调的数据输入界面（data entry interface），表格是数字产品设计最重要的元素之一。这篇文章重点介绍了表格设计的常见做法和弊端。请记住这些都是一般准则，每个规则都有例外。

---

• 表格应当是一栏

  

  多列破坏了用户的纵向力量

• 顶部对齐标签

  

  用户完成顶部对齐标签（Top align labels）要比左对齐标签（ left aligned labels）快得多。顶部对齐标签在移动端上也转换的很好。然而，对于大量的数据集条目，由于有更多的可变性考虑使用左对齐标签。他们容易阅读，减少高度，比顶部对齐标签引发更多的思考
  

• 组标签与其输入

把标签和输入靠近，并且确保在中间留有一定的区域以致于用户不会混淆

• 避免所有的帽子

所有的帽子很难阅读和浏览

• 如果在6个以下展示所有的选项

把选项（options）放在下拉列表（ selector drop-down ）中需要二次点击，并且隐藏选项。如果有超过5个选项，请使用输入选择器（ input selector）。 如果有超过25个选项，则在下拉列表中合并上下文搜索 (Incorporate contextual search within the drop-down)

• 拒绝使用占位符作为标签

企图通过使用占位符作为标签去节省空间。这引起许多使用问题。Katie Sherwin 已经总结过

• 把复选框放在下面为了浏览

放复选框在下面让用户容易阅读

• 使用清晰的描述

行动召唤应该说明意图

• 指定错误一致

  
  

  展示给用户在哪里发生错误了然后提供一个原因

• 在用户填写完使用内在验证（除非在过程中帮助他们）

  

  不要在用户打字的时候使用内在验证。除非是帮助他们。就像在创建具有字符数的密码，用户名或消息的情况下

• 不要隐藏基本帮助性文本

  

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

• 区分主要和次要行动

  
  

  还有一个更大的哲学辩论是关于是否应该包括二级选项

• 使用文本长度作为可用性

  
  

  区域的长度提供了答案的长度。将此字段用于具有定义字符数（character count ）的字段，如电话号码，邮政编码等
  

• 将*表示为可选字段

  
  

  用户不总是知道标记※的要求地方暗示什么。相反，最好去表示可选择的地方

• 组织相关信息

  
  

  用户批量思考和长表单会感觉不知所措。通过创造逻辑组用户会更快理解表单

• 为什么有疑问？

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

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

• 让它有趣

生命很短，没有人想要填写表格。让它成为对话，有趣，逐步获得，出人意料的。设计师的角色是表达自己公司的品牌，引起情绪反应。 如果正确完成，则会提高完成率。 只要确保你不违反上面列出的规则。