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

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

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

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

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

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

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

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

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

哪些因素成就了CTA按鈕？

尺寸

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

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

色彩和形狀

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

色彩的含義：

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

形狀的含義：

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

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

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

位置

位置的選擇對于CTA 按鈕同樣是至關(guān)重要的。因為不同的位置對于用戶而言有著巨大的差別，地段不好，在騷的色彩，再漂亮的外形，一樣不會被注意到。

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

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

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

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

Z圖模式也不難理解，用戶從上到下，視線沿著Z字形來回掃視，用戶會左右快速掃視，視線的起點首先是左上角，行跨頂部一欄到右上角，然后向下延伸。

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

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

F圖模式常見于博客、新聞類信息量較大的網(wǎng)站。

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

微文案

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

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

結(jié)語

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

原文作者 :?Tubik Studio

譯者 :?陳子木

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

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

題圖由作者提供