編輯導語：關於一些按鈕的設計也非常重要，在一些頁面上，按鈕發揮着巨大的作用；並且按鈕一般都會吸引用户的注意力，引導用户進行此行動，召喚用户點擊；本文作者分享了關於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”的縮寫，意思是行為召喚。
這玩意兒原本是營銷領域的術語，後來被廣泛運用在了互聯網領域。
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. 敏感操作比如發佈狀態場景的發佈按鈕，故意放置在頂部是為了讓用户通過視覺迴流來重新檢查自己將要發佈的內容。
取消同樣至於頂部，和發佈不同的是，取消是一種消極的、包含損失成本的回退行為，所以往往和“返回”功能一樣，會被放置在更不便於點擊的左上角；（只是返回可以通過側滑手勢）它們的共性，都是去告知用户謹慎操作。
最常見的開屏廣告的“跳過”按鈕，不僅僅放在右上角，按鈕尺寸還異常得小（講真我一直覺得我手挺小的，直到無數次因為過小的點擊域而誤觸打開了廣告…）；有些甚至用了極低的遮罩透明度來鍛鍊你的眼力。
另外，一些不想用户跳過的流程也會故意通過位置進行弱化，比如新用户引導中的一鍵關注，一鍵訂閲等等；這些按鈕違背業務目標，所以往往會被想法設法得進行弱化。
比如添加、編輯、更多按鈕，這些功能偏向工具型，它們往往是通往一個頁面、一個彈窗或者一個行動列表的觸點，與業務關聯不大，所以只需要做到能發現、能找到的地步即點到為止，更多的空間被留給了優先級更高的內容和業務上。
當然，這三個場景僅僅是我所總結的典型場景，並非覆蓋到所有的情況，我們依然是具體情況具體分析。
八、水平多按鈕水平方向存在多個按鈕的情況同樣可以用古騰堡法則來判斷位置；由於閲讀引力路徑的終點在右下角這個位置，所以我們最想讓用户點擊哪個按鈕，那就將它放置在底部的最右側，讓用户以最短的時間注意到它。
最典型的例子就是各類彈窗，那些正向的、鼓勵性質的、高優先級的CTA按鈕往往被放置在右下角。
當然也有很多的頁面場景也是這樣，產品最關乎轉化的行動點總是被安排在了右下角。
另外，這些按鈕的差異不僅僅是位置，按鈕的樣式、顏色、尺寸等等維度都存在着明顯差異，當然這些不在此篇討論範圍之內，後面我會講到。
水平多按鈕同樣存在着反面應用。
比如ios的共享相簿請求的接受按鈕放置在了左側，拒絕放在右側，這是為了避免用户誤點垃圾邀請；而高德地圖在導航界面中高亮的退出放在了左側，取消放在了右側，這是考慮到導航場景下司機是高度專注的，退出導航所發生的時機往往是到達目的地或者導航出錯的情況下，所以需要儘可能避免司機專注駕駛時誤點退出導航導致的一系列風險。
同樣的，根據古騰堡法則，底部位置處於閲讀引力路徑的終點，所以我們最想讓用户點擊哪個按鈕，那就放置在最底部。
但是，目前絕大部分的設計並沒有按照這個來。那些正向的、鼓勵性質的、高優先級的CTA按鈕往往被放置在了上方。
之所以會這樣，我思考可能是由於眼動路徑所引起的。
垂直佈局下，用户瀏覽時的眼動路徑單純向下，這種由上自下的瀏覽效率是最高的。
水平佈局時，用户由左至右的瀏覽效率要明顯低於垂直佈局，但也同時避免了垂直佈局下過快的決策造成風險。
這和表單佈局方向類似，那些想要讓用户快速瀏覽並完成的表單往往採用了垂直佈局，而需要用户仔細閲讀、認真填寫的表單往往使用了水平佈局，最終原因都是眼動路徑的不同所帶來的影響。
所以，儘管這種佈局存在着視覺迴流，但是也同樣擁有着友好的防錯優勢。
十、最後關於CTA按鈕在位置維度上的講解到此結束。本來沒想碼這麼多字的，但是發現想將東西講透講明白，並非那麼簡單；不過後面我也會盡量去精煉化、結構化得表達，避免各位看得太累~
希望這篇文章能夠給予你一些啓發。期待你的收穫和反饋。
作者：Andrewchen；微信公眾號：轉行人的設計筆記
本文由 @Andrewchen 原創發佈於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。