国产亚洲欧洲AV综合一区,日本在线精品视频免费播放

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門(mén)專(zhuān)項(xiàng)技能課

1300+專(zhuān)題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專(zhuān)業(yè)技能直播

會(huì)員專(zhuān)屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

幫你解決關(guān)于CTA按鈕尺寸的困惑

設(shè)計(jì)師Andrew

2021-02-10

1 評(píng)論 12873 瀏覽 34 收藏

17 分鐘

編輯導(dǎo)語(yǔ)：在設(shè)計(jì)師進(jìn)行按鈕設(shè)計(jì)時(shí)，要注意到很多細(xì)節(jié)問(wèn)題，尺寸、顏色、位置等等；并且在一些頁(yè)面上按鈕發(fā)揮著很大的作用，吸引用戶的注意力，引導(dǎo)行動(dòng)等等；本文作者分享了關(guān)于CTA按鈕尺寸的困惑，我們一起來(lái)了解一下。

很多設(shè)計(jì)師包括我在內(nèi)對(duì)按鈕尺寸有著頗多困惑，為什么很多產(chǎn)品甚至蘋(píng)果本身并沒(méi)有遵循44pt的標(biāo)準(zhǔn)規(guī)范？為什么有些場(chǎng)景下的CTA按鈕那么?。堪粹o的最佳尺寸到底是多少？按鈕規(guī)范背后到底是什么樣的科學(xué)依據(jù)？有無(wú)量化過(guò)的依據(jù)來(lái)提供支撐？

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

前排提醒，很多底層邏輯上的內(nèi)容已在上篇講過(guò)，強(qiáng)烈建議在看完上篇文章后再來(lái)閱讀本文，以獲得更好的閱讀體驗(yàn)。

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

根據(jù)前篇所提到的行為模型，按鈕的尺寸具體影響到的依舊是視覺(jué)和交互的兩種能力。

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

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

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

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

二、規(guī)范中的定義

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

但是，在實(shí)際的ios原生產(chǎn)品界面中，很多按鈕并未嚴(yán)格執(zhí)行44pt這個(gè)數(shù)值；小于44pt的按鈕比比皆是，比如信息頁(yè)的發(fā)送、App Store的獲取、購(gòu)買(mǎi)浮層的確認(rèn)、添加siri、導(dǎo)航類(lèi)右上角的工具型按鈕，它們的點(diǎn)擊域?yàn)榘粹o本身，但是均未達(dá)到44pt。

況且其中有一些還是非常典型的CTA按鈕，比如App Store產(chǎn)品詳情頁(yè)中的獲取按鈕，它的高度僅僅是27pt。

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

三、從Apple Music說(shuō)起

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

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

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

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

他們進(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ò)誤率基本不變。

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

看到這，來(lái)稍微總結(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很接近。

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

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

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

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

研究人員根據(jù)圖表發(fā)現(xiàn)：

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

3. 結(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)鍵尺寸與蘋(píng)果、谷歌和微軟三大規(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)鍵尺寸。

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

最后，再來(lái)看下開(kāi)頭iTunes的鎖屏界面的按鈕。

可以看到從ios9到ios10，蘋(píng)果將按鈕可點(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按鈕也存在差異。

你能說(shuō)出這些按鈕哪一個(gè)是最佳尺寸嗎?

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

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

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

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

比如微信個(gè)人頁(yè)的添加好友、各大電商商品詳情頁(yè)的加購(gòu)、登錄注冊(cè)頁(yè)的登錄注冊(cè)等等；這些頁(yè)面的CTA按鈕隸屬于頁(yè)面全局，所以可以給它極高的權(quán)重、甚至全局吸底展示（如詳情頁(yè)），以更快得促進(jìn)點(diǎn)擊。

通常，這類(lèi)按鈕在常規(guī)場(chǎng)景下具備了最大尺寸。我個(gè)人的建議是保持在40pt~60pt之間。

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

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

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

各位可以自己代入腦補(bǔ)一下，這些場(chǎng)景中無(wú)法準(zhǔn)確點(diǎn)擊時(shí)容易產(chǎn)生什么樣的后果。

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

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

關(guān)于按鈕尺寸的困惑，這篇文章全部給你答案

總之一句話，知乎這次的改版，CTA按鈕的尺寸更大了。

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