任何設計師都曾經與 CTA 按鈕打過交道。

當頁面中存在著一個 CTA 按鈕，那就意味著此次的目標就是不斷得引導用戶們用手指去點擊，以提升業務轉化。一旦點擊率達到或超出預期，那便驗證了此次設計的有效性。

但是，我們在很多時候都是受競品影響，下意識得進行 CTA 按鈕的設計。嗯，CTA 按鈕就用面性、反白、全圓角、放置底部... 看似理所當然，但背后的依據往往并不能講出來。

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

而這篇文章，將 CTA 按鈕分為位置、尺寸和圓角三個維度，來講述各自維度下我們該如何準確得進行設計決策，以及對用戶、業務轉化的影響。希望這篇文章能夠讓你更加接近設計的真相。

一、按鈕與行為模型

1. 什么是按鈕？

按鈕是用戶與產品進行交互動作的關鍵觸點之一，也是用戶界面中的基本控件。AntD 對它的定義是：用于開始一個即時操作。

MD 的定義則相對更加具象易懂——“allow users to take actions, and make choices, with a single tap.”，意為允許用戶進行一次點擊，就可以采取行動和做出選擇。

而其中對轉化指標起著最直接正面影響的當屬 CTA 按鈕。

2. 什么是 CTA 按鈕？

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

這玩意兒原本是營銷領域的術語，后來被廣泛運用在了互聯網領域。Wikipedia 中的定義是：CTA 即網站中用于提示用戶點擊并進入下一個轉化流程（比如下單、訂閱、關注等）的橫幅廣告、按鈕、或某些類型的圖形和文字。

CTA 的主要目標是吸引用戶采取下一步行動。當你在 Google 上搜索 CTA 時，大部分會用一個大喇叭來形象得表示這種“呼吁”感。

而當 CTA 的載體變為按鈕時，它的主要目標便是吸引用戶采取點擊行為，通過提升 CTR（點擊率）指標來提升轉化的可能。

說白了，所有能夠為產品帶來正向價值的按鈕，或者說我們希望用戶去進行的操作，不論你是關注、支付、下單還是訂閱等等，都算是 CTA 按鈕。所以，當頁面中存在多個按鈕時，CTA 按鈕的優先級往往是最高的。

3. 行為模型是如何影響點擊的

在開頭我就已經說了，當頁面中存在著 CTA 按鈕時，我們的設計目標，就是去召喚用戶們用手指去點擊，從而提升最后的數據指標。而并非美觀、好看這些很感性的維度。

我們想要更多用戶進行點擊行為，就需要先搞懂點擊行為背后的底層邏輯，再來選擇策略。而這個底層邏輯，就是福格行為模型。

福格行為模型由斯坦福大學 Persuasive Technology Lab（說服技術研究實驗室）創始人 BJ Fogg 研究而來。這個模型指出，一個人行為（Behavior）的發生需要滿足至少三個條件：動機（Motivation）、能力（Ability）和觸發（Triggers）。用公式表示即 B = MAT。這三者必須同時具備，缺少任一條件都不會導致行為的發生。

回到 CTA 按鈕，動機和能力分別表示用戶采取點擊行為背后的理由和行為的難易程度。兩者可以相互補償，在特定的觸發條件下，我們動機越高時，我們對能力的要求越低，我們動機越低時，我們對能力的要求就越高。

舉個淺顯易懂的例子，電商產品的加入購物車按鈕。一個男士對某件襯衫產生強烈的購買動機，不論按鈕的位置多么偏、尺寸多么小，他依舊有完成點擊的可能。

而如果這位男士的動機平平，但是有足夠的能力看到、點擊和購買，也同樣有完成點擊的可能。

當然，任一因素為 0 的條件下都無法導致行為的發生，你會覺得一個男士看到女士內衣后，會因為按鈕的易點而產生想了解更多的動機嗎？當然不會。

在產品中，動機代表了行為的理由，也就是用戶為什么要點擊。讓用戶產生點擊的動機大多依賴于內容本身，比如通過算法推薦調動興趣、通過利益點誘導用戶爭搶等等。

而觸發代表了行為的扳機，它引導用戶行為的發生。CTA 按鈕自身就是一個觸發，我們可以通過誘導性文案、指向性箭頭等等外部手段來不斷提醒用戶它的存在。

能力代表了行為的難易門檻，這也是我們設計側的主要發力點。接下來，我從 CTA 按鈕的位置、尺寸和圓角三個維度來進行分述。

二、按鈕位置解析

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

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

用流程圖這種結構化的表達方式應該更好理解點。

1. 底層方法論

① 菲茨定律

菲茨定律（Fitts’ Law）大家應該都很耳熟，它是 Paul Fitts 研究提出的一則典型的人機交互定律。這個定律指出，用戶從起點移動到終點目標所需要的時間，由至目標的距離和目標大小決定。

至目標的距離越短，或者目標的大小越大，那么用戶所花費的操作時間越短。

而當目標是 CTA 按鈕時，按鈕的尺寸越大、或者按鈕所在的位置距離指針/手指越短，點擊效率就越高。

所以，從位置上來說，將按鈕放置在頁面底部可以切實降低點擊行為所耗費的成本。當然，這只是從交互觸達方面上來講，下面的古騰堡法則更加具備普適性。

② 古騰堡法則

古騰堡法則由世界公認的現代報紙設計之父 Edmund C. Arnold 所提出。他將顯示信息的畫面劃分成了四個象限。

初始視覺落點（Primary Optical Area）

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

強休息區（Strong Fallow Area）

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

弱休息區（Weak Fallow Area）

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

最終視覺落點（Terminal Area）

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

用戶在瀏覽畫面時，由左上角的初始視覺落點為眼動路徑起點，由左至右得掃視，呈 Z 字形的動線一直到右下角的視覺落點結束。并且，在整個動線中，相比右上角和左下角的區域，起點和終點更容易引起用戶的注意。而由起點至終點的這條對角線路徑則稱作閱讀引力路徑。

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

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

下面，我根據按鈕的數量及排布方向，分場景來解釋這些按鈕的設計思路。

2. 底部單個按鈕

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

而由古騰堡法則來看，用戶進入界面后會首先進行信息的掃視，最終的視覺落點將會停留在結尾。因此將行動點放置在底部位置可以有效抓取用戶的注意力。但如果我們將按鈕放置到頂部或者內容中，將會不可避免得導致視覺回流，延長閱讀時間。

airbnb 的預訂和 boss 直聘的立即溝通，都屬于典型的 CTA，所以它們全部被放置在了底部。并且由于一屏內無法展示所有內容，所以按鈕始終保持了吸底狀態，不論瀏覽到哪里，用戶始終容易將更多注意力分配在 CTA 按鈕上。

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

① 反面應用

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

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

這個位置的按鈕一般有如下三個場景：

敏感操作

比如發布動態場景的發布按鈕，故意放置在頂部是為了讓用戶通過視覺回流來重新檢查自己將要發布的內容。取消同樣至于頂部，和發布不同的是，取消是一種消極的、包含損失成本的回退行為，所以往往和“返回”功能一樣，會被放置在更不便于點擊的左上角。（但是，返回可以通過側滑手勢）它們的共性，都是去告知用戶謹慎操作。

違背業務目標的操作

最常見的開屏廣告的“跳過”按鈕，不僅僅放在右上角，按鈕尺寸還異常得小（講真我一直覺得我手挺小的，直到無數次因為過小的點擊域而誤觸打開了廣告），有些甚至用了極低的遮罩透明度來鍛煉你的眼力。另外，一些不想用戶跳過的流程，也會故意通過位置對「跳過」按鈕進行弱化，比如新用戶引導中的一鍵關注，一鍵訂閱等等場景。「跳過」違背業務目標，所以往往會被想法設法得進行弱化，通過提升能力要求來降低你點擊的可能性。

普通功能操作

比如添加、編輯、更多按鈕，這些功能偏向工具型，它們往往是通往一個頁面、一個彈窗或者一個行動列表的觸點，與業務關聯不大，所以只需要做到能發現、能找到的地步即點到為止，更多的空間被留給了優先級更高的內容上。

當然，這三個場景僅僅是我所總結的典型場景，并非覆蓋到所有的情況，我們設計師仍然需要具體問題具體分析。

3. 水平多個按鈕

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

最典型的例子就是各類彈窗，那些正向的、鼓勵性質的、高優先級的 CTA 按鈕往往被放置在右下角。

當然也有很多的頁面場景也是這樣，產品最關乎轉化的行動點總是被安排在了右下角。

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

水平多按鈕同樣存在著反面應用。

比如 ios 的共享相簿請求的接受按鈕放置在了左側，拒絕放在右側，這是為了避免用戶誤點垃圾邀請。

而高德地圖在退出導航的二次確認場景中，高亮的「退出導航」放在了左側，「取消」放在了右側，這是考慮到導航屬于高風險型場景，在此場景下司機是高度專注的。而退出導航所發生的時機往往是到達目的地或者導航出錯的情況下，所以需要盡可能避免司機專注駕駛時，誤點退出導航導致的一系列危險后果。

4. 垂直多個按鈕

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

但是，目前絕大部分的設計并沒有按照這個來。那些正向的、鼓勵性質的、高優先級的 CTA 按鈕往往被放置在了上方。

之所以會這樣，我思考可能是由于眼動路徑所引起的。

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

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

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

所以，盡管這種布局存在著視覺回流，但是也同樣擁有著友好的防錯優勢。

位置篇到此結束，我們接下來再來談談「尺寸」這個維度。

三、按鈕尺寸解析

很多設計師包括我在內對按鈕尺寸有著頗多困惑。為什么很多產品甚至蘋果本身并沒有遵循 44pt 的標準規范？為什么有些場景下的 CTA 按鈕那么小？按鈕的最佳尺寸到底是多少？按鈕規范背后到底是什么樣的科學依據？這些依據可否量化？

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

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

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

所以那些越重要的東西，往往會給予更大的尺寸來強制用戶注意到它，這也可以解釋為什么甲方總喜歡不停得在背后指指點點嫌棄元素太小，就是因為這些元素對他們來說非常重要，只是他們沒有我們那么專業，知道強調一個東西的手法不僅僅是放大一種策略。

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

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

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

2. 規范中的定義

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

但是，在實際的 iOS 原生產品中，很多按鈕并未嚴格執行 44pt 這個數值。小于 44pt 的按鈕比比皆是，比如信息頁的發送、App Store 的獲取、購買浮層的確認、添加 siri、導航類右上角的工具型按鈕，它們的點擊域為按鈕本身，但是均未達到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產品詳情頁中的獲取按鈕，它的高度僅僅是 27pt，遠遠未達到 44pt 的要求。

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

這些情況的發生其實也很好理解，每個按鈕所對應的用戶場景、業務訴求不同，因此并不能一招鮮用一個尺寸吃遍所有場景。但是，有沒有一些科學的依據來量化得解釋按鈕尺寸對點擊的影響？

3. 從 Apple Music 說起

著名產品設計師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS 9 的 Apple Music 在鎖屏界面下的按鈕過小，經常會發生無法準確點擊的情況，他需要集中精力精確得點擊才能完成任務。

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

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

① 第一次實驗

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 之后，玩家的正確率并沒有得到顯著的提升。

③ 實驗結論

由上述的兩個實驗，我們可以提煉出一些有用的結論。

1. 根據各自的實驗，在目標尺寸分別小于 9.2mm、9.6mm 或者 12mm 后，均會導致錯誤率的攀升；
2. 當目標尺寸增加到一定程度之后，正確率基本保持不變。

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

斯科特將實驗得出的關鍵尺寸與蘋果、谷歌和微軟三大規范進行結合，發現了一些有意思的現象——

1. iOS 的 44pt 對應到實際尺寸為 6.9mm，約 7mm；
2. Android 的 56pt 對應到實際尺寸為 8.8mm，約 9mm；
3. 而微軟的 9mm 加上兩邊 2mm 的熱區，對應的實際尺寸為 13mm。

可以看到，Android 和微軟的尺寸，基本對應到了這兩項實驗得出的關鍵尺寸！

最后，我們再來看下開頭 iTunes 的鎖屏界面的按鈕。

可以看到從 iOS 9 到 iOS 10，蘋果將按鈕可點范圍由 7mm（44pt）擴大至 12mm（82pt），結果也正好符合了微軟的規范。

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

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

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

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

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

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

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

4. 尺寸范圍的界定

① 常規場景、局部模塊

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

② 常規場景、全局模塊、強業務屬性

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

③ 不可控場景

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

比如 keep 在跑步場景下的按鈕，就需要充分考慮到跑步時不穩定的狀態，如果按鈕和常規場景一樣，那很容易發生無法準確點擊的情況，增加意外事故發生的概率。

包括來電場景、地圖導航場景、快遞取件場景等等，都屬于不可控的場景。各位可以自己代入腦補一下，這些場景中無法準確點擊時容易產生什么樣的后果。

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

當然，這僅僅是很粗略的參考區間值，如何結合現有業務及用戶訴求、用戶場景等因素去合理得界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。

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

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

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

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

這里我也大膽做一個預測，CTA 按鈕的尺寸的擴大將會是未來設計的一個重要趨勢之一。留貼為證，歡迎打臉~

四、按鈕圓角解析

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

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

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

1. 關于圓角的一些歷史

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

值得一提的是，在 iOS 7 代之前，圖標的圓角曲率并非連續的，每個圓角與邊緣的銜接處都會帶有明顯的切邊。

蘋果受工業設計的啟發，將工業中的曲線連續概念應用在了 ui 中，以連續、漸變式的曲率來將讓圓角矩形變得更加圓潤、平滑。同時，這種更新也與同一時間發布的 iphone5c 的邊角工藝設計達成了統一。

你以為蘋果對圓角的執著止步于此了嗎？并沒有~

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

到了去年的 6 月份，蘋果將自己對圓角的執念帶到了 Bigsur OS 的系統中。Bigsur 的設計語言里，幾乎所有的系統圖標都變為了圓角矩形，呈現出了非常高度的一致性。

并且，原本的小圓角全部放大處理。比如 dock 欄、按鈕、窗口圓角、甚至是文件夾的圖標，他們圓角全部得到了放大。總之，macOS 整體的設計風格越來越像 iOS 靠攏。

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

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

其實早在遠古時代的 XP，就出現了圓角設計，乃至后面的 vista 和 win7。

但是到了 WP 時代，微軟為了與蘋果做出風格差異，以完完全全的直角來融入到觸屏端的設計語言，而這個語言也成為了微軟最具代表性的特有風格——Metro（Modern UI）。

在 Metro 下，所有的圖標徹底得脫離了擬物的范疇，它們全被一巴掌拍扁，變為了地鐵標志牌一樣的完完全全的直角矩形色塊。

直至后面得到顯著優化的 win10 以及 17 年推出的 Fluent Design，這種風格才算是真正得被用戶們認可和接受。不過，由于直角本身過于方正銳利，導致這種風格猶如”鋼鐵直男“一樣缺乏細節和美感，因此喜歡這種風格的用戶依然是少數。

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

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

2. 圓角的特性

關于圓角本身的特性大致可以分為以下三個。

① 親和感

從遠古時代開始，人類便意識到形狀的尖銳程度所帶來的影響。

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

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

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

圓角代表了安全，直角代表了危險。這個心智模型（敲黑板！！這個模型很重要！！）根深蒂固得駐扎在我們的大腦中。因此帶有圓角的矩形往往會給予用戶足夠的親和感、安全感，并且隨著圓角的增大而加深。

比如之前設計圈熱議的小米更新 logo 事件，盡管超橢圓的形狀和圓角矩形還是有些區別的，但是這種圓潤的形狀讓整個調性變得更加接地氣了，更加 alive 了。

② 辨識度

我們對圓角的認知除了源自遠古時代趨利避害的本能，人眼本身也同樣更偏愛圓角。

Visual Perception 一書的作者，Jürg N?nni 曾經研究并提出觀點：

人的視網膜對于正圓形的處理速度要顯著高于對邊角的處理速度。

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

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

③ 視覺聚焦

形狀本身也自帶了“視覺引導”的屬性。拿圓形直角矩形、圓角矩形和圓形舉例：

圓形以及圓角矩形不存在任何的尖角，沒有任何突出的焦點，圓周以及圓角矩形的四個圓角會產生一個向中心過渡的趨勢，引導視線聚焦到形狀內部。其中以圓形聚焦性最強；

但是，矩形的四個頂角則形成了四個視覺焦點，人眼看矩形時，他們的視線其實傾向于發散而非聚焦。當然，易于發散的缺點也同樣導致了矩形在視覺上辨識速率更慢。

因此，直角矩形本身傾向的發散感和疏遠感，使得大多數的產品更樂于采用圓角矩形甚至全圓角矩形來作為 CTA 按鈕的形狀。

下面，來單獨談談全圓角按鈕——

3. 全圓角按鈕

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

由于圓形本身最強的聚焦性和辨識性，很多 CTA 按鈕會傾向于使用全圓角的形狀。

最典型的就是線上營銷互動和各類付費業務的行動按鈕，大多會采用全圓角按鈕的形狀來迅速抓取并聚焦用戶的注意力，提升用戶采取點擊行為的可能性，繼而提升轉化的可能。

即便是那些偏理性、冷靜、高端調性的產品，在必要的時候也會嘗試使用全圓角的形狀來呼吁用戶點擊。比如寺庫、支付寶、知乎。

4. 圓角對行為的影響

可能很多小伙伴會因為設計的一致性而陷入一個錯誤認知：產品中所有的按鈕圓角必須保持一致。

我之前也是這樣，認為既然是按鈕，那就必須形成規范，不然界面會變得混亂不統一。

但其實，并無需死守這個框架。

比如上面所列舉的那些營銷活動和付費業務，不論是什么樣的產品可以通用全圓角。連寺庫這種直角語言的高冷產品都妥協了。畢竟產品又不能用愛發電，盈利才是王道。

另一方面，就跟用戶場景掛鉤了。我們需要結合用戶所處的場景、當前的任務目標去調整設計策略。

舉個例子。

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

這就是因為，在答案詳情頁這個情景下，用戶的行為是瀏覽答案，動機是獲取信息。因此使用了非全圓角按鈕來弱化干擾，以此維護用戶的注意力，沉浸于內容當中。（上劃至一定高度，關注按鈕直接吸頂弱化成 link 文字按鈕，目的同樣是實現沉浸式閱讀）

而用戶點擊進入答主個人頁的這個行為，可以預判用戶的動機是基于答案產生了足夠的興趣，ta 想了解答主的更多信息。所以，按鈕的形狀采用了更加聚焦的全圓角，目的是以此觸發用戶的點擊行為，進而促進關系鏈的沉淀。

關系鏈沉淀了，那用戶就有了更多不能輕易離開產品的理由。

另外，聯合強對比的反白手段和 icon 引導可以更完美得誘發用戶的點擊欲望。

5. 圓角與產品調性

通過圓角體現調性的設計可以直接參考注冊登錄頁的 CTA 按鈕。

作為用戶開啟主線任務的第一個環節，登錄注冊頁的圓角傾向可以迅速傳達給用戶深刻的第一印象。這在心理學上對應著一個很有意思的效應——首因效應。說的是首次見面的行為舉止能夠迅速而深刻得給別人留下先入為主的印象。

受圓角親和感特性的影響，擁有活潑、童趣、熱情、接地氣這類調性的產品往往比那些偏向冷靜、成熟、嚴肅、高端類的產品更適合全圓角風格。

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

而知乎、微信和支付寶這類偏嚴肅、冷靜、成熟調性的產品統一采用了圓角矩形。

最后

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

最后，再跟各位老鐵分享個 John Heskett 在《設計價值創造》提出的觀點，這個觀點在《U 一點料 II》中也被提及：

他提出，設計師的價值創造大致可以分為這三個階段：

1. 修飾者

僅僅在頁面表現層進行裝飾美化，屬于最底層的基礎價值。

2. 區分者

通過一系列手段打造自家產品的風格和記憶點，和競品拉開差異化。

3. 驅動者

從業務層面出發，能夠通過設計驅動業務、數據的增長，這屬于最高層的價值，也是所有設計師一直追求的一個階段。

而 John 所說的驅動者這個階段，一個必然的要求就是：設計師需要由感性設計轉化為理性設計。目的不僅僅是為了說服上級、說服需求方，更是為了讓設計決策更加準確、從而更好得服務于用戶、賦能于業務。畢竟，設計只有成為商業中的一環，才具備價值。

正如我這篇文章所說的 CTA 按鈕，我們不去討論什么美觀、好看，而去通過行為模型去研究各個維度對點擊行為的影響，對業務轉化的影響。這樣的理性設計，才能真正得發揮設計師對于產品的價值。

我是 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