理論上，按鈕的使用規則與設計邏輯對于產品設計人員而言，是必備的基礎知識。但是市面上關于按鈕設計的解析文章相對較少，所以我繼上一篇「取消按鈕的設計思路」之余，繼續帶來一篇關于「按鈕尺寸的設計解析」。

希望對各位有些許幫助。

關于尺寸，大多數人的認知還停留于「44 像素」或「視覺效果還不錯」上。其實在 App 設計中，按鈕尺寸的設計也是非常講究且需理性分析的。尤其是隨著手持設備的發展，UI 設計的思路已經遠不止于在純粹「好不好看」的刻板印象上了。

所以今天會從兩個方面來分析按鈕的「尺寸」：

關于 iOS 與 Android 的按鈕尺寸；

對觸屏按鈕尺寸的分析；

對于按鈕尺寸使用的結論。

關于 iOS 與 Android 的按鈕尺寸

熟知 Android 規范的應該知道，對于 Android 的按鈕規范建議尺寸是 48dp×48dp +8dp=56dp，因此，在設計 Android 系統的按鈕時，會主觀認為其尺寸應該定為 56dp。但時常看到界面中存在異樣的按鈕高度時，會郁悶，為什么其自家按鈕也沒有遵循相應的規范進行設計呢？

或者是這樣的：

至于 iOS 也是一樣，官方對于按鈕尺寸的規范建議是 44pt。但其按鈕的尺寸也是多樣化。就截止目前而言，iOS 的通用按鈕的最大尺寸為 50pt，最小也是 36pt。

而新出的 iOS 13 Beta 控件中，通用按鈕的尺寸則變更為三個范圍，分別是：36pt-43pt；44pt-49pt；50pt+。其規則建議在 50 后面加上了一個符號「+」，意味著 iOS 在尺寸規則上剔除了以往的嚴肅性，明確告知設計人員可根據實際情況進行更改。

或許有人會反駁說，這個規范的適用范圍應該只是圖標而已。真的是這樣么？下面我們深入分析一波。

對觸屏按鈕尺寸的分析

在界面設計中，按鈕尺寸的重要性承載著相當大的比重。如果用戶在使用產品的過程中，點擊目標過小，需要多次操作或集中注意力才能吃力地點中，這會導致體驗下降。如圖：

相信多數人都挺反感這類廣告屏的，即使想著點「跳過」也總會直接進入廣告頁。原因就在于按鈕過小，用戶如不想進入廣告頁，就需要非常聚焦的點擊才行（有時候也不一定，手大怎么認真都會到廣告頁里去）。當然，所有人都知道，廣告屏的「跳過」按鈕，是他們故意設計成這樣的。

而按鈕設計過大，又會導致界面布局重心與視覺焦點產生問題。所以對于按鈕在界面中的設計，就顯得至關重要。

通常意義上，基礎按鈕主要由兩部分組成，分別是：載體、文本/圖標。

我們首先來說說載體。

在觸摸屏按鈕設計當中，尺寸對可用性的影響相當巨大。麻省理工學院觸摸實驗室的研究發現，指墊的平均值在 10-14mm 之間，指尖的平均值為 8-10mm。但是就這樣的結論并不能很好的指導設計師設計按鈕。

Scott Hurff 在其發表的一篇文章中提到 iOS 9 的 Apple Music 在鎖屏狀態下切換歌曲的按鈕異常難點擊。經常需要點擊 3 次左右才能點中，甚至因為誤點導致被控制的是音量。

而 iOS 10 出來后，很明顯的解決了這個問題，如圖：

在按鈕的處理上，間距與尺寸都發生了明顯的變化。這樣的設計，顯著的降低了用戶的誤操作率。

改良后的 Apple Music 控件尺寸的變化如下。

這里的變化可能有些人看不出來，即直接將 iOS 規范定義的 44pt，改成了微軟建議的 82pt。

而針對于按鈕尺寸的變化，Scott Hurff 提到了兩項科學的實驗依據。

實驗研究的內容如下。

2006 年，芬蘭奧盧大學和馬里蘭大學帕克分校的研究人員進行了一次合作。他們的研究課題是「按鈕尺寸對于單手使用觸摸屏時的影響」。

實驗場景分為兩種：

執行單個任務，如確認按鈕或單選按鈕；

執行連續任務，如輸入電話號碼。

在研究過程中，研究人員在兩個場景下試用了一系列不同大小的按鈕。他們發現，當按鈕小于 9.2mm 時，單個任務的錯誤率顯著增加；當按鈕小于 9.6mm 時，連續任務的錯誤率顯著提升。

而在連續任務場景中，按鈕尺寸在 9.6mm 至 11.5mm 之間時，錯誤率基本保持不變。

在這項研究中，他們無法給出相應的結論，只能大概確定按鈕的范圍值。

而后在另一項研究中，研究人員在 Android 系統里發布了一款游戲，游戲的玩法為：玩家通過點擊各種尺寸的浮動圓圈得到晉級。這些圓圈可能出現在屏幕上的任何地方。

他們的目標是：確定觸摸屏按鈕的最佳觸摸尺寸。

通過這款游戲所獲取的 1 億 2 千萬次點擊數據的記錄，研究人員發現當圓圈的尺寸小于 12mm 左右時，錯誤率會根據尺寸的縮小而逐步上升。當點擊目標小于 8mm 時，玩家的錯誤率超過了 40%。而圓圈的尺寸大于 12mm 時，玩家的正確率也沒有得到顯著提升，即 12 毫米成了玩家準確率提升的臨界值。

綜合兩項研究的結論，我們可以知道，按鈕尺寸大于 12mm 時，用戶基本已經不會因為誤操作導致點擊按鈕的錯誤率提升。

因此可以得出的大致結論為：

按鈕尺寸小于 9.6mm 時，錯誤率提升顯著；

按鈕尺寸大于 9.6mm，小于 12mm 時，錯誤率趨向于平緩；

最大尺寸維持在 12mm 左右時，錯誤率達到臨界值，即不會因為按鈕尺寸繼續增加而降低用戶的誤操作率。

到這里為止，按鈕尺寸的最佳范圍已經出來。

注：當然，以上結論均為「大數據臨界點」，不代表準確率不會因為尺寸的增加而繼續提升。甚至不排除按鈕尺寸占有全屏幕時，準確率達到百分百的可能，不過這屬于特殊情況。

而通過上述研究，結合各大平臺給出的按鈕尺寸規范建議：

• iOS：44×44 points（邏輯分辨率）
• Android：48×48dp +8dp 或更多間距 = 56 x 56dp（設備分辨率）
• 微軟：9×9mm± 兩側分別 2mm 的推薦間隔= 13×13mm

從這點可以知道，微軟采用了上述第一項研究中的最高臨界值。

之后經過換算可以發現，iOS 的按鈕建議尺寸約等于 7mm；Android 約等于 9 毫米；微軟的規范建議則是 13mm。

Scott Hurff 的研究分析大家可以去「Using science to make truly tappable user interfaces」這篇文獻中查看。

其在文獻中也給出了相應的單位換算公式，下圖是結果：

對于按鈕尺寸使用的結論

再回過頭來看 Apple Music 現在（iOS 12）鎖屏時的設計：

其尺寸又發生了變化。

所以，以上內容并不是說按鈕設計有一定的規格，且必須按照這樣的尺寸來設計。只是告訴各位讀者，設計界面時，必須注意界面與按鈕可觸摸尺寸形成的比例，否則隨意設計出來的界面在操作上一定是不盡人意。上述內容的尺寸信息則作為相應的參考即可。

最終結論：

無論是 iOS 提出的 44 pt，Android 提出的 48/56 pt，亦或是微軟的 82 pt，都是用于特定場景下，具體情況還需具體分析；

在界面設計中，按鈕尺寸低于 12.8 毫米（微軟建議的 82 pt），基本能符合大多數設計情況；

根據 iOS 和 Android 給出的建議，在界面設計中，按鈕尺寸至少高于 5.5 毫米（36 pt），否則用戶點擊時會較為吃力；

按照界面元素比例，結合按鈕尺寸規范，設定一個合理的按鈕尺寸。

可能有人會問能否舉一些例子來加深理解，那這里就簡單放三種模式，大家可以自行找案例參考。具體尺寸差距不會太大，特殊情況做特殊處理。

將以上兩個結論做一個整合，基本上就能解決絕大多數按鈕尺寸的設計場景了。

小結

本篇文章想告訴各位的是，按鈕尺寸沒有統一的規范，只是帶各位從根本上了解按鈕尺寸的設計思路。了解以后，或許在設計上能更好的輸出合理的方案。就好比字體設計，每一筆都是有講究且有理據輸出的。

文章只是把「按鈕尺寸」的設計差異、細節提供給大家，以便幫助各位在工作中有更深入的思考，而不是想當然的說就是多高多寬。

有理有據，才是設計。

那這篇文字就到這里了，謝謝閱讀：）

總結

以上是生活随笔為你收集整理的new ext.toolbar控制按钮间距_按钮规范系列 - 「按钮尺寸」的设计详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。