按鈕設(shè)計(jì)影響網(wǎng)站轉(zhuǎn)化率

時(shí)間：2023-09-19 09:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-19 09:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

按鈕設(shè)計(jì)影響網(wǎng)站轉(zhuǎn)化率：按鈕設(shè)計(jì)（Button User Interface Design簡(jiǎn)稱UI）是影響網(wǎng)站轉(zhuǎn)化優(yōu)化（Conversion Rate Optimization簡(jiǎn)稱 CRO）的一個(gè)非常重要的因素。在日常生活中，以下談到的按鈕設(shè)計(jì)原理隨處可見(jiàn)。

按鈕是交互設(shè)計(jì)的常見(jiàn)元素，它傳達(dá)了即將發(fā)生的動(dòng)作。雖然看起來(lái)按鈕是一個(gè)非常簡(jiǎn)單的UI元素，如果設(shè)計(jì)得當(dāng)，它們可以大大提高您的轉(zhuǎn)化率。在本文中，我們將分享按鈕最佳實(shí)踐（基于個(gè)人經(jīng)驗(yàn)和一些不靠譜的數(shù)據(jù)）。




就這么一丟丟東西，他的術(shù)語(yǔ)和組成原屬還真不少。

看起來(lái)像按鈕

視覺(jué)提示可幫助用戶確定哪些是可點(diǎn)擊的內(nèi)容。所以請(qǐng)務(wù)必在可點(diǎn)擊元素上使用適當(dāng)?shù)囊曈X(jué)提示，以使其看起來(lái)像按鈕。其他視覺(jué)提示還有比如下劃線，不同顏色和鼠標(biāo)光標(biāo)等。

形狀

具有圓角的按鈕（rounded）比具有尖銳邊緣的矩形在眼睛上更容易，因?yàn)樗鼈冊(cè)谝曈X(jué)處理上需要較少的認(rèn)知。

the Barrow Neurological Institute 對(duì)拐角的科學(xué)研究發(fā)現(xiàn)，“銳角比圓角產(chǎn)生更強(qiáng)的幻覺(jué)”。意思是，拐角越尖，看起來(lái)越亮，越刺眼。




帶有尖角和不帶有尖角的極端例子

為什么圓形（是說(shuō)rounded，不是round）按鈕效果更好？另一種解釋可以追溯到兒童時(shí)期的發(fā)展心理學(xué)，我們知道尖角傷害，而圓角更安全。這就是為什么當(dāng)孩子玩球時(shí)，大多數(shù)父母并不擔(dān)心，孩子玩叉子則擔(dān)心。

最后，圓形按鈕是更有效的內(nèi)容容器，因?yàn)樗鼈兿騼?nèi)指向矩形的中心。帶有尖角的矩形按鈕指向外部，視覺(jué)焦點(diǎn)放在矩形內(nèi)部的內(nèi)容較少。所以，一般來(lái)說(shuō)品牌用尖角可以造成一定的視覺(jué)壓力和沖擊性；而轉(zhuǎn)化較高的是圓角（一般為4px或者0.3rem的圓角）




根據(jù)康定斯基的點(diǎn)線面理論，帶有尖銳邊緣的矩形按鈕指向外部，而圓形按鈕指向內(nèi)部，從而將更多焦點(diǎn)放在按鈕內(nèi)部。

尺寸

當(dāng)“輕按”是移動(dòng)設(shè)備和平板電腦設(shè)備上的主要輸入方法時(shí)，您要確保用戶可以輕松點(diǎn)擊到按鈕。MIT Touch Lab觸摸實(shí)驗(yàn)室研究的結(jié)果發(fā)現(xiàn)，指墊（finger pads）的平均值在10-14mm（38-52px）之間，指尖（fingertips ）的平均值在8-10mm（30-38px）之間，使10mm x 10mm（38px x 38px）成為最小的觸摸目標(biāo)尺寸。




圖片來(lái)源：uxmag

蘋果公司的《 iPhone人機(jī)界面指南》（iPhone Human Interface Guidelines）一直建議按鈕的最小寬度為44px，高度至少為44px。但是，如果您使用的空間較小，建議您將按鈕的高度設(shè)置在32像素至40像素之間。同時(shí)，Android的Material Design原則建議觸摸目標(biāo)的寬度至少應(yīng)為36px x 36px，按鈕之間的間距至少應(yīng)為6px。

按鈕之間的間距

與傳統(tǒng)鼠標(biāo)光標(biāo)相比，緊湊包裝的按鈕使用戶更難準(zhǔn)確地敲打手機(jī)或平板電腦。為了防止用戶因意外按下錯(cuò)誤的按鈕，按鈕應(yīng)與其他敲擊目標(biāo)保持一定距離，以使8-10毫米（30-38像素）的指墊（finger pads）不會(huì)意外地同時(shí)按下兩個(gè)按鈕。

確保按鈕之間有足夠的填充。（一般至少為6px）




圖片來(lái)源：材料設(shè)計(jì)

顏色

多年來(lái)，按鈕已經(jīng)發(fā)生了天翻地覆的變化，但只有一點(diǎn)沒(méi)有發(fā)生任何變化即：使用顏色和對(duì)比度來(lái)指導(dǎo)用戶采取重要的行動(dòng)（CTA）。

顏色在按鈕中非常重要，它可以幫助用戶更清晰地理解操作。對(duì)于患有色盲的用戶，您永遠(yuǎn)不要同時(shí)使用紅色和綠色，請(qǐng)選擇綠色或紅色任意一種作為號(hào)召性用語(yǔ)，但絕對(duì)不能同時(shí)使用。




圖片來(lái)源：http：//http://uxmovement.com

在數(shù)字接口上廣為流行的一種顏色是橙色-橙色，僅次于紅色。但是它并不能消除所有紅色的負(fù)面情緒，例如“停止”，“危險(xiǎn)”，“錯(cuò)誤”，“錯(cuò)誤”和“危險(xiǎn)”。我們已經(jīng)看到一些最大的零售品牌，例如耐克，J-Crew和亞馬遜，使用不同的橙色調(diào)作為號(hào)召性用語(yǔ)以吸引用戶并獲得點(diǎn)擊。




耐克使用橙色的號(hào)召性用語(yǔ)按鈕引導(dǎo)用戶。圖片來(lái)源：http://Nike.com

對(duì)比

除顏色外，還應(yīng)使用對(duì)比度來(lái)幫助用戶在不同按鈕之間進(jìn)行選擇。對(duì)比的UI按鈕設(shè)計(jì)規(guī)則很簡(jiǎn)單：

• 高對(duì)比度-積極行動(dòng)。
• 對(duì)比中等-消極行動(dòng)。
• 對(duì)比度低-中立行動(dòng)。

例如結(jié)帳頁(yè)面，你想通過(guò)賦予此按鈕最高的顏色對(duì)比度，使用戶參與積極的操作。旁邊放置的任何中性或負(fù)面動(dòng)作都應(yīng)具有較低的顏色對(duì)比度，以免再?gòu)?qiáng)調(diào)它們。

字體大小

用戶掃描文本，而不是逐字閱讀，以快速吸收頁(yè)面的要點(diǎn)。使字體變小會(huì)妨礙用戶更快地瀏覽內(nèi)容。Payame Noor大學(xué)和IBM / Google進(jìn)行的研究表明，隨著字體大小的增加，讀者的閱讀速度會(huì)略有加快。

我這里有一篇寫給大家看的建站字體方案，探討了適合您的字體大小的比例。無(wú)論您選擇在按鈕中放置什么字體大小，只要確保它足夠大以供用戶掃描即可。最佳Web字體大小為16像素，通常應(yīng)為現(xiàn)代Web設(shè)計(jì)中正文復(fù)制的最小大小。

布局位置

一般來(lái)說(shuō)，一個(gè)頁(yè)面的左側(cè)是目錄或者信息的一側(cè)，用于快速查找內(nèi)容。一般是左對(duì)齊的list等。比如下圖的導(dǎo)航，縮略圖等。右側(cè)是號(hào)召行動(dòng)的一側(cè)，比如購(gòu)物車和按鈕都是在最右側(cè)。右側(cè)的轉(zhuǎn)化率更高。

一屏一個(gè)主要按鈕

一個(gè)屏幕中應(yīng)該只有一個(gè)主要按鈕，這樣我們的潛意識(shí)不會(huì)糾結(jié)應(yīng)該點(diǎn)擊哪一個(gè)。如果需要有多個(gè)功能不同的按鈕，則非重點(diǎn)按鈕盡量改為次要按鈕樣式。










如果不考慮內(nèi)容，上面米課表格可以改為轉(zhuǎn)置為右側(cè)按鈕；右側(cè)是行動(dòng)側(cè)。為了避免同時(shí)出現(xiàn)多個(gè)按鈕造成混淆，可以在pc端鼠標(biāo)滑移hover后出現(xiàn)。另一種布局方式是每個(gè)課程一個(gè)屏幕。

常見(jiàn)應(yīng)用

按鈕配合文字，可以組成CTA元素。

配合表單，Contact Form中也必不可少按鈕。

結(jié)論

上面所談到的也是個(gè)人當(dāng)前的認(rèn)知，按鈕的原理也時(shí)刻變化；不同的行業(yè)和網(wǎng)頁(yè)不同需求，按鈕的原理也不盡相同；為了找到適合不同行業(yè)的按鈕樣式，最好的方式是實(shí)踐和測(cè)試（Split test等）?？傊粹o是創(chuàng)造流暢的用戶體驗(yàn)的重要元素，值得關(guān)注。