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