触屏键盘设计准则

2、弹出合适的键盘（60%的网站犯了此错误）

　　问题：弹出不合适的键盘会降低输入速度，用户经常会因为标准键盘上数字的很小的点击区域以及间距而打错很长一串数字。

　　智能手机上触屏键盘的一个很大局限就是它的尺寸。字符本身也都是非常小的。事实上，在iPhone4竖屏时一个字符的大小是4*5.9毫米。

　　再来对照一下苹果自己的设计准则，其中提到所有可点击的界面元素至少要有6.85*6.85毫米，因为任何小于这个尺寸的元素点击准确度都会非常的差（微软和诺基亚同样制定了最小点击区域为7*7毫米）。可以预见，这将会导致拼写错误。

　　但是通过更改输入框代码的一到两个属性，你就可以让用户的手机自动显示所需输入的最合适的键盘。例如，你可以为信用卡号输入框调用数字键盘，为电话号码输入框调用拨号键盘，为电子邮件地址输入框调用电子邮件的键盘。这样可以节省用户必须切换传统键盘的时间，并且在输入数字的场景中，最大限度的减少输入错误，因为这样的专用键盘按键尺寸更大，会减少意外输错的机率。

　　Best Buy的信用卡号输入框调用了标准键盘，所以用户必须先切换至数字和字符键盘，然后准确无误的输入16位数字。这对于被试者是件很困难的事情，他们要来回看着信用卡和手机，小心翼翼的点击数字键，不碰到旁边的键。

　　在整个测试中，很多被试者都注意到了专用键盘，并对它们赞许有加。事实上，在iOS中，数字键盘的点击区域要比标准键盘大471%（数字键盘209*108像素vs标准键盘52*76像素）。更重要的是，我们发现在数字输入框里采用数字键盘时错别字明显减少。这会导致更少的验证错误，反过来，也可以将网站引向一个更好更无缝的购物体验。这对于长数字队列尤为明显，比如电话号码以及信用卡号。

　　左图，一个被试者由于标准键盘按键尺寸小且邻近，在输入“1”的时候不小心按到了横划线。这个时候调用数字键盘会更加合适。右图，用户在GAP网站上输入“日间联系电话”时，调出的是专门优化过的键盘，按键比标准键盘大471%。

　　调用专用键盘的另一个好处就是可以表明需要输入的是什么内容，如果输入框标题滑出视线范围或是用户不确定要输入什么的时候，这会很有用。然而，数字键盘也有一定的局限性，因为它不允许用户输入拼音字符，只有少量特殊字符或分隔符，也可能连这个都没有。所以，只有最合适的时候再调用这样的键盘，这很重要，比如输入电话号码、邮政编码、信用卡号以及信用卡安全码。同样的，在调用键盘时，确保你给出的格式样例是可以复制的。

　　根据给出的样例格式（比如“555-555-5555”）输入电话号码在iOS上是不可能的，因为调出的键盘是没有横划线的。（有趣的是，在Android系统上输入是可以的，这也说明了为什么在多个平台测试有助于确保在格式样例只在有些平台上必须。）

　　说了这么多可用性上的优点，你可能会想这种专用键盘是被广泛应用的。然而，60%的热门移动电子商务网站在对应的场景并没有调用它们，如电子邮件（电子邮件键盘）、电话号码（拨号键盘）以及信用卡号（数字键盘）。

　　技术上来说，有很多种方式可以调出数字键盘，每种键盘之间略有差别（如拨号键盘和数字键盘），不同平台间行为也会有轻微的不同（iOS，Android等）。大体来说有两种HTML属性可以调用数字键盘，分别是type和pattern属性。

　　Type属性承载语义的含义，仅仅当输入时有合适的类型可调用时才会被用到，这主要是针对电话号码和电子邮件地址的场景。不过对于数字输入，更推荐使用pattern属性来替代。（注意如果你仅仅是想要浏览器调用键盘，并不强制格式，可以加入novalidate属性。）

　　针对任何电话号码框，用如下代码：

　　针对其他你想要调用数字键盘的输入框，用如下代码：

　　针对任何电子邮件地址框，用如下代码：

　　正如上面提到的，各种数字键盘之间会有一些区别，在不同平台之间也会有一些不同。例如，在iOS平台上，上述代码调出的电话键盘可以让用户输入数字以及少量电话相关的特殊字符和分隔符，而调起的数字键盘只能输入数字。与此同时，在Android平台上，调起的电话键盘则有着更多的特殊字符，支持更多格式的电话号码。

　　但是，由pattern属性调起数字键盘在Android上根本不支持，相反，它只会调起常用的字母键盘。虽然在iOS和Android平台上，你都可以使用type=“number”调起数字键盘，但将type设置为number带有语义含义，在很多场景下并不合适（比如信用卡号是一个数字队列，不单单是一个数字）。

　　所以，我们推荐更为保守的策略，使用pattern=“\d*”，这样在iOS平台上可以有更好的体验，在其他不支持该属性的平台上也不会有什么影响。（当然了，如果输入框就是针对一个数字的，比如价格或是数量，那么显然应该使用type=“number”了。）