干貨！我必須知道UI界面“行為調用按鈕”的設計秘密

以下內容由Mockplus團隊翻譯，用于學習交流。 Mockplus是一種更快速，更簡單的原型制作工具。

一個有效的數(shù)字產品交互系統(tǒng)由小元素及其任務和功能組成。為了構建一個豐富的交互系統(tǒng)，重要的是要注意所有小元素的設計細節(jié)。

按鈕是用戶界面的核心交互組件，在高質量的用戶體驗和網(wǎng)站和應用程序的轉換率中發(fā)揮著重要作用。 UI按鈕可根據(jù)其功能分為不同類型。本文致力于解釋“CTA”按鈕，該按鈕涵蓋了它們的本質，它們在直觀導航中的作用以及它們在業(yè)務目標中的重要性。讓我們來看看是什么讓CTA按鈕從最佳實踐中脫穎而出。

照片應用程序

什么是行為呼叫按鈕，為什么它如此重要？

行動呼吁（CTA）按鈕是網(wǎng)頁和移動用戶界面中的常見交互元素：其主要目標是誘使用戶采取某些操作來呈現(xiàn)特定頁面或屏幕的轉換，例如購買，聯(lián)系人，訂閱和更多。傳統(tǒng)上，CTA按鈕很容易被注意到，并且有許多，設計師故意創(chuàng)建它們，以便人們無法抗拒點擊它。這就是為什么它們通常以粗體字體呈現(xiàn)，并且按鈕包含一個特殊的行為調用（例如:“了解更多”或者“現(xiàn)在購買”），這鼓勵我們采取主動點擊它。

潛在客戶的生成和購買是創(chuàng)建號召性用語的基本業(yè)務目標。當按鈕被設計為吸引潛在客戶的注意力時，它可以吸引他們點擊并進入下一階段，例如填寫簡短的聯(lián)系表格或提交產品預訂。

數(shù)字代理登陸頁面

通過這種方式，網(wǎng)站訪問者和應用程序用戶可以通過銷售渠道從一個階段引導到另一個階段，以幫助他們了解有關產品或服務的更多信息。即使是專業(yè)制作的內容也可能無法保證高度的用戶參與度。如果沒有CTA按鈕，人們更有可能只是快速掃描內容然后忽略它。

有些人可能認為足夠的“行為呼叫按鈕”設計只適合大而鮮艷的顏色來實現(xiàn)他們的所有目標。然而，事實并非如此，還有許多其他方面可以確保CTA的有效性。讓我們來看看它們正確使用的實際例子。

Urban Sketcher App

什么是強大的CTA按鈕？

大小

大小是幫助劃分UI組件重要性的最常用工具之一。元素大小越大，它就越明顯。由于CTA之前的目標是引起用戶的注意，設計師經常試圖讓它們從屏幕上的其他按鈕中脫穎而出，特別是通過顯著的尺寸差異。

較大的按鈕很有可能被發(fā)現(xiàn)和點擊，但您還必須保持一些限制。一個引人注目的“行為呼叫按鈕”通常很大，可以快速找到，但不能太大，以免破壞布局的視覺組合和層次結構。市場領導者經常就其指南中按鈕的有效尺寸提供建議。例如，Apple表示移動用戶界面中的CTA按鈕應該至少為44次; 44像素，而微軟推薦至少34倍; 26像素。

美味的漢堡應用

顏色和形狀

視覺上吸引人的尺寸只是強大的CTA的一個方面。為了使按鈕更加醒目，選擇豐富的顏色和形狀非常重要。事實表明，人們的情緒和行為與視覺環(huán)境高度相關。我們的想法會對顏色和形狀做出反應，但我們通常不會注意到這些細節(jié)。當我們的眼睛感知某種顏色時，它們與大腦相連，大腦向內分泌系統(tǒng)發(fā)出信號，釋放激素，負責情緒和情緒的變化。心理科學對不同顏色和形狀如何影響我們的意識進行了具體的分支研究。在我之前的文章中，我描述了這種影響對設計解決方案的影響。以下是顏色和形狀的常見含義的簡要指南。

顏色含義：

紅色。信心，青春和力量。橙子。友好，溫暖，充滿活力。黃色。幸福，樂觀和溫暖。綠色。和平，成長和健康。藍色。信任，安全和穩(wěn)定。紫色。奢華，富有創(chuàng)意，睿智。黑色?？煽?，復雜和經驗豐富。白色。簡單，平靜，干凈。

形狀含義：

正方形和矩形的含義：紀律，力量，勇氣，安全，可靠性。三角形的含義：興奮，風險，危險，平衡，穩(wěn)定。圓形，橢圓形和橢圓形的含義：永恒，女性，宇宙，魔法，神秘。抽象形式意義：二元性，獨特性，精細化。

傳統(tǒng)上，CTA按鈕看起來像水平矩形，因為人們習慣將這種形狀看作可點擊的按鈕。此外，建議設計帶圓角的CTA，因為它們被認為具有吸引內部注意力的按鈕。顏色的選擇取決于使設計過程更復雜的各個方面。設計師需要考慮這些因素，例如作品的基本顏色，以及目標受眾的潛在偏好和心理特征。在為CTA選擇顏色時有一個條件很重要：按鈕和背景顏色應該足夠清晰，以便CTA可以從其他UI組件中脫穎而出。

約會APP登陸頁面

放置

CTA按鈕的放置對其性能至關重要。如果其他視覺方面（例如顏色和大?。┪挥谟脩粞劬o法捕捉的區(qū)域中，則可能無效。但是，您如何理解哪個職位更有效？

許多研究表明人們在閱讀網(wǎng)頁內容之前閱讀它，以了解他們是否感興趣。考慮到這一點，設計者可能知道最突出的可掃描區(qū)域并將行為調用按鈕放在用戶的視覺路徑中。

根據(jù)不同的研究，包括尼爾森諾曼集團，UXPin團隊和其他發(fā)表的文章表明，該網(wǎng)頁有幾種流行的掃描模式，包括“F”和“Z”“模式。

對于包含大量內容的網(wǎng)頁，例如博客，新聞平臺，F(xiàn)模式是最常見的掃描模式。用戶首先掃描屏幕頂部的水平線，然后向下移動頁面并讀取通常覆蓋較短區(qū)域的水平線。最后一行是左側的垂直線，用戶在段落的初始句子中找到感興趣的關鍵字。

Z模式是用于掃描未加載副本的登錄頁面或網(wǎng)頁的典型模式，并且不需要向下滾動頁面，這意味著所有核心數(shù)據(jù)在預滾動區(qū)域中可見。用戶首先從左上角掃描頁面頂部以查找重要信息，然后向下到頁面的另一側，結束頁面底部的水平線，然后再從左到右開始。

這些模式允許設計人員將CTA放置在用戶最關注的位置，例如頂角，并將其他點聚焦在頂部和底部。此外，將CTA按鈕放在布局的中心是個好主意，特別是如果它沒有超過其他UI元素。

美食頁面

顯微術

Microcopy在行為調用的效率中起著重要作用。它被定義為一個小的文本文本提示，可以幫助用戶執(zhí)行某些操作。更具體地說，它包括按鈕和菜單副本，錯誤消息，安全說明，條款和條件以及任何類型的產品使用說明。

CTA Microcopy實際上是一個看起來很小的元素，可以快速讓用戶突然清楚，告訴用戶如果他們點擊按鈕會觸發(fā)什么。功能強大的CTA Microcopy通常很短但一致，因此可以迅速吸引用戶的注意力。

明亮的Vibe日歷

“行為呼叫按鈕“是電子商務中最強大的銷售工具之一，也是影響頁面或屏幕轉換率的重要因素之一。設計師需要了解CTA的重要性，并密切關注影響其性能的所有細節(jié)。

原作者：Tubik Studio

原始地址：https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2 Mockplus是一個原型，更快，更簡單。立即下載Mockplus，享受免費的原型設計之旅。

« 沃森的黃金十年結束了?？梢源蛸€電子商務迎來復興嗎？ | 北斗科技朱永敏：站在物聯(lián)網(wǎng)的風口，誰能成為時代的貓頭鷹？ »