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 這樣的交互方式，是一種創新。這個放大顯示牌它是在按鍵被觸發後才顯示的，也就是它是不參與識別、瞄准和敲擊這個過程的，也就是它對當前這個按鍵出發行為和結果並沒有帶來幫助，只有當按錯了之後，它才可能發揮它的顯示功用，而通常情況下它是被忽略的，或者說只被散落的注意力關注著，它的作用只是有限的輔助修正輸入。但是它卻“豐富了人的體驗”，它就像那些細致刻畫了鍵盤層次感的陰影高光，或者鍵盤聲音一樣，如果沒有它，功能上並沒有什麼缺失，但是就像沒有了潤滑油。它只能顯示用於比較剛才敲擊的按鍵是否正確，它不能保證當前的操作更精確，但是它可以讓下一個操作更精確。當我們說體驗這個詞時，它必然與過程相關。

iOS 鍵盤無論是從操作前的視覺體驗，還是操作過程之中以及之後，它都讓人感覺其隱含的優秀性能，雖然實際上人的操作只是在敲擊玻璃。

我們先要下個岔道溜達一下，因為我認為有一些值得討論的東西。

Built from scratch，始自粗砺

iOS 鍵盤的擠出放大顯示牌似乎 Apple 很早就做了，在 2005 提交的一份專利申請中可以看到類似的，如上圖左所示，這份專利的申請號為 20060053387，題目為“Operation of a computer with touch screen interface ”，發明者署名只有 Bas Ording 一人。這份專利申請主要是關於一些諸如按鍵的操作，比如不同時長的接觸時間配置不同的反應，而上圖這個鍵盤指示牌是放在最後的一項應用實現。在這份專利描述中的顯示牌是“preview”用的，它是在一個虛擬界面元素被激發在為期指派功能前顯示這個元素被激發，比如當手指停留在觸摸屏或者移動而不舉起，那麼界面元素對應的功能就未激發。

上圖右來自 Apple 在 2004 年提交的一份專利申請，這是 Apple 最早的幾份與多點觸摸以及平板電腦有關的專利之一，這份專利的申請號碼為 20060026535，專利的署名有 Bas Ording，Greg Christie 和 Imran Chaudhri 三位用戶界面設計師，St