乾貨！不得不知的UI界面中「行爲召喚按鈕」設計祕訣

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

數字產品的有效交互系統由具備其任務和功能的小元素組成。爲了創建豐富的交互系統，關注全部小元素的設計細節相當重要。

按鈕是用戶界面的核心交互組件，它在質量用戶體驗以及網站和應用程序的轉換率方面發揮着重要做用。UI按鈕根據其功能的不一樣，能夠分爲不一樣的類型。本篇文章致力於講解「行爲號召（CTA）按鈕」，涵蓋了他們的本質，在直覺導航中的角色以及它在業務目標中的重要性。讓咱們一塊兒來看看是什麼讓CTA按鈕從最佳實踐中脫穎而出。

Photo App

什麼是行爲號召按鈕？爲何它如此重要？

行爲號召（CTA）按鈕是網頁和移動用戶界面中的常見互動元素：其主要目標是誘使用戶採起某些操做，爲特定頁面或屏幕呈現轉化，例如購買，聯繫 ，訂閱等。

傳統上，CTA按鈕很容易被注意到，甚至有不少，設計者故意這樣建立它們，以令人們沒法抗拒點擊它。這也是爲何它們一般都是以粗體字體呈現的緣由，按鈕中包含了一種特殊的行爲召喚(例如:「學習更多」或「如今購買」)，這就鼓勵咱們主動去點擊它。

潛在客戶的生成和購買是建立號召性行動的基本業務目標。當一個按鈕設計足夠吸引潛在客戶的注意力時，它能夠吸引他們點擊並進入下一個階段，好比填寫一個簡短的聯繫表單或提交產品的預訂。

數字機構的着陸頁

經過這種方式，網站訪問者和應用用戶能夠經過銷售渠道從一個階段引導到另外一個階段，幫助他們瞭解有關產品或服務的詳細信息。即便是專業製做的內容也可能沒法保證用戶的高度參與度。若是沒有CTA按鈕，人們更有可能只是快速掃描內容，而後置之不顧。

有些人可能認爲足夠的「行爲號召按鈕」設計僅適用於大尺寸和鮮豔的顏色，以實現其全部目標。不過，事實並不是如此，確保CTA的有效性還有不少其它方面。讓咱們看看他們適當使用的實際例子。

Urban Sketcher App

是什麼造就了強大的CTA按鈕？

尺寸

尺寸大小是幫助按照其重要性劃分UI組件的最經常使用工具之一。元素尺寸越大，它就變得越明顯。因爲CTA的先前目標是引發用戶的注意，所以設計師一般會試圖讓它們在屏幕上的其它按鈕中脫穎而出，特別是經過顯著的尺寸差異。

尺寸大的按鈕有很高的機會被發現和點擊，但你也必須保持一些限制。一個引人注目的「行爲號召按鈕」一般是足夠大，能夠被快速找到，但不能太大，以避免佈局的視覺組合和層次結構受到破壞。市場領導者一般會在其準則中提供有關按鈕有效大小的建議。例如，蘋果公司表示，移動用戶界面中的CTA按鈕應至少爲44×44像素，而微軟推薦至少爲34×26像素。

Tasty Burger App

顏色和形狀

視覺上有吸引力的尺寸只是強大CTA的一個方面。爲了讓按鈕更明顯，選擇豐富的顏色和形狀相當重要。事實代表人的情緒和行爲與視覺環境是高度相關的。咱們的思惟對顏色和形狀有反應，但咱們一般不會注意到這些細節。當咱們的眼睛察覺到某一種顏色時，它們與大腦相連，同時大腦向內分泌系統發出信號，釋放荷爾蒙，負責心情和情緒的變化。心理科學對不一樣的顏色和形狀是如何影響咱們的意識有着具體的分支研究。在我之前的文章中，我描述了這種影響對設計解決方案的做用。如下是關於顏色和形狀具備的常見含義的簡要指南。

顏色含義：

• 紅色。 自信，青春和力量。

• 橙色。 友善，溫暖，充滿活力。

• 黃色。 幸福，樂觀和溫暖。

• 綠色。 和平，成長和健康。

• 藍色。 信任，安全和穩定。

• 紫色。 豪華，富有創意，明智。

• 黑色。 可靠，複雜，經驗豐富。

• 白色。 簡單，冷靜，乾淨。

形狀含義：

• 正方形和矩形的含義：紀律，力量，勇氣，安全性，可靠性。

• 三角形含義：興奮，風險，危險，平衡，穩定。

• 圓形，卵形和橢圓形的含義：永恆，女性，宇宙，魔法，神祕。

• 抽象形意義：二重性，惟一性，精心製做。

傳統上，CTA按鈕看起來像水平矩形，由於人們習慣將這種形狀視爲可點擊的按鈕。此外，建議設計具備圓角的CTA，由於它們被認爲是具備吸引內部注意力的按鈕。

顏色的選擇取決於使設計過程更復雜的各個方面。設計師須要充分考慮如下這些因素，如做品的基本色彩，以及目標受衆的潛在偏好和心理特徵。在爲CTA選擇顏色時有一個條件很是重要：那就是按鈕和背景顏色應該足夠鮮明，以便CTA能夠從其餘UI組件中脫穎而出。

約會APP着陸頁

放置

CTA按鈕的放置對他們的性能相當重要。若是他們位於用戶眼睛沒法捕捉到的區域，則其餘視覺方面（如顏色和尺寸）可能沒法有效工做。可是如何理解什麼樣的位置更加有效呢？

大量研究代表，在閱讀網頁內容以前，人們會掃描它以瞭解他們是否感興趣。考慮到這一事實，設計人員可能會了解最突出的可掃描區域，並將行爲號召按鈕置於用戶的可視路徑中。

根據不一樣的研究，包括尼爾森諾曼集團，UXPin團隊等發表的文章代表，網頁有幾種流行的掃描模式，其中包括「F」和「Z」模式。

對於包含大量內容的網頁，例如博客，新聞平臺，F模式是人們最多見的掃描模式。用戶首先掃描屏幕頂部的水平線，而後向下移動頁面並讀取一般覆蓋較短區域的水平線。 最後一個是在左側的垂直線，在那裏，用戶在段落的初始句子中查找本身感興趣的關鍵字。

Z模式是一種典型的掃描着陸頁或未加載副本的網頁的模式，而且不須要向下滾動頁面，這意味着全部的核心數據在預滾動區域中均可見。用戶首先從左上角開始掃描頁面頂部，尋找重要信息，而後下到另外一側的對角，結束在頁面底部的水平線，而後再次從左到右開始。

這些模式容許設計師將CTA放置在用戶最受關注的位置，例如頂角，並將其餘要點注意力放在頂部和底部。另外，將CTA按鈕放置在佈局的中心也是一個好方法，尤爲是當它不與其餘UI元素信息過載的時候。

Gourmet 網頁

Microcopy

Microcopy在行爲號召的效率方面發揮着重要做用。它被定義爲幫助用戶作某些操做的小段文字文本提示。更具體地說，它包括按鈕和菜單副本，錯誤消息，安全說明，條款和條件，以及任何類型的產品使用說明。

CTA Microcopy其實是一個能夠迅速讓用戶豁然開朗的被小看的元素，它告訴用戶若是點擊按鈕他們將觸發什麼。強大的CTA Microcopy一般很短但一致，所以能夠快速吸引用戶的注意力。

Bright Vibe 日曆

「行爲號召按鈕」是電子商務中最強大的銷售工具之一，也是影響頁面或屏幕轉換率的重要因素之一。設計師須要瞭解CTA的重要性，並深切關注影響其表現的全部細節。 

原文做者：Tubik Studio

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

  Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。