今天的文章，我們來就來簡單探討一下CTA按鈕的相關問題。enjoy~

APP和網站這樣的數字產品中所包含的有效的交互系統，通常是由包含不同任務和功能的小元素組合到一起的。想要讓整套交互系統無縫順暢地運行起來，細節的把控是非常有必要的。

在諸多的交互控件當中，按鈕是最常見，也是最核心的交互元素之一，它的概念源自于現實世界，它存在的歷史幾乎和GUI的歷史一樣長。按鈕設計得好不好，對于整個UX的轉化率而言，有著非常直接的影響。在網頁和APP的界面設計當中，影響用戶體驗和轉化率最大的是CTA按鈕，在很多情況下，CTA按鈕都被UX設計師和和UI設計師所推崇，被視為許多UI/UX解決方案中的最佳實踐。今天的文章，我們來就來簡單探討一下CTA按鈕的相關問題。

什么是CTA按鈕？它為何如此重要？

CTA 是 Call to action 的縮寫，中文通常稱之為行為召喚，CTA按鈕即為行為召喚按鈕。當設計師有意識地通過設計去引導甚至誘導用戶去執行特定的操作，諸如點擊按鈕、留下聯絡方式或者發生購買行為，都算是行為召喚。

傳統的CTA按鈕很容易被注意到，設計師故意創造出這種“醒目”的局面，要的就是讓用戶抑制不住點擊的沖動。為了達到這樣的目的，設計師通常會在按鈕上搭配特定的行為召喚用語，比如“了解更多”或者“現在購買”，或明或暗地鼓勵、推動用戶去執行操作。

行為召喚這一UX設計手段的主要目的就是催生交互、行為，提升轉化，達成業務目標。當一個按鈕設計得足夠吸引潛在用戶注意力的時候，它就具備了引導用戶進入下一個階段的可能性了。當用戶選擇點擊按鈕，填寫表單，下單購買的時候，這個CTA的目的就達到了。

通過這樣一個又一個行為召喚的設計，用戶在網站和APP中逐步走入不同的階段，進入不同的環節，了解產品，選擇服務，執行操作，完成任務。即使是最專業最優質的內容也無法保證用戶時刻保持高度參與，如果沒有CTA按鈕，用戶可能只是簡單掃一眼，然后離開。正如同我們常說的，這個信息爆炸的年代酒香也怕巷子深。

有些人可能認為，一個足夠優秀的CTA按鈕只需要尺寸夠大色彩夠亮就行了，實際不然，想要保證行為召喚的轉化率，需要考慮的方方面面并不少。

哪些因素成就了CTA按鈕？

尺寸

通過尺寸大小來劃分元素重要性是UI設計中常用的手段。元素越大，重要性越高，這個邏輯很明晰。由于CTA 按鈕的目標是引起用戶的注意，因此設計師通常需要讓它在和其他屏幕按鈕、元素對比的時候足夠突出，而增加按鈕尺寸是一個很顯著的方法。

從機率上來說，大按鈕通常會比小按鈕更容易被用戶注意到，被點擊到。不過，按鈕總不能無限制地放大吧？在放大按鈕的同時，你需要讓它和整個布局之間保持協調，避免整體的層次結構被破壞。如果你不知道要如何控制大小，那么可以參考主流的設計規范：蘋果的HIQ中要求CTA按鈕至少為 44×44 px，而微軟則建議至少為34×26 px。

色彩和形狀

通過尺寸差異來營造視覺吸引力只是CTA能做做到的一個方面。為了讓按鈕足夠清晰顯著，在色彩和形狀上的選擇，同樣重要。人類在色彩和形狀上的感知同樣是非常顯著的，只不過在日常生活中往往不會太注意到這些反饋。當我們的視覺感知到形狀和色彩所構成的視覺信號之時，信號傳遞到大腦，大腦會向神經元傳遞出不同的信號，分泌出荷爾蒙，在負責情緒和感情的區域作出不同的反饋。心理學認為，不同的色彩和形狀對于大腦有著不同的影響。在之前的文章中，我們對于這些內容有所涉及，下面是相關的總結：

色彩的含義：

• 紅色：自信，青春，熱情，力量
• 橙色：友善，精力充沛，熱情
• 黃色：快樂，樂觀，溫暖，警告
• 綠色：和平，成長，健康，自然
• 藍色：信任，安全，穩定
• 紫色：豪華，創意，智慧，神秘
• 黑色：可靠，高貴，復雜，經驗豐富，專業
• 白色：簡單，純潔，冷靜，純粹

形狀的含義：

• 方形和矩形：力量，紀律，勇氣，安全，可靠
• 三角形：興奮，風險，危險，平衡，穩定
• 圓形和橢圓：永恒，女性化，宇宙，魔法，神秘
• 抽象圖形：雙關，唯一性，精心制作

傳統的CTA 按鈕通常都會選擇矩形，因為這樣的按鈕更加符合人們對于按鈕概念的常規認知。而如今，更多的設計規范中會建議使用圓角矩形的CTA按鈕，因為這樣的按鈕會給人更加內化的感覺，讓人更在意其中的按鈕標簽內容，從而提升按鈕被點擊的機率。

色彩的選取則相對更復雜，這涉及到整個設計的方方面面。設計師需要考慮到整體的配色方案、用戶的潛在偏好和心理特征等因素。當然，最關鍵的一點還是按鈕的色彩要和背景有顯著的對比，能讓CTA按鈕在UI控件中很容易脫穎而出。

位置

位置的選擇對于CTA 按鈕同樣是至關重要的。因為不同的位置對于用戶而言有著巨大的差別，地段不好，在騷的色彩，再漂亮的外形，一樣不會被注意到。

大量的研究表明，用戶在瀏覽網頁之前，會通過快速的掃視來尋找他們感興趣的內容，考慮到這一點，設計師可以將最突出的、用戶最容易掃視到的位置，放置上期望用戶點擊的CTA按鈕。

用戶研究領域的先驅 Nielsen Norman Group 曾經針對這一用戶行為進行了深入的研究，為設計師和可用性設計專家們提供了更好的素材和設計依據。

簡而言之，當人們訪問某個網站的時候，尤其是初次訪問網站的時候，他們通常不會特別仔細的查看所有的內容，而是快速的掃視，找到能夠吸引他們注意力的信息，這些內容就是他們繼續停留在這個網站上的理由。通過眼動測試和不同實驗，他們發現訪問者的視覺瀏覽模式，可以歸結為幾種典型的模式。設計師 Steven Bradley 在自己的文章中，總結了這三種常見的模式：古騰堡式，Z圖模式和F圖模式。

對于信息結構層次并不那么分明的網頁，用戶常常會使用古騰堡式的瀏覽模式，用戶大范圍掃視頁面內容，整個視線路徑是一個大號的Z，其中最開始的兩個視覺駐留點就在頁頭上。

Z圖模式也不難理解，用戶從上到下，視線沿著Z字形來回掃視，用戶會左右快速掃視，視線的起點首先是左上角，行跨頂部一欄到右上角，然后向下延伸。

F圖模式，或者說是F式布局，我們就更加熟悉了。在Nielsen Norman Group 的研究當中，這種閱讀模式最為典型：

• 用戶先會沿著水平方向瀏覽，優先瀏覽內容塊的上部，這個時候的眼動構成了字母F 最上面一橫。
• 接下來視線會沿著屏幕左側向下垂直掃視，尋找段落中能引起興趣點的內容，當他們發現引起他們興趣的內容之時，繼續橫向仔細瀏覽，而通常這些內容對應的視線范圍會比第一次橫向瀏覽的范疇要更小一些，而這個視線軌跡則構成了字母F 中間的一橫。
• 接下來用戶會將視線移到屏幕左側，繼續向下瀏覽。

F圖模式常見于博客、新聞類信息量較大的網站。

了解了用戶的閱讀模式之后，CTA按鈕的放置位置應該就不難決定了。頂部和底部都是用戶實現必經的位置，放置在頁面的中央也可以，無論在F圖模式、Z圖模式還是古騰堡式中，用戶都會掃過這個位置。當然，你得讓其他的UI元素不要干擾到CTA按鈕。

微文案

微文案在CTA按鈕中的作用，表現得越來越顯著了。微文案是UI中常見的那些小段的文本，它們簡練清晰地指明功能，給予用戶以提示，驅動交互。更具體地說，微文案包括按鈕上的標簽，錯誤信息，安全說明，術語和條款，以及產品中常見的各種提示。

微文案是CTA按鈕中繞不開的組成部分。設計優秀的微文案讓CTA按鈕指向性明確，可以快速地吸引用戶的注意力。

結語

對于電商類的應用和網站而言，CTA按鈕無疑是強大的銷售工具之一，和屏幕內容的轉化率?息息相關。意識到CTA按鈕的重要性，才能有針對性地設計。

原文作者 :?Tubik Studio

譯者 :?陳子木

譯文地址：http://www.uisdc.com/powerful-cta-button-design

本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖由作者提供