干貨！我必須知道UI界面“行為調(diào)用按鈕”的設(shè)計(jì)秘密

以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯，用于學(xué)習(xí)交流。 Mockplus是一種更快速，更簡單的原型制作工具。

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

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

照片應(yīng)用程序

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

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

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

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

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

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

Urban Sketcher App

什么是強(qiáng)大的CTA按鈕？

大小

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

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

美味的漢堡應(yīng)用

顏色和形狀

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

顏色含義：

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

形狀含義：

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

傳統(tǒng)上，CTA按鈕看起來像水平矩形，因?yàn)槿藗兞?xí)慣將這種形狀看作可點(diǎn)擊的按鈕。此外，建議設(shè)計(jì)帶圓角的CTA，因?yàn)樗鼈儽徽J(rèn)為具有吸引內(nèi)部注意力的按鈕。顏色的選擇取決于使設(shè)計(jì)過程更復(fù)雜的各個(gè)方面。設(shè)計(jì)師需要考慮這些因素，例如作品的基本顏色，以及目標(biāo)受眾的潛在偏好和心理特征。在為CTA選擇顏色時(shí)有一個(gè)條件很重要：按鈕和背景顏色應(yīng)該足夠清晰，以便CTA可以從其他UI組件中脫穎而出。

約會APP登陸頁面

放置

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

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

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

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

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

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

美食頁面

顯微術(shù)

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

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

明亮的Vibe日歷

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

原作者：Tubik Studio

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

« 沃森的黃金十年結(jié)束了。可以打賭電子商務(wù)迎來復(fù)興嗎？ | 北斗科技朱永敏：站在物聯(lián)網(wǎng)的風(fēng)口，誰能成為時(shí)代的貓頭鷹？ »