按鈕是用戶界面的核心交互組件，它在質量用戶體驗以及網站和應用程序的轉換率方面發揮著重要作用。

數字產品的有效交互系統由具有其任務和功能的小元素組成。為了建立豐富的交互系統，關注所有小元素的設計細節至關重要。

按鈕是用戶界面的核心交互組件，它在質量用戶體驗以及網站和應用程序的轉換率方面發揮著重要作用。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 團隊翻譯發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自，基于CC0協議