Affordance（可供性）和设计

iOS 键盘

为什么 iOS 的键盘如此出色，其他系统的虚拟键盘虽然在尺寸上基本超过 iOS 键盘，而它们的视觉体验还是操作体验相比之下显得像一团渣，为什么？

在比较分析之前，先说明一下，分析虽然是一个逆向过程，但在这里我认为诠释性的分析比揣测设计者的意图更有价值，当问“为什么这样设计”的时候，应该将眼界超越设计者本人的意图，即使有一些给出的理解完全脱离设计者的意图甚至与其相背。

iOS 键盘是（新一代）虚拟屏幕键盘的开山始祖，它有很多创新的设计和技术应用，在第一代 iPhone 上市的时候，Apple 做过详细全面的视频介绍，其中有一段就是 iOS 键盘介绍，土豆视频见这（Youtube 地址见这）。Steve Jobs 在 WWDC 2007 上介绍 iPhone 是从革命性的用户界面开始的，从列出 Moto Q、BlackBerry、Palm Treo 和 Nokia E62 这四台带全键盘的手机——当时被称为智能手机——开始，它们的按键和操作是不能改变的，无论你是否需要它总是在那里，而不同的应用需要不同的用户界面。iOS 虚拟键盘只在需要的时候出现，在不同的应用中使用不同的键盘，在输入网址的时候就将空格键替换成了“。”、“.com”和“/”等配合网址输入的按键。同时虚拟键盘需要解决精度以及效率问题，让人轻松快速的输入，使用放大镜进行轻松的光标再定位，比如“臭名昭著”的热词自动修正（英文），除了使用字典以及联系人等词组匹配进行修正外，还可以对输入区域进行匹配比如介绍视频中的将“ouzza”转为“pizza”，还有一项创新的设计是，根据字典来预测下一个字母，以此实时改变键盘的各字母对应的触摸区域的大小，让这些字母更容易被触发，比如输入“tim”，那么接下了“e”就比相邻的“w”和“r”的触摸区域大，因为“time”是一个常用词，而没有“timw”和“timr”这两个英文单词。

在 Apple 的获得专利中，与 iOS 键盘相关的有很多项，重要的就有根据下一个字母来动态改变触摸区域这一项，专利号 7，900，156 名称为“Activating virtual keys of a touch-screen virtual keyboard”，相应在中国的专利申请号为 200680033988 名称为“致动触摸 — 屏幕虚拟键盘的虚拟键”，专利内容就是上述实现的一个一般化，将触摸区域的改变一般化为按键如何根据触摸位置来触发，触摸位置与触发按键通过距离来确定（比如与哪个按键的距离小就触发哪一个按键），同时引入一个权重，那么上述实现中，出现下一个“e”比“w”和“r”有更大的权重，也就是“e”的触摸范围更大，这项专利例举的另一个实现，就是“删除”按键的权重设置成小的，它更不容易被触发。另外在设计专利中，有两项比较显著，一个是 D644，238 整个键盘的设计，另一个 D621，848 是关于按键被按下时挤出的那个放大的键盘指示牌。

我们先从尺寸来看 iOS 键盘的设计，上图是 iPhone 4 之后的视网膜屏幕的界面，所标注数字的单位为 px，其实就是 320*480 屏幕的两倍，前后键盘设计并没有变化，如果换算成 mm 为单位的实际尺寸，那么就类似 32 px/326*25.4=2.49 mm。这些尺寸是如何决定的，如果从设计者的角度来看，这个决定的过程既有逻辑的部分也有感性的成分，所以我们分析不能像数学一样去反推。iOS 的键盘高度为 430 px（320*480 的分辨率时为 215 px，其实 430 px 上方还有 2 px 的黑线），正好位于屏幕正中间向下偏 50 px，或许可以提出一个问题就是键盘为什么不是屏幕的一半呢？这个尺寸由其内部支撑起的，但是如果把它设成刚好一半，那么在比例上很容易体会到压抑（均分是较容易被识别）。76 px 的按键高度是 5.92 mm，52 px 按键宽度是 4.05 mm，12 px 按键间距是 0.93 mm，32 px 的按键间距以及字高是 2.49 mm，iOS 的 HIG 建议的最小可触摸操作元素是 44*44 point，转换到 mm 单位为 6.90，Windows Phone 7 的 HIG 中也说到最小触摸目标的高度是 7 mm（紧接着也说到键盘和链接可以例外，因为有额外的动态补偿）。肯定有很多人机尺寸可供参考，比如横向的尺寸，而从设计的角度除了依赖这些统计学上的数据，更重要的是结合经验和体验，毕竟在这么一个小范围内，依赖后者更迅速。我们从 iOS 键盘的尺寸上可以看出它们都是经过细致安排的，就是“尺度”。

将 Android 的键盘和 iOS 键盘以实体的尺寸为准进行比较，为什么不选用其他中文输入法的键盘，因为这些键盘多数是模仿 iOS 键盘的，而且有几个在尺寸上没有考究，比如上下两排按键或间隙都不是统一的，有 1 px 的差距，这样它们就没有什么参考价值。 Android 键盘也有尺寸诡异的地方，比如按键的圆角是 2px，2 px 的圆角在通常情况下是没有表现力的（只有3个像素参与），尤其像键盘这种密集排布的，反而让人感觉难受。

比较上面两个键盘，iOS 键盘虽然在整体的尺寸上小于 Android 键盘，但是按键之间的间距都要大于 Android 键盘，横向的 0.93 mm 对比 0.87 mm，纵向的 2.49 mm 对比 1.96 mm，尤其是纵向的差距，使得 iOS 键盘的按键可以更清晰和安心的识别、瞄准和按下，此时 iOS 上 8px 的圆角也发挥了很重要的作用。iOS 键盘的文字使用的是黑色的 32 px 高的大写 Helvetica （Bold），而 Android 键盘采用的是白色的 x-height 为 20 px 的小写 Droid Sans （Bold），人对物体的识别通常被轮廓左右，简单饱满的轮廓所需的识别精力小，尤其是在重复连续的键盘操作中，Android 键盘上的小写的小字体需要花费更多的精力，字体小需要聚焦，而复杂的小写字体轮廓让人付出更多的精力来拾取轮廓而且高度上会有跳动（更容易中途中断），而大写的大字体，在整体上是饱满完整的，在识别上所费精力更少。iOS 键盘的字体带来另外一个良好体验，就是与识别结合的后继动作——瞄准，它让人感觉到更容易被瞄准和敲击，因为按键上有字体，所以瞄准时首要注意的是字体的中心，而按键的轮廓是辅助，那么 Android 的小写字体更不容易找到中心，像 j l i 等就显得更难了。Android 键盘还有一个颜色的设计，从完全黑色的背景到灰色的按键再到白色的字体，引导视力集中到小字体上，而 iOS 富有层次感的设计，从有柔和渐变的背景到清晰突出的按键，再到黑色的大字体，让人的视力不过分集中，这样字体和按键感觉上是一体的，这也符合操作的识别范式。细致的层次感设计，比如阴影、渐变和高光让界面更加具形化，丰富人的体验。

什么是“丰富人的体验”？从 iOS 键盘的一个创新设计说起，那就是当按键被触发时挤出的放大显示牌，就是 D621，848 这个设计专利。iPhone 之后的其它虚拟键盘也有类似的放大显示，不过基本都是在上方跳出一个独立的方块，不像 iOS 有挤出效果，让人在感觉上能平滑的过度。放大显示从另外一个角度是设计的必然，即没有 Apple 其他的后来者都会想到，它位于逻辑的主干道上，但是像 iOS 这样的交互方式，是一种创新。这个放大显示牌它是在按键被触发后才显示的，也就是它是不参与识别、瞄准和敲击这个过程的，也就是它对当前这个按键出发行为和结果并没有带来帮助，只有当按错了之后，它才可能发挥它的显示功用，而通常情况下它是被忽略的，或者说只被散落的注意力关注着，它的作用只是有限的辅助修正输入。但是它却“丰富了人的体验”，它就像那些细致刻画了键盘层次感的阴影高光，或者键盘声音一样，如果没有它，功能上并没有什么缺失，但是就像没有了润滑油。它只能显示用于比较刚才敲击的按键是否正确，它不能保证当前的操作更精确，但是它可以让下一个操作更精确。当我们说体验这个词时，它必然与过程相关。

标签： affordance apple UI 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。