土豆妹儿

本文总结了如何提高信息输入体验的几个注意点。以后设计中可以拿出来对比分析。

（1）标签（2）输入框（3）文本输入和键盘匹配（4）适当配置大写锁定（5）单词自动更正（6）输入多行文字后的规则（7）优化输入格式（8）错误提示（9）容错

（1）标签

根据马泰奥·彭佐的2006年的标签对齐眼动实验。顶对齐标签移动到输入框需要50毫秒，右对齐标签需要240毫秒，而左对齐标签则需要500毫秒。顶对齐标签的效率是左对齐标签的10倍之多（当然，英文单词长短相差太多对左对齐标签造成了重伤，中文方块字标签字数差异不大情况下，左对齐约等于右对齐，兼顾 两者之优点）。理论效率上，顶对齐>右对齐>左对齐，选择使用哪一种标签视情况而定。

• 顶对齐标签

  优点：和输入框联系最紧密，效率最高，可读性高

  缺点：增加了垂直空间

• 右对齐标签

  优点：和输入框联系紧密，减少垂直空间占用

  缺点：标签可读性不强

  

• 左对齐标签

  优点：标签可读性强，减少垂直空间占用

  缺点：和输入框联系不紧密

  

• 输入框内标签-图标辅助

  优点：与输入框联系紧密，同时减少空间占用

  缺点：填写完毕标签就消失了，复核表单信息较困难

  用途：输入较少量信息时可使用（可以辅助图标提示标签信息，如下图）

  

• 灵活运用的标签

  Material design中就灵活运用了输入框内标签和顶标签，在输入前用输入框内标签占大字符显示，输入后变为小字符的顶标签，兼具了提示性，同时顶标签的颜色提示了当前输入框，经过思考的良心作品！

  

  
  

（2）输入框

• 常规输入方式有：文字框、下拉框、单选框、复选框。

  衍生的输入方式有：滑块、(加减）微调钮、开关钮、Tab选框、搜索框等。

• 效率上，预填充 > 选择填充 > 自由填充。

  （预填充：预填充如字面义是判断用户意图预先为其填充表单，例如电商中填充用户默认地址，登录前填充用户上次用户名，根据系统的地理位置数据为用户选择国家等。

  预填充设计时可以考虑：默认值、可选值、常用值、历史值、上次填充值等。）

  “预填充”值得注意点：

  举个栗子，现在需要为一家医院设计一个接种疫苗的申请流程，用户需要同意接种疫苗才能进行下一步操作。我们有很多方法对这个表格进行设计，例如可以提供一个选项用 checkbox 给用户进行勾选，或者提供两个选项通过 ratio 进行选择，如下图：

  
  

  有人可能会觉得这样应该没什么关系吧？但是是否有想过，用户在面对不同的设计也会做出同样的选择吗？用户会被设计引导到别的方向吗？

  " 默认选项 " 的威力：上文两个设计方案中一个关键不同点在于，checkbox 方案有一个默认状态。就是说，checkbox 总会以 " 选上 " 或者 " 不选 " 的方式出场，因为它只有一个选项。这与 ratio 方案是不同的，ratio 方案不需要默认值。Checkbox 方案中，即使用户什么都不做，他也已经做了选择，因为有 " 默认值 "。

  据调查显示，大部分人不会修改或者没有注意到默认选项。因为，做决定是需要成本，时间、思考与行动都是选出最优决定的成本。

  人们对这些成本是敏感的，对耗费成本而最后做出 " 错误 " 的决定更是敏感，尤其是在不确定如何选择的时候，接受一个默认选项比主动地去付出成本来进行选择而最后却选择了错的来得更容易接受。

• Tab框 vs 下拉框

  Tab框优点：选项都外露方便选择，一次点击可以完成想要的选项。（如果只有两个选项的话就可以做成各种Switch，例如开关以及切换排序等）

  Tab框缺点：只可用于选项较少的情况。

  下拉框优点：选项多的话，下拉框会更省空间。

  下拉框缺点：在点选下拉之后才能看到选项，可见性不强；进行搜索定位和选择，点击两次

  有些下拉框的选项过长，比如货币，国家等的选择，可以考虑用提供搜寻功能的下拉式选单，当用户输入一些内容时便即时进行筛选，快速又方便。

  

（3）文本输入和键盘匹配

在移动端，用户青睐于那些为输入类型提供合适键盘的app，常见输入类型包括：

数字键盘：电话号码，信用卡号码

字母键盘：合适的名称，用户名

混合格式：电子邮件地址，搜索查询

比如该字段填写电话号码，那么就得使用数字键盘，而不是字母键盘，避免用户切换而浪费时间。

（4）适当配置大写锁定（英语）

对于移动表单域的可用性而言，适当的配置大写锁定很重要。如果需要的话，每个文本字段和句子的第一个字母应该大写。eg：

1.要求写名字的，如用户的姓或名

2.包含一条类似于句子的消息，如短信

但你不应该在填写电子邮件的区域启用自动大写。因为大写锁定开启时用户会可能误以为输错邮件信箱，从而返回删除第一个字母。

（5）当字典功能不够强大时禁用自动更正

当用户注意到糟糕自动更正是令人沮丧的，而且当他们不喜欢的时候，会是彻头彻尾的有害。自动更正对那些不在字典中的单词无能为力，如缩写，街道名，电子邮箱，用户名等等。在这种情况下输入地址信息，由于用户没有注意到自动更正已开启，有效地址往往在提交前被更新为无效地址。

（6）输入多行文字后的规则

对于输入框，当文字只输入一行的时候，不会有什么问题，但输入多行的时候，要给出规则。

（7）优化输入格式

（支付宝电话充值界面）

用户输入电话号码时电话号自动以3，4，4进行分组显示，类似的也用于银行卡的输入。

（8）错误提示

在使用互联网的产品过程中，相信任何一个用户都难以避免遇到错误，在这里讲一下输入信息错误时应该注意的一些错误提示信息的细节。

（规则很简单，但也很容易被设计忽略，但有些也可能是程序时间花费的问题，我这里先排除其他的原因，从用户体验的角度出发设计）

8.1 实时验证

用户不喜欢当他们通过完成数据输入后，在提交时才得知他们犯了一个错误，特别是好不容易填写了很长的表单之后。用户提交信息后的一刻是提供数据成败信息的正确时间。

实时在线验证，立即通知用户提供的数据的正确性。（即在用户失去条目焦点的时候显示错误信息提示）这种方法允许用户实时纠正错误，而不用等到点击提交才看到错误。

（正例：实时验证-销售易注册页面）

像这种格式的判断都可以通过前端判断出来给出提示信息的，而密码错误这类的判断只能等到提交后才可以验证。

8.2 错误提示显示在旁边

根据格式塔原理，将相似的物体放在一起，所以，错误信息显示应该显示在出错条目的旁边，太远的错误信息提示脱离了语境，用户可能会有疑惑，或者根本没有注意到错误提示在哪儿（因为这时用户更注意填写的信息和提交的按钮），却造成点击提交提交不起的错觉。

（反例：错误信息提示在最上面-Uber注册页面）

(错误信息不在相应的位置，如果表单内容过多，用户出错的条目信息可能都会找半天)

8.3 明确的信息

8.3.1 placeholder提示要准确

我注册站酷的时候设置密码，初始状态placeholder显示为“设置密码”

于是我设置了5位数的密码点击提交，错误提示显示为

我很疑惑，为什么不在我提交之前就把规则讲清楚呢，浪费我注册的时间，观察了下密码输入框的长度，我认为这边比较好的信息设计应该是这样的，讲好规则，提前防错。

有些重要的提示信息没有显示在placeholder里面，而是单独提示在对应输入框的旁边。eg：

（默认状态 - 58同城发布租房信息的填写表单页面）

（当光标在输入框内时 - 提示信息将会一直显示出来，当光标移除，反馈填写结果）

（填写错误，显示错误原因）

（填写正确，及时反馈正确结果）

还有个特殊情况是关于创建安全密码的提示。有些隐私性或者安全性比较高的网站做法是通过显示安全程度，激励用户创建更好的密码。

需要注意的是达成条件的进度指示与密码强度表并不完全一样。eg：下图，显示你已经符合多少条件，还剩下多少没有符合。一个轻微的变化就能够让用户在输入时更为主动。

8.3.2 验证不应该只告诉用户做错了什么，而应该同时告诉他们如何改正。这给了用户通过整个输入流程的信心。

最好的错误消息是永远不会出现的错误消息。在任何情况下，能提前引导用户去向正确的方向，并在第一时间就预防错误发生，总是更好的做法。

（9）容错

这类型的错误主要是在使用搜索引擎/输入法遇到的。先来看看搜索引擎的例子（以百度为例）：

搜索“拖拉及”，百度根据关键词判断用户意图，首先对用户搜索关键词时发生的可能拼写错误提供纠错帮助。然后，给出了搜索拖拉机的结果页面，并在搜索下面提供文案告诉用户这是关键词拖拉机的搜索结果，同时也提供给用户继续想要搜索“拖拉及”的链接——如果用户输入的关键词并没有出现错误，那么就可以通过链接快速的重新进行搜索。