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

CTA，Call to Action，行為召喚，是一種營(yíng)銷術(shù)語(yǔ)。用普通人類語(yǔ)言說，就是通過一些形式（通常都是按鈕）讓用戶采取下一步行動(dòng)，達(dá)成營(yíng)銷目的。

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

（如果不想賞臉花五分鐘看完，直接跳到最后點(diǎn)個(gè)贊老阿姨也是會(huì)很欣慰的……）

抓住外貌協(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)然，在視覺設(shè)計(jì)中，可據(jù)情況自行調(diào)整，公式只作為參考。但要注意，考慮好文字和留白的占比、按鈕的大小以及熱區(qū)的大小是否影響操作。

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

人人都好色

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

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

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

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

那些很熟悉但又叫不出名字的設(shè)計(jì)法則：馮·雷斯托夫效應(yīng)

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

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

另外有個(gè)冷門的考量，多個(gè)按鈕想通過顏色區(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。

別玩消消樂

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

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

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

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

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

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

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

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

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

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

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

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

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

 密集恐懼癥的謀殺

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

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

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

少一層漏斗

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

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

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

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

我們都窮

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

1. 喜歡薅羊毛

o 打一折？太便宜了簡(jiǎn)直跟白搶一樣！

o 有禮品？刺激阿單身多年好久沒收到禮物了！

2. 追求稀缺感

o 限時(shí)？完了看看還剩幾秒鐘！

o 專屬？如此尊貴的我怎能不擁有！

3. 抗拒被綁架

o 必須購(gòu)買？老子的錢還輪不到你管！

o 不點(diǎn)是豬？你特么才是豬！

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

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

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

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

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

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

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

本文轉(zhuǎn)載https://www.uisdc.com/7-e-commerce-button-design