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

如下內容由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