触屏键盘设计准则

通常来说，人们会理所当然的觉得触屏设备要比几 十年的手机鼠标和屏幕直观的多。用户与触屏直接交互， 缩小了客户行为与工具响应之间的距离。然而，在移动设备上——尤其是在智能电脑上——打字 是一件相当可怕的事情。因为哪既慢，又苦恼，而且容 易出错。 最明显的理由是屏幕字符的宽度跟键盘之间的临近，但是也有众多其它重要原因 需要考量，包括： 适当的使用手动更正的字典贴切的将 字母自动大写提示输入类别保持标签排序保持自定义键盘的一致性 在今天一次的针 对18个最大的移动电子商务网站的1：1可用性测试中， 我们观察了在填写表格过程中，现在的触屏键盘的这些功能与限制是怎样与用户的预期相冲 突的。一旦冲突发生，用户的受挫感会马上上升，比如 表单字段验证错误的提醒一个接一个的弹起来，或者更糟的是，用户被卡住并最后抛弃了网站。 当应对一个不这么理想的触屏键盘是，用户会对网站失 去信心，有的并且质疑自己用智能电脑填完一个表单的能力。显然，好的移动终端的用户体 验需要一个具有良好可用性的表单，触屏键盘也有其中 的关键一环。 在本篇文章里，我们将围绕触屏键盘的可用性问题做深入一点的阐述，包括5条 设计准则，可以解决一些难题。

这个设计准则摘自移动 电子商务可用性报告中147条指南。前段时间我们在Smashing Magazine上看了移动电子商务 10条准则，这5条触屏键盘的准则会很具有通用性，可以 应用于用户与触屏键盘有交互的任何电脑网站。 此外，我们还以这5 条准则为基准审视了排名前50的零售商的移动端网 站，发现98%的网站犯了一个或多个错误，70%的热门移动端网站犯了至少两个错误（截至 到2013年7月31日）。尽管有些指南可能刚起初看起来是 显而易见的，但当如此多的电子商务站点都犯了这种的出错，我们仍然必须最认真 的考量很多指南。[Page: ]1、当词典匮乏时，禁用自动更 正（92%的网站犯了此错误） 问题：当用户真的注意到差劲的自动更正时会 感到更挫败，如果它们没有注意到更改，将会是一件更 糟糕的事情。 自动更正通常在下面情况表现十分糟糕：缩写，街道名称，email地址或者其它 词典里没有的词组。这在整个测试过程中产生了巨大的 问题，随着被试者完成购买，大量错误数据被提交。 当被试者在网页上街道名称一栏 输入“westheimer ”时，手机将其错误的更正为 “weathermen”（如左图）。

然而，被试者并没有注意到，提交表单后收到了一 个错误验证（如右图）。 关于自动更正的一个主要 问题就是，用户一般不会注意到更正（因为客户一般关注的是它们正在输入什么，而不是已经输 入的内容）。如果更正是恰当的，那就没问题，但即使 更正是出错的，那将要是很糟糕的事情。例如，在测试过程中多次遇到的事例，由于被试者并没 有注意到自动更正，原本有效的地址信息被自动更正为 无效信息并被提交。 在没有地址验证的网站上，这会导致订单被送到错误的地址，除非被试 者特意仔细的查看订单确认页（毕竟，自动更正的信息 通常看起来与输入的信息十分相近，这也因而用户极少会注意到信息是出错的）。当然，自动更 正在地址上的惨痛失利并不仅仅是在边界的举例（如 “weatherman”），而且在一些常用的（标准化）缩写也是这么，比如“Rd”会被自动更 正为“Ed”。 话虽这么说，自动更正在其他画面而是 有意义的，会将无效数据更正为有效数据。因此，并不推荐在所有画面（如评论区）禁 用手动更正。相反，要谨慎使用手动更正，只在词典匮 乏的画面禁用。这往往包含各式各样的恰当名称（街道，城市，人物）以及其它标识（email地址， 优惠券代码，等等）。

尽管看似简单，实践出来这 却是迄今为止触屏键盘可用性当中最容易被忽略的个别；几乎所有的热门移动电子商务 网站就会犯这个错误。上文提到的调查显示，其中有92% 的网站在地址输入框里没有禁用自动更正。鉴于在地址跟email地址输入框使用手动更正带来 问题的严重性，却几乎没有什么网站在这里禁用自动更 正，这真的太惊人。 你可以在<input>标签上增加<autocorrect>属性并修改为关闭，来 禁用自动更正，就像那样：[Page: ]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”了。）[Page: ]3、保持一致，调用合适的键盘 （54%的网站犯了此错误） 问题：如果一个输入框调 用了专用按键而其它类似的输入框却没有，那么在没有调用专用键盘时用 户会觉得苦恼触屏键盘软件，并起初怀疑这个输入框所需输入的类别。 为特定输入框调用适合的按键是恰当的做法（参见前面的推荐），但是应保证在你的网站 上维持一致，否则会使用户更困扰。换句话说，如果邮 政编码的输入框调用了数字按键，那么类似的输入框也应有相同的做法。 尽管这听起来是显 而易见的，但这些网站都没有在调用专用键盘上保持一 致。例如，花店FTD（如上图）在填写号的之后读取了数字按键，但在紧接着下面的安 全码输入框却没有，虽然这两个值都是数字。 在50 个迅速下降的热门零售商中，54%的网站在它们的移动站点上犯了这个错误，多多少少都 会有一个或是多个电话输入框，号码或是 核对（CVV）输入框没有调用数字按键。

这54%的数据方案如下（绝对值）：24%的网站没有 为这三类中任何一种调用数字键盘（尽管这只是一致的， 但是错误的示范），剩下30%的网站（包括FTD）不一致，只有在一部分输入框才会调 用数字键盘。 更令人震惊的是，在整个可用性测试 中，由于这种的弊端让一些被试者很困扰。他们起初怀疑针对某些输入框最初的阐述，认为 可能必须填写一些其它的内容。例如，当发现“ 安全码”输入框弹出了标准键盘时（如上图FTD的网站），被试者开始担心这是否就是填写 背面的那三个数字，或是印在卡上的其它字符串。4、兑 现“上一项”和“下一项”按钮的行为（4%的网站犯了此错误） 问题：如果“上一项” 和“下一项”按钮把用户带去了不合逻辑顺序的输入框， 用户会更痛苦跟窘境。 在测试中，被试者在无法兑现“上一项”“下一项”按钮行为 的网页上觉得烦恼。用户预期的行为很简单：当用户点 击“下一项”按钮，他们会预期跳到表单中下一个合乎逻辑的输入框，没有其他差异，甚至提交 表单。“上一项”按钮也一样，当然是换个相反的方向。 这不仅仅是必须有恰当的标签序列（虽说这是一个好的开始）。当必须依赖于用户原本的 选择处理动态输入控件时，事情显然会出差错。

在这种 情况下，我们将要看见用户数据被删除或是标签序列被违反。我们也需要应特别留意自定义表单 的接口。例如，在迪士尼商务网站，定制化的状况选择 器不属于标签序列（因为从技术上来说它并不是一个输入元素），所以用户经常跳过这个状况控 件。 填写了邮政编码以后（如左图），被试者点击 “下一项”按钮，正确的跳转到菜单中的下一项“场所类型”（如右图）。但如图所示，网站清 空了被试者前一个输入的数据。很显然，当使用“下一 项”和“上一项”按钮时数据必须是被保留的。 这些按钮的功能基本上是充当手柄上tab键的 移动版；所以，它们需要运用和手机屏幕tab一样的序列 规则。它们需要提供从一个输入框到下一个输入框的便捷途径，不需要任何点击（不论 是鼠标还是手指）。这在手机上是尤为重要的，因为当 键盘呼出的之后，屏幕空间是有限的，下一个输入框可能被个别遮挡，这个之后“下一项”按钮 则用上去很方便。所以，尽管“上一项”和“下一项” 按钮有也许不会被所有用户用到，但停用这种按钮的行为会导致很严重的后果。 幸运的是， 大部分网站这一点都做的很高。只要代码是清晰的，手 机浏览器会默认将输入框出现的排序作为标签序列。

在热门移动端网站中，只有4%的网站犯了此 错误。5、在适度的状况下，禁用自动大写（38%的网站 犯了此错误） 问题：几乎所有的被试者都觉得它们的电子邮件地址应该要大写，所以 这项数据手动大写会帮整个过程增添不必要的帮忙。 智能电脑默认会把标准文本输入框的首字母小写，这在大部分情况下是适合的。然而，在有些 情况下禁用自动大写是最适合的，特别是像电子邮件地 址这种绝大多数用户都以为应小写的状况。 该名被试者注意到了首字母“J”，并移回光标将其 改为小写“j”，因为他不确定大写字母是不是可以通过验 证。 测试中的大部分时候，被试者都注意到了大写字母，并确立的将其改为小写。 最合理的解释是它们不确定是否允许填写大写字母，或 电子邮件地址是否区分大小写。在这些电子邮件输入框禁用了手动大写的网站上，没有被试者会 主动将首字母大写。推荐你们在电子邮件或是其它适合 的场景（如网址URL）禁用自动大写。在热门移动电子商务网站中，38%的网页在电子邮件 地址输入框没有禁用自动大写，把他们设定为纯文本输 入框，给用户留下非技术性的困扰。可以在<input>标签上加入autocapitalize属性并修改为 off，来禁用自动大写，如下所示： 当然，针对电子 邮件输入框，你也可以设定一个type属性为email： 在iOS系 统上，设置type属性为email将会自动禁用自动大写。

然 而，最好仍然设定autocapitalize属性，因为这除了在iOS系统上奏效， 而且在其它还不支持email输入框类型或是实现方法不同 的系统也可以使用。[Page: ]测试或者绝密小抄： 虽然这种基本 原理看上去是显而易见的，但是要记得中国最大的移动 电子商务网站中98%的网站违反了大约一条（参看任务完成列表）。70%的网站违反 了两条甚至更多的“基础“触摸键盘准则。事实上，24% 的网页根本没有为触屏键盘输入做过哪个优化，就算是省掉标准键盘（在输入电话、电 子短信、数字等状况），偶尔调用专用键盘（一致性很 差），在适合的地方禁用自动更正，抑或是在电子邮件地址输入框禁用自动大写，这些都没有。 不遵循设计准则的一个原因或许是，针对一个大型网站 所做的全局测试必须去看到所有的显著缺陷——故而，理想状况下的第三项建议中提及调用键 盘的一致性问题，是不必要被提到的。另外一个原因是， 在前一篇文章中提及的，手机跟触屏界面是一个相对较新的系统，它的全新的界面理论应该 大家去关注无数的小的细节——这些细节对于我们网页设 计员跟开发者来说还不习惯去主动寻求和设计。 综合以上因素，我们将用一个绝密小抄来 作为文章的结尾，此小抄是设计触屏界面输入框最常见 的细节点，包括能复制粘贴代码或者正确读取了屏幕的手机触屏优化demo，你可以把它只是是一 个设计研发手机端以及桌面端网页的清单。 可交互 的触屏键盘小抄，以及手机端优化demo。 这些输入框通常还会出现在下面类型的字段 中：帐号注册，帐号登入，搜索，调查，完整的结账过 程，注释表单并且联系表单。我们建议你搜索整个代码库，来捕获到每一个实例。品牌设计

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shouji/article-140889-1.html