隐藏在 iOS 键盘里的惊喜时刻 | 领客专栏·UEDetail

上期文末所做的小预告如约而至，也是我原本打算在发布《iOS 细节设计之交互篇「下」》之前想插入的一篇案例详解，之所以先讲它是想让大家对于此类案例有更深入的了解。废话不多说，下面进入正文。

苹果在产品细节上的追求一直以来都是被人津津乐道的话题。无论是乔布斯时代的偏执还是库克掌权后的传承，在 iOS 或 OS X 中都能找到很多为之一赞的精彩设计，这在之前的三篇有关「iOS 细节设计」的文章中都有过提及。不过对于资深果粉来说，知道文章里的案例并不值得傲娇，挖掘那些鲜为人知的细节才是能让他们兴奋的事情，这便是文章标题所指的 Apple Surprise & Delight Moment 。

现在拿起你手里的 iPhone（仅限 iPhone 4 以后的机型），确认已在设置项中开启了 Dictation（语音听写），然后打开一个可以调出虚拟键盘的应用，比如「备忘录」。如果你所启用的输入法不止一个，那么在你的 Space 键「空格键」左边一定会有 Globe 键（用于切换输入法的那个小地球按键）和 Dictation 键（画着麦克风的语音输入键）。然后再去到设置项中，将除 English「英文」之外的输入法全部移除，再回到之前的虚拟键盘，你就会得到下面的两幅图。

好了，现在找茬游戏开始… 我想你肯定很快就注意到了下图中没有 Globe 键，以及因为 Globe 键的空缺而导致的 Space 键变短了。但你是否有注意到两幅图中 Dictation 键的颜色有所不同呢？亦或是注意到了，但是有考虑原因吗？OK，再来仔细观察这两幅图。

如之前所言，图中下方的 Space 键明显偏长是因为上方的 Globe 键占据了一个按键的位置，那么在这个基础上再来看 Dictation 键的颜色，你就会明白它为什么使用了不同的颜色。因为白色所对应的正是 Space 键的颜色，而图中上方 Dictation 键 + Space 键的长度正好等长于下方 Space 键的长度，所以苹果在这里利用 Dictation 键在色彩上所产生的视觉差异填补了由于 Globe 键所占去的原 Space 键的面积。那么问题来了，为什么要这么做？

解释原因之前不妨先来实践一番。首先只保留系统输入法为 English，这时的 Space 键可以理解为全尺寸，然后以较快速度进行输入的同时点击 Space 键，你会发现如果习惯于左手拇指点击的话，那么通常会按压 Space 键中部偏左的区域。

接下来将键盘恢复为多输入法，这时的 Space 键会因为多了 Globe 键而变短，同样以较快速度进行输入的同时点击 Space 键，你会发现当习惯了之前全尺寸的 Space 键后，这时的左手拇指落点就很可能会是现在 Dictation 键的位置。

试想在这种情况下若 Dictation 键的颜色是与 Space 键不同的灰色，那么在视觉上将会非常抢眼（如下图，自行感受下），从而导致用户为防止输入错误而将拇指敲击位置下意识的向右移，这样就会影响到输入的连贯性。而之所以将 Dictation 键变为与 Space 键同样的白色，就是要在视觉差异上将这个影响降低，从而让用户保持统一的认知感，让输入更流畅。

可能有人会说我将这个设计过度解读了，苹果对 Dictation 键改变颜色仅仅是为了保持 UI 设计上的对称而已。不过，事情还没完。如果你够细心，在上面的实践中或许已经发现藏在其中的另一个奥秘。那就是在快速输入时，即使你的拇指落点在 Dictation 键上，也不会触发该键的语音功能，而是发现点击区域依然在 Space 键上，这个设计即使是在全尺寸 Space 键的键盘上也是适用的。

换句话说，就是苹果为了防止误操作，本身就对 Dictaiton 键采用了针对快速输入下的无响应处理。那么，基于这个设计再来看 Dictation 键的颜色问题，你还会认为苹果仅仅是为了做一个 UI 上的对称吗？

欢迎关注新浪微博 @uedetail 与我交流，更多细节设计请访问 uedetail.com。我们《iOS 细节设计之交互篇「下」》中再见。