本文主要介紹了如何才能設(shè)計(jì)一個(gè)具有行為召喚能力的按鈕，并從形狀、色彩、按鈕樣式、添加圖標(biāo)、文字字體、位置等方面提出了建議。

“按鈕”在UI設(shè)計(jì)中是一種常用的UI控件，一個(gè)成功的按鈕控件可以有效的提高交互體驗(yàn)，引導(dǎo)用戶，提升產(chǎn)品轉(zhuǎn)化率。目前我們所熟知的按鈕按功能類型主要分為六大類，分別是行為召喚按鈕（CTA）、懸浮按鈕、標(biāo)簽按鈕、表格按鈕、命令按鈕及開關(guān)按鈕。

其中，行為召喚按鈕（Call To Action），簡稱CTA按鈕，即用戶在訪問某頁面后引導(dǎo)用戶去點(diǎn)擊并且跳轉(zhuǎn)至下一個(gè)流程（如購買、聯(lián)系、關(guān)注等行為）的一類按鈕控件，其主要目的就是為了提高特定頁面或屏幕的轉(zhuǎn)化率，從而達(dá)到預(yù)期設(shè)定的結(jié)果。因此，CTA按鈕也具有不同于其他種類按鈕的特性。那么如何才能設(shè)計(jì)一個(gè)具有行為召喚能力的按鈕呢?

尺寸

結(jié)合CTA按鈕的先前目標(biāo)是吸引用戶的注意，提高轉(zhuǎn)化，因此按鈕尺寸越大，它被用戶發(fā)現(xiàn)和點(diǎn)擊的概率就越高，但也不宜過大，以免破壞布局的視覺組合和層次結(jié)構(gòu)。最好的按鈕和按鈕文字應(yīng)該遵循頁面的比例進(jìn)行設(shè)計(jì)，以便用戶更好識(shí)別。

圖1

另外，移動(dòng)端的設(shè)計(jì)還需要考慮按鈕與手指的適配度，為了保證按鈕的最佳點(diǎn)擊區(qū)域，設(shè)計(jì)師在繪制按鈕時(shí)要保證其點(diǎn)擊范圍至少高度要在30px以上，例如主流的參考設(shè)計(jì)規(guī)范：蘋果的HIQ中要求CTA按鈕至少為 44×44 px，而微軟則建議至少為34×26 px。具體的大小還是會(huì)根據(jù)實(shí)際情況而變。

圖2

色彩

除了通過尺寸差異來營造視覺吸引力外，一個(gè)能夠激勵(lì)用戶點(diǎn)擊的按鈕需要具備的另外一個(gè)關(guān)鍵元素就是顏色的選擇與運(yùn)用。好的色彩運(yùn)用能夠從情緒與視覺上干預(yù)用戶，吸引其注意力。所以設(shè)計(jì)師在進(jìn)行按鈕設(shè)計(jì)時(shí)，需要考慮到整體的配色方案，使CTA按鈕能夠在眾多UI控件中脫穎而出。

介于文章篇幅原因，簡潔明了的來說，我們知道色彩經(jīng)由色相、明度、純度的變化與調(diào)和，可以產(chǎn)生豐富多樣的層次變化，而能夠吸引人目光的色彩特性我們可以稱之為誘目性。

在能夠使誘目性變高的色彩中，與無色彩對(duì)比，有色彩的比較好；與低純度色對(duì)比，高純度色的比較好；與低明度色比較，高明度色的較好。

所以為了讓CTA按鈕的顏色與整體頁面形成和諧但又顯著的對(duì)比，目前采用最多的設(shè)計(jì)原則是遵循高反差度原則，即通過合理運(yùn)用色彩的色相、明度、純度的對(duì)比方式，來凸顯CTA按鈕的重要性。

如下圖（圖3）案例所示，整體界面的色彩選擇是白色，如果像左圖中按鈕依然選擇純度較低的藍(lán)色，不僅會(huì)使整個(gè)頁面顯得“輕飄飄”，毫無著落點(diǎn)外，CTA按鈕也無法凸顯出來，而右圖中的按鈕不論是在色相還是純度上都選擇了與背景色反差較大的藍(lán)色，直接誘導(dǎo)用戶進(jìn)行點(diǎn)擊。

圖3

按鈕形狀

我們常說藝術(shù)來源于模仿，設(shè)計(jì)來源于生活。這句話對(duì)于按鈕外形的繪制非常適用，因?yàn)樵诂F(xiàn)實(shí)生活中按鈕的使用率也非常高，比如開關(guān)燈、開電腦、敲鍵盤等，所以設(shè)計(jì)師在設(shè)計(jì)過程中會(huì)吸取現(xiàn)實(shí)生活中按鈕的形狀，擇優(yōu)選擇水平矩形或者圓角矩形來表示CTA按鈕。

另一方面，一些研究建議圓角矩形更能加強(qiáng)信息的傳遞并且能夠?qū)⑷说囊暰€集中在中心位置上。

當(dāng)然我們有時(shí)也可以根據(jù)自己的創(chuàng)意去使用其他的形狀，比如圓形，三角形或者自定義形，但是一定要確保統(tǒng)一性能夠把控你的界面設(shè)計(jì)，以便用戶能夠識(shí)別出這個(gè)按鈕元素。如下左圖所示，在此處使用圓形按鈕不僅打破了頁面設(shè)計(jì)的統(tǒng)一性，而且相較于右圖示中的圓矩形按鈕提示的作用也被削弱了不少。

--

圖4

按鈕樣式

突出的按鈕樣式，特別是矩形或圓矩形按鈕，利用投影等樣式有效還原生活中按鈕的模樣，提示用戶按鈕是可以進(jìn)行點(diǎn)擊的。這與扁平化的按鈕樣式對(duì)比在空間維度上增加了一度，在復(fù)雜或?qū)捲５目臻g中更能起到強(qiáng)調(diào)的作用。

圖5

但在追尋簡潔設(shè)計(jì)的界面中，有些設(shè)計(jì)師也會(huì)首選扁平化的設(shè)計(jì)風(fēng)格，來保證界面的內(nèi)容設(shè)計(jì)不被打擾。所以，在這類扁平化的按鈕設(shè)計(jì)中需要注意的是顏色的篩選與運(yùn)用，在即保證界面風(fēng)格統(tǒng)一的情況下，也要保證用戶能夠順利的找到按鈕元素，保證頁面轉(zhuǎn)化的效果。

文本字體

文本內(nèi)容的字體、大小、粗細(xì)等因素都會(huì)影響到CTA按鈕的視覺權(quán)重。一般設(shè)計(jì)遵循高優(yōu)先級(jí)按鈕使用粗體文本，低優(yōu)先級(jí)按鈕使用細(xì)體文本的原則，以此來影響用戶閱讀它們時(shí)的優(yōu)先級(jí)，因此CTA按鈕文本盡量選擇粗體文本，誘使用戶進(jìn)行點(diǎn)擊，提高轉(zhuǎn)化率。

圖6

添加圖標(biāo)

添加圖標(biāo)同樣也可以給CTA按鈕增加用戶額外的視覺重量，提高用戶在瀏覽頁面時(shí)優(yōu)先關(guān)注的概率，增加CTA按鈕的轉(zhuǎn)化效果。如下圖的對(duì)比，視覺上會(huì)更加直觀的注意到帶有圖標(biāo)的按鈕。

圖7

位置

CTA按鈕的設(shè)計(jì)，可以說是整個(gè)頁面轉(zhuǎn)化的核心與靈魂，尤其決定了一些付費(fèi)推廣的轉(zhuǎn)化成果。所以除去按鈕本身的設(shè)計(jì)外，CTA按鈕的位置擺放也尤為關(guān)鍵。

一般來說按鈕的位置與頁面內(nèi)容的繁簡程度以及用戶行動(dòng)成本存在著一定關(guān)聯(lián)性，文本內(nèi)容愈簡單，用戶無需了解更多信息或者用戶的行動(dòng)成本很低甚至沒有，用戶就越容易在頁面瀏覽之前點(diǎn)擊按鈕，此時(shí)按鈕可以放置在頁面相對(duì)靠前的位置，相反如果用戶需要為采取的行動(dòng)付出一定代價(jià)時(shí)，比如給出聯(lián)系方式、關(guān)注、付款等情況下，用戶采取預(yù)期CTA行動(dòng)的時(shí)間就會(huì)推后，一般會(huì)瀏覽完頁面后再進(jìn)行考量，此時(shí)按鈕的位置建議放置在瀏覽頁面的下端。

所以CTA的位置隨內(nèi)容的簡單到復(fù)雜遞降，即從頁面上端到頁面下端，如圖所示：

圖8

綜上所述，關(guān)于如何設(shè)計(jì)一款真正具有行為召喚的按鈕，實(shí)現(xiàn)具體的動(dòng)態(tài)行為交互，設(shè)計(jì)師一方面需要了解CTA的重要性，另一方面更要著重注意影響其表現(xiàn)的所有細(xì)節(jié)。

以上關(guān)于CTA按鈕設(shè)計(jì)的相關(guān)規(guī)則，希望可以給大家?guī)硪恍﹨⒖肌?/p>

本文由 @IQS開發(fā)者社區(qū) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議