活(huo)动视觉虽然(ran)重要，但归(gui)根结(jie)底还是吸引用户(hu)去点(dian)击去购(gou)买(mai)去转发。通(tong)过合理的(de) CTA 设计形式(shi)，结(jie)合营销手(shou)段，可助力(li)达成业务目标(biao)。

CTA，Call to Action，行为召唤，是(shi)一种(zhong)营(ying)销(xiao)术语。用(yong)普通(tong)人类(lei)语言说，就是(shi)通(tong)过一些形式（通(tong)常(chang)都是(shi)按钮）让用(yong)户采取(qu)下一步行动，达(da)成营(ying)销(xiao)目的。

今天，本(ben)阿姨(yi)就从为数不多的经(jing)验中总结的无比浅(qian)薄的 7 个方面(mian)来分享一(yi)下(xia)按钮设计(ji)的那些小技巧(qiao)：

（如(ru)果(guo)不想赏脸花五(wu)分钟(zhong)看(kan)完，直(zhi)接跳到最后点个(ge)赞(zan)老阿姨也是会很欣(xin)慰的……）

抓(zhua)住(zhu)外貌(mao)协会(hui)的(de)眼珠

在 UI 设计(ji)中，一个标准的(de)按钮是有(you)一定比(bi)例公式的(de)。

按钮高度通常是(shi)文字(zi)字(zi)号(hao)的(de) 2.4 倍，然后(hou)取 4 的(de)整倍数。举个(ge)例子：字(zi)号(hao) 24，乘以 2.4 就(jiu)是(shi) 57.6，取离 4 倍数最(zui)近的(de)值(zhi)就(jiu)是(shi) 56PX。

按(an)钮宽(kuan)度(du)通常取文字宽(kuan)度(du)和(he)按(an)钮高度(du)的总和(he)，比如文字宽(kuan)度(du) 96，按(an)钮高度(du) 56，那么按(an)钮宽(kuan)度(du)就是(shi) 152。

当然，在视(shi)觉设计中，可据情况自行调(diao)整，公式只(zhi)作为参考。但(dan)要注意，考虑好文(wen)字(zi)和留白的占比、按钮的大小(xiao)以(yi)及热(re)区的大小(xiao)是否影响(xiang)操作。

比如(ru)考拉的这个 banner，原版设计(ji)的按钮只有(you) GO 那么一丢丢大，如(ru)果两端(duan)有(you)留白，观感会轻松一些，加上限量抢会让用户更有(you)紧迫感，点击欲望更强，按钮整体(ti)比(bi)例也更舒适(shi)。

人(ren)人(ren)都好色

颜(yan)色对人眼的(de)感观冲击是很强的(de)，可以利(li)用(yong)颜(yan)色对比来(lai)吸引用(yong)户(hu)点击。

如图所示，原版设计突出了价格，但实际上最需要用户点击(ji)抢(qiang)购(gou)的(de)按钮(niu)却和背景融为了一(yi)体，如果把底色优化一(yi)下，相信点击(ji)率的(de)数据会漂亮很多。

另外，如果你的(de)活(huo)动页里有(you)多个按钮的(de)话，在这里给(ji)大家安利一(yi)个骚(sao)操作理论：冯·雷斯(si)托夫效应。

冯·雷斯托夫效(xiao)应(ying)(ying)也叫做(zuo)隔离效(xiao)应(ying)(ying)，当存在多个相似(si)物体(ti)时，最与众不(bu)同的那个最有可能被记住。

那(nei)些很熟悉但又叫不(bu)出名字的(de)设计法则：冯·雷斯托夫效应

打个比(bi)方(fang)，可以利用样式+占比(bi)+颜色(se)三剑合一(yi)的方(fang)式去突出你最(zui)想要(yao)用户点击的入口。

如上图(tu)，右边通过样式与颜色的(de)区分让(rang)立即(ji)下(xia)单(dan)按(an)钮更为突(tu)出，拉长(zhang)占比增加点击(ji)热区让(rang)用户(hu)更易操(cao)作，综合起来能比图(tu)左更能吸(xi)引大家低(di)成本傻(sha)瓜式操(cao)作，直(zhi)接点下(xia)单(dan)。

另外有个冷门的考量(liang)，多个按(an)钮想通过颜色区分时(shi)，尽(jin)量(liang)不要使用红配(pei)绿和蓝配(pei)黄，照顾一(yi)下色盲群体。

在设计(ji)按(an)钮的(de)时候(hou)，别(bie)忘了将按(an)钮的(de)各个状态考虑完(wan)整。

懒人小 Tips：悬浮态(tai)(tai)可以在常态(tai)(tai)基(ji)础上加 10%黑色蒙层(ceng)，点(dian)击态(tai)(tai)可以在常态(tai)(tai)基(ji)础上加 20%白(bai)色蒙层(ceng)，禁用态(tai)(tai)通常使(shi)用#cccccc 和#999999。

别玩消消乐

如果一个(ge)页面里，按钮有很多(duo)，而且样式和(he)(he)颜色与其他元素(su)不好区分，那点(dian)击转化率和(he)(he)用户(hu)体(ti)验真(zhen)是好不到哪(na)里去(qu)。

举个例子，下图活(huo)动页左边原版(ban)是在玩(wan)找(zhao)茬消(xiao)消(xiao)乐吗？

如(ru)果页面里的按钮(niu)比较多(duo)，一定要按照重量级做(zuo)好(hao)区分，包括(kuo)样(yang)式、占比、形(xing)状(zhuang)、颜(yan)色，别让用户进来(lai)就上教(jiao)育(yu)课。

Tips：同(tong)一(yi)(yi)(yi)页(ye)面下，同(tong)类型(xing)的(de)(de)圆(yuan)(yuan)角按钮(niu)，圆(yuan)(yuan)角的(de)(de)比(bi)例需保持(chi)一(yi)(yi)(yi)致，注意不(bu)是(shi)圆(yuan)(yuan)角大小一(yi)(yi)(yi)致，不(bu)同(tong)尺寸的(de)(de)按钮(niu)圆(yuan)(yuan)角大小一(yi)(yi)(yi)样但比(bi)例会不(bu)一(yi)(yi)(yi)样滴。同(tong)类型(xing)的(de)(de)按钮(niu)样式要保持(chi)一(yi)(yi)(yi)致，别(bie)一(yi)(yi)(yi)圆(yuan)(yuan)一(yi)(yi)(yi)方。

按钮要看起来可点(dian)击，识(shi)别(bie)度高，尽(jin)量做圆形(xing)、圆角矩形(xing)、直角矩形(xing)这(zhei)种被大众熟知(zhi)的形(xing)态，别(bie)为(wei)了标新(xin)立异忽略(lve)了用户阅读成本和(he)转(zhuan)化收益。

Tips：一般来(lai)说，圆(yuan)角按钮比直(zhi)角按钮的识别(bie)度(du)更高(gao)，但有下拉菜单(dan)选(xuan)项的时(shi)候(hou)用直(zhi)角设(she)计更合(he)适。方形直(zhi)角按钮的小圆(yuan)角半径控制(zhi)在 15%以下比较合(he)适，我个人喜好用 10%。

按钮与信息(xi)的排(pai)版(ban)亲(qin)密性及阅读轨迹的舒适度很(hen)重要。如上图右边，简单优化之后层级区分就明(ming)显多了(le)。

让在逃公(gong)主舒服一点(dian)

如今大屏手(shou)机(ji)盛(sheng)行，咱们(men)做设(she)计(ji)的也(ye)该为 mini 手(shou)族们(men)考虑周(zhou)全，别(bie)让用(yong)户(hu)做长臂猿(yuan)运动(dong)。重点(dian)为拇指而设(she)计(ji)，在手(shou)指自然(ran)弧(hu)形(xing)范围内构建最舒适(shi)的点(dian)击区(qu)域，能提(ti)升主子们(men)的点(dian)击意愿。

麻省理工(gong)学院的(de)(de)(de)实验(yan)室研究发现，手指垫宽度的(de)(de)(de)平均(jun)值(zhi)在(zai) 10~14mm 之(zhi)(zhi)间，指尖在(zai) 8-10mm 之(zhi)(zhi)间，这使得 10×10mm 的(de)(de)(de)按(an)钮尺寸(cun)是比(bi)较(jiao)合(he)理的(de)(de)(de)。所(suo)以，42-72 像素(su)之(zhi)(zhi)间的(de)(de)(de)按(an)钮准确率最高(gao)。也就是说，最适合(he)用户(hu)的(de)(de)(de)最小按(an)钮尺寸(cun)是 42 像素(su)，最大(da)按(an)钮尺寸(cun)是 72 像素(su)。

另外，还要(yao)兼顾(gu)单屏的高(gao)度(du)限制，重点引(yin)流按(an)(an)钮如果放在第(di)二屏甚(shen)至长图最末尾，对(dui)点击转化来(lai)说是大打折扣(kou)的。对(dui)于这种情况，建议使用吸底(di)按(an)(an)钮形式。吸底(di)按(an)(an)钮的优(you)先级(ji)在页(ye)面(mian)中相对(dui)最高(gao)，会一直贴在页(ye)面(mian)底(di)部，不受(shou)篇幅长短影响(xiang)。但需(xu)要(yao)注(zhu)意的是，吸底(di)按(an)(an)钮一定要(yao)是页(ye)面(mian)引(yin)导(dao)最重要(yao)的功能(neng)，且(qie)需(xu)要(yao)注(zhu)意适配 iPhoneX 和 XS 这种类型(xing)(xing)的机型(xing)(xing)。

比如，基于 2X 的尺寸(cun)，吸底(di)的常(chang)(chang)见高度是(shi) 88PX、100PX 和 112PX。在常(chang)(chang)规机型中如果吸底(di)高度为 88PX，那么适配 X 的尺寸(cun)，应在下方控(kong)件区(qu)域增加(jia) 68PX。

如下图演示，为了(le)方便大家识别，吸底区(qu)域用绿色标明(ming)了(le)。

 密(mi)集(ji)恐惧症的谋杀

大家请康康这张(zhang) H5 截图，底(di)下的(de)五个按钮(niu)，难道不是对密(mi)集恐惧(ju)症(zheng)患者的(de)谋杀吗(ma)？

按钮数量一(yi)旦(dan)多了，就会分流，很大程(cheng)度上(shang)降(jiang)低点击(ji)率，且影响用(yong)户体验(yan)。在统筹 H5 框架的时候就应(ying)该提前想清(qing)楚，哪(na)一(yi)个按钮对(dui)业务来讲(jiang)是最重(zhong)要的，其他的都弱化，把层级区分清(qing)楚。

另外需要(yao)注意(yi)的是，通常来(lai)说按钮里面的文案数量不超过(guo) 6 个字，2-4 个字为佳。

少(shao)一层漏斗

一个商(shang)品促销活动页，普遍流(liu)程(cheng)是点击商(shang)品，进入详情页，再加入购物车。

但对于一(yi)个(ge)页(ye)面里有很多个(ge)商品(pin)的情况来(lai)说(shuo)，如(ru)果我看中(zhong)了十个(ge)，需要(yao)点击-加(jia)购(gou)-返(fan)回(hui)-再点击-加(jia)购(gou)-再返(fan)回(hui)……来(lai)回(hui)至少点击29次才(cai)能把同(tong)一(yi)页(ye)面中(zhong)的10个(ge)商品(pin)全部加(jia)购(gou)完成，那整体的加(jia)购(gou)率就会(hui)拉低。

严选的这个活动页(ye)就设计的很聪(cong)明，点击按钮直(zhi)达加(jia)购(gou)，就算加(jia)购(gou) 20 件(jian)商品也(ye)不会让用户(hu)产生来回跳(tiao)转的眩晕感。

减一(yi)层漏斗(dou)，加购率飙升用户体(ti)验也(ye)提上去(qu)了。另(ling)外，需要注意一(yi)下各元素间的(de)排版亲密关系，别让(rang)用户花一(yi)定(ding)识(shi)别成本才能选择(ze)下一(yi)步操(cao)作。

我(wo)们(men)都穷

现代(dai)人民的大部分(fen)特(te)征是什么呐(na)？

1. 喜欢薅(hao)羊毛(mao)

o 打一折？太便宜了简直(zhi)跟白抢一样！

o 有礼品？刺激阿(a)单身多年好久没收(shou)到礼物了！

2. 追求稀(xi)缺感

o 限(xian)时？完了看(kan)看(kan)还剩(sheng)几秒钟！

o 专属(shu)？如此尊贵的我怎能不(bu)拥有！

3. 抗拒被绑架

o 必须购(gou)买？老子的钱还轮不(bu)到你管(guan)！

o 不(bu)点是猪？你特么才是猪！

SO，在设计(ji)按钮的时候，对(dui)文(wen)案(an)也要(yao)好好琢磨(mo)琢磨(mo)，太平淡(dan)、无(wu)利益点(dian)、刺激用(yong)户(hu)负面情绪，都会(hui)导致数据平平淡(dan)淡(dan)。

比如下图两版文案，你更愿意点哪(na)一个呢？

在设(she)计(ji)(ji)一(yi)(yi)些(xie)商品促销海报的(de)时候，也可以搭载营销手段做一(yi)(yi)些(xie)骚操作。比(bi)如，音响(xiang)做个打折海报，如果(guo)使用(yong)(yong)图左设(she)计(ji)(ji)形(xing)式，用(yong)(yong)户看到可能还是觉得，我(wo)(wo)是来花钱的(de)，一(yi)(yi)千块有点(dian)贵，不(bu)太想点(dian)进去看。但如果(guo)改为(wei)图右设(she)计(ji)(ji)形(xing)式，会在一(yi)(yi)定(ding)程度上让用(yong)(yong)户心(xin)理认为(wei)，我(wo)(wo)是来捡便宜的(de)，点(dian)一(yi)(yi)下就赚了(le) 999 元，很值，不(bu)管买不(bu)买先(xian)点(dian)了(le)再说(shuo)。

另外，在 UI 设计(ji)中，按钮常(chang)会遇见有禁用(yong)态的情况(kuang)，但(dan)在视觉活动设计(ji)当中，本(ben)阿姨并不建议大家使用(yong)，最好可(ke)以让按钮一直可(ke)点击(ji)。那如果(guo)遇到常(chang)态状况(kuang)确实不可(ke)用(yong)的情况(kuang)怎(zen)么办呢？来(lai)编(bian)几个例子侃(kan)侃(kan)。

如(ru)图(tu)，当限量(liang)优惠券(quan)已(yi)领完的时(shi)候，图(tu)左(zuo)状态会(hui)让用户(hu)失(shi)望的离去(qu)。即使有明(ming)日开放的文字提醒，也不会(hui)有多少人特地定(ding)个闹(nao)钟(zhong)明(ming)天准时(shi)再来，就会(hui)造成一定(ding)流(liu)失(shi)。

但如果把原本已领完的(de)(de)禁用态优(you)化为开启提(ti)醒功能，会给用户一种有盼头的(de)(de)期待感(gan)，第二(er)天的(de)(de)提(ti)醒 PUSH 也会对回流活跃(yue)带来一定贡(gong)献。

再(zai)如图，当用户查(cha)看自己在活(huo)(huo)动中的排名时(shi)，如果提示活(huo)(huo)动已结束的话，这波操作(zuo)可能(neng)(neng)就(jiu)(jiu)在此(ci)闭环了(le)。但如果优化(hua)成分(fen)享(xiang)荣誉，用户还能(neng)(neng)将他的收获分(fen)享(xiang)到各大(da)社交媒体(ti)上去，就(jiu)(jiu)给活(huo)(huo)动带(dai)来了(le)后续的良(liang)性传播，给下(xia)一季活(huo)(huo)动沉淀(dian)更多的基底，为大(da)家下(xia)一次的业(ye)绩带(dai)来收益。

本(ben)文转载(zai)//www.uisdc.com/7-e-commerce-button-design