任何設(shè)計(jì)師都曾經(jīng)與 CTA 按鈕打過交道。

當(dāng)頁(yè)面中存在著一個(gè) CTA 按鈕，那就意味著此次的目標(biāo)就是不斷得引導(dǎo)用戶們用手指去點(diǎn)擊，以提升業(yè)務(wù)轉(zhuǎn)化。一旦點(diǎn)擊率達(dá)到或超出預(yù)期，那便驗(yàn)證了此次設(shè)計(jì)的有效性。

但是，我們?cè)诤芏鄷r(shí)候都是受競(jìng)品影響，下意識(shí)得進(jìn)行 CTA 按鈕的設(shè)計(jì)。嗯，CTA 按鈕就用面性、反白、全圓角、放置底部... 看似理所當(dāng)然，但背后的依據(jù)往往并不能講出來(lái)。

設(shè)計(jì)最重要的，就是有所依據(jù)。如果我們自己都不能自圓其說，那么又該如何說服上級(jí)或面試官相信你的設(shè)計(jì)判斷？

而這篇文章，將 CTA 按鈕分為位置、尺寸和圓角三個(gè)維度，來(lái)講述各自維度下我們?cè)撊绾螠?zhǔn)確得進(jìn)行設(shè)計(jì)決策，以及對(duì)用戶、業(yè)務(wù)轉(zhuǎn)化的影響。希望這篇文章能夠讓你更加接近設(shè)計(jì)的真相。

一、按鈕與行為模型

1. 什么是按鈕？

按鈕是用戶與產(chǎn)品進(jìn)行交互動(dòng)作的關(guān)鍵觸點(diǎn)之一，也是用戶界面中的基本控件。AntD 對(duì)它的定義是：用于開始一個(gè)即時(shí)操作。

MD 的定義則相對(duì)更加具象易懂——"allow users to take actions, and make choices, with a single tap."，意為允許用戶進(jìn)行一次點(diǎn)擊，就可以采取行動(dòng)和做出選擇。

而其中對(duì)轉(zhuǎn)化指標(biāo)起著最直接正面影響的當(dāng)屬 CTA 按鈕。

2. 什么是 CTA 按鈕？

CTA，即"Call to Action"的縮寫，意思是行為召喚。

這玩意兒原本是營(yíng)銷領(lǐng)域的術(shù)語(yǔ)，后來(lái)被廣泛運(yùn)用在了互聯(lián)網(wǎng)領(lǐng)域。Wikipedia 中的定義是：CTA 即網(wǎng)站中用于提示用戶點(diǎn)擊并進(jìn)入下一個(gè)轉(zhuǎn)化流程（比如下單、訂閱、關(guān)注等）的橫幅廣告、按鈕、或某些類型的圖形和文字。

CTA 的主要目標(biāo)是吸引用戶采取下一步行動(dòng)。當(dāng)你在 Google 上搜索 CTA 時(shí)，大部分會(huì)用一個(gè)大喇叭來(lái)形象得表示這種"呼吁"感。

而當(dāng) CTA 的載體變?yōu)榘粹o時(shí)，它的主要目標(biāo)便是吸引用戶采取點(diǎn)擊行為，通過提升 CTR（點(diǎn)擊率）指標(biāo)來(lái)提升轉(zhuǎn)化的可能。

說白了，所有能夠?yàn)楫a(chǎn)品帶來(lái)正向價(jià)值的按鈕，或者說我們希望用戶去進(jìn)行的操作，不論你是關(guān)注、支付、下單還是訂閱等等，都算是 CTA 按鈕。所以，當(dāng)頁(yè)面中存在多個(gè)按鈕時(shí)，CTA 按鈕的優(yōu)先級(jí)往往是最高的。

3. 行為模型是如何影響點(diǎn)擊的

在開頭我就已經(jīng)說了，當(dāng)頁(yè)面中存在著 CTA 按鈕時(shí)，我們的設(shè)計(jì)目標(biāo)，就是去召喚用戶們用手指去點(diǎn)擊，從而提升最后的數(shù)據(jù)指標(biāo)。而并非美觀、好看這些很感性的維度。

我們想要更多用戶進(jìn)行點(diǎn)擊行為，就需要先搞懂點(diǎn)擊行為背后的底層邏輯，再來(lái)選擇策略。而這個(gè)底層邏輯，就是福格行為模型。

福格行為模型由斯坦福大學(xué) Persuasive Technology Lab（說服技術(shù)研究實(shí)驗(yàn)室）創(chuàng)始人 BJ Fogg 研究而來(lái)。這個(gè)模型指出，一個(gè)人行為（Behavior）的發(fā)生需要滿足至少三個(gè)條件：動(dòng)機(jī)（Motivation）、能力（Ability）和觸發(fā)（Triggers）。用公式表示即 B = MAT。這三者必須同時(shí)具備，缺少任一條件都不會(huì)導(dǎo)致行為的發(fā)生。

回到 CTA 按鈕，動(dòng)機(jī)和能力分別表示用戶采取點(diǎn)擊行為背后的理由和行為的難易程度。兩者可以相互補(bǔ)償，在特定的觸發(fā)條件下，我們動(dòng)機(jī)越高時(shí)，我們對(duì)能力的要求越低，我們動(dòng)機(jī)越低時(shí)，我們對(duì)能力的要求就越高。

舉個(gè)淺顯易懂的例子，電商產(chǎn)品的加入購(gòu)物車按鈕。一個(gè)男士對(duì)某件襯衫產(chǎn)生強(qiáng)烈的購(gòu)買動(dòng)機(jī)，不論按鈕的位置多么偏、尺寸多么小，他依舊有完成點(diǎn)擊的可能。

而如果這位男士的動(dòng)機(jī)平平，但是有足夠的能力看到、點(diǎn)擊和購(gòu)買，也同樣有完成點(diǎn)擊的可能。

當(dāng)然，任一因素為 0 的條件下都無(wú)法導(dǎo)致行為的發(fā)生，你會(huì)覺得一個(gè)男士看到女士?jī)?nèi)衣后，會(huì)因?yàn)榘粹o的易點(diǎn)而產(chǎn)生想了解更多的動(dòng)機(jī)嗎？當(dāng)然不會(huì)。

在產(chǎn)品中，動(dòng)機(jī)代表了行為的理由，也就是用戶為什么要點(diǎn)擊。讓用戶產(chǎn)生點(diǎn)擊的動(dòng)機(jī)大多依賴于內(nèi)容本身，比如通過算法推薦調(diào)動(dòng)興趣、通過利益點(diǎn)誘導(dǎo)用戶爭(zhēng)搶等等。

而觸發(fā)代表了行為的扳機(jī)，它引導(dǎo)用戶行為的發(fā)生。CTA 按鈕自身就是一個(gè)觸發(fā)，我們可以通過誘導(dǎo)性文案、指向性箭頭等等外部手段來(lái)不斷提醒用戶它的存在。

能力代表了行為的難易門檻，這也是我們?cè)O(shè)計(jì)側(cè)的主要發(fā)力點(diǎn)。接下來(lái)，我從 CTA 按鈕的位置、尺寸和圓角三個(gè)維度來(lái)進(jìn)行分述。

二、按鈕位置解析

而按鈕位置的合理性，即用戶是否可輕松觸達(dá)的能力要求。我將其細(xì)分為兩種能力——視覺觸達(dá)能力和交互觸達(dá)能力。

這兩種能力分別對(duì)應(yīng)著兩種典型的方法論——古騰堡原則和菲茨定律。我們只要熟知并熟用這兩種方法，就可以盡可能降低點(diǎn)擊行為背后的能力要求，即降低用戶在視覺、交互上所花費(fèi)的成本，提升用戶點(diǎn)擊的可能性，最終提升關(guān)鍵指標(biāo)。

用流程圖這種結(jié)構(gòu)化的表達(dá)方式應(yīng)該更好理解點(diǎn)。

1. 底層方法論

① 菲茨定律

菲茨定律（Fitts' Law）大家應(yīng)該都很耳熟，它是 Paul Fitts 研究提出的一則典型的人機(jī)交互定律。這個(gè)定律指出，用戶從起點(diǎn)移動(dòng)到終點(diǎn)目標(biāo)所需要的時(shí)間，由至目標(biāo)的距離和目標(biāo)大小決定。

至目標(biāo)的距離越短，或者目標(biāo)的大小越大，那么用戶所花費(fèi)的操作時(shí)間越短。

而當(dāng)目標(biāo)是 CTA 按鈕時(shí)，按鈕的尺寸越大、或者按鈕所在的位置距離指針/手指越短，點(diǎn)擊效率就越高。

所以，從位置上來(lái)說，將按鈕放置在頁(yè)面底部可以切實(shí)降低點(diǎn)擊行為所耗費(fèi)的成本。當(dāng)然，這只是從交互觸達(dá)方面上來(lái)講，下面的古騰堡法則更加具備普適性。

② 古騰堡法則

古騰堡法則由世界公認(rèn)的現(xiàn)代報(bào)紙?jiān)O(shè)計(jì)之父 Edmund C. Arnold 所提出。他將顯示信息的畫面劃分成了四個(gè)象限。

初始視覺落點(diǎn)（Primary Optical Area）

位于畫面的左上方，用戶第一時(shí)間注意到的地方。

強(qiáng)休息區(qū)（Strong Fallow Area）

位于畫面的右上方，較少被用戶注意到。

弱休息區(qū)（Weak Fallow Area）

位于畫面的左下方，最少被用戶注意到。

最終視覺落點(diǎn)（Terminal Area）

位于畫面的右下方，用戶最后注意到的地方，作為終點(diǎn)存在。

用戶在瀏覽畫面時(shí)，由左上角的初始視覺落點(diǎn)為眼動(dòng)路徑起點(diǎn)，由左至右得掃視，呈 Z 字形的動(dòng)線一直到右下角的視覺落點(diǎn)結(jié)束。并且，在整個(gè)動(dòng)線中，相比右上角和左下角的區(qū)域，起點(diǎn)和終點(diǎn)更容易引起用戶的注意。而由起點(diǎn)至終點(diǎn)的這條對(duì)角線路徑則稱作閱讀引力路徑。

因此，根據(jù)古騰堡的原理，那些相對(duì)重要的元素則適合放置在閱讀引力路徑上：左上角、中間和右下角。這樣的布局能夠保持良好的節(jié)奏、便于更高效的認(rèn)知理解。

我們可以看到很多這樣的應(yīng)用。比如各類的信件、公告、合同等等。而 CTA 按鈕的位置也同樣遵循了古騰堡法則。

下面，我根據(jù)按鈕的數(shù)量及排布方向，分場(chǎng)景來(lái)解釋這些按鈕的設(shè)計(jì)思路。

2. 底部單個(gè)按鈕

根據(jù)菲茨定律，底部按鈕距離用戶的手指最短，因此將按鈕放在底部位置可以有效降低交互成本。

而由古騰堡法則來(lái)看，用戶進(jìn)入界面后會(huì)首先進(jìn)行信息的掃視，最終的視覺落點(diǎn)將會(huì)停留在結(jié)尾。因此將行動(dòng)點(diǎn)放置在底部位置可以有效抓取用戶的注意力。但如果我們將按鈕放置到頂部或者內(nèi)容中，將會(huì)不可避免得導(dǎo)致視覺回流，延長(zhǎng)閱讀時(shí)間。

airbnb 的預(yù)訂和 boss 直聘的立即溝通，都屬于典型的 CTA，所以它們?nèi)勘环胖迷诹说撞?。并且由于一屏?nèi)無(wú)法展示所有內(nèi)容，所以按鈕始終保持了吸底狀態(tài)，不論瀏覽到哪里，用戶始終容易將更多注意力分配在 CTA 按鈕上。

當(dāng)然，不要局限在界面的底部，版塊、模塊的底部都是可以這么放置。比如 Gmail 每條郵件的收藏按鈕，知乎每個(gè)卡片的交互操作。

① 反面應(yīng)用

底部固然是很好的選擇，但是由于種種原因，我們并不能一股腦得把按鈕往下塞。其他位置依然可以被有效利用，比如頂部導(dǎo)航欄的兩側(cè)。

頂部位置的按鈕大多承載著那些未安排在第一梯隊(duì)的非 CTA 按鈕（注意是大多），這個(gè)位置是菲茨定律和古騰堡法則的典型反面應(yīng)用，通過提升對(duì)點(diǎn)擊行為的能力要求來(lái)降低用戶點(diǎn)擊的可能性，同時(shí)也可以為更值得展示在頁(yè)面當(dāng)中的內(nèi)容挪出更多的空間，合理把控用戶的注意力。

這個(gè)位置的按鈕一般有如下三個(gè)場(chǎng)景：

敏感操作

比如發(fā)布動(dòng)態(tài)場(chǎng)景的發(fā)布按鈕，故意放置在頂部是為了讓用戶通過視覺回流來(lái)重新檢查自己將要發(fā)布的內(nèi)容。取消同樣至于頂部，和發(fā)布不同的是，取消是一種消極的、包含損失成本的回退行為，所以往往和"返回"功能一樣，會(huì)被放置在更不便于點(diǎn)擊的左上角。（但是，返回可以通過側(cè)滑手勢(shì)）它們的共性，都是去告知用戶謹(jǐn)慎操作。

違背業(yè)務(wù)目標(biāo)的操作

最常見的開屏廣告的"跳過"按鈕，不僅僅放在右上角，按鈕尺寸還異常得?。ㄖv真我一直覺得我手挺小的，直到無(wú)數(shù)次因?yàn)檫^小的點(diǎn)擊域而誤觸打開了廣告），有些甚至用了極低的遮罩透明度來(lái)鍛煉你的眼力。另外，一些不想用戶跳過的流程，也會(huì)故意通過位置對(duì)「跳過」按鈕進(jìn)行弱化，比如新用戶引導(dǎo)中的一鍵關(guān)注，一鍵訂閱等等場(chǎng)景?！柑^」違背業(yè)務(wù)目標(biāo)，所以往往會(huì)被想法設(shè)法得進(jìn)行弱化，通過提升能力要求來(lái)降低你點(diǎn)擊的可能性。

普通功能操作

比如添加、編輯、更多按鈕，這些功能偏向工具型，它們往往是通往一個(gè)頁(yè)面、一個(gè)彈窗或者一個(gè)行動(dòng)列表的觸點(diǎn)，與業(yè)務(wù)關(guān)聯(lián)不大，所以只需要做到能發(fā)現(xiàn)、能找到的地步即點(diǎn)到為止，更多的空間被留給了優(yōu)先級(jí)更高的內(nèi)容上。

當(dāng)然，這三個(gè)場(chǎng)景僅僅是我所總結(jié)的典型場(chǎng)景，并非覆蓋到所有的情況，我們?cè)O(shè)計(jì)師仍然需要具體問題具體分析。

3. 水平多個(gè)按鈕

水平方向存在多個(gè)按鈕的情況同樣可以用古騰堡法則來(lái)判斷位置。由于閱讀引力路徑的終點(diǎn)在右下角這個(gè)位置，所以我們最想讓用戶點(diǎn)擊哪個(gè)按鈕，那就將它放置在底部的最右側(cè)，讓用戶以最短的時(shí)間注意到它。

最典型的例子就是各類彈窗，那些正向的、鼓勵(lì)性質(zhì)的、高優(yōu)先級(jí)的 CTA 按鈕往往被放置在右下角。

當(dāng)然也有很多的頁(yè)面場(chǎng)景也是這樣，產(chǎn)品最關(guān)乎轉(zhuǎn)化的行動(dòng)點(diǎn)總是被安排在了右下角。

另外，這些按鈕的差異不僅僅是位置，按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異。

水平多按鈕同樣存在著反面應(yīng)用。

比如 ios 的共享相簿請(qǐng)求的接受按鈕放置在了左側(cè)，拒絕放在右側(cè)，這是為了避免用戶誤點(diǎn)垃圾邀請(qǐng)。

而高德地圖在退出導(dǎo)航的二次確認(rèn)場(chǎng)景中，高亮的「退出導(dǎo)航」放在了左側(cè)，「取消」放在了右側(cè)，這是考慮到導(dǎo)航屬于高風(fēng)險(xiǎn)型場(chǎng)景，在此場(chǎng)景下司機(jī)是高度專注的。而退出導(dǎo)航所發(fā)生的時(shí)機(jī)往往是到達(dá)目的地或者導(dǎo)航出錯(cuò)的情況下，所以需要盡可能避免司機(jī)專注駕駛時(shí)，誤點(diǎn)退出導(dǎo)航導(dǎo)致的一系列危險(xiǎn)后果。

4. 垂直多個(gè)按鈕

同樣的，根據(jù)古騰堡法則，底部位置處于閱讀引力路徑的終點(diǎn)，所以我們最想讓用戶點(diǎn)擊哪個(gè)按鈕，那就放置在最底部。

但是，目前絕大部分的設(shè)計(jì)并沒有按照這個(gè)來(lái)。那些正向的、鼓勵(lì)性質(zhì)的、高優(yōu)先級(jí)的 CTA 按鈕往往被放置在了上方。

之所以會(huì)這樣，我思考可能是由于眼動(dòng)路徑所引起的。

垂直布局下，用戶瀏覽時(shí)的眼動(dòng)路徑單純向下，這種由上自下的瀏覽效率是最高的。

水平布局時(shí)，用戶由左至右的瀏覽效率要明顯低于垂直布局，但也同時(shí)避免了垂直布局下過快的決策造成風(fēng)險(xiǎn)。

這和表單布局方向類似，那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局，而需要用戶仔細(xì)閱讀、認(rèn)真填寫的表單往往使用了水平布局。最終原因都是眼動(dòng)路徑的不同所帶來(lái)的影響。

所以，盡管這種布局存在著視覺回流，但是也同樣擁有著友好的防錯(cuò)優(yōu)勢(shì)。

位置篇到此結(jié)束，我們接下來(lái)再來(lái)談?wù)劇赋叽纭惯@個(gè)維度。

三、按鈕尺寸解析

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

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

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

視覺能力上很好理解。當(dāng)一個(gè)元素尺寸越大，人眼就越容易抓捕到這個(gè)元素。

所以那些越重要的東西，往往會(huì)給予更大的尺寸來(lái)強(qiáng)制用戶注意到它，這也可以解釋為什么甲方總喜歡不停得在背后指指點(diǎn)點(diǎn)嫌棄元素太小，就是因?yàn)檫@些元素對(duì)他們來(lái)說非常重要，只是他們沒有我們那么專業(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)景差異等因素的影響。

2. 規(guī)范中的定義

我們先來(lái)看下 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 的按鈕比比皆是，比如信息頁(yè)的發(fā)送、App Store 的獲取、購(gòu)買浮層的確認(rèn)、添加 siri、導(dǎo)航類右上角的工具型按鈕，它們的點(diǎn)擊域?yàn)榘粹o本身，但是均未達(dá)到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產(chǎn)品詳情頁(yè)中的獲取按鈕，它的高度僅僅是 27pt，遠(yuǎn)遠(yuǎn)未達(dá)到 44pt 的要求。

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

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

3. 從 Apple Music 說起

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

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

而他為了解釋按鈕尺寸所帶來(lái)的變化，引入了歷史上著名的兩個(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ò)誤率基本不變。

看到這，來(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 很接近。

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

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

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

這款游戲在上線之后被下載了 10w 次，并且后臺(tái)悄咪咪得暗中記錄了用戶所有的點(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 之后，玩家的正確率并沒有得到顯著的提升。

③ 實(shí)驗(yàn)結(jié)論

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

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

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

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

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

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

最后，我們?cè)賮?lái)看下開頭 iTunes 的鎖屏界面的按鈕。

可以看到從 iOS 9 到 iOS 10，蘋果將按鈕可點(diǎn)范圍由 7mm（44pt）擴(kuò)大至 12mm（82pt），結(jié)果也正好符合了微軟的規(guī)范。

看到這里，你肯定更困惑了——

道理我懂了，But，按鈕的最佳尺寸到底是多少？

其實(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ì)可控的范圍。

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

4. 尺寸范圍的界定

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

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

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

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

③ 不可控場(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 之間。

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

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

個(gè)人主頁(yè)的關(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)化。

這里我也大膽做一個(gè)預(yù)測(cè)，CTA 按鈕的尺寸的擴(kuò)大將會(huì)是未來(lái)設(shè)計(jì)的一個(gè)重要趨勢(shì)之一。留貼為證，歡迎打臉~

四、按鈕圓角解析

提起 CTA 按鈕的形狀，我們印象中基本能想到三類：矩形、圓角矩形和全圓角矩形。這三類按鈕形狀本質(zhì)的區(qū)別就在于圓角的不同。

那么問題來(lái)了，CTA 按鈕為何會(huì)有圓角的差異？圓角背后有哪些特性和適用情況？

別急，且讓我們先從圓角的歷史說起。

1. 關(guān)于圓角的一些歷史

互聯(lián)網(wǎng)中的圓角矩形最早源自于 1981 年的 Macintosh。喬幫主希望這種美好的形狀能夠出現(xiàn)在正在研發(fā)的蘋果系統(tǒng)中，他說服了工程師比爾·阿金斯特實(shí)現(xiàn)了圓角矩形的繪制技術(shù)，并為其命名為 RoundRects。之后，這個(gè)美妙的形狀便被沿用到了蘋果所有的用戶界面當(dāng)中。

值得一提的是，在 iOS 7 代之前，圖標(biāo)的圓角曲率并非連續(xù)的，每個(gè)圓角與邊緣的銜接處都會(huì)帶有明顯的切邊。

蘋果受工業(yè)設(shè)計(jì)的啟發(fā)，將工業(yè)中的曲線連續(xù)概念應(yīng)用在了 ui 中，以連續(xù)、漸變式的曲率來(lái)將讓圓角矩形變得更加圓潤(rùn)、平滑。同時(shí)，這種更新也與同一時(shí)間發(fā)布的 iphone5c 的邊角工藝設(shè)計(jì)達(dá)成了統(tǒng)一。

你以為蘋果對(duì)圓角的執(zhí)著止步于此了嗎？并沒有~

到了 2017 年，圓角甚至被直接運(yùn)用到了手機(jī)屏幕本身。當(dāng)手機(jī)機(jī)身、屏幕、dock 和圖標(biāo)，每一處的圓角以近乎于等比數(shù)列的形式依次追隨時(shí)，就形成了一種充滿魅力的秩序感、和諧感。而這種被稱為全面屏的工藝也被各大廠商們競(jìng)相效仿。

到了去年的 6 月份，蘋果將自己對(duì)圓角的執(zhí)念帶到了 Bigsur OS 的系統(tǒng)中。Bigsur 的設(shè)計(jì)語(yǔ)言里，幾乎所有的系統(tǒng)圖標(biāo)都變?yōu)榱藞A角矩形，呈現(xiàn)出了非常高度的一致性。

并且，原本的小圓角全部放大處理。比如 dock 欄、按鈕、窗口圓角、甚至是文件夾的圖標(biāo)，他們圓角全部得到了放大。總之，macOS 整體的設(shè)計(jì)風(fēng)格越來(lái)越像 iOS 靠攏。

相比完全扁平化的 iOS 圖標(biāo)，macOS 的圖標(biāo)也多出很多的擬物細(xì)節(jié)，比如反光、高光、投影、以及郵箱圖標(biāo)上的一行生怕被你看到的超小文字"APPLE PARK CALIFORNIA 95014"，這是 Apple Park 的地址。當(dāng)然這些不在此篇討論范圍內(nèi)。

既然提到蘋果，就不得不提到蘋果的死對(duì)頭——蓋茨兄的微軟。

其實(shí)早在遠(yuǎn)古時(shí)代的 XP，就出現(xiàn)了圓角設(shè)計(jì)，乃至后面的 vista 和 win7。

但是到了 WP 時(shí)代，微軟為了與蘋果做出風(fēng)格差異，以完完全全的直角來(lái)融入到觸屏端的設(shè)計(jì)語(yǔ)言，而這個(gè)語(yǔ)言也成為了微軟最具代表性的特有風(fēng)格——Metro（Modern UI）。

在 Metro 下，所有的圖標(biāo)徹底得脫離了擬物的范疇，它們?nèi)灰话驼婆谋猓優(yōu)榱说罔F標(biāo)志牌一樣的完完全全的直角矩形色塊。

直至后面得到顯著優(yōu)化的 win10 以及 17 年推出的 Fluent Design，這種風(fēng)格才算是真正得被用戶們認(rèn)可和接受。不過，由于直角本身過于方正銳利，導(dǎo)致這種風(fēng)格猶如"鋼鐵直男"一樣缺乏細(xì)節(jié)和美感，因此喜歡這種風(fēng)格的用戶依然是少數(shù)。

有意思的是，在前年 20H1 版本的 win10 界面中罕見得回歸了久違的圓角，這也意味著微軟徹底放棄了自己堅(jiān)守近 10 年的直角陣營(yíng)，正式向主流的圓角風(fēng)格妥協(xié)。

為什么相比直角，圓角自誕生以來(lái)便被廣泛運(yùn)用，成為了經(jīng)久不衰的設(shè)計(jì)趨勢(shì)？究其原因還得從圓角本身的特性講起。并且也正是出于這些內(nèi)在特性影響了 CTA 按鈕不同的形狀使用。

2. 圓角的特性

關(guān)于圓角本身的特性大致可以分為以下三個(gè)。

① 親和感

從遠(yuǎn)古時(shí)代開始，人類便意識(shí)到形狀的尖銳程度所帶來(lái)的影響。

人類在木棍上綁上磨尖的獸骨、巖石作為武器以刺穿猛獸，但是相對(duì)應(yīng)的，他們又畏懼猛獸的利齒、亦或是拿著同樣武器的敵方部落刺穿他們的身軀。

人類對(duì)這類尖銳物體本能的警惕感一直傳承至今。

在現(xiàn)實(shí)世界中，絕大多數(shù)物件的制造都會(huì)為了避免尖角割傷用戶的手指，而為其注入圓角的工藝，讓尖角變得圓潤(rùn)平滑。

圓角代表了安全，直角代表了危險(xiǎn)。這個(gè)心智模型（敲黑板！！這個(gè)模型很重要?。。└畹俟痰民v扎在我們的大腦中。因此帶有圓角的矩形往往會(huì)給予用戶足夠的親和感、安全感，并且隨著圓角的增大而加深。

比如之前設(shè)計(jì)圈熱議的小米更新 logo 事件，盡管超橢圓的形狀和圓角矩形還是有些區(qū)別的，但是這種圓潤(rùn)的形狀讓整個(gè)調(diào)性變得更加接地氣了，更加 alive 了。

② 辨識(shí)度

我們對(duì)圓角的認(rèn)知除了源自遠(yuǎn)古時(shí)代趨利避害的本能，人眼本身也同樣更偏愛圓角。

Visual Perception 一書的作者，Jürg N?nni 曾經(jīng)研究并提出觀點(diǎn)：

人的視網(wǎng)膜對(duì)于正圓形的處理速度要顯著高于對(duì)邊角的處理速度。

這是由于人類的視網(wǎng)膜中存在一塊視覺最敏銳的區(qū)域——中央凹，它處理圓形的速度最快，而處理邊緣則需要用到大腦中更多的"神經(jīng)影像工具"。

而圓角矩形在視覺上比直角矩形更接近圓形，因此人眼處理帶圓角的形狀時(shí)更易辨識(shí)。

③ 視覺聚焦

形狀本身也自帶了"視覺引導(dǎo)"的屬性。拿圓形直角矩形、圓角矩形和圓形舉例：

圓形以及圓角矩形不存在任何的尖角，沒有任何突出的焦點(diǎn)，圓周以及圓角矩形的四個(gè)圓角會(huì)產(chǎn)生一個(gè)向中心過渡的趨勢(shì)，引導(dǎo)視線聚焦到形狀內(nèi)部。其中以圓形聚焦性最強(qiáng)；

但是，矩形的四個(gè)頂角則形成了四個(gè)視覺焦點(diǎn)，人眼看矩形時(shí)，他們的視線其實(shí)傾向于發(fā)散而非聚焦。當(dāng)然，易于發(fā)散的缺點(diǎn)也同樣導(dǎo)致了矩形在視覺上辨識(shí)速率更慢。

因此，直角矩形本身傾向的發(fā)散感和疏遠(yuǎn)感，使得大多數(shù)的產(chǎn)品更樂于采用圓角矩形甚至全圓角矩形來(lái)作為 CTA 按鈕的形狀。

下面，來(lái)單獨(dú)談?wù)勅珗A角按鈕——

3. 全圓角按鈕

全圓角按鈕的形狀類似膠囊，所以它也被經(jīng)常稱為膠囊按鈕。

由于圓形本身最強(qiáng)的聚焦性和辨識(shí)性，很多 CTA 按鈕會(huì)傾向于使用全圓角的形狀。

最典型的就是線上營(yíng)銷互動(dòng)和各類付費(fèi)業(yè)務(wù)的行動(dòng)按鈕，大多會(huì)采用全圓角按鈕的形狀來(lái)迅速抓取并聚焦用戶的注意力，提升用戶采取點(diǎn)擊行為的可能性，繼而提升轉(zhuǎn)化的可能。

即便是那些偏理性、冷靜、高端調(diào)性的產(chǎn)品，在必要的時(shí)候也會(huì)嘗試使用全圓角的形狀來(lái)呼吁用戶點(diǎn)擊。比如寺庫(kù)、支付寶、知乎。

4. 圓角對(duì)行為的影響

可能很多小伙伴會(huì)因?yàn)樵O(shè)計(jì)的一致性而陷入一個(gè)錯(cuò)誤認(rèn)知：產(chǎn)品中所有的按鈕圓角必須保持一致。

我之前也是這樣，認(rèn)為既然是按鈕，那就必須形成規(guī)范，不然界面會(huì)變得混亂不統(tǒng)一。

但其實(shí)，并無(wú)需死守這個(gè)框架。

比如上面所列舉的那些營(yíng)銷活動(dòng)和付費(fèi)業(yè)務(wù)，不論是什么樣的產(chǎn)品可以通用全圓角。連寺庫(kù)這種直角語(yǔ)言的高冷產(chǎn)品都妥協(xié)了。畢竟產(chǎn)品又不能用愛發(fā)電，盈利才是王道。

另一方面，就跟用戶場(chǎng)景掛鉤了。我們需要結(jié)合用戶所處的場(chǎng)景、當(dāng)前的任務(wù)目標(biāo)去調(diào)整設(shè)計(jì)策略。

舉個(gè)例子。

知乎關(guān)注答主的 CTA 按鈕，在答案詳情頁(yè)圓角較小的圓角矩形，但是到了答主個(gè)人頁(yè)卻變成了全圓角按鈕。

這就是因?yàn)椋诖鸢冈斍轫?yè)這個(gè)情景下，用戶的行為是瀏覽答案，動(dòng)機(jī)是獲取信息。因此使用了非全圓角按鈕來(lái)弱化干擾，以此維護(hù)用戶的注意力，沉浸于內(nèi)容當(dāng)中。（上劃至一定高度，關(guān)注按鈕直接吸頂弱化成 link 文字按鈕，目的同樣是實(shí)現(xiàn)沉浸式閱讀）

而用戶點(diǎn)擊進(jìn)入答主個(gè)人頁(yè)的這個(gè)行為，可以預(yù)判用戶的動(dòng)機(jī)是基于答案產(chǎn)生了足夠的興趣，ta 想了解答主的更多信息。所以，按鈕的形狀采用了更加聚焦的全圓角，目的是以此觸發(fā)用戶的點(diǎn)擊行為，進(jìn)而促進(jìn)關(guān)系鏈的沉淀。

關(guān)系鏈沉淀了，那用戶就有了更多不能輕易離開產(chǎn)品的理由。

另外，聯(lián)合強(qiáng)對(duì)比的反白手段和 icon 引導(dǎo)可以更完美得誘發(fā)用戶的點(diǎn)擊欲望。

5. 圓角與產(chǎn)品調(diào)性

通過圓角體現(xiàn)調(diào)性的設(shè)計(jì)可以直接參考注冊(cè)登錄頁(yè)的 CTA 按鈕。

作為用戶開啟主線任務(wù)的第一個(gè)環(huán)節(jié)，登錄注冊(cè)頁(yè)的圓角傾向可以迅速傳達(dá)給用戶深刻的第一印象。這在心理學(xué)上對(duì)應(yīng)著一個(gè)很有意思的效應(yīng)——首因效應(yīng)。說的是首次見面的行為舉止能夠迅速而深刻得給別人留下先入為主的印象。

受圓角親和感特性的影響，擁有活潑、童趣、熱情、接地氣這類調(diào)性的產(chǎn)品往往比那些偏向冷靜、成熟、嚴(yán)肅、高端類的產(chǎn)品更適合全圓角風(fēng)格。

比如淘寶、微博的登錄按鈕全部使用了全圓角按鈕，而 QQ 更加極端得省略掉矩形的邊緣特征，直接以圓形作為登錄按鈕來(lái)凸顯年輕的定位。

而知乎、微信和支付寶這類偏嚴(yán)肅、冷靜、成熟調(diào)性的產(chǎn)品統(tǒng)一采用了圓角矩形。

最后

CTA 按鈕「位置」、「尺寸」和「圓角」這三個(gè)維度的解析到此結(jié)束，但愿這篇文章能讓你在按鈕的設(shè)計(jì)決策上更加理性和有理有據(jù)。

最后，再跟各位老鐵分享個(gè) John Heskett 在《設(shè)計(jì)價(jià)值創(chuàng)造》提出的觀點(diǎn)，這個(gè)觀點(diǎn)在《U 一點(diǎn)料 II》中也被提及：

他提出，設(shè)計(jì)師的價(jià)值創(chuàng)造大致可以分為這三個(gè)階段：

1. 修飾者

僅僅在頁(yè)面表現(xiàn)層進(jìn)行裝飾美化，屬于最底層的基礎(chǔ)價(jià)值。

2. 區(qū)分者

通過一系列手段打造自家產(chǎn)品的風(fēng)格和記憶點(diǎn)，和競(jìng)品拉開差異化。

3. 驅(qū)動(dòng)者

從業(yè)務(wù)層面出發(fā)，能夠通過設(shè)計(jì)驅(qū)動(dòng)業(yè)務(wù)、數(shù)據(jù)的增長(zhǎng)，這屬于最高層的價(jià)值，也是所有設(shè)計(jì)師一直追求的一個(gè)階段。

而 John 所說的驅(qū)動(dòng)者這個(gè)階段，一個(gè)必然的要求就是：設(shè)計(jì)師需要由感性設(shè)計(jì)轉(zhuǎn)化為理性設(shè)計(jì)。目的不僅僅是為了說服上級(jí)、說服需求方，更是為了讓設(shè)計(jì)決策更加準(zhǔn)確、從而更好得服務(wù)于用戶、賦能于業(yè)務(wù)。畢竟，設(shè)計(jì)只有成為商業(yè)中的一環(huán)，才具備價(jià)值。

正如我這篇文章所說的 CTA 按鈕，我們不去討論什么美觀、好看，而去通過行為模型去研究各個(gè)維度對(duì)點(diǎn)擊行為的影響，對(duì)業(yè)務(wù)轉(zhuǎn)化的影響。這樣的理性設(shè)計(jì)，才能真正得發(fā)揮設(shè)計(jì)師對(duì)于產(chǎn)品的價(jià)值。

我是 Andrew，但愿這期的文章能讓你有所收獲。

參考資料：

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

作者：Andrew