很多設(shè)計(jì)師包括我在內(nèi)對(duì)按鈕尺寸有著頗多困惑。為什么很多產(chǎn)品甚至蘋果本身并沒有遵循 44pt 的標(biāo)準(zhǔn)規(guī)范？為什么有些場(chǎng)景下的 CTA 按鈕那么小？按鈕的最佳尺寸到底是多少？按鈕規(guī)范背后到底是什么樣的科學(xué)依據(jù)？這些依據(jù)可否量化？

emmmm，如果你和我一樣有著這些困惑，本篇文章應(yīng)該可以給你很多啟發(fā)。

按鈕尺寸對(duì)點(diǎn)擊行為的影響

按鈕的尺寸具體影響到的依舊是視覺和交互的兩種能力。

視覺能力上很好理解。當(dāng)一個(gè)元素尺寸越大，人眼就越容易抓捕到這個(gè)元素。所以那些越重要的東西，往往會(huì)給予更大的尺寸來強(qiáng)制用戶注意到它，這也可以解釋為什么甲方總喜歡不停地在背后指指點(diǎn)點(diǎn)嫌棄元素太小，就是因?yàn)檫@些元素對(duì)他們來說非常重要，只是他們沒有我們那么專業(yè)，知道強(qiáng)調(diào)一個(gè)東西的手法不僅僅是放大一種策略。

因此，相對(duì)較大的按鈕尺寸從視覺上，可以迅速捕獲用戶的注意力，對(duì)點(diǎn)擊行為是有益的。

而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目標(biāo)尺寸越大，移動(dòng)至目標(biāo)所花費(fèi)的時(shí)間就越短。所以，較大的按鈕尺寸可以降低用戶交互的交互成本，使得目標(biāo)更加”易點(diǎn)“，對(duì)點(diǎn)擊行為同樣是有益的。

但是，按鈕尺寸并非越大越好，一方面是避免視覺上的失衡，另一方面也會(huì)受到界面空間限制、以及場(chǎng)景差異等因素的影響。

規(guī)范中的定義

我們先來看下 iOS 的。蘋果規(guī)定的最小點(diǎn)擊區(qū)域是 44pt，這意味著一旦點(diǎn)擊區(qū)域低于 44pt，將可能會(huì)出現(xiàn)點(diǎn)擊失準(zhǔn)的情況。當(dāng)然，一些控件（標(biāo)簽欄圖標(biāo)、文字鏈）可以在視覺表現(xiàn)上只有 24pt*24pt，但是會(huì)在周圍加入額外的填充使其達(dá)到 44pt。

但是，在實(shí)際的 iOS 原生產(chǎn)品界面中，很多按鈕并未嚴(yán)格執(zhí)行 44pt 這個(gè)數(shù)值。小于 44pt 的按鈕比比皆是，比如信息頁的發(fā)送、App Store 的獲取、購買浮層的確認(rèn)、添加 siri、導(dǎo)航類右上角的工具型按鈕，它們的點(diǎn)擊區(qū)域?yàn)榘粹o本身，但是均未達(dá)到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產(chǎn)品詳情頁中的獲取按鈕，它的高度僅僅是 27pt。

而 Android 中的按鈕建議尺寸是 56dp，但是和 iOS 一樣存在著大量低于這個(gè)尺寸的情況。其中不乏那些 CTA 按鈕。

這些情況的發(fā)生其實(shí)也很好理解，每個(gè)按鈕所對(duì)應(yīng)的用戶場(chǎng)景、業(yè)務(wù)訴求不同，因此并不能一招鮮用一個(gè)尺寸吃遍所有場(chǎng)景。但是，有沒有一些科學(xué)的依據(jù)來可量化地解釋按鈕尺寸對(duì)點(diǎn)擊的影響？

從 Apple Music 說起

著名產(chǎn)品設(shè)計(jì)師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS9 的 Apple Music 在鎖屏界面下的按鈕過小，經(jīng)常會(huì)發(fā)生無法準(zhǔn)確點(diǎn)擊的情況，他需要集中精力精確得點(diǎn)擊才能完成任務(wù)。

不過蘋果在 iOS10 之后，鎖屏界面下的三個(gè)按鈕、乃至進(jìn)度、音量的控制球全部被顯著地增大。這使得歌曲點(diǎn)擊操作的錯(cuò)誤率明顯下降，不論是在什么場(chǎng)景下（你懂得，跑步、擠地鐵這些不可控的場(chǎng)景下總是會(huì)有聽歌的需求）都可以輕松地點(diǎn)擊。

而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個(gè)實(shí)驗(yàn)。

第一次實(shí)驗(yàn)

2006 年，芬蘭 Oulu 大學(xué)，Maryland 大學(xué)和 Parck 學(xué)院的研究人員組成一個(gè)研究小組。他們的研究目標(biāo)是，確定在觸摸屏幕上單手使用最容易的按鈕尺寸。

他們進(jìn)行了兩組不同場(chǎng)景的實(shí)驗(yàn)。第一組讓受試者執(zhí)行一次性的任務(wù)，點(diǎn)擊一個(gè) CTA 按鈕、復(fù)選框或者多選框；第二組讓受試者執(zhí)行多次連續(xù)的任務(wù)，比如輸入電話號(hào)碼。并且在實(shí)驗(yàn)期間，研究人員測(cè)試了每一種場(chǎng)景下按鈕的尺寸。最終的實(shí)驗(yàn)結(jié)果表明，單個(gè)任務(wù)下，按鈕尺寸小于 9.2mm 后錯(cuò)誤率顯著增加，而多次連續(xù)任務(wù)下，按鈕尺寸小于 9.6mm 后的錯(cuò)誤率顯著增加。

特別的是，對(duì)于多次連續(xù)任務(wù)，9.6mm 到 11.5mm 之間的錯(cuò)誤率基本不變。

看到這，來稍微總結(jié)一下，9.2mm 和 9.6mm 是兩個(gè)關(guān)鍵的尺寸節(jié)點(diǎn)。在單次任務(wù)和多次連續(xù)任務(wù)下，按鈕尺寸分別小于 9.2mm 和 9.6mm 會(huì)導(dǎo)致錯(cuò)誤率的攀升。這個(gè)結(jié)果和 MIT Touch Lab 研究得出的最佳熱區(qū)尺寸 10mm 很接近。

第二次實(shí)驗(yàn)

當(dāng)然，這還不算完。5 年后，德國兩所大學(xué)的研究人員又進(jìn)行了一項(xiàng)類似的研究，目的是確定觸摸屏幕按鈕的最佳大小。

他們的實(shí)驗(yàn)方法相對(duì)就很潮了。他們專門開發(fā)了一款安卓游戲，游戲玩法也很無腦：玩家必須要精準(zhǔn)地點(diǎn)擊到屏幕中任何地方飄動(dòng)的任意尺寸的圓圈，游戲才能繼續(xù)。并且速度越快，得分也就越高。

這款游戲在上線之后被下載了 10w 次，并且悄咪咪得暗中記錄了用戶所有的點(diǎn)擊行為，記錄總量約為 1.2 億次。

最后根據(jù)統(tǒng)計(jì)分析，得出了錯(cuò)誤率和圓圈尺寸的圖表關(guān)系。你可以看到，和 5 年前的實(shí)驗(yàn)同樣，呈現(xiàn)類似的指數(shù)關(guān)系。研究人員根據(jù)圖表發(fā)現(xiàn)：

在圓圈尺寸小于 12mm 后，錯(cuò)誤率開始逐步提升。在尺寸小于 8mm 之后，錯(cuò)誤率高達(dá) 40%以上。并且研究還發(fā)現(xiàn)，在圓圈尺寸超過 12mm 之后，玩家的正確率并沒有得到顯著的提升。

結(jié)論

由上述的兩個(gè)實(shí)驗(yàn)，我們可以概括出一些有用的結(jié)論。

• 根據(jù)各自的實(shí)驗(yàn)，在目標(biāo)尺寸分別小于 9.2mm、9.6mm 或者 12mm 后，均會(huì)導(dǎo)致錯(cuò)誤率的攀升；
• 當(dāng)目標(biāo)尺寸增加到一定程度之后，正確率基本保持不變。

那么，按鈕的最佳尺寸到底是多少呢？

斯科特將實(shí)驗(yàn)得出的關(guān)鍵尺寸與蘋果、谷歌和微軟三大規(guī)范進(jìn)行結(jié)合，發(fā)現(xiàn)了一些有意思的現(xiàn)象——

• iOS 的 44pt 對(duì)應(yīng)到實(shí)際尺寸為 6.9mm，約 7mm；
• Android 的 56pt 對(duì)應(yīng)到實(shí)際尺寸為 8.8mm，約 9mm；
• 而微軟的 9mm+兩邊 2mm 的熱區(qū)，對(duì)應(yīng)的實(shí)際尺寸為 13mm。

可以看到 Android 和微軟的尺寸，基本對(duì)應(yīng)到了這兩項(xiàng)實(shí)驗(yàn)得出的關(guān)鍵尺寸。

最后，再來看下開頭 iTunes 的鎖屏界面的按鈕?？梢钥吹綇?iOS9 到 iOS10，蘋果將按鈕可點(diǎn)范圍由 7mm（44pt）擴(kuò)大至 12mm（82pt），結(jié)果也正好符合了微軟的規(guī)范。看到這里，你肯定更困惑了——按鈕的最佳尺寸到底是多少？

其實(shí)，并不存在什么按鈕的最佳尺寸。

不論是 iOS 的 44pt，Android 的 56dp，還是微軟的 82pt，都需要具體情況具體分析。界面布局、用戶場(chǎng)景、業(yè)務(wù)訴求等等，都屬于按鈕尺寸的影響因素。

比如下面這些 iOS 端產(chǎn)品的 CTA 按鈕，它們的尺寸最小到 26pt，最大到 87pt，而且每個(gè)產(chǎn)品內(nèi)部的 CTA 按鈕也存在差異。你能說出這些按鈕哪一個(gè)是最佳尺寸嗎?

當(dāng)然，我們起碼可以去界定一些相對(duì)可控的范圍。

這里我簡單根據(jù)斯科特文章中的結(jié)論，結(jié)合市面主流產(chǎn)品的情況劃分出按鈕的幾類尺寸：

1. 常規(guī)場(chǎng)景、局部模塊

比如 App Store 的產(chǎn)品詳情頁的獲取，知乎中個(gè)人主頁的關(guān)注，都屬于當(dāng)前頁的局部模塊，點(diǎn)擊之后通常是狀態(tài)的變化或者出現(xiàn)新的彈層。這些按鈕的尺寸我建議控制在 28pt~40pt 之間。

2. 常規(guī)場(chǎng)景、全局模塊、強(qiáng)業(yè)務(wù)屬性

比如微信個(gè)人頁的添加好友、各大電商商品詳情頁的加購、登錄注冊(cè)頁的登錄注冊(cè)等等。這些頁面的 CTA 按鈕隸屬于頁面全局，所以可以給它極高的權(quán)重、甚至全局吸底展示（如詳情頁），以更快地促進(jìn)點(diǎn)擊。通常，這類按鈕在常規(guī)場(chǎng)景下具備了最大尺寸。我個(gè)人的建議是保持在 40pt~60pt 之間。

3. 不可控場(chǎng)景

不可控場(chǎng)景的意思就是，用戶點(diǎn)擊按鈕時(shí)所處的場(chǎng)景可能比較特殊，并且這種特殊的場(chǎng)景很可能給用戶帶來一系列無法掌控的風(fēng)險(xiǎn)。

比如 keep 在跑步場(chǎng)景下的按鈕，就需要充分考慮到跑步時(shí)不穩(wěn)定的狀態(tài)，如果按鈕和常規(guī)場(chǎng)景一樣，那很容易發(fā)生無法準(zhǔn)確點(diǎn)擊的情況，增加意外事故發(fā)生的概率；包括來電場(chǎng)景、地圖導(dǎo)航場(chǎng)景、快遞取件場(chǎng)景等等，都屬于不可控的場(chǎng)景。各位可以自己代入腦補(bǔ)一下，這些場(chǎng)景中無法準(zhǔn)確點(diǎn)擊時(shí)容易產(chǎn)生什么樣的后果。

所以這些場(chǎng)景中的按鈕就得夠大，以盡可能覆蓋到那些極端的不可控情況。我個(gè)人的建議保持在 60pt~90pt 之間。

當(dāng)然，這僅僅是很粗略的參考區(qū)間值，如何結(jié)合現(xiàn)有業(yè)務(wù)訴求、用戶場(chǎng)景需求等因素去合理地界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。

其實(shí)從知乎去年 10 周年的大改版可以看到一些有意思的細(xì)節(jié)。很多按鈕的高度比以往更高了。比如鹽選會(huì)員的續(xù)費(fèi)按鈕，由之前的 36pt 提升到了 40pt。

個(gè)人主頁的關(guān)注按鈕也由 28pt 提升到了 32pt，你仔細(xì)看的話，按鈕的寬度也發(fā)生了變化，從之前的 90pt 提升到了 100pt。

邀請(qǐng)回答界面中的寫回答按鈕，也由原本的文字鏈，提升到了實(shí)心按鈕，高度則直接復(fù)用了關(guān)注按鈕的尺寸——32pt。哦，不好意思，這應(yīng)該是按鈕設(shè)計(jì)形式上的改變。

總之一句話，知乎這次的改版，CTA 按鈕的尺寸更大了。我們從尺寸對(duì)點(diǎn)擊行為的影響可以推導(dǎo)出，這次改版背后更為明確的業(yè)務(wù)目標(biāo)——促進(jìn)UGC內(nèi)容生產(chǎn)、促進(jìn)關(guān)系鏈沉淀（一旦沉淀了復(fù)雜的關(guān)系鏈，用戶也就更難以離開平臺(tái)）以及會(huì)員付費(fèi)轉(zhuǎn)化。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè)   作者：轉(zhuǎn)行人的設(shè)計(jì)筆記

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)