以下內(nèi)容由Mockplus團(tuán)隊翻譯整理,，僅供學(xué)習(xí)交流,，Mockplus是更快更簡單的原型設(shè)計工具,。

數(shù)字產(chǎn)品的有效交互系統(tǒng)由具有其任務(wù)和功能的小元素組成。為了建立豐富的交互系統(tǒng),，關(guān)注所有小元素的設(shè)計細(xì)節(jié)至關(guān)重要,。

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

Photo App

什么是行為號召按鈕？為什么它如此重要,？

行為號召（CTA）按鈕是網(wǎng)頁和移動用戶界面中的常見互動元素：其主要目標(biāo)是誘使用戶采取某些操作,，為特定頁面或屏幕呈現(xiàn)轉(zhuǎn)化,，例如購買,，聯(lián)系 ,，訂閱等,。

傳統(tǒng)上,，CTA按鈕很容易被注意到,，甚至有很多,，設(shè)計者故意這樣創(chuàng)建它們,，以使人們無法抗拒點擊它,。這也是為什么它們通常都是以粗體字體呈現(xiàn)的原因，按鈕中包含了一種特殊的行為召喚(例如:“學(xué)習(xí)更多”或“現(xiàn)在購買”),，這就鼓勵我們主動去點擊它。

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

數(shù)字機(jī)構(gòu)的著陸頁

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

有些人可能認(rèn)為足夠的“行為號召按鈕”設(shè)計僅適用于大尺寸和鮮艷的顏色,，以實現(xiàn)其所有目標(biāo)。不過,，事實并非如此，確保CTA的有效性還有很多其它方面,。讓我們看看他們適當(dāng)使用的實際例子,。

Urban Sketcher App

是什么造就了強(qiáng)大的CTA按鈕,？

尺寸

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

尺寸大的按鈕有很高的機(jī)會被發(fā)現(xiàn)和點擊,，但你也必須保持一些限制,。一個引人注目的“行為號召按鈕”通常是足夠大,，可以被快速找到,，但不能太大,，以免布局的視覺組合和層次結(jié)構(gòu)受到破壞,。市場領(lǐng)導(dǎo)者通常會在其準(zhǔn)則中提供有關(guān)按鈕有效大小的建議,。例如，蘋果公司表示,，移動用戶界面中的CTA按鈕應(yīng)至少為44×44像素，而微軟推薦至少為34×26像素,。

Tasty Burger App

顏色和形狀

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

顏色含義：

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

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

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

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

• 藍(lán)色,。 信任,，安全和穩(wěn)定,。

• 紫色,。 豪華,，富有創(chuàng)意,，明智,。

• 黑色,。 可靠，復(fù)雜,，經(jīng)驗豐富,。

• 白色,。 簡單，冷靜,，干凈,。

形狀含義：

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

• 三角形含義：興奮，風(fēng)險,，危險,，平衡,，穩(wěn)定。

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

• 抽象形意義：二重性,，唯一性，精心制作,。

傳統(tǒng)上,，CTA按鈕看起來像水平矩形，因為人們習(xí)慣將這種形狀視為可點擊的按鈕,。此外,，建議設(shè)計具有圓角的CTA,，因為它們被認(rèn)為是具有吸引內(nèi)部注意力的按鈕。

顏色的選擇取決于使設(shè)計過程更復(fù)雜的各個方面,。設(shè)計師需要充分考慮以下這些因素,，如作品的基本色彩，以及目標(biāo)受眾的潛在偏好和心理特征,。在為CTA選擇顏色時有一個條件非常重要：那就是按鈕和背景顏色應(yīng)該足夠鮮明,，以便CTA可以從其他UI組件中脫穎而出。

約會APP著陸頁

放置

CTA按鈕的放置對他們的性能至關(guān)重要,。如果他們位于用戶眼睛無法捕捉到的區(qū)域，則其他視覺方面（如顏色和尺寸）可能無法有效工作,。但是如何理解什么樣的位置更加有效呢？

大量研究表明,，在閱讀網(wǎng)頁內(nèi)容之前,，人們會掃描它以了解他們是否感興趣?？紤]到這一事實,，設(shè)計人員可能會了解最突出的可掃描區(qū)域，并將行為號召按鈕置于用戶的可視路徑中。

根據(jù)不同的研究,，包括尼爾森諾曼集團(tuán),，UXPin團(tuán)隊等發(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è)計師將CTA放置在用戶最受關(guān)注的位置,，例如頂角，并將其他要點注意力放在頂部和底部,。另外,，將CTA按鈕放置在布局的中心也是一個好方法，尤其是當(dāng)它不與其他UI元素信息過載的時候,。

Gourmet 網(wǎng)頁

Microcopy

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

CTA Microcopy實際上是一個可以迅速讓用戶豁然開朗的被小看的元素,，它告訴用戶如果點擊按鈕他們將觸發(fā)什么,。強(qiáng)大的CTA Microcopy通常很短但一致,，因此可以快速吸引用戶的注意力,。

Bright Vibe 日歷

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

原文作者：Tubik Studio

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

  Mockplus做原型，更快更簡單,，現(xiàn)在下載Mockplus,，免費(fèi)體驗暢快的原型設(shè)計之旅。