聊到按鈕的設(shè)計(jì)，我們有太多的話要說。確認(rèn)按鈕在左邊還是右邊，幽靈按鈕到底可靠不可靠，陰影的存在到底合理不合理，等等等等。但是今天不聊這些，我們來聊一下，如何設(shè)計(jì)一個高轉(zhuǎn)化率的按鈕：

　　我們常常會揪住某個設(shè)計(jì)細(xì)節(jié)不放，深入討論直到透徹。這樣的探究并非毫無意義，因?yàn)榧词故亲罴?xì)小的細(xì)節(jié)也可能會讓近乎完美的設(shè)計(jì)毀于一旦。

　　所以，今天的文章我們繼續(xù)深入到設(shè)計(jì)的細(xì)節(jié)當(dāng)中，探討按鈕的設(shè)計(jì)。用戶每天都會接觸按鈕，從現(xiàn)實(shí)世界到虛擬的界面，從移動端要桌面端，它是如今界面設(shè)計(jì)中最小的元素之一，同時也是最關(guān)鍵的控件。當(dāng)你在設(shè)計(jì)按鈕的時候，是否想過用戶會在什么情形下與之交互?按鈕將會在整個交互和反饋的循環(huán)中提供信息?

　　在早期的扁平化設(shè)計(jì)當(dāng)中，用戶常常因?yàn)榘粹o的感知度較差而完全處于懵逼狀態(tài)，這也從側(cè)面反映出按鈕本身在UI設(shè)計(jì)中的重要作用。

　　它應(yīng)當(dāng)看起來可點(diǎn)擊/觸摸

　　用戶看到可點(diǎn)擊的按鈕會有去點(diǎn)擊和觸摸的沖動。雖然按鈕在屏幕上會以各種各樣的尺寸出現(xiàn)，并且通常都具備良好的可點(diǎn)擊性，但是在移動端設(shè)備上按鈕本身的尺寸和按鈕周圍的間隙尺寸都是非常有講究的。

　　普通用戶的指尖尺寸通常為8~10毫米，所以尺寸為10×10毫米的觸摸交互對象是符合邏輯的，這也算是移動端上約定俗成的規(guī)則了。

　　想要讓一個元素看起來可點(diǎn)擊，注意下面的技巧：

　　·微妙的陰影能夠讓按鈕看起來“浮動”出界面，讓它看起來更接近用戶

　　·增加按鈕內(nèi)邊距，讓它看起來更容易點(diǎn)擊，引導(dǎo)用戶點(diǎn)擊

　　·進(jìn)行懸浮或者點(diǎn)擊操作的時候通過實(shí)時色彩和效果變化，提示用戶

　　色彩很重要

　　按鈕的色彩需要根據(jù)整個網(wǎng)站的配色來單獨(dú)搭配。作為用戶交互的核心，按鈕在頁面中適合使用特定的色彩進(jìn)行強(qiáng)調(diào)。

　　按鈕的色彩應(yīng)該明亮而迷人，這也是為什么那么多UI設(shè)計(jì)都喜歡采用明亮的黃色、綠色和藍(lán)色的按鈕設(shè)計(jì)。想要按鈕在視覺上突出，按鈕的色彩最好選取背景色在色輪上相對位置的互補(bǔ)色。

　　另外一個值得注意的是品牌用色。你需要為按鈕選取一個同你的品牌配色方案相匹配的色彩，它不僅要有識別度，還要有關(guān)聯(lián)性。不論你配色方案怎么調(diào)整，按鈕首先要與你的主要配色保持關(guān)聯(lián)和一致。

　　尺寸的影響更大

　　按鈕要大!設(shè)計(jì)師常常被各種人戳屏，LOGO要大是被指責(zé)得最多的地方，而在進(jìn)行按鈕設(shè)計(jì)的時候，大也同樣是鋼需。只有當(dāng)按鈕尺寸夠大的時候，用戶才能在一看到界面的時候就被它所吸引。雖然幽靈按鈕可以占據(jù)足夠大的面積，但是幽靈按鈕在視覺重量上的不足，使得它并不是最好的選擇。所以，我們所說的大不僅僅是尺寸上的大，在視覺重量上同樣要“大”。

　　當(dāng)然，按鈕的大小尺寸也是一個相對值。有的時候，同樣的尺寸的按鈕，在一種情況下是完美的大小，在另外一個界面中可能就是過大了。很大程度上，按鈕的大小取決于周圍元素的大小比例。如果按鈕是界面中可見的唯一元素，那么誰都不會錯過了。

　　位置也關(guān)鍵

　　按鈕應(yīng)該放置在哪個位置?界面中哪些地方能夠?yàn)槟銕砀嗟狞c(diǎn)擊量?

　　在絕大多數(shù)的情況下，按鈕應(yīng)當(dāng)按照你的頁面和APP的內(nèi)容來添加：

　　·在表單的底部

　　·在行為召喚類信息附近

　　·在頁面或者屏幕底部

　　·在信息的正下方

　　為何要放置在這些位置?因?yàn)樗麄冏裱脩舻牧?xí)慣和自然的交互路徑，不論是網(wǎng)頁還是APP。

　　專注于對比

　　幾乎所有類型的設(shè)計(jì)都會對對比度有所要求，在進(jìn)行按鈕設(shè)計(jì)的時候，不僅要讓按鈕內(nèi)的內(nèi)容(圖標(biāo)、文本)能夠同按鈕本身構(gòu)成良好的對比，而且按鈕和背景以及周圍的元素也要形成對比。

　　那么，在你進(jìn)行設(shè)計(jì)的時候，需要考慮到下面的因素：

　　·色彩

　　·字體的字重和尺寸

　　·元素的大小

　　·背景與形狀

　　·陰影與漸變

　　·留白和內(nèi)外間距

　　使用標(biāo)準(zhǔn)的形狀

　　當(dāng)你在考慮按鈕的外形的時候，你只需要考慮兩種情況：

　　·圓形。隨著Material Design這種設(shè)計(jì)規(guī)范的推廣，圓形的按鈕已經(jīng)被大家所接受了。圓形按鈕廣泛適用于時下流行的扁平化設(shè)計(jì)風(fēng)格，適合目前的用戶模式。

　　·矩形。矩形按鈕(包括方形和各種圓角矩形)是最常見也是按鈕在大家認(rèn)知中的默認(rèn)形狀，它符合用戶的認(rèn)知與習(xí)慣，絕大多數(shù)的按鈕長度寬度的兩倍(當(dāng)然三四倍也有)。當(dāng)用戶看到它的時候，立刻會明白應(yīng)該如何與之交互。至于使用圓角還是直角，那就是另外一個問題了，選擇符合你的設(shè)計(jì)風(fēng)格的即可。

　　告訴用戶做什么

　　每個按鈕都會包含一個文本指令，它會告訴用戶這個按鈕的功能。所以，按鈕上的文本要盡量簡潔、直觀，并且使用符合整個網(wǎng)站風(fēng)格的語音語調(diào)。

　　然后，你需要“履行承諾”。當(dāng)用戶點(diǎn)擊按鈕的時候，按鈕所指示的內(nèi)容和結(jié)果應(yīng)當(dāng)合理、迅速地呈現(xiàn)在用戶眼前，無論是提交表單、跳轉(zhuǎn)到新的頁面，用戶通過這個按鈕應(yīng)當(dāng)獲得他所預(yù)期的結(jié)果。

　　按鈕中的內(nèi)容通常包括：

　　·戳我!

　　·立即創(chuàng)建

　　·免費(fèi)試用

　　·加入購物車

　　·查看更多

　　讓按鈕擁有更高的視覺優(yōu)先級

　　幾乎每個界面都塞滿了各種不同的UI元素。設(shè)計(jì)的過程中，設(shè)計(jì)師往往會設(shè)計(jì)出若干個不同的版本，而直到項(xiàng)目接近完成的時候，才從無比相近的幾個方案中挑選一個版本。

　　不要陷入這種困境。

　　按鈕就該有按鈕的樣子。按鈕應(yīng)該是整個設(shè)計(jì)中獨(dú)一無二的控件，它在形狀、色彩和視覺重量上，都應(yīng)當(dāng)同其他部分區(qū)分開。想想看，當(dāng)你創(chuàng)造出的按鈕和其他的控件都要大，色彩在整個配色方案中都獨(dú)一無二，它絕對比黑暗中的螢火蟲還要來得顯眼。

　　結(jié)語

　　看了這些內(nèi)容之后，你是否開始重新思考按鈕的設(shè)計(jì)?你能否創(chuàng)造出更加吸引用戶、轉(zhuǎn)化率更高的UI界面?你可以試著借助以上的建議，結(jié)合持續(xù)的網(wǎng)站/APP的數(shù)據(jù)分析，更加準(zhǔn)確地了解用戶對于你的新設(shè)計(jì)的實(shí)際效果。