可以提高電商轉(zhuǎn)化率的按鈕設(shè)計(jì)
發(fā)布時(shí)間:2021-12-23 11:23 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2693

UI 設(shè)計(jì)師對(duì)按鈕的設(shè)計(jì)是比較考究的,但在大部分視覺(jué)設(shè)計(jì)師的感知里,按鈕的地位好像無(wú)足輕重,只需主視覺(jué)好看即可,其實(shí)不然。

要知道你要靠業(yè)績(jī)拿工資,而錢(qián)很香。

活動(dòng)視覺(jué)雖然重要,但歸根結(jié)底還是吸引用戶(hù)去點(diǎn)擊去購(gòu)買(mǎi)去轉(zhuǎn)發(fā)。通過(guò)合理的 CTA 設(shè)計(jì)形式,結(jié)合營(yíng)銷(xiāo)手段,可助力達(dá)成業(yè)務(wù)目標(biāo)。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

CTA,Call to Action,行為召喚,是一種營(yíng)銷(xiāo)術(shù)語(yǔ)。用普通人類(lèi)語(yǔ)言說(shuō),就是通過(guò)一些形式(通常都是按鈕)讓用戶(hù)采取下一步行動(dòng),達(dá)成營(yíng)銷(xiāo)目的。

今天,本阿姨就從為數(shù)不多的經(jīng)驗(yàn)中總結(jié)的無(wú)比淺薄的 7 個(gè)方面來(lái)分享一下按鈕設(shè)計(jì)的那些小技巧:

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!


抓住外貌協(xié)會(huì)的眼珠


在 UI 設(shè)計(jì)中,一個(gè)標(biāo)準(zhǔn)的按鈕是有一定比例公式的。

按鈕高度通常是文字字號(hào)的 2.4 倍,然后取 4 的整倍數(shù)。舉個(gè)例子:字號(hào) 24,乘以 2.4 就是 57.6,取離 4 倍數(shù)最近的值就是 56PX。

按鈕寬度通常取文字寬度和按鈕高度的總和,比如文字寬度 96,按鈕高度 56,那么按鈕寬度就是 152。

當(dāng)然,在視覺(jué)設(shè)計(jì)中,可據(jù)情況自行調(diào)整,公式只作為參考。但要注意,考慮好文字和留白的占比、按鈕的大小以及熱區(qū)的大小是否影響操作。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

比如考拉的這個(gè) banner,原版設(shè)計(jì)的按鈕只有 GO 那么一丟丟大,如果兩端有留白,觀感會(huì)輕松一些,文案加上限量搶會(huì)讓用戶(hù)更有緊迫感,點(diǎn)擊欲望更強(qiáng),按鈕整體比例也更舒適。


人人都好色


顏色對(duì)人眼的感觀沖擊是很強(qiáng)的,可以利用顏色對(duì)比來(lái)吸引用戶(hù)點(diǎn)擊。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

如圖所示,原版設(shè)計(jì)突出了價(jià)格,但實(shí)際上最需要用戶(hù)點(diǎn)擊搶購(gòu)的按鈕卻和背景融為了一體,如果把底色優(yōu)化一下,相信點(diǎn)擊率的數(shù)據(jù)會(huì)漂亮很多。

另外,如果你的活動(dòng)頁(yè)里有多個(gè)按鈕的話(huà),在這里給大家安利一個(gè)騷操作理論:馮·雷斯托夫效應(yīng)。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

馮·雷斯托夫效應(yīng)也叫做隔離效應(yīng),當(dāng)存在多個(gè)相似物體時(shí),最與眾不同的那個(gè)最有可能被記住。

打個(gè)比方,可以利用樣式+占比+顏色三劍合一的方式去突出你最想要用戶(hù)點(diǎn)擊的入口。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

如上圖,右邊通過(guò)樣式與顏色的區(qū)分讓立即下單按鈕更為突出,拉長(zhǎng)占比增加點(diǎn)擊熱區(qū)讓用戶(hù)更易操作,綜合起來(lái)能比圖左更能吸引大家低成本傻瓜式操作,直接點(diǎn)下單。

另外有個(gè)冷門(mén)的考量,多個(gè)按鈕想通過(guò)顏色區(qū)分時(shí),盡量不要使用紅配綠和藍(lán)配黃,照顧一下色盲群體。

在設(shè)計(jì)按鈕的時(shí)候,別忘了將按鈕的各個(gè)狀態(tài)考慮完整。

懶人小 Tips:懸浮態(tài)可以在常態(tài)基礎(chǔ)上加 10%黑色蒙層,點(diǎn)擊態(tài)可以在常態(tài)基礎(chǔ)上加 20%白色蒙層,禁用態(tài)通常使用#cccccc 和#999999。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!


別玩消消樂(lè)


如果一個(gè)頁(yè)面里,按鈕有很多,而且樣式和顏色與其他元素不好區(qū)分,那點(diǎn)擊轉(zhuǎn)化率和用戶(hù)體驗(yàn)真是好不到哪里去。

舉個(gè)例子,下圖活動(dòng)頁(yè)左邊原版是在玩找茬消消樂(lè)嗎?

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

如果頁(yè)面里的按鈕比較多,一定要按照重量級(jí)做好區(qū)分,包括樣式、占比、形狀、顏色,別讓用戶(hù)進(jìn)來(lái)就上教育課。

Tips:同一頁(yè)面下,同類(lèi)型的圓角按鈕,圓角的比例需保持一致,注意不是圓角大小一致,不同尺寸的按鈕圓角大小一樣但比例會(huì)不一樣滴。同類(lèi)型的按鈕樣式要保持一致,別一圓一方。

按鈕要看起來(lái)可點(diǎn)擊,識(shí)別度高,盡量做圓形、圓角矩形、直角矩形這種被大眾熟知的形態(tài),別為了標(biāo)新立異忽略了用戶(hù)閱讀成本和轉(zhuǎn)化收益。

Tips:一般來(lái)說(shuō),圓角按鈕比直角按鈕的識(shí)別度更高,但有下拉菜單選項(xiàng)的時(shí)候用直角設(shè)計(jì)更合適。方形直角按鈕的小圓角半徑控制在 15%以下比較合適,我個(gè)人喜好用 10%。

按鈕與信息的排版親密性及閱讀軌跡的舒適度很重要。如上圖右邊,簡(jiǎn)單優(yōu)化之后層級(jí)區(qū)分就明顯多了。


讓在逃公主舒服一點(diǎn)


如今大屏手機(jī)盛行,咱們做設(shè)計(jì)的也該為 mini 手族們考慮周全,別讓用戶(hù)做長(zhǎng)臂猿運(yùn)動(dòng)。重點(diǎn)為拇指而設(shè)計(jì),在手指自然弧形范圍內(nèi)構(gòu)建最舒適的點(diǎn)擊區(qū)域,能提升主子們的點(diǎn)擊意愿。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

麻省理工學(xué)院的實(shí)驗(yàn)室研究發(fā)現(xiàn),手指墊寬度的平均值在 10~14mm 之間,指尖在 8-10mm 之間,這使得 10×10mm 的按鈕尺寸是比較合理的。所以,42-72 像素之間的按鈕準(zhǔn)確率最高。也就是說(shuō),最適合用戶(hù)的最小按鈕尺寸是 42 像素,最大按鈕尺寸是 72 像素。

另外,還要兼顧單屏的高度限制,重點(diǎn)引流按鈕如果放在第二屏甚至長(zhǎng)圖最末尾,對(duì)點(diǎn)擊轉(zhuǎn)化來(lái)說(shuō)是大打折扣的。對(duì)于這種情況,建議使用吸底按鈕形式。吸底按鈕的優(yōu)先級(jí)在頁(yè)面中相對(duì)最高,會(huì)一直貼在頁(yè)面底部,不受篇幅長(zhǎng)短影響。但需要注意的是,吸底按鈕一定要是頁(yè)面引導(dǎo)最重要的功能,且需要注意適配 iPhoneX 和 XS 這種類(lèi)型的機(jī)型。

比如,基于 2X 的尺寸,吸底的常見(jiàn)高度是 88PX、100PX 和 112PX。在常規(guī)機(jī)型中如果吸底高度為 88PX,那么適配 X 的尺寸,應(yīng)在下方控件區(qū)域增加 68PX。

如下圖演示,為了方便大家識(shí)別,吸底區(qū)域用綠色標(biāo)明了。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!


密集恐懼癥的謀殺


大家請(qǐng)康康這張 H5 截圖,底下的五個(gè)按鈕,難道不是對(duì)密集恐懼癥患者的謀殺嗎?

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

按鈕數(shù)量一旦多了,就會(huì)分流,很大程度上降低點(diǎn)擊率,且影響用戶(hù)體驗(yàn)。在統(tǒng)籌 H5 框架的時(shí)候就應(yīng)該提前想清楚,哪一個(gè)按鈕對(duì)業(yè)務(wù)來(lái)講是最重要的,其他的都弱化,把層級(jí)區(qū)分清楚。

另外需要注意的是,通常來(lái)說(shuō)按鈕里面的文案數(shù)量不超過(guò) 6 個(gè)字,2-4 個(gè)字為佳。


少一層漏斗


一個(gè)商品促銷(xiāo)活動(dòng)頁(yè),普遍流程是點(diǎn)擊商品,進(jìn)入詳情頁(yè),再加入購(gòu)物車(chē)。

但對(duì)于一個(gè)頁(yè)面里有很多個(gè)商品的情況來(lái)說(shuō),如果我看中了十個(gè),需要點(diǎn)擊-加購(gòu)-返回-再點(diǎn)擊-加購(gòu)-再返回……來(lái)回至少點(diǎn)擊29次才能把同一頁(yè)面中的10個(gè)商品全部加購(gòu)?fù)瓿桑钦w的加購(gòu)率就會(huì)拉低。

嚴(yán)選的這個(gè)活動(dòng)頁(yè)就設(shè)計(jì)的很聰明,點(diǎn)擊按鈕直達(dá)加購(gòu),就算加購(gòu) 20 件商品也不會(huì)讓用戶(hù)產(chǎn)生來(lái)回跳轉(zhuǎn)的眩暈感。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

減一層漏斗,加購(gòu)率飆升用戶(hù)體驗(yàn)也提上去了。另外,需要注意一下各元素間的排版親密關(guān)系,別讓用戶(hù)花一定識(shí)別成本才能選擇下一步操作。


我們都窮


現(xiàn)代人民的大部分特征是什么吶?

1. 喜歡薅羊毛

  • 打一折?太便宜了簡(jiǎn)直跟白搶一樣!
  • 有禮品?刺激阿單身多年好久沒(méi)收到禮物了!

2. 追求稀缺感

  • 限時(shí)?完了看看還剩幾秒鐘!
  • 專(zhuān)屬?如此尊貴的我怎能不擁有!

3. 抗拒被綁架

  • 必須購(gòu)買(mǎi)?老子的錢(qián)還輪不到你管!
  • 不點(diǎn)是豬?你特么才是豬!

SO,在設(shè)計(jì)按鈕的時(shí)候,對(duì)文案也要好好琢磨琢磨,太平淡、無(wú)利益點(diǎn)、刺激用戶(hù)負(fù)面情緒,都會(huì)導(dǎo)致數(shù)據(jù)平平淡淡。

比如下圖兩版文案,你更愿意點(diǎn)哪一個(gè)呢?

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

在設(shè)計(jì)一些商品促銷(xiāo)海報(bào)的時(shí)候,也可以搭載營(yíng)銷(xiāo)手段做一些騷操作。比如,音響做個(gè)打折海報(bào),如果使用圖左設(shè)計(jì)形式,用戶(hù)看到可能還是覺(jué)得,我是來(lái)花錢(qián)的,一千塊有點(diǎn)貴,不太想點(diǎn)進(jìn)去看。但如果改為圖右設(shè)計(jì)形式,會(huì)在一定程度上讓用戶(hù)心理認(rèn)為,我是來(lái)?yè)毂阋说,點(diǎn)一下就賺了 999 元,很值,不管買(mǎi)不買(mǎi)先點(diǎn)了再說(shuō)。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

另外,在 UI 設(shè)計(jì)中,按鈕常會(huì)遇見(jiàn)有禁用態(tài)的情況,但在視覺(jué)活動(dòng)設(shè)計(jì)當(dāng)中,本阿姨并不建議大家使用,最好可以讓按鈕一直可點(diǎn)擊。那如果遇到常態(tài)狀況確實(shí)不可用的情況怎么辦呢?來(lái)編幾個(gè)例子侃侃。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

如圖,當(dāng)限量?jī)?yōu)惠券已領(lǐng)完的時(shí)候,圖左狀態(tài)會(huì)讓用戶(hù)失望的離去。即使有明日開(kāi)放的文字提醒,也不會(huì)有多少人特地定個(gè)鬧鐘明天準(zhǔn)時(shí)再來(lái),就會(huì)造成一定流失。

但如果把原本已領(lǐng)完的禁用態(tài)優(yōu)化為開(kāi)啟提醒功能,會(huì)給用戶(hù)一種有盼頭的期待感,第二天的提醒 PUSH 也會(huì)對(duì)回流活躍帶來(lái)一定貢獻(xiàn)。

提高30%的電商轉(zhuǎn)化率!這7個(gè)按鈕設(shè)計(jì)技巧超好用!

再如圖,當(dāng)用戶(hù)查看自己在活動(dòng)中的排名時(shí),如果提示活動(dòng)已結(jié)束的話(huà),這波操作可能就在此閉環(huán)了。但如果優(yōu)化成分享榮譽(yù),用戶(hù)還能將他的收獲分享到各大社交媒體上去,就給活動(dòng)帶來(lái)了后續(xù)的良性傳播,給下一季活動(dòng)沉淀更多的基底,為大家下一次的業(yè)績(jī)帶來(lái)收益。

侃完了,很多時(shí)候做設(shè)計(jì),就是在講究各種細(xì)節(jié),探索各個(gè)細(xì)節(jié)對(duì)目標(biāo)達(dá)成的影響,而不是單純做一張圖而已。

PhotoshopCC2020視頻教程
我要自學(xué)網(wǎng)商城 ¥120 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC