一、行為召喚按鈕的功能的類型
1、誘導(dǎo)購(gòu)買(mǎi)
當(dāng)行為召喚的目的是誘導(dǎo)購(gòu)買(mǎi)時(shí)，按鈕的設(shè)計(jì)不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點(diǎn)擊，讓用戶進(jìn)來(lái)看一眼就能知道該按鈕的用途。
美團(tuán)外賣(mài)的結(jié)算按鈕的顏色采用黑黃對(duì)比、形狀采用具有親和力的圓角，在樣式上加入投影同時(shí)加入送餐員的元素，配上小紅點(diǎn)，另外加入價(jià)格誘導(dǎo)，讓你可直觀看到優(yōu)惠了多少錢(qián)，促使你進(jìn)一步操作。淘寶詳情的加入購(gòu)物車(chē)和馬上搶是一個(gè)組合按鈕，作為行為召喚按鈕我們可以明確的看到，不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2、訂閱關(guān)注
當(dāng)行為召喚的目的是訂閱關(guān)注時(shí)，其重要程度相比誘導(dǎo)購(gòu)買(mǎi)低很多，但是在設(shè)計(jì)時(shí)我們?nèi)匀恍枰紤]一個(gè)問(wèn)題，是用戶關(guān)注更重要還是用戶閱讀內(nèi)容更重要。當(dāng)內(nèi)容重要時(shí)，按鈕的設(shè)計(jì)需要弱化處理，比如優(yōu)酷星球;當(dāng)點(diǎn)擊關(guān)注重要時(shí)，按鈕的設(shè)計(jì)需要強(qiáng)化處理。
優(yōu)酷的星球主要引導(dǎo)用戶去閱讀內(nèi)容，感興趣你就關(guān)注，因此在設(shè)計(jì)時(shí)對(duì)關(guān)注按鈕進(jìn)行了弱化處理，讓按鈕和界面融合。土豆視頻關(guān)注界面的目的就是引導(dǎo)用戶關(guān)注。因此按鈕設(shè)計(jì)較為明顯，采用黃色填充加圖標(biāo)引導(dǎo)，在視覺(jué)上和產(chǎn)品內(nèi)容形成強(qiáng)烈對(duì)比。
3、利益誘導(dǎo)
當(dāng)行為召喚的目的是利益誘導(dǎo)時(shí)，可以考慮顏色、形狀、加入圖標(biāo)、誘導(dǎo)文字等設(shè)計(jì)方法引導(dǎo)用戶點(diǎn)擊。
大眾點(diǎn)評(píng)領(lǐng)獎(jiǎng)按鈕明顯比賺積分的層級(jí)高，因此為了突出領(lǐng)獎(jiǎng)按鈕，采用了色塊設(shè)計(jì)的樣式，同時(shí)賺積分按鈕采用描邊設(shè)計(jì)進(jìn)行弱化處理。騰訊doki打榜頁(yè)面沖榜的重要層級(jí)高，因此在設(shè)計(jì)時(shí)不僅采用了色塊、加入動(dòng)效圖標(biāo)、同時(shí)還加入了誘導(dǎo)文字，讓按鈕更明顯同時(shí)誘導(dǎo)用戶點(diǎn)擊，其他按鈕則采用描邊樣式弱化處理。
4、文字誘導(dǎo)
文字誘導(dǎo)簡(jiǎn)單來(lái)說(shuō)就是通過(guò)文字，誘導(dǎo)用戶進(jìn)行下一步操作，多用于空頁(yè)面、活動(dòng)頁(yè)面中，因此在設(shè)計(jì)時(shí)采用簡(jiǎn)單的色塊填充即可，如果該頁(yè)面為活動(dòng)頁(yè)面也可增加漸變或投影樣式，讓按鈕更有空間感，進(jìn)而突出按鈕。
以得到為例，當(dāng)你還沒(méi)有學(xué)習(xí)計(jì)劃時(shí)，它會(huì)對(duì)你進(jìn)行提示“開(kāi)始制定學(xué)習(xí)計(jì)劃”，同時(shí)其按鈕采用重要程度較高的色塊+投影的方式，誘導(dǎo)用戶點(diǎn)擊。以大眾點(diǎn)評(píng)為例，當(dāng)你還沒(méi)有攻略時(shí)，它會(huì)對(duì)你進(jìn)行提示“我也要?jiǎng)?chuàng)建攻略”，同時(shí)其按鈕采用漸變填充的方式，誘導(dǎo)用戶點(diǎn)擊。
二、行為召喚按鈕的設(shè)計(jì)規(guī)則
1、尺寸
結(jié)合CTA按鈕的先前目標(biāo)是吸引用戶的注意，提高轉(zhuǎn)化，因此按鈕尺寸越大，它被用戶發(fā)現(xiàn)和點(diǎn)擊的概率就越高，但也不宜過(guò)大，以免破壞布局的視覺(jué)組合和層次結(jié)構(gòu)。較好的按鈕和按鈕文字應(yīng)該遵循頁(yè)面的比例進(jìn)行設(shè)計(jì)，以便用戶更好識(shí)別。
2、色彩
除了通過(guò)尺寸差異來(lái)營(yíng)造視覺(jué)吸引力外，一個(gè)能夠激勵(lì)用戶點(diǎn)擊的按鈕需要具備的另外一個(gè)關(guān)鍵元素就是顏色的選擇與運(yùn)用。好的色彩運(yùn)用能夠從情緒與視覺(jué)上干預(yù)用戶，吸引其注意力。所以設(shè)計(jì)師在進(jìn)行按鈕設(shè)計(jì)時(shí)，需要考慮到整體的配色方案，使CTA按鈕能夠在眾多UI控件中脫穎而出。
3、按鈕形狀
我們常說(shuō)藝術(shù)來(lái)源于模仿，設(shè)計(jì)來(lái)源于生活。這句話對(duì)于按鈕外形的繪制非常適用，因?yàn)樵诂F(xiàn)實(shí)生活中按鈕的使用率也非常高，比如開(kāi)關(guān)燈、開(kāi)電腦、敲鍵盤(pán)等，所以設(shè)計(jì)師在設(shè)計(jì)過(guò)程中會(huì)吸取現(xiàn)實(shí)生活中按鈕的形狀，擇優(yōu)選擇水平矩形或者圓角矩形來(lái)表示CTA按鈕。另一方面，一些研究建議圓角矩形更能加強(qiáng)信息的傳遞并且能夠?qū)⑷说囊暰€集中在中心位置上。
4、按鈕樣式
突出的按鈕樣式，特別是矩形或圓矩形按鈕，利用投影等樣式有效還原生活中按鈕的模樣，提示用戶按鈕是可以進(jìn)行點(diǎn)擊的。這與扁平化的按鈕樣式對(duì)比在空間維度上增加了一度，在復(fù)雜或?qū)捲５目臻g中更能起到強(qiáng)調(diào)的作用。
5、文本字體
文本內(nèi)容的字體、大小、粗細(xì)等因素都會(huì)影響到CTA按鈕的視覺(jué)權(quán)重。一般設(shè)計(jì)遵循高優(yōu)先級(jí)按鈕使用粗體文本，低優(yōu)先級(jí)按鈕使用細(xì)體文本的原則，以此來(lái)影響用戶閱讀它們時(shí)的優(yōu)先級(jí)，因此CTA按鈕文本盡量選擇粗體文本，誘使用戶進(jìn)行點(diǎn)擊，提高轉(zhuǎn)化率。
6、添加圖標(biāo)
添加圖標(biāo)同樣也可以給CTA按鈕增加用戶額外的視覺(jué)重量，提高用戶在瀏覽頁(yè)面時(shí)優(yōu)先關(guān)注的概率，增加CTA按鈕的轉(zhuǎn)化效果。如下圖的對(duì)比，視覺(jué)上會(huì)更加直觀的注意到帶有圖標(biāo)的按鈕。
7、位置
CTA按鈕的設(shè)計(jì)，可以說(shuō)是整個(gè)頁(yè)面轉(zhuǎn)化的核心與靈魂，尤其決定了一些付費(fèi)推廣的轉(zhuǎn)化成果。所以除去按鈕本身的設(shè)計(jì)外，CTA按鈕的位置擺放也尤為關(guān)鍵。
延伸閱讀1：按鈕簡(jiǎn)介
“按鈕”在UI設(shè)計(jì)中是一種常用的UI控件，一個(gè)成功的按鈕控件可以有效的提高交互體驗(yàn)，引導(dǎo)用戶，提升產(chǎn)品轉(zhuǎn)化率。目前我們所熟知的按鈕按功能類型主要分為六大類，分別是行為召喚按鈕（CTA）、懸浮按鈕、標(biāo)簽按鈕、表格按鈕、命令按鈕及開(kāi)關(guān)按鈕。
京公網(wǎng)安備 11010802030320號(hào)