触摸式键盘设计指南（附小抄）

触屏设备，因为比传统的鼠标和键盘更加的直观而广受赞誉。触摸屏使人机交互更加的直接，拉近了人与软件的距离。但是，在移动设备，尤其是智能手机上打字，往往是一场噩梦。打字是很慢、很痛苦的过程，而且很容易出错。

显而易见，按键小，间距窄是导致这种情况的罪魁祸首，但是，其他一些因素也是需要考虑的，包括：

• 如何正确使用自动纠错功能
• 必要的时候才使用自动大写
• 输入类型的暗示
• 注意TAB顺序
• 坚持自定义键盘的激活

在最近一次关于18个大型手机电子商务网站的大规模调研中，我们发现，触摸设备的特性和局限性和用户填写表单的期望存在着冲突。这种冲突一旦发生，用户就会变得狂躁，表单校验错误一个接着一个，卡住了用户填写表单的进度，然后，用户很快就放弃了注册。

一旦用户遇到未充分优化的触摸应用，用户首先对网站失去信心，有些用户则会怀疑自己在手机上填写表单的能力。很明显，好的移动体验要求表单填写尽量方便，其中的关键就是键盘的设计。

本文将深入探讨触摸键盘易用性的几个主题，包括5条可以减轻用户输入痛苦的设计指南。这些指南是从《手机商务易用性报告》的147条指南中摘取出来的。之前我们还讨论过手机电子商务的十条指南，相比较而言，本文中的这5条指南更加常见，而且对于那些用户使用触摸键盘访问的网站而言更加适用。

此外，我们将排名前50的在线零售商的移动网站与这5条指南进行了深入的比对，然后惊奇的发现，居然有98%的网站违反了至少一条，70%的网站违反了两条以上。虽然这些指南是显而易见的，我们还是需要小心对待，毕竟那么多大网站都会弄错。

如果字典不准确，请关闭自动纠错功能

主题：差劲的自动纠错会让发现的用户感到反感，而如果用户没发现可能会导致错误。

自动纠错对于缩略词、街道名称、邮件地址或者其他一些不在词典中的词语往往效果不咋地。我们在测试中发现很多这种情况，自动纠错往往造成一些错误数据。

在上面的测试中，测试人员输入街道名称“westheimer”，手机将其自动纠正为“weathermen”。然而，测试人员没有意识到这些，提交了表单，然后就会得到一个校验错误。

自动纠错功能的一个主要问题是，用户通常不会注意到“纠错”的过程，因为大部分时间，用户的注意力都集中于正在输入的信息上。如果纠错是正确的就还好，如果改错了，那就麻烦了。在测试的过程中，我们多次发现，很多正确的地址被自动改成了错的并提交，因为测试人员并没有注意到这一自动纠错的过程。

如果网站没有对地址进行校验，用户复核的时候也不是那么注意的话（通常而言，自动纠错产生的数据通常和用户原始输入的数据很像，用户很难发现自己的输入被修改了），那么很可能订单会被运送到错的地址。当然，自动纠错不仅仅是在一些模棱两可的地方才出错，在一些常见的缩写上也很容易弄错，比如，它很可能将Rd自动纠错成Ed。

话虽如此，自动纠错在某些情境下确实很有用，前提是纠错的过程确实将不合法的数据给改正了。在所有地方（譬如评论区）都禁用自动纠错也是不可取的。正确的方式应该是，有选择的使用，在词库较弱的地方禁用自动纠错，典型的场景包括街道、城市、人名以及其他一些标示符如邮件地址、优惠券编码等等。

道理是很简单，但是实际应用中，恰恰这么简单的道理却被人们忽略了，几乎所有的大型手机电子商务网站都在这里栽了跟头。数据显示92%的网站没有在合适的地方禁用自动纠错。由于自动纠错而导致的地址和邮件错误是非常严重的，可以看出基本上没什么人在“适当禁用自动纠错”这一问题上下工夫了。

可以使用下面的方式禁用自动纠错功能：为input标签添加autocorrect属性，并将其值设置为off。

<input type="text" autocorrect="off" />

合理设计键盘布局

主题：不合理的键盘布局降低了打字速度，用户在标准键盘上输入较长数字序列时常常出错，因为按键太小，而间距又太小。

智能手机的最大局限就是键盘太小，字母小的可怜。譬如，纵向模式的iPhone4上，一个字母的大小是4*5.9 毫米。相比较而言，苹果官方推荐的最小可点击的界面元素是6.85*6.85毫米，如果按键再小可能就会丢失精准度了（微软和诺基亚推荐的最小按键是7*7毫米）。可想而知，上面的键盘布局会导致误输入。

但是，只需要简单的修改一下输入区域的属性，用户手机就会为输入区域展示一个优化过的键盘布局。例如，你可以为信用卡号输入区域激活数字键盘，为电话输入区域激活电话键盘，为邮件地址区域激活邮件键盘。这么做可以大大节省用户切换键盘布局的时间，而且，对于数字输入区域而言，由于数字键盘拥有更大的按键大大减少了错误拼写。

百思买的信用卡输入激活的标准键盘布局，用户首先要切换到数字和特殊字符键盘视图（中图），然后准确无误的输入16位数字。对于很多测试人员来说，这是一个挑战，他们需要一边看着他们的信用卡，一边在拥挤不堪的键盘上正确输入。

在测试的过程中，许多测试人员注意到这种专注的键盘布局，给予了极大的赞许。在iOS设备上，数字键盘的按键是传统键盘的471%倍大小。而且，我们发现，在数字键盘布局下，输入错误的记录明显较少。校验错误相应的跟着减少，用户的无缝购物体验也变得更好。对于较长的序列更是如此，比如手机号码和信用卡卡号。

在左图中，由于标准键盘布局的按键太小太狭窄，测试人员本来想点1，却不小心点到了减号。优化过的数字键盘显得更加恰当。在右图中，当用户填写GAP网站的“白天电话”的时候，一个为手机专门优化的键盘出现了，它的按键是标准键盘布局的471%大小。

专注式键盘布局的另外一个好处是，他们可以暗示应该输入的内容，在标签离开视野或者用户不知道该输入什么的时候显得非常有用。然而，需要注意的是，数字键盘布局有一定的局限性，因为它们不允许输入字符，最多再允许用户输入少量特殊字符或分割符。只有在特别匹配的时候再激活数字键盘布局，如电话号码、邮编、信用卡号、信用卡安全码等等，这一点很重要。类似的，尽量让这种格式化的显示可以复制到其他地方使用。

在iOS设备上输入样例所给格式的这种电话号码可能不太现实，因为这种数字键盘布局不支持破折号。（有趣的是，在Android设备上是可以的，这也意味着要使用多平台设备对网站进行测试，确保你所需要的格式不会只有部分平台支持。）

好处如此明显，你可能认为专注式键盘设计已经广泛使用了。然而，名列前茅的那些网站中，60%都没有为邮件地址、电话号码或者信用卡卡号区激活相应的键盘布局。

从技术角度而言，有许多方法激活数字键盘布局，但是不同方法之间稍微有些区别，不同的平台行为也有轻微区别。通常来说，type和pattern这两种HTML属性可以用来激活数字键盘布局。

type属性语义性较强，只有在输入变量非常符合语义的时候才能使用，譬如电话号码或email地址。对于数字输入区域，使用pattern属性可能会更好。（如果你只想浏览器激活某种键盘而不强制使用这种键盘，可能需要为该输入区域添加novalidate属性。）

电话号码输入区，使用下面的代码：

<input type="tel" />

数字输入区域，使用下面的代码

<input type="text" pattern="\d*" novalidate />

email输入区域，使用下面的代码

<input type="email" />

如上所述，不同类型的数字以及不同的手机平台，键盘布局都有一定的区别。例如，在iOS中，上面给出的代码可以激活的电话键盘布局除了数字之外还包括一组与电话号码相关的特殊字符和分隔符，而激活数字键盘却只许你输入数字。另一方面，在Android设备上，电话键盘布局包含更多的特殊字符，允许设置更加丰富的手机号码格式。

然而，Android系统并不支持pattern属性激活的数字键盘，而是激活了默认的字母数字键盘布局。但是，不管是iOS或是Android，如果你使用type="number"来激活数字键盘，将“类型”设置为数字赋予了输入区域语义性，在很多情况下可能并不非常合适（譬如信用卡卡号实际上是数字序列，并不是数字。）

因此，我们还是推荐使用pattern="\d*\"，这种方式更具防御性，而且在iOS设备上用户体验超凡，当然前提是你的应用不会在不支持这种属性的平台上使用。当然，如果输入区域确确实实就是个数字，比如价格或者重量，使用type="number"是非常合适的。

如果你决定以某种方式激活键盘，那么请坚持下去

主题：如果某个输入区域激活了特定的键盘布局，而另外一个类似的输入区域却没有激活，用户会感觉很困惑，也会怀疑是不是两个输入区域的输入是不是有什么区别。

为特定的输入区域激活合适的键盘布局是很棒，但是，务必在你整个网站都坚持这一实践，否则可能会让用户很困惑。换句话说，如果邮编区域你激活了数字键盘，那么其他类似的区域你也要激活数字键盘。

这一准则听起来也是非常明显的，但还是有许多网站没有在所有类似输入区域都坚持激活对应的键盘。例如，FTD花店，在信用卡卡号输入区激活了数字键盘，但是在接下来的安全码输入区域却没有，虽然这两个区域应该都是纯数字的。

对收入排行前50的在线零售商而言，54%的移动网站都没有坚持这一原则，总有一个或者多个电话、信用卡号以及信用卡号核对区域没有激活数字键盘。其中24%对这三个区域都没有激活数字键盘（它们也坚持了，只是这种坚持是错误的），剩下30%是没有坚持，只有部分输入区域激活了数字键盘。

更令人吃惊的是，我们发现测试人员在进行部分易用性测试的时候容易感到困惑。他们会觉得自己一开始对某个区域的理解是不是有问题，是不是应该输入一些其他东西。例如，如果看到信用卡安全码区域是标准键盘，测试人员会想是不是应该输入信用卡背面的3位编码或者信用卡上的其他什么字符。

清楚定位”下一步“和”上一步“按钮

主题：如果”上一步“或者”下一步“按钮将用户带到了逻辑上不合适的区域，用户会感到困惑和苦恼。

在测试过程中，测试人员碰到分不清上一步和下一步的网站时要花费不少力气。用户期盼的顺序是一路向前：一旦按下”下一步“，用户期盼的是进入下一个逻辑区域，不应该有什么明显的变化，也不应该提交表单。对于”上一步“按钮也是相同的道理，只不过方向相反罢了。

这就不是保持正确tab顺序那么简单的问题了，当然保持正确的tab顺序是一个好的开始。尤其是对于某些依赖用户先前选择的动态区域而言，很容易出现问题，我们发现用户的某些数据被删除了，或者tab顺序搞乱了。手机应用对于自定义表单界面尤其要注意。例如，在Disney商店里，一个自定义下拉框并不在正确的tab序列中（确切的说它并不是一个输入元素），当用户输入邮编点击下一步的时候，直接跳过了state的选择。

在输入邮编之后（左图），测试人员点击下一步按钮，界面出现的是”位置类型“下拉按钮。但是，正如图中显示的那样，页面清空了测试人员之前输入的数据。很明显，用户输入的数据在点击下一步或上一步的时候是应该保存下来的。

上一步和下一步按钮其实就是传统键盘上的tab键，应该采用和桌面系统tab的相同次序准则，提供在输入区域间快速跳转的途径，而不需要用户点击，无论是使用鼠标还是手指。在移动应用上更是如此，因为屏幕太小了，如果键盘打开，用户基本上看不到下一个输入区，相比较而言使用下一步按钮就方便的多。因此，几时不是所有用户都使用这两个按钮，搞乱它们的行为的后果也是非常严重的。

不过，很幸运的是大部分网站都做的很好。只要代码没问题，手机浏览器总是会根据字段的显示顺序设置tab顺序。在这些顶级手机网站中，只有4%的网站做的不是很好。

在合适的地方禁用自动大写

主题：几乎所有的测试人员都以为email地址应该是小写的，因此自动大写反而造成了不必要的麻烦。

对于标准的文字输入区域，智能手机是默认首字母大写的，大部分时间是需要的。但是，少数情况下需要禁用这种自动大写的功能，尤其是email地址，大部分情况下都是小写的。

在多次的测试过程中，我们发现测试人员一旦发现大写字母，就会将其改成小写。他们给出的解释是他们不确定大写字母是否允许或者email是否大小写敏感的。但是，如果网站对email地址已经关闭了自动大写功能，测试人员却从没有主动将首字母改成大写的习惯。因此，我们建议对email地址和url等禁用自动大写功能。

这些排名前列的手机商务网站，38%的网站没有对email地址关闭自动大写功能，把email地址当初了纯文本输入区，让不懂技术的用户大感头痛。

自动大写功能可以通过为input标签添加autocapitalize属性，并设值为off来实现，例如：

<input type="text" autocapitalize="off" />

当然，对于email输入区，你应该将type属性设置为email：

<input type="email" autocapitalize="off" />

在iOS设备上，将type设置为email会自动禁用自动大写功能。但是，最好还是将autocapitalize 属性给设置一下，这样对于非iOS设备或者不支持email输入类型的设备上也可以正常工作。

测试和小抄

虽然这些准则任谁看都明白，但是想想看98%的世界知名手机商务网站都违反了至少一条，而且70%的网站违反了2条甚至更多。事实上，24%的网站根本就没有针对触摸键盘对输入做任何优化，要么只是标准键盘，要么没有全站坚持激活策略，要么没有在需要的地方禁用自动纠正，疑惑没有针对email禁用自动大写。

他们没有遵守这些准则的一个原因是，对于大型网站而言需要非常仔细的测试才能发现所有的错误——因此，上面提到的第三条准则基本上是天方夜谭了，根本不必再提。另外一个原因，在本站之前的一篇文章中提到的，触摸设备界面代表的是一种相对较新的平台，是一种全新的交互方式，需要注意的细节太多，作为Web设计者和开发者的我们还没有习惯如何适应。

有鉴于此，我们在文章末尾提供了一份小抄，将触摸设备输入区域界面设计可能存在的大部分的问题都收入在内，并且提供了可直接使用的代码，还提供了一个针对触摸设备进行优化的demo，该demo正确激活了键盘，你可以把他当做一份设计和开发移动或平板网站的核对表。

http://baymard.com/labs/touch-keyboard-types

这些输入区域在下面这些表单中都是很常见的：账号注册、登陆、搜索、调查表、评论、联系表单。我们建议您全面检查你的代码，找到相应的输入区域实例。

原文地址:http://uxdesign.smashingmagazine.com/2013/08/13/guide-to-designing-touch-keyboards-with-cheat-sheet/#comments