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

主要问题便在于(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平台来说很方便，而且其他平台不支持也不影响。

建议三、保持同类输入域键盘布局的一致性（54%没有做到）

问题：某输入域能够调出针对化的键盘布局，而输入类型相同的、类似的输入域却采用的是常规的布局。用户会感到很不习惯也很不方便，少数服从多数，最后用户便会要求一直使用常规的布局，这样就不会产生频繁的布局切换。

针对特殊的输入域调用针对性的键盘布局，这确实考虑的很人性化（请看我之前的建议），

但一定要保持某类输入域键盘布局的一致性，如果做不到这一点，用户会感到很不方便、很烦。换句话说，如果邮政编码这种数字类输入域能够调出数字键盘，那么其他数字类的输入域也应该调用数字键盘布局。这样才能保持一致性。

说起来容易做起来难，很多网站都没有保持同类输入域键盘布局的一致性。例如在线花店FTD(上图）在进行信用卡卡号输入时调用了数字式键盘，而在安全码输入域却使用了常规布局，尽管两个输入域输入的都是数值，可是布局上却有差异。

调查中54%的网站没有做到这一点，在电话号码、信用卡号码和信用卡安全码上错误百出，差异重重，而这54%的网站可以分解为：24%的网站不为电话号码、信用卡号码和信用卡安全码的输入提供数字式键盘布局，全部的输入都采用同一种键盘布局（这确实保持了一致性，但是是失败的一致性）。30%的网站这三者的输入有差异，键盘式布局时隐时现。

如果无法提供同类输入域键盘布局的一致性，用户会感到很困惑，就拿输入“信用卡安全码”来说，错误的布局可能会导致用户拿不准是输入三位数安全密码，还是输入信用卡上别的什么东西。

建议四、合理处理换栏、翻页问题 （4%没有做到）

问题：“上一页”和“下一页”按钮经常不合常理的换栏，删除用户之前填写的内容

调查中发现，如果网站的表单设计不合理，需要翻页，各种“上一页”“下一页”按钮会让用户眼花缭乱。而换栏问题更是麻烦，一个一个的点击栏目操作起来非常繁琐。用户期望中应该是这样的：当点击“下一页”按钮时，应该进入下一类数据的填写，之前填写的内容、布局，一切都不要变。“上一页”也是同理。

我们都会有这样的经验：(1)有时会弹出一个选框进行选择，选择之后我们之前输入的数据都被删除了，不得不重新输入一遍。(2)换栏极其不规律，经常导致内容被误删、误改。这些情况一定要避免。例如，在Disney Store中，提供的传统状态选择器便有这种问题

填完邮政编码后（左图），用户点击“下一页”按钮，便出现了一个“地区类型”的下拉式选择按钮（右图）。可你看，网站删除了用户之前填写的内容。

这些按钮是实质上就是桌面键盘“Tab”键的移动版；既然是模仿，用户肯定会想当然，那就顺应用户，保持和桌面的换栏规律一致。我们应该为用户提供更加快捷的换栏方式，并且换栏应无需使用指针、自动执行。这在移动应用中相当重要，因为屏幕空间有限，当虚拟键盘打开时，内容的一部分被遮盖，精细操作极为困难，所以要在“下一页”按钮、换栏功能上多下功夫，以方便使用。

好在大部分网站在这一点上做的都很好。只要有没填写的栏目，浏览器便会自动换栏到那一项。仅仅4%这一点没有做到。

建议五、适时关闭自动大写功能（38%的没有做到）

问题：作为中文用户，自动大写似乎对我们的影响不大，但是在输入英文密码和一些必须区分大小写的邮箱地址时，也会感到很不方便。

一般的智能手机都会默认打开自动大写功能，输入域输入的首字母都会改为大写，看起来很美观。但是某些特定的情况下，需要关闭自动大写功能，尤其是在邮箱地址时，大多数用户需要一直使用小写。

不管验证是否区分大小写，用户习惯性的还是会把”James”中大写的“J”改成小写的”j”，因为用户并不确定验证是否区分大小写，所以会选择比较稳妥的方式。

多次测试表明，在输入中，用户会特别注意用小写字母更换大写字母以预防输入错误。因此，为了适应用户习惯，让用户心理上更舒服，我们推荐在邮件地址输入域和其它有需要的输入域中关闭自动大写功能。

而调研中我们发现，38%的网站没有做到这一点，这让网站的新用户和不太懂科技的用户感到很困扰。

通过在<input>标签中加入autocapitalize属性，并设置为off，这样就能实现自动大写的关闭。如下：

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

当然，对于邮件地址输入域，还可以将type属性设置为email:

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

在iOS中，只需将type设置为email便可以自动关闭自动大写功能。而我们还要设置autocapitalize属性，是为了适应更多的平台。

总结：

大道理都很基本，但是实施起来很难，但是世界上排名前列移动电商网站中，有98%的或多或少有一点输入问题。而70%的网站有两条以上的、带有基础性质的问题。而24%的网站更差，完全没有进行输入上的优化。关闭效果不佳的自动纠错、根据情况选择合理的键盘布局、保持同类输入域键盘布局一致性、合理的换栏翻页、适时关闭自动大写功能。就是这五个问题，很基本，我们在日常使用中也都能遇到。

导致问题出现的因素极有可能是急功近利，缺乏对产品的测试。——其实很多问题，只要自己操作一遍，就能立马发现，但是问题还是发生了，这说明根本没有测试。另外值得一提的是，移动和触摸界面代表着一种相对较新的平台，全新的交互方式很空泛，框架是有了，但是具体的细节尚在完善中——我们作为开发者和设计者，有义务去不断完善，统一标准。

最后，提供一张非常方便的速查表，分别针对不同的输入类型（域）进行了设计。演示，并给于了一些失败的案例。很方便进行借鉴，从而优化你的设计。