2021-5-17 濤濤
很多設計師包括我在內對按鈕尺寸有著頗多困惑。為什么很多產品甚至蘋果本身并沒有遵循 44pt 的標準規范？為什么有些場景下的 CTA 按鈕那么??？按鈕的最佳尺寸到底是多少？按鈕規范背后到底是什么樣的科學依據？這些依據可否量化？
emmmm，如果你和我一樣有著這些困惑，本篇文章應該可以給你很多啟發。
按鈕的尺寸具體影響到的依舊是視覺和交互的兩種能力。
視覺能力上很好理解。當一個元素尺寸越大，人眼就越容易抓捕到這個元素。所以那些越重要的東西，往往會給予更大的尺寸來強制用戶注意到它，這也可以解釋為什么甲方總喜歡不停地在背后指指點點嫌棄元素太小，就是因為這些元素對他們來說非常重要，只是他們沒有我們那么專業，知道強調一個東西的手法不僅僅是放大一種策略。
因此，相對較大的按鈕尺寸從視覺上，可以迅速捕獲用戶的注意力，對點擊行為是有益的。
而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目標尺寸越大，移動至目標所花費的時間就越短。所以，較大的按鈕尺寸可以降低用戶交互的交互成本，使得目標更加”易點“，對點擊行為同樣是有益的。
但是，按鈕尺寸并非越大越好，一方面是避免視覺上的失衡，另一方面也會受到界面空間限制、以及場景差異等因素的影響。
我們先來看下 iOS 的。蘋果規定的最小點擊區域是 44pt，這意味著一旦點擊區域低于 44pt，將可能會出現點擊失準的情況。當然，一些控件（標簽欄圖標、文字鏈）可以在視覺表現上只有 24pt*24pt，但是會在周圍加入額外的填充使其達到 44pt。
但是，在實際的 iOS 原生產品界面中，很多按鈕并未嚴格執行 44pt 這個數值。小于 44pt 的按鈕比比皆是，比如信息頁的發送、App Store 的獲取、購買浮層的確認、添加 siri、導航類右上角的工具型按鈕，它們的點擊區域為按鈕本身，但是均未達到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產品詳情頁中的獲取按鈕，它的高度僅僅是 27pt。
而 Android 中的按鈕建議尺寸是 56dp，但是和 iOS 一樣存在著大量低于這個尺寸的情況。其中不乏那些 CTA 按鈕。
這些情況的發生其實也很好理解，每個按鈕所對應的用戶場景、業務訴求不同，因此并不能一招鮮用一個尺寸吃遍所有場景。但是，有沒有一些科學的依據來可量化地解釋按鈕尺寸對點擊的影響？
著名產品設計師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS9 的 Apple Music 在鎖屏界面下的按鈕過小，經常會發生無法準確點擊的情況，他需要集中精力精確得點擊才能完成任務。
不過蘋果在 iOS10 之后，鎖屏界面下的三個按鈕、乃至進度、音量的控制球全部被顯著地增大。這使得歌曲點擊操作的錯誤率明顯下降，不論是在什么場景下（你懂得，跑步、擠地鐵這些不可控的場景下總是會有聽歌的需求）都可以輕松地點擊。
而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個實驗。
第一次實驗
2006 年，芬蘭 Oulu 大學，Maryland 大學和 Parck 學院的研究人員組成一個研究小組。他們的研究目標是，確定在觸摸屏幕上單手使用最容易的按鈕尺寸。
他們進行了兩組不同場景的實驗。第一組讓受試者執行一次性的任務，點擊一個 CTA 按鈕、復選框或者多選框；第二組讓受試者執行多次連續的任務，比如輸入電話號碼。并且在實驗期間，研究人員測試了每一種場景下按鈕的尺寸。最終的實驗結果表明，單個任務下，按鈕尺寸小于 9.2mm 后錯誤率顯著增加，而多次連續任務下，按鈕尺寸小于 9.6mm 后的錯誤率顯著增加。
特別的是，對于多次連續任務，9.6mm 到 11.5mm 之間的錯誤率基本不變。
看到這，來稍微總結一下，9.2mm 和 9.6mm 是兩個關鍵的尺寸節點。在單次任務和多次連續任務下，按鈕尺寸分別小于 9.2mm 和 9.6mm 會導致錯誤率的攀升。這個結果和 MIT Touch Lab 研究得出的最佳熱區尺寸 10mm 很接近。
第二次實驗
當然，這還不算完。5 年后，德國兩所大學的研究人員又進行了一項類似的研究，目的是確定觸摸屏幕按鈕的最佳大小。
他們的實驗方法相對就很潮了。他們專門開發了一款安卓游戲，游戲玩法也很無腦：玩家必須要精準地點擊到屏幕中任何地方飄動的任意尺寸的圓圈，游戲才能繼續。并且速度越快，得分也就越高。
這款游戲在上線之后被下載了 10w 次，并且悄咪咪得暗中記錄了用戶所有的點擊行為，記錄總量約為 1.2 億次。
最后根據統計分析，得出了錯誤率和圓圈尺寸的圖表關系。你可以看到，和 5 年前的實驗同樣，呈現類似的指數關系。研究人員根據圖表發現：
在圓圈尺寸小于 12mm 后，錯誤率開始逐步提升。在尺寸小于 8mm 之后，錯誤率高達 40%以上。并且研究還發現，在圓圈尺寸超過 12mm 之后，玩家的正確率并沒有得到顯著的提升。
由上述的兩個實驗，我們可以概括出一些有用的結論。
那么，按鈕的最佳尺寸到底是多少呢？
斯科特將實驗得出的關鍵尺寸與蘋果、谷歌和微軟三大規范進行結合，發現了一些有意思的現象——
可以看到 Android 和微軟的尺寸，基本對應到了這兩項實驗得出的關鍵尺寸。
最后，再來看下開頭 iTunes 的鎖屏界面的按鈕。可以看到從 iOS9 到 iOS10，蘋果將按鈕可點范圍由 7mm（44pt）擴大至 12mm（82pt），結果也正好符合了微軟的規范?？吹竭@里，你肯定更困惑了——按鈕的最佳尺寸到底是多少？
其實，并不存在什么按鈕的最佳尺寸。
不論是 iOS 的 44pt，Android 的 56dp，還是微軟的 82pt，都需要具體情況具體分析。界面布局、用戶場景、業務訴求等等，都屬于按鈕尺寸的影響因素。
比如下面這些 iOS 端產品的 CTA 按鈕，它們的尺寸最小到 26pt，最大到 87pt，而且每個產品內部的 CTA 按鈕也存在差異。你能說出這些按鈕哪一個是最佳尺寸嗎?
當然，我們起碼可以去界定一些相對可控的范圍。
這里我簡單根據斯科特文章中的結論，結合市面主流產品的情況劃分出按鈕的幾類尺寸：
1. 常規場景、局部模塊
比如 App Store 的產品詳情頁的獲取，知乎中個人主頁的關注，都屬于當前頁的局部模塊，點擊之后通常是狀態的變化或者出現新的彈層。這些按鈕的尺寸我建議控制在 28pt~40pt 之間。
2. 常規場景、全局模塊、強業務屬性
比如微信個人頁的添加好友、各大電商商品詳情頁的加購、登錄注冊頁的登錄注冊等等。這些頁面的 CTA 按鈕隸屬于頁面全局，所以可以給它極高的權重、甚至全局吸底展示（如詳情頁），以更快地促進點擊。通常，這類按鈕在常規場景下具備了最大尺寸。我個人的建議是保持在 40pt~60pt 之間。
3. 不可控場景
不可控場景的意思就是，用戶點擊按鈕時所處的場景可能比較特殊，并且這種特殊的場景很可能給用戶帶來一系列無法掌控的風險。
比如 keep 在跑步場景下的按鈕，就需要充分考慮到跑步時不穩定的狀態，如果按鈕和常規場景一樣，那很容易發生無法準確點擊的情況，增加意外事故發生的概率；包括來電場景、地圖導航場景、快遞取件場景等等，都屬于不可控的場景。各位可以自己代入腦補一下，這些場景中無法準確點擊時容易產生什么樣的后果。
所以這些場景中的按鈕就得夠大，以盡可能覆蓋到那些極端的不可控情況。我個人的建議保持在 60pt~90pt 之間。
當然，這僅僅是很粗略的參考區間值，如何結合現有業務訴求、用戶場景需求等因素去合理地界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。
其實從知乎去年 10 周年的大改版可以看到一些有意思的細節。很多按鈕的高度比以往更高了。比如鹽選會員的續費按鈕，由之前的 36pt 提升到了 40pt。
個人主頁的關注按鈕也由 28pt 提升到了 32pt，你仔細看的話，按鈕的寬度也發生了變化，從之前的 90pt 提升到了 100pt。
邀請回答界面中的寫回答按鈕，也由原本的文字鏈，提升到了實心按鈕，高度則直接復用了關注按鈕的尺寸——32pt。哦，不好意思，這應該是按鈕設計形式上的改變。
總之一句話，知乎這次的改版，CTA 按鈕的尺寸更大了。我們從尺寸對點擊行為的影響可以推導出，這次改版背后更為明確的業務目標——促進UGC內容生產、促進關系鏈沉淀（一旦沉淀了復雜的關系鏈，用戶也就更難以離開平臺）以及會員付費轉化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：轉行人的設計筆記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務