今天的文章，我們來(lái)就來(lái)簡(jiǎn)單探討一下CTA按鈕的相關(guān)問(wèn)題。enjoy~

APP和網(wǎng)站這樣的數(shù)字產(chǎn)品中所包含的有效的交互系統(tǒng)，通常是由包含不同任務(wù)和功能的小元素組合到一起的。想要讓整套交互系統(tǒng)無(wú)縫順暢地運(yùn)行起來(lái)，細(xì)節(jié)的把控是非常有必要的。

在諸多的交互控件當(dāng)中，按鈕是最常見(jiàn)，也是最核心的交互元素之一，它的概念源自于現(xiàn)實(shí)世界，它存在的歷史幾乎和GUI的歷史一樣長(zhǎng)。按鈕設(shè)計(jì)得好不好，對(duì)于整個(gè)UX的轉(zhuǎn)化率而言，有著非常直接的影響。在網(wǎng)頁(yè)和APP的界面設(shè)計(jì)當(dāng)中，影響用戶(hù)體驗(yàn)和轉(zhuǎn)化率最大的是CTA按鈕，在很多情況下，CTA按鈕都被UX設(shè)計(jì)師和和UI設(shè)計(jì)師所推崇，被視為許多UI/UX解決方案中的最佳實(shí)踐。今天的文章，我們來(lái)就來(lái)簡(jiǎn)單探討一下CTA按鈕的相關(guān)問(wèn)題。

什么是CTA按鈕？它為何如此重要？

CTA 是 Call to action 的縮寫(xiě)，中文通常稱(chēng)之為行為召喚，CTA按鈕即為行為召喚按鈕。當(dāng)設(shè)計(jì)師有意識(shí)地通過(guò)設(shè)計(jì)去引導(dǎo)甚至誘導(dǎo)用戶(hù)去執(zhí)行特定的操作，諸如點(diǎn)擊按鈕、留下聯(lián)絡(luò)方式或者發(fā)生購(gòu)買(mǎi)行為，都算是行為召喚。

傳統(tǒng)的CTA按鈕很容易被注意到，設(shè)計(jì)師故意創(chuàng)造出這種“醒目”的局面，要的就是讓用戶(hù)抑制不住點(diǎn)擊的沖動(dòng)。為了達(dá)到這樣的目的，設(shè)計(jì)師通常會(huì)在按鈕上搭配特定的行為召喚用語(yǔ)，比如“了解更多”或者“現(xiàn)在購(gòu)買(mǎi)”，或明或暗地鼓勵(lì)、推動(dòng)用戶(hù)去執(zhí)行操作。

行為召喚這一UX設(shè)計(jì)手段的主要目的就是催生交互、行為，提升轉(zhuǎn)化，達(dá)成業(yè)務(wù)目標(biāo)。當(dāng)一個(gè)按鈕設(shè)計(jì)得足夠吸引潛在用戶(hù)注意力的時(shí)候，它就具備了引導(dǎo)用戶(hù)進(jìn)入下一個(gè)階段的可能性了。當(dāng)用戶(hù)選擇點(diǎn)擊按鈕，填寫(xiě)表單，下單購(gòu)買(mǎi)的時(shí)候，這個(gè)CTA的目的就達(dá)到了。

通過(guò)這樣一個(gè)又一個(gè)行為召喚的設(shè)計(jì)，用戶(hù)在網(wǎng)站和APP中逐步走入不同的階段，進(jìn)入不同的環(huán)節(jié)，了解產(chǎn)品，選擇服務(wù)，執(zhí)行操作，完成任務(wù)。即使是最專(zhuān)業(yè)最優(yōu)質(zhì)的內(nèi)容也無(wú)法保證用戶(hù)時(shí)刻保持高度參與，如果沒(méi)有CTA按鈕，用戶(hù)可能只是簡(jiǎn)單掃一眼，然后離開(kāi)。正如同我們常說(shuō)的，這個(gè)信息爆炸的年代酒香也怕巷子深。

有些人可能認(rèn)為，一個(gè)足夠優(yōu)秀的CTA按鈕只需要尺寸夠大色彩夠亮就行了，實(shí)際不然，想要保證行為召喚的轉(zhuǎn)化率，需要考慮的方方面面并不少。

哪些因素成就了CTA按鈕？

尺寸

通過(guò)尺寸大小來(lái)劃分元素重要性是UI設(shè)計(jì)中常用的手段。元素越大，重要性越高，這個(gè)邏輯很明晰。由于CTA 按鈕的目標(biāo)是引起用戶(hù)的注意，因此設(shè)計(jì)師通常需要讓它在和其他屏幕按鈕、元素對(duì)比的時(shí)候足夠突出，而增加按鈕尺寸是一個(gè)很顯著的方法。

從機(jī)率上來(lái)說(shuō)，大按鈕通常會(huì)比小按鈕更容易被用戶(hù)注意到，被點(diǎn)擊到。不過(guò)，按鈕總不能無(wú)限制地放大吧？在放大按鈕的同時(shí)，你需要讓它和整個(gè)布局之間保持協(xié)調(diào)，避免整體的層次結(jié)構(gòu)被破壞。如果你不知道要如何控制大小，那么可以參考主流的設(shè)計(jì)規(guī)范：蘋(píng)果的HIQ中要求CTA按鈕至少為 44×44 px，而微軟則建議至少為34×26 px。

色彩和形狀

通過(guò)尺寸差異來(lái)營(yíng)造視覺(jué)吸引力只是CTA能做做到的一個(gè)方面。為了讓按鈕足夠清晰顯著，在色彩和形狀上的選擇，同樣重要。人類(lèi)在色彩和形狀上的感知同樣是非常顯著的，只不過(guò)在日常生活中往往不會(huì)太注意到這些反饋。當(dāng)我們的視覺(jué)感知到形狀和色彩所構(gòu)成的視覺(jué)信號(hào)之時(shí)，信號(hào)傳遞到大腦，大腦會(huì)向神經(jīng)元傳遞出不同的信號(hào)，分泌出荷爾蒙，在負(fù)責(zé)情緒和感情的區(qū)域作出不同的反饋。心理學(xué)認(rèn)為，不同的色彩和形狀對(duì)于大腦有著不同的影響。在之前的文章中，我們對(duì)于這些內(nèi)容有所涉及，下面是相關(guān)的總結(jié)：

色彩的含義：

• 紅色：自信，青春，熱情，力量
• 橙色：友善，精力充沛，熱情
• 黃色：快樂(lè)，樂(lè)觀(guān)，溫暖，警告
• 綠色：和平，成長(zhǎng)，健康，自然
• 藍(lán)色：信任，安全，穩(wěn)定
• 紫色：豪華，創(chuàng)意，智慧，神秘
• 黑色：可靠，高貴，復(fù)雜，經(jīng)驗(yàn)豐富，專(zhuān)業(yè)
• 白色：簡(jiǎn)單，純潔，冷靜，純粹

形狀的含義：

• 方形和矩形：力量，紀(jì)律，勇氣，安全，可靠
• 三角形：興奮，風(fēng)險(xiǎn)，危險(xiǎn)，平衡，穩(wěn)定
• 圓形和橢圓：永恒，女性化，宇宙，魔法，神秘
• 抽象圖形：雙關(guān)，唯一性，精心制作

傳統(tǒng)的CTA 按鈕通常都會(huì)選擇矩形，因?yàn)檫@樣的按鈕更加符合人們對(duì)于按鈕概念的常規(guī)認(rèn)知。而如今，更多的設(shè)計(jì)規(guī)范中會(huì)建議使用圓角矩形的CTA按鈕，因?yàn)檫@樣的按鈕會(huì)給人更加內(nèi)化的感覺(jué)，讓人更在意其中的按鈕標(biāo)簽內(nèi)容，從而提升按鈕被點(diǎn)擊的機(jī)率。

色彩的選取則相對(duì)更復(fù)雜，這涉及到整個(gè)設(shè)計(jì)的方方面面。設(shè)計(jì)師需要考慮到整體的配色方案、用戶(hù)的潛在偏好和心理特征等因素。當(dāng)然，最關(guān)鍵的一點(diǎn)還是按鈕的色彩要和背景有顯著的對(duì)比，能讓CTA按鈕在UI控件中很容易脫穎而出。

位置

位置的選擇對(duì)于CTA 按鈕同樣是至關(guān)重要的。因?yàn)椴煌奈恢脤?duì)于用戶(hù)而言有著巨大的差別，地段不好，在騷的色彩，再漂亮的外形，一樣不會(huì)被注意到。

大量的研究表明，用戶(hù)在瀏覽網(wǎng)頁(yè)之前，會(huì)通過(guò)快速的掃視來(lái)尋找他們感興趣的內(nèi)容，考慮到這一點(diǎn)，設(shè)計(jì)師可以將最突出的、用戶(hù)最容易掃視到的位置，放置上期望用戶(hù)點(diǎn)擊的CTA按鈕。

用戶(hù)研究領(lǐng)域的先驅(qū) Nielsen Norman Group 曾經(jīng)針對(duì)這一用戶(hù)行為進(jìn)行了深入的研究，為設(shè)計(jì)師和可用性設(shè)計(jì)專(zhuān)家們提供了更好的素材和設(shè)計(jì)依據(jù)。

簡(jiǎn)而言之，當(dāng)人們?cè)L問(wèn)某個(gè)網(wǎng)站的時(shí)候，尤其是初次訪(fǎng)問(wèn)網(wǎng)站的時(shí)候，他們通常不會(huì)特別仔細(xì)的查看所有的內(nèi)容，而是快速的掃視，找到能夠吸引他們注意力的信息，這些內(nèi)容就是他們繼續(xù)停留在這個(gè)網(wǎng)站上的理由。通過(guò)眼動(dòng)測(cè)試和不同實(shí)驗(yàn)，他們發(fā)現(xiàn)訪(fǎng)問(wèn)者的視覺(jué)瀏覽模式，可以歸結(jié)為幾種典型的模式。設(shè)計(jì)師 Steven Bradley 在自己的文章中，總結(jié)了這三種常見(jiàn)的模式：古騰堡式，Z圖模式和F圖模式。

對(duì)于信息結(jié)構(gòu)層次并不那么分明的網(wǎng)頁(yè)，用戶(hù)常常會(huì)使用古騰堡式的瀏覽模式，用戶(hù)大范圍掃視頁(yè)面內(nèi)容，整個(gè)視線(xiàn)路徑是一個(gè)大號(hào)的Z，其中最開(kāi)始的兩個(gè)視覺(jué)駐留點(diǎn)就在頁(yè)頭上。

Z圖模式也不難理解，用戶(hù)從上到下，視線(xiàn)沿著Z字形來(lái)回掃視，用戶(hù)會(huì)左右快速掃視，視線(xiàn)的起點(diǎn)首先是左上角，行跨頂部一欄到右上角，然后向下延伸。

F圖模式，或者說(shuō)是F式布局，我們就更加熟悉了。在Nielsen Norman Group 的研究當(dāng)中，這種閱讀模式最為典型：

• 用戶(hù)先會(huì)沿著水平方向?yàn)g覽，優(yōu)先瀏覽內(nèi)容塊的上部，這個(gè)時(shí)候的眼動(dòng)構(gòu)成了字母F 最上面一橫。
• 接下來(lái)視線(xiàn)會(huì)沿著屏幕左側(cè)向下垂直掃視，尋找段落中能引起興趣點(diǎn)的內(nèi)容，當(dāng)他們發(fā)現(xiàn)引起他們興趣的內(nèi)容之時(shí)，繼續(xù)橫向仔細(xì)瀏覽，而通常這些內(nèi)容對(duì)應(yīng)的視線(xiàn)范圍會(huì)比第一次橫向?yàn)g覽的范疇要更小一些，而這個(gè)視線(xiàn)軌跡則構(gòu)成了字母F 中間的一橫。
• 接下來(lái)用戶(hù)會(huì)將視線(xiàn)移到屏幕左側(cè)，繼續(xù)向下瀏覽。

F圖模式常見(jiàn)于博客、新聞?lì)愋畔⒘枯^大的網(wǎng)站。

了解了用戶(hù)的閱讀模式之后，CTA按鈕的放置位置應(yīng)該就不難決定了。頂部和底部都是用戶(hù)實(shí)現(xiàn)必經(jīng)的位置，放置在頁(yè)面的中央也可以，無(wú)論在F圖模式、Z圖模式還是古騰堡式中，用戶(hù)都會(huì)掃過(guò)這個(gè)位置。當(dāng)然，你得讓其他的UI元素不要干擾到CTA按鈕。

微文案

微文案在CTA按鈕中的作用，表現(xiàn)得越來(lái)越顯著了。微文案是UI中常見(jiàn)的那些小段的文本，它們簡(jiǎn)練清晰地指明功能，給予用戶(hù)以提示，驅(qū)動(dòng)交互。更具體地說(shuō)，微文案包括按鈕上的標(biāo)簽，錯(cuò)誤信息，安全說(shuō)明，術(shù)語(yǔ)和條款，以及產(chǎn)品中常見(jiàn)的各種提示。

微文案是CTA按鈕中繞不開(kāi)的組成部分。設(shè)計(jì)優(yōu)秀的微文案讓CTA按鈕指向性明確，可以快速地吸引用戶(hù)的注意力。

結(jié)語(yǔ)

對(duì)于電商類(lèi)的應(yīng)用和網(wǎng)站而言，CTA按鈕無(wú)疑是強(qiáng)大的銷(xiāo)售工具之一，和屏幕內(nèi)容的轉(zhuǎn)化率?息息相關(guān)。意識(shí)到CTA按鈕的重要性，才能有針對(duì)性地設(shè)計(jì)。

原文作者 :?Tubik Studio

譯者 :?陳子木

譯文地址：http://www.uisdc.com/powerful-cta-button-design

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖由作者提供