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

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

按鈕尺寸對點擊行為的影響

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

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

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

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

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

規(guī)范中的定義

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

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

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

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

從 Apple Music 說起

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

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

而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個實驗。

第一次實驗

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

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

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

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

第二次實驗

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

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

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

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

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

結(jié)論

由上述的兩個實驗，我們可以概括出一些有用的結(jié)論。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 不可控場景

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

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

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

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

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

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

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

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

最后

結(jié)尾，我大膽做一個預(yù)測，CTA 按鈕的尺寸的擴大將會是未來設(shè)計的一個重要趨勢之一。留貼為證，歡迎打臉圖片

希望這篇文章能夠給予你一些啟發(fā)。期待你的收獲和反饋。

我是 AndrewChen。下期見。

參考文獻：

• https://www.scotthurff.com/posts/how-to-make-truly-tappable-user-interfaces/
• http://www.woshipm.com/pd/695353.html
• https://zhuanlan.zhihu.com/p/77708352
• https://www.material.io/components/buttons-floating-action-button
• https://www.zhihu.com/market/pub/119584439/manuscript/1198553697670909952
• https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

如果你覺得對你有所幫助，歡迎點個贊鴨，讓我知道這篇文章對你是有價值的，當(dāng)然這也是我繼續(xù)下一篇分享的最佳動力~！

歡迎關(guān)注作者微信公眾號：「轉(zhuǎn)行人的設(shè)計筆記」