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

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

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

尺寸

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

圖1

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

圖2

色彩

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

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

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

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

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

圖3

按鈕形狀

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

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

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

--

圖4

按鈕樣式

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

圖5

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

文本字體

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

圖6

添加圖標

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

圖7

位置

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

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

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

圖8

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

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

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

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