以下內容由Mockplus（摹客）團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

網頁和軟件應用之類數字產品的有效交互系統一般是由擁有各種任務和功能的小元素構成。而為創建更加完整流暢的交互系統，Web和軟件應用的每一個細節都應該被重視。這一點必須牢記。

按鈕，作為Web和軟件應用用戶界面最核心的交互元素之一，對於提升用戶體驗，增加網頁和軟件應用轉化率，發揮著非常重要的作用。而這些界面按鈕因其功能的不同又可以劃分為多種不同的類型。其中最為設計師重視並高頻使用的一類，就是一種名為“call-to-action”(CTA)的按鈕。無論就其本質而言，還是從其在設計直觀的界面導航中發揮的作用以及對實現商務目標的重要性方面而言，它在網頁和軟件的界面設計中，都是不可或缺的。

所以，我們如何才能讓界面的CAT按鈕設計從眾多的優質設計中脫穎而出呢？以下為大家詳細的講解：

首先，什麽是CTA按鈕，它為何在界面設計中如此重要？

CTA按鈕（又名行為召喚按鈕）是Web和移動軟件應用中最常用的交互元素：其主要作用就是引導人們做出某些特定行為，例如購買，聯系或訂閱等。

一般而言，CTA按鈕很容易引起用戶註意。所以，一些界面設計師有意通過按鈕設計引導甚至誘導用戶執行某些特定行為，讓他們抑制不住而點擊。這也就解釋了為什麽CTA按鈕時常被設計成為包含有特定微文案的粗體按鈕（例如“詳情閱讀”或“立即購買”），以吸引和鼓勵用戶點擊。

而且，設計師之所以為界面設計和創建各類行為召喚按鈕，其所要達到的基本業務目標是開發潛在客戶，增加產品銷量。當一個CTA按鈕足夠吸引潛在用戶註意力時，它就能夠刺激用戶點擊，從而引導用戶進入下一個階段。比如填寫簡潔的聯系表單或完成產品預訂等。

如此，網站訪問者或軟件用戶就可以通過各類銷售渠道逐步從一個階段進入另一個階段，了解更多產品或服務的細節，從而增加產品銷量。雖然某些情況下，最專業，最優質的設計並不是高用戶參與度的保證，但是，界面設計中如若沒有CTA按鈕，用戶則更有可能簡單掃一下，就直接離開了，更別提增加銷量。所以，界面設計之中，CTA按鈕的設計非常重要。

有人認為，要設計足夠優質的CTA按鈕，只需使用大尺寸的按鈕和明亮的顏色，就能實現其吸引用戶的目標。然而，事實上，實現CTA按鈕有效性的方式遠遠不止這些。

那麽這些方式具體是什麽呢？我們如何才能更加恰當地選擇和使用它們呢？

如何讓CTA按鈕設計更有召喚力？

尺寸

尺寸，是設計師們最常用於劃分Web或軟件界面各類組件重要性的方式之一。組件尺寸越大，就越能引人註意。加之，CAT按鈕設計的首要目標本就是吸引用戶註意。所以，設計師們往往會嘗試通過放大CAT按鈕尺寸，讓其與界面剩下的按鈕和元素形成鮮明對比，從而使其更加顯著突出。

盡管尺寸稍大的CTA按鈕被用戶註意並點擊的機率更大，但並不是尺寸越大越好。事實上，一個優質且極具吸引力的行為召喚按鈕，通常應該是大到能夠快速吸引用戶註意，同時又不會太大，從而影響甚至破壞整個界面的視覺效果和層級布局。這也是為什麽，市場管理者時常會建議，為界面添加更加協調且有效的按鈕尺寸的原因。比如，蘋果建議移動端界面設計的CAT按鈕尺寸至少為44×44 px，而微軟則是建議至少為34×26 px。

色彩和形狀

通過尺寸差異來營造視覺吸引力，僅僅只是一款優質的CTA按鈕設計能夠實現地效果的一個方面。為了讓按鈕更加顯著突出，其色彩和形狀的選擇也同樣重要。總所周知，人類的情緒和行為與周圍的環境，尤其是視覺環境，息息相關。我們的大腦對於色彩和形狀的感知和反應也非常迅速。一般而言，當我們的眼睛捕捉到一種色彩之後，它會迅速地向大腦傳遞信息， 從而刺激大腦分泌系統發出信號，產生一種名為荷爾蒙的激素，最終引起我們情緒和情感的變化。而且，心理學方面也設置了專門的學科分支，集中研究不同顏色和形狀對於人類意識的影響。

總之，無論是顏色和形狀，對於增強CAT按鈕的吸引力也是至關重要的。

以下為大家簡單介紹一些常見顏色和形狀的含義：

常用色彩的含義：

*紅色：自信，青春，力量

*橙色：友善，熱情，活力

*黃色：快樂，樂觀，溫暖

*綠色：祥和，成長，健康

*藍色：信任，安全，穩定

*紫色：豪華，創意，智慧

*黑色：可靠，老練，經驗豐富

*白色：簡單，冷靜，純潔

常用形狀的含義：

*正方形和長方形：自律，力量，勇氣，安全，可靠

*三角形：興奮，風險，危險，平衡，穩定

*圓形和橢圓：永恒，女性，宇宙，魔法，神秘

*抽象圖形：雙重性，獨特性，精心打造

傳統的CTA按鈕通常會選擇矩形，這因為已然已然習慣將這種形狀視為可點擊的按鈕。而且，隨著設計規範的日益發展和更叠，也有更多的設計規範建議添加一些帶有圓角的矩形CTA按鈕。因為這樣的設計，會使按鈕更加的內化，讓用戶更註意按鈕內部的文字或內容，從而提升按鈕點擊率。

然而，顏色的選擇則取決於方方面面的因素，更加復雜而多變。設計師在設計之中需要考慮到各個方面的因素，比如整個設計的基本配色，目標用戶的偏好以及心理特征等等。同時，在選擇界面CTA按鈕的顏色時，也需要牢記一個點：利用按鈕與界面背景的強烈對比，讓CTA按其它其它界面部件中脫穎而出，從而更具召喚力。

位置

CTA按鈕在界面中擺放的位置對於其功能的實現，作用也是相當顯著的。如若將其放置在界面內用戶眼睛無法觸及的區域，那麽設計師希望達到的視覺效果，例如利用按鈕色彩和尺寸的獨特設計吸引用戶註意力等，就很難實現。但具體如何放置CTA按鈕才會更高效呢？

大量研究顯示，在瀏覽網頁之前，人們時常會預先快速掃視整個頁面，以判斷頁面內容是否有趣或實用。所以，考慮到這一點，設計師需要研究和發現界面中最突出，且用戶最容易掃視的區域，用以放置行為召喚按鈕，引導用戶點擊。

而且，根據不同研究（尤其是用戶研究領域權威Nielsen Norman Group的研究）顯示，用戶總是在網頁瀏覽中慣用幾種閱讀模式，例如極具代表性的“F”和“Z”模式：

“F”模式是用戶閱讀信息類網頁，比如博客或新聞平臺等，最常使用地閱讀模式。在網頁掃描中，用戶首先會沿著水平方向閱讀頁面頂部的內容。然後緊接著下移一部分區域，閱讀涵蓋區域較少的內容。最後，用戶會將視線移動到頁面左側，繼續垂直瀏覽段落的首句，搜尋需要的關鍵詞進行閱讀。這樣，就形成了一個大大的“F”的閱讀軌跡，所以常被稱作“F”模式。

“Z”模式則是用戶瀏覽登錄頁面或網頁的典型模式。由於這類登錄頁面或網頁的所有重要內容都集中顯示在其著陸頁內，用戶無需滾動即可閱讀所需內容。所以，用戶在瀏覽這類網頁時，首先會從頁面左上角的內容開始閱讀，查找重要信息。然後沿著對角線向下移動到另一角。最後，在頁面底部沿著水平方向從左至右閱讀，直至結束。從而，形成了一個大大的“Z”的閱讀軌跡，所以常被稱作“Z”模式。

在學習和了解這些用戶常用的閱讀模式之後，CTA按鈕的位置選擇就不再是難事，例如將其放置在頁面的頂部或底部。當然，在你的CTA按鈕不會受到其他界面部件的幹擾的情況下，你也可以將其放置在頁面的中部，所能達到的效果也是非常明顯的。

微文案

微文案在CTA按鈕設計中的作用也日益重要。 那CTA按鈕的微文案具體指的是什麽呢？答案很簡單。微文案，顧名思義，就是CTA按鈕內的小段文本，給予用戶提示，以刺激用戶點擊。更具體地說，微文案包括按鈕內的標簽，報錯信息，安全提示，條款和條件以及各種產品相關說明等等。

CTA按鈕微文案的添加實則是為了告訴用戶，當點擊按鈕時，他們會得到什麽。優秀高效的按鈕文案時常是簡潔且指向明確，以便迅速吸引用戶的註意力。

結語

作為電子商務類軟件和網頁最有效的銷售工具之一，行為召喚（CTA）按鈕也是提升頁面或網頁轉化率的重要因素。所以，在界面設計中，設計師不僅需要認識到CTA按鈕的重要性，同時也需要深思和推敲其每一個細節，例如上面所分析到的尺寸，色彩，形狀，頁面位置以及微文案等等，力求實現其最佳效果。

當然，如若確實不太清楚，設計的CTA按鈕能否以最快的速度引起用戶註意，並引導其點擊， 也可選擇一款優秀的原型工具（例如頗受用戶青睞地簡單快速的原型工具，Mockplus），將其制作成更加直觀的交互原型，收集用戶反饋，從而及時做出修改和提升。

作者：Tubik Studio

原文地址：https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2

界面設計中如何增強CTA按鈕召喚力？