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

希望對各位有些許幫助。

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

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

關(guān)于 iOS 與 Android 的按鈕尺寸；

對觸屏按鈕尺寸的分析；

對于按鈕尺寸使用的結(jié)論。

關(guān)于 iOS 與 Android 的按鈕尺寸

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

或者是這樣的：

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

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

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

對觸屏按鈕尺寸的分析

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

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

而按鈕設(shè)計過大，又會導(dǎo)致界面布局重心與視覺焦點產(chǎn)生問題。所以對于按鈕在界面中的設(shè)計，就顯得至關(guān)重要。

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

我們首先來說說載體。

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

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

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

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

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

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

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

實驗研究的內(nèi)容如下。

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

實驗場景分為兩種：

執(zhí)行單個任務(wù)，如確認(rèn)按鈕或單選按鈕；

執(zhí)行連續(xù)任務(wù)，如輸入電話號碼。

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

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

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

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

他們的目標(biāo)是：確定觸摸屏按鈕的最佳觸摸尺寸。

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

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

因此可以得出的大致結(jié)論為：

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

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

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

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

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

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

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

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

之后經(jīng)過換算可以發(fā)現(xiàn)，iOS 的按鈕建議尺寸約等于 7mm；Android 約等于 9 毫米；微軟的規(guī)范建議則是 13mm。

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

其在文獻(xiàn)中也給出了相應(yīng)的單位換算公式，下圖是結(jié)果：

對于按鈕尺寸使用的結(jié)論

再回過頭來看 Apple Music 現(xiàn)在（iOS 12）鎖屏?xí)r的設(shè)計：

其尺寸又發(fā)生了變化。

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

最終結(jié)論：

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

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

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

按照界面元素比例，結(jié)合按鈕尺寸規(guī)范，設(shè)定一個合理的按鈕尺寸。

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

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

小結(jié)

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

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

有理有據(jù)，才是設(shè)計。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。