起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識關于CTA按鈕的全方位解讀——位置篇
編輯導語：關于一些按鈕的設計也非常重要，在一些頁面上，按鈕發揮著巨大的作用；并且按鈕一般都會吸引用戶的注意力，引導用戶進行此行動，召喚用戶點擊；本文作者分享了關于CTA按鈕的位置解讀，我們一起來學習一下。
任何一名設計師都與CTA按鈕打過交道。
當頁面中存在著一個CTA按鈕，那就意味著當前頁面的業務目標具備了相當明確的最終衡量標準——轉化率；而我們的設計目標就是，不斷得召喚用戶們用手指去進行點擊；一旦最后的CTR（點擊率）、轉化等數據指標達到或超出預期，那便驗證了此次設計的有效性。
但是，我們在很多時候都是受競品潛移默化的影響下意識得進行CTA按鈕的設計（嗯，CTA按鈕就用面性、反白、全圓角、放置底部…）；看似理所當然，但我們能否拿出足夠專業的邏輯來支撐我的設計？
設計最重要的，就是有所依據。如果我們自己都不能自圓其說，那么又該如何說服上級或面試官相信你的專業能力？
很長一段時間，我都曾經被按鈕的問題困擾過，直至這篇文章的產出，我才有種撥開云霧見月明的感覺；我決定將CTA按鈕作為一個系列，每篇文章基于一個維度來講述它對點擊和業務的影響，希望這些文章能夠讓你更加接近真相。
今天，我們來聊聊CTA按鈕的位置。
一、什么是按鈕
按鈕是用戶與產品進行交互動作的關鍵觸點之一，也是用戶界面中的基本控件。
AntD對它的定義是——用于開始一個即時操作。
MD的定義相對更加具象易懂——“allow users to take actions, and make choices, with a single tap”；意為允許用戶進行一次點擊，就可以采取行動和做出選擇。
而其中對轉化指標起著最直接正面影響的當屬CTA按鈕。
二、什么是CTA按鈕
CTA，即“Call to Action”的縮寫，意思是行為召喚。
這玩意兒原本是營銷領域的術語，后來被廣泛運用在了互聯網領域。
Wikipedia中的定義是：CTA即網站中用于提示用戶點擊并進入下一個轉化流程（比如下單、訂閱、關注等）的橫幅廣告、按鈕、或某些類型的圖形和文字。
CTA的主要目標是吸引用戶采取下一步行動，當你在Google上搜索CTA時，大部分會用一個大喇叭來形象得表示這種“呼吁”感。
而當CTA的載體變為按鈕時，它的主要目標便是吸引用戶采取點擊行為，通過提升CTR（點擊率）指標來提升轉化的可能。
說白了，所有能夠為產品帶來正向價值的按鈕，或者說我們希望用戶去進行的操作，不論你是關注、支付、下單還是訂閱等等，都算是CTA按鈕；所以，當頁面中存在多個按鈕時，CTA按鈕的優先級往往是最高的。
三、行為模型是如何影響點擊的
在開頭我就已經說了，當頁面中存在著CTA按鈕時，我們的設計目標就是去召喚用戶們用手指去進行點擊，從而提升最后的數據指標，而并非美觀和好看這些感性的東西。
我們想要更多用戶進行點擊行為，就需要先搞懂點擊行為背后的底層邏輯，再來選擇策略；而這個底層邏輯，就是之前幾篇文章里被講爛的福格行為模型。
考慮到很多朋友沒看到那些關于行為模型的文章，這里簡單再提一嘴~
福格行為模型由斯坦福大學Persuasive Technology Lab（說服技術研究實驗室）創始人BJ Fogg研究而來。
這個模型指出，一個人行為（Behavior）的發生需要滿足至少三個條件：動機（Motivation）、能力（Ability）和觸發（Triggers）；用公式表示即B = MAT，這三者必須同時具備，缺少任一條件都不會導致行為的發生。
回到CTA按鈕，動機和能力分別表示用戶采取點擊行為背后的理由和行為的難易程度；兩者可以相互補償，在特定的觸發條件下，我們動機越高時，我們對能力的要求越低，我們動機越低時，我們對能力的要求就越高。
比如，一個男士對某件襯衫產生強烈的購買動機，不論按鈕的位置多么偏、尺寸多么小，他依舊有完成點擊的可能。
如果這位男士的動機平平，但是有足夠的能力看到、點擊和購買，也同樣有完成點擊的可能。
當然，任一因素為0的條件下都無法導致行為的發生，你會覺得一個男士看到女士內衣后，會因為按鈕的易點而產生想了解更多的動機嗎？當然不會。
而觸發代表了行為的刺激點，它引導用戶行為的發生。
CTA按鈕自身就是一個觸發，我們可以通過醒目的樣式、誘導性文案、指向性箭頭等等外部手段來不斷提醒用戶它的存在，甚至加入倒計時搶購等利益點來刺激用戶采取點擊行為。
而按鈕位置的合理性，即用戶是否可輕松觸達的能力要求，我將其細分為兩種能力——視覺觸達能力和交互觸達能力。
這兩種能力分別對應著兩種典型的方法論——古騰堡原則和菲茨定律。
我們只要熟知并熟用這兩種方法，就可以盡可能降低點擊行為背后的能力要求，即降低用戶在視覺、交互上所花費的成本，提升用戶點擊的可能性，最終提升關鍵指標。
用流程圖這種結構化的表達方式應該更好理解點。
四、菲茨定律
菲茨定律（Fitts’ Law）大家應該都很耳熟，它是Paul Fitts研究提出的一則典型的人機交互定律；這個定律指出，用戶從起點移動到終點目標所需要的時間，由至目標的距離和目標大小決定。
至目標的距離越短，或者目標的大小越大，那么用戶所花費的操作時間越短。
而當目標是CTA按鈕時，按鈕的尺寸越大、或者按鈕所在的位置距離指針/手指越短，點擊效率就越高。
所以，從位置上來說，將按鈕放置在頁面底部可以切實降低點擊行為所耗費的成本；當然，這只是從交互觸達方面上來講，下面的古騰堡法則更加具備普適性意義。
五、古騰堡法則
古騰堡法則由世界公認的現代報紙設計之父Edmund C. Arnold所提出，他將顯示信息的畫面劃分成了四個象限。
- 初始視覺落點（Primary Optical Area）：位于畫面的左上方，用戶第一時間注意到的地方。
- 強休息區（Strong Fallow Area）：位于畫面的右上方，較少被用戶注意到。
- 弱休息區（Weak Fallow Area）：位于畫面的左下方，最少被用戶注意到。
- 最終視覺落點（Terminal Area）：位于畫面的右下方，用戶最后注意到的地方，作為終點存在。
用戶在瀏覽畫面時，由左上角的初始視覺落點為眼動路徑起點，由左至右得掃視，呈Z字形的動線一直到右下角的視覺落點結束；并且，在整個動線中，相比右上角和左下角的區域，起點和終點更容易引起用戶的注意，而由起點至終點的這條對角線路徑則稱作閱讀引力路徑。
因此，根據古騰堡的原理，那些相對重要的元素則適合放置在閱讀引力路徑上：左上角、中間和右下角。這樣的布局能夠保持良好的節奏、便于更高效的認知理解。
我們可以看到很多這樣的應用，比如各類的信件、公告、合同等等，而CTA按鈕的位置也同樣遵循了古騰堡法則。
下面，我根據按鈕的數量及排布方向，分場景來解釋這些按鈕的設計思路。
六、底部單個按鈕
根據菲茨定律，底部按鈕距離用戶的手指最短，因此將按鈕放在底部位置可以有效降低交互成本。
而由古騰堡法則來看，用戶進入界面后會首先進行信息的掃視，最終的視覺落點將會停留在結尾，因此將行動點放置在底部位置可以有效抓取用戶的注意力；但如果我們將按鈕放置到頂部或者內容中，將會不可避免得導致視覺回流，延長閱讀時間。
airbnb的預訂和boss直聘的立即溝通，都屬于典型的CTA，所以它們全部被放置在了底部；并且由于一屏內無法展示所有內容，所以按鈕始終保持了吸底狀態，不論瀏覽到哪里，用戶始終容易將更多注意力分發在CTA按鈕上。
當然，不要局限在界面的底部，版塊、模塊的底部都是可以這么放置。
七、反面應用
底部固然是很好的選擇，但是由于種種原因，我們并不能一股腦得把按鈕往下塞；其他位置依然可以被有效利用，比如頂部導航欄的兩側。
頂部位置的按鈕大多承載著那些未安排在第一梯隊的非CTA按鈕（注意是大多），這個位置是菲茨定律和古騰堡法則的典型反面應用，通過提升對點擊行為的能力要求來降低用戶點擊的可能性，同時也可以為更值得展示在頁面當中的內容挪出更多的空間，合理把控用戶的注意力。
這個位置的按鈕一般有如下三個場景：
1. 敏感操作
比如發布狀態場景的發布按鈕，故意放置在頂部是為了讓用戶通過視覺回流來重新檢查自己將要發布的內容。
取消同樣至于頂部，和發布不同的是，取消是一種消極的、包含損失成本的回退行為，所以往往和“返回”功能一樣，會被放置在更不便于點擊的左上角；（只是返回可以通過側滑手勢）它們的共性，都是去告知用戶謹慎操作。
2. 違背業務目標的操作
最常見的開屏廣告的“跳過”按鈕，不僅僅放在右上角，按鈕尺寸還異常得小（講真我一直覺得我手挺小的，直到無數次因為過小的點擊域而誤觸打開了廣告…）；有些甚至用了極低的遮罩透明度來鍛煉你的眼力。
另外，一些不想用戶跳過的流程也會故意通過位置進行弱化，比如新用戶引導中的一鍵關注，一鍵訂閱等等；這些按鈕違背業務目標，所以往往會被想法設法得進行弱化。
3. 普通功能操作
比如添加、編輯、更多按鈕，這些功能偏向工具型，它們往往是通往一個頁面、一個彈窗或者一個行動列表的觸點，與業務關聯不大，所以只需要做到能發現、能找到的地步即點到為止，更多的空間被留給了優先級更高的內容和業務上。
當然，這三個場景僅僅是我所總結的典型場景，并非覆蓋到所有的情況，我們依然是具體情況具體分析。
八、水平多按鈕
水平方向存在多個按鈕的情況同樣可以用古騰堡法則來判斷位置；由于閱讀引力路徑的終點在右下角這個位置，所以我們最想讓用戶點擊哪個按鈕，那就將它放置在底部的最右側，讓用戶以最短的時間注意到它。
最典型的例子就是各類彈窗，那些正向的、鼓勵性質的、高優先級的CTA按鈕往往被放置在右下角。
當然也有很多的頁面場景也是這樣，產品最關乎轉化的行動點總是被安排在了右下角。
另外，這些按鈕的差異不僅僅是位置，按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異，當然這些不在此篇討論范圍之內，后面我會講到。
水平多按鈕同樣存在著反面應用。
比如ios的共享相簿請求的接受按鈕放置在了左側，拒絕放在右側，這是為了避免用戶誤點垃圾邀請；而高德地圖在導航界面中高亮的退出放在了左側，取消放在了右側，這是考慮到導航場景下司機是高度專注的，退出導航所發生的時機往往是到達目的地或者導航出錯的情況下，所以需要盡可能避免司機專注駕駛時誤點退出導航導致的一系列風險。
九、垂直多按鈕
同樣的，根據古騰堡法則，底部位置處于閱讀引力路徑的終點，所以我們最想讓用戶點擊哪個按鈕，那就放置在最底部。
但是，目前絕大部分的設計并沒有按照這個來。那些正向的、鼓勵性質的、高優先級的CTA按鈕往往被放置在了上方。
之所以會這樣，我思考可能是由于眼動路徑所引起的。
垂直布局下，用戶瀏覽時的眼動路徑單純向下，這種由上自下的瀏覽效率是最高的。
水平布局時，用戶由左至右的瀏覽效率要明顯低于垂直布局，但也同時避免了垂直布局下過快的決策造成風險。
這和表單布局方向類似，那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局，而需要用戶仔細閱讀、認真填寫的表單往往使用了水平布局，最終原因都是眼動路徑的不同所帶來的影響。
所以，盡管這種布局存在著視覺回流，但是也同樣擁有著友好的防錯優勢。
十、最后
關于CTA按鈕在位置維度上的講解到此結束。本來沒想碼這么多字的，但是發現想將東西講透講明白，并非那么簡單；不過后面我也會盡量去精煉化、結構化得表達，避免各位看得太累~
希望這篇文章能夠給予你一些啟發。期待你的收獲和反饋。
作者：Andrewchen；微信公眾號：轉行人的設計筆記
本文由 @Andrewchen 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
