触摸设备取代传统的键盘和鼠标是大势所趋，用户通过触摸可以直接与界面交互，当然操作速度要取决于用户的操作速度和应用的响应速度。然而在触摸屏手机上进行键盘输入，是一件非常令人挠头的事情——缓慢、痛苦而且容易出错。

 主要问题便在于(1)虚拟键盘的尺寸过小，而且(2)按键之间的间隙也太小，非常容易导致误按，而且用户需要非常集中注意力于指尖，以便进行精细的操作。

 除了这两个问题之外，虚拟键盘的输入问题还包括：

 1.自动纠错问题

2.大小写判断

3.大小写/符号 输入切换问题

4.换行问题

5.键盘按键布局标准化问题

最近，通过18家商业网站的调研数据，进行了一项手机可用性研究，通过这份研究，我们看到了手机虚拟键盘的一些特质和局限性。尤其是在填写表单的时候。大多数用户队都会感到操作困难，进而变的抓狂，虚拟键盘的操作性和容错率极低，不时弹出填写错误的窗口。不少用户就因填写表单过于困难而放弃了对网站的浏览。

如果虚拟键盘无法满足用户的输入需求，用户会感到厌烦，因此放弃浏览，甚至有时还会质疑手机的性能和自己的能力。好的移动体验必须能够流畅的进行表格填写，而触摸屏虚拟键盘的改良是其重要环节。

本文将围绕触摸屏虚拟键盘的可用性问题进行深入探究，包括了五条能够有效解决问题的设计规范。这些规范是从M-Commerce Usability Report    的147条规范中提炼出来的。不但针对了实际应用中的具体问题，而且易于实施。

 我们用这五条规范为基准，去对50个在线零售商网站进行测试，。发现有98%的网站至少有一条不达标，70%的网站至少有两条错误（2013 7.31日的测试结果） 。虽然一些问题经过考虑后，谁都可以想到，但是面对问题进行订正的却不多。

建议一

当字典性能不佳时，关闭自动纠错功能（92%的网站没有做到）

问题：低劣的自动纠错功能让用户感到很厌烦

大多数的自动纠错功能都很垃圾，尤其是在缩略语、街道名称、邮件地址的输入上。只要是字典里没有的词汇，自动纠错的就很不到位。这使得自动填表的操作变的艰难、令人厌烦。

如图，在输入街道名“westheimer”的时候，手机自动纠错成“weathermen”，用户并没有注意到这一点，这就导致了“输入错误”的结果。

主要问题在于，用户经常注意不到自动纠错功能会将用户输入的“正确”的词汇纠正为“错误”的词汇（因为在输入时，用户的注意力集中在操作行为上，而不是集中在输入的结果上）。自动纠错功能能纠正拼写错误固然好，但是如果把对的改成错的，似乎就有点讽刺了。

在地址输入上，很多有效地址就被纠“正”为无效地址，由于很多网站没有地址验证的功能，结局便是很多用户收不到购买的商品。除非用户仔细检查订单的细节，才不至于出现这种错误。（而且，自动纠错功能往往是根据用户输入意图来改变词汇数据的，用户就会想，嗯，既然输入法懂我的意思，那么大致不会错把？）

虽然问题多多，但是在某些应用场景，自动纠错还是非常有用的。因此我们不推荐在所有的应用中都关闭自动纠错。因此，我们就要通过设计，当遇到不适合进行自动纠错的输入时，关闭自动纠错。主要包括名称（人名、城市名、街道名）、邮件地址以及优惠券编码。

尽管问题非常容易找到，也来非常容易解决，但在实际应用中，大部分网站都没有处理这个问题。92%的电商网

站都没有关闭自动纠错功能。

可以在Input标签中加入autocorrect(或autocomplete）属性，然后设置为off,就像下面这样。

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

建议二

键盘按键布局要合理(60%没有做到）

问题：不合理的按键布局降低了输入速度，而且增加了失误操作的几率，因为按键块太小而且按键彼此间过于紧密

触摸屏虚拟键盘最主要的问题就是空间需有限。实际上，iPhone在竖屏的时候，按键大小为4 X 5.9 mm

而Apple自己的设计规范中建议，可点击的界面元素至少要有6.85 x 6.85 mm那么大，以便精确操作。

如果在输入域中加入一两段属性代码，就能很方便用户使用。能够针对用户输入的字符种类进行判断，选择更合适的键盘布局。例如，可以在填写信用卡号码时切换为数字键盘布局，在填写电话号码时，切换为拨号键盘布局，在填写邮件地址时，切换为适合邮件地址输入的键盘布局。这能够节省用户的时间，因为如果仅仅是一成不变的传统的布局，用户需要来回切换。值得一提的是，上面提到的数字键盘布局错误率最低，因为这种布局提供了更大的空间，因此减少了错误点击的几率。

在Best Buy上输入信用卡号码，非常麻烦，传统的键盘布局需要不断切换。困扰了用户，用户的注意力在信用卡和手机上来回转移，而还要留意虚拟键盘布局的更换，注意力分散，自然容易发生错误。

事实上，iOS中，数字键盘的按键和传统布局的按键大小比例是4.71:1(209x 108 px对52 x 76 px)，因为数字键盘能够减少出错率，从而提高用户体验，所以在一些较长的数字类表单上（比如手机号码和信用卡号码），不妨采用这种输入方式。

左图中，用户输入数字可能会有困难，因为传统的键盘布局空隙太小，按键也小，容易出现操作失误。而右图专门为数字输入进行了优化，更加精确。左右图的按键比例为1:4.71

这种针对性的键盘布局还有另外一个好处，就是能够提醒用户输入内容的类型。这样用户就不会把邮件地址填成信用卡卡号了。但也有局限性，在某些特例中，用户还需要输入字母，但这种数字键盘布局切换起来很不方便。因此，一定要针对输入内容，合理的选择虚拟键盘布局。像电话号码、信用卡卡号、邮递区号这种内容，选择数字键盘就很合适。

在输入“555-555-5555”这种带“-”的数据时，要注意平台的差异，iOS输入“-”需要切换，而Android就不需要，因此还要考虑到多平台的一致性问题。 

通过这种大按键的数字键盘布局，能够用户带来一种网站可靠的印象。然而研究中的60%的网站没有做到这一点，没有针对不同的输入内容来调整键盘布局。

从技术的角度讲，有好几种方式可以调用数字键盘式布局，而且彼此之间的区别也很小，在不平同台上的差异也较小。大体上有两种HTML 属性使用比较广泛，一种是type属性，另外一种是pattern属性。

Type属性非常具有针对性，适用于输入类型非常确定的情况。而对于数字输入，更推荐使用pattern属性。（如果不想限制键盘的布局类型，可以使用novalidate属性）“pattern 属性规定用于验证输入字段的模式，适用于以下 输入类型：text, search, url, telephone, email 以及 password 。”——摘选w3cschool

对于电话号码输入域，可如下添加代码：

<input type="tel" />

对于其它类型、需要调用数字键盘的输入域，可如下添加代码：

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

对于邮件输入域，可如下添加代码。

<input type="email" />

正如上面提到过的，虽然大体上一致，但是这几种调用数字键盘的方法还是稍微有所不同，在不同平台上也是如此。例如，在iOS平台上，上文提到的电话号码输入域代码，其结果是调用出能够输入数字、并且能够输入特殊字符和分隔符的键盘，然而这段代码要求仅仅调用数字。而在Android平台上，也是同时调用除了更多的特殊字符按键，以便用户能输入一些特殊类型的电话号码。

然而，Android平台并不支持Pattern属性，只能简单的调用出常规字母式键盘。可以用 tyep=”number”来调用，而且无论是iOS还是Android这段代码都可行。但这是在语义上就定义了输入的类型是数字( number)，而不是数字序列(numeric sequence)，这对于信用卡来说，就有点不合适了。

因此，我们推荐使用pattern=”d”，对于iOS平台来说很方便，而且其他平台不支持也不影响。

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

未完待续......

另：附上iOS的不同键盘布局（来自知乎网，@陶智）

· 1、英文键盘：UIKeyboardTypeAlphabet（Alphabet字母）

· UIKeyboardTypeASCIICapable

· UIKeyboardTypeDefault

这三个默认都显示字母表。默认下面第一幅图，点左下角切换到下面第二幅图。