13毫米：觸屏按鈕的完美尺寸【UXRen譯#170】

01-31

作者：Scott Hurff | 翻譯：taitai，校審：天蛙

有種感覺你無以言表但卻瞭然於心——當你在觸屏上不能正確操作時，當你不得不小心翼翼地點屏幕上的一個小按鈕來觸發某個指令時，那種挫敗混雜著氣惱的滋味。

但假如你在日常工作中可以設計出避免這種窘境的用戶界面，事情會怎樣？假如你可以設計出幫助客戶減少錯誤、更快地完成任務、並最終對你的產品更滿意的觸摸元件，事情又會怎樣？

這是可能的。讓我們一起來發現其中的原因。

這是你最後一次讓我失望，iOS9

我在iOS9的鎖屏上使用音樂控制項時，常會碰到這個問題。

在我忙碌時，每當我想跳過一首歌時，我無論如何也無法一次就點中跳過按鈕。我需要再點一次，有時需要點第三次。我甚至會因誤操作而調高音量，或是暫停這首歌。

最終，這種負面體驗迫使我改變了我的使用行為：我不再用它了。

這是一個嚴重的失敗。這個旨在節省我時間的用戶界面,反而浪費了我很多時間。

iOS 9的音樂控制項肯定有某處違反了用戶界面的關鍵原則。但究竟是哪一處呢？

謝天謝地，iOS 10的出現改變了這些。控制項變大了，點擊區域充足，藝術家和歌曲信息也變得更大，更容易閱讀來獲知現在播放的是誰的歌。

換言之，我忙碌時切歌的錯誤率明顯下降了。

為什麼？

科學有答案。

從1億2千萬次點擊中學到的

2006年，來自芬蘭奧盧大學和馬里蘭大學帕克分校的研究人員進行了合作。他們的研究目標是確定什麼尺寸的按鈕在單手使用觸摸屏時最容易操作。

他們測試了兩種場景。第一種：執行單個任務（如激活按鈕、點選複選框或單選按鈕）。第二種：執行連續任務，如輸入電話號碼。

在研究過程中，研究人員在每個場景下都測試了一系列不同大小的按鈕。他們發現，當按鈕小於9.2毫米時，單個任務的錯誤率顯著增加；當按鈕小於9.6毫米時，同樣的事情發生在連續任務的場景中。

奇怪的是，在連續任務場景中，錯誤率在9.6至11.5毫米基本保持不變。一會再解釋原因。

左圖：單任務情景下各目標尺寸的平均錯誤率

右圖：連續多任務情景下各目標尺寸的平均錯誤率（原文作者截圖漏掉圖標題）

X軸：目標尺寸（毫米），Y軸：平均錯誤率（%）

五年後，兩所德國大學的研究人員進行了一項研究。他們的目標是：確定觸摸屏按鈕的最佳觸摸目標尺寸。

為了進行這項研究，研究人員發布了一個Android遊戲，該遊戲被下載約10萬次，記錄了約1億2千萬次點擊事件。遊戲的玩法很簡單：玩家要點擊各種大小的浮動的圓圈來晉級。這些圓圈可能出現在屏幕上的任何地方。

分析遊戲中的點擊事件後，研究人員發現當圓圈尺寸小於15毫米，玩家的錯誤率逐步增加，且當圓圈小於12毫米左右時急劇上升。當點擊目標小於8毫米時，玩家沒點中圓圈的概率超過了40%！

X軸：目標尺寸（毫米），Y軸：錯誤率

奇怪的是，2011年的這次研究還發現，目標尺寸超過12毫米時，準確率沒有顯著提升。

還有無數的相關研究我可以引用，包括主要廠商如蘋果、谷歌和微軟設立的元件推薦尺寸（稍後我會提及）——但我們首先需要討論所有這些標準的鼻祖：菲茨定律（Fitts』s Law）。

回顧歷史

作為產品設計師，我們受益於前人的辛勤工作。在這個例子中，Paul Fitts——一位俄亥俄州立大學（雄鹿加油！譯者註：Go Bucks為該校口號）的心理學家——在1954年創建了一項後來被稱為菲茨定律的原則。它從此成為人機交互的基礎。

最簡單的來說，菲茨定律是你的手移動到一個對象上需要多長時間的模型。這個對象越近，且粗略地說，它越大，你就能越快、越容易地將手移動到這個對象上。

不但如此，菲茨能夠用數學表達這個模型。舉個例子，如果將此模型應用到觸摸屏界面，只要我們知道屏幕上的對象的大小和距離，我們就可以確定將你的手指指向它們需要多長時間。

這就是它的方程式：

MT = a + b log2(2A/W)

其中：

MT =完成動作所需的時間
a,b =隨情況變化的參數
A =從起點到目標中心的移動距離
W =目標在運動軸線上的寬度

我不是個數學家，但我對菲茨定律的研究表明，這個函數的對數部分是非常重要的。

認知科學家、《MindHacks》這本書的合著者湯姆·塔福德很好地總結了這個函數的動態變化：

雖然定律的基本信息平淡無奇（大的目標更容易被選中），但精確的數學描述才是令人興奮的。這個數學描述中包括了一個對數函數——這意味著目標大小與反應時間的關係呈曲線形狀，即小對象的尺寸增加一點點，就會導致選中它們變得容易得多（而大對象的尺寸增加一點點並不會造成這麼大的差異）。這同樣適用於目標距離的變化。

令人興奮的是，現代研究一次又一次地證明了這點。在我之前引用的兩篇論文中，每篇都顯示當按鈕尺寸超出某個特定值時——大約在12~15毫米之間，效果就會遞減。

但最棒的是，我們可以利用這個定律來設計更好的用戶界面。

下面是怎麼做。

使用菲茨定律設計更好的用戶界面

以菲茨定律為基礎——且結合之前提到的研究——你就可以幾乎每一次都設計出完美觸屏的用戶界面。

首先，下面列出了上述兩項研究中建議的按鈕大小：

9.2 x 9.2mm
9.6 x 9.6mm
12 x 12mm
15×15mm

下一步，讓我們結合蘋果、谷歌和微軟推薦的觸控目標的最低標準：

蘋果：44×44points（邏輯解析度）
谷歌：48×48dp +8dp或更多間距= 56 x 56dp（設備解析度）
微軟：9×9mm±兩側分別2mm的推薦間隔= 13×13mm

哎！我們要如何規範這些值？

我們需要把毫米轉換為像素，並把設備獨立像素點轉換成邏輯解析度（pixels）。由於根據定義，像素是沒有標準度量的，我們需要使用下面的公式,來將顯示屏的像素密度納入考慮。

像素 = PPI（像素密度） ×（0.03937英尺/平方毫米）

為了便於討論，讓我們假設我們使用的是iPhone 7Retina顯示屏。根據蘋果的規範，iPhone 7的顯示屏的PPI（像素密度）為 326。

所以，我們需要做的就是把每個用毫米表達的建議尺寸都代入這個公式：

像素 =326 ×（0.03937英尺/平方毫米）

我假設你們大多數人都用Sketch，因此讓我們把結果轉換成邏輯解析度（points）。iPhone 7擁有200%像素密度，所以我們只需要將結果除以2，以便在1x尺寸中正確地設計（有點困惑？這裡是Kurt Varner{在我的書《設計一個人人都愛的產品》中提到過此人}寫的一篇很棒的關於為什麼在1x尺寸中設計更有效的文章）。

第二步，當我們將所有這些尺寸轉換過來後，讓我們比較它們在iPhone 7屏幕上會如何顯示。我還標出了每一個主要供應商的標準，以及在上述研究論文中提到的關鍵尺寸：

更進一步的是，我也很好奇：iOS 9和iOS 10的鎖屏音樂控制項的點擊目標尺寸是什麼？它們是否會跟上述的尺寸重合？

這是不是很有趣？從iOS 9到iOS 10，蘋果的控制項增大了約6毫米至12.8毫米。

這恰好符合微軟的觸控指引！

怎樣使你的用戶界面真正可點擊

人類的指腹平均為10至14毫米——而麻省理工學院觸屏實驗室發現指尖平均為8至10毫米——我認為我們可以很容易地定義「完美觸屏的用戶界面」的元件尺寸範圍：

一個完美觸屏的用戶界面由至少10毫米左右的元件構成，參考微軟的標準，最佳的觸摸原件尺寸應在13毫米左右。

在這些範圍內，我認為你可以自信地創建能幫助客戶減少錯誤、更快地完成任務、並最終對你的產品更滿意的用戶界面。

附：轉換毫米到Points的Google Sheet

這是我把毫米轉換成Points的Google Sheet。你可以複製下來用於自己的用途。如果你覺得我有任何錯誤或值得表揚的地方，請在Twitter上給我留言。

https://docs.google.com/spreadsheets/d/1eRG4ZWn6-ToexOGnZll8fasKkk7g4t1c_YjRddVDcl4/edit#gid=0