热评 Li -Jing

这真的的干货中的干货!感谢分享

UI 设计师对按钮的设计是比较考究的,但在大部分视觉设计师的感知里,按钮的地位好像无足轻重,只需主视觉好看即可,其实不然。

要知道你要靠业绩拿工资,而钱很香。

活动视觉虽然重要,但归根结底还是吸引用户去点击去购买去转发。通过合理的 CTA 设计形式,结合营销手段,可助力达成业务目标。

提高30%的电商转化率!这7个按钮设计技巧超好用!

CTA,Call to Action,行为召唤,是一种营销术语。用普通人类语言说,就是通过一些形式(通常都是按钮)让用户采取下一步行动,达成营销目的。

今天,本阿姨就从为数不多的经验中总结的无比浅薄的 7 个方面来分享一下按钮设计的那些小技巧:

提高30%的电商转化率!这7个按钮设计技巧超好用!

(如果不想赏脸花五分钟看完,直接跳到最后点个赞老阿姨也是会很欣慰的……)

抓住外貌协会的眼珠

在 UI 设计中,一个标准的按钮是有一定比例公式的。

按钮高度通常是文字字号的 2.4 倍,然后取 4 的整倍数。举个例子:字号 24,乘以 2.4 就是 57.6,取离 4 倍数最近的值就是 56PX。

按钮宽度通常取文字宽度和按钮高度的总和,比如文字宽度 96,按钮高度 56,那么按钮宽度就是 152。

当然,在视觉设计中,可据情况自行调整,公式只作为参考。但要注意,考虑好文字和留白的占比、按钮的大小以及热区的大小是否影响操作。

提高30%的电商转化率!这7个按钮设计技巧超好用!

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

人人都好色

颜色对人眼的感观冲击是很强的,可以利用颜色对比来吸引用户点击。

提高30%的电商转化率!这7个按钮设计技巧超好用!

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

另外,如果你的活动页里有多个按钮的话,在这里给大家安利一个骚操作理论:冯·雷斯托夫效应。

提高30%的电商转化率!这7个按钮设计技巧超好用!

冯·雷斯托夫效应也叫做隔离效应,当存在多个相似物体时,最与众不同的那个最有可能被记住。

打个比方,可以利用样式+占比+颜色三剑合一的方式去突出你最想要用户点击的入口。

提高30%的电商转化率!这7个按钮设计技巧超好用!

如上图,右边通过样式与颜色的区分让立即下单按钮更为突出,拉长占比增加点击热区让用户更易操作,综合起来能比图左更能吸引大家低成本傻瓜式操作,直接点下单。

另外有个冷门的考量,多个按钮想通过颜色区分时,尽量不要使用红配绿和蓝配黄,照顾一下色盲群体。

在设计按钮的时候,别忘了将按钮的各个状态考虑完整。

懒人小 Tips:悬浮态可以在常态基础上加 10%黑色蒙层,点击态可以在常态基础上加 20%白色蒙层,禁用态通常使用#cccccc 和#999999。

提高30%的电商转化率!这7个按钮设计技巧超好用!

别玩消消乐

如果一个页面里,按钮有很多,而且样式和颜色与其他元素不好区分,那点击转化率和用户体验真是好不到哪里去。

举个例子,下图活动页左边原版是在玩找茬消消乐吗?

提高30%的电商转化率!这7个按钮设计技巧超好用!

如果页面里的按钮比较多,一定要按照重量级做好区分,包括样式、占比、形状、颜色,别让用户进来就上教育课。

Tips:同一页面下,同类型的圆角按钮,圆角的比例需保持一致,注意不是圆角大小一致,不同尺寸的按钮圆角大小一样但比例会不一样滴。同类型的按钮样式要保持一致,别一圆一方。

按钮要看起来可点击,识别度高,尽量做圆形、圆角矩形、直角矩形这种被大众熟知的形态,别为了标新立异忽略了用户阅读成本和转化收益。

Tips:一般来说,圆角按钮比直角按钮的识别度更高,但有下拉菜单选项的时候用直角设计更合适。方形直角按钮的小圆角半径控制在 15%以下比较合适,我个人喜好用 10%。

按钮与信息的排版亲密性及阅读轨迹的舒适度很重要。如上图右边,简单优化之后层级区分就明显多了。

让在逃公主舒服一点

如今大屏手机盛行,咱们做设计的也该为 mini 手族们考虑周全,别让用户做长臂猿运动。重点为拇指而设计,在手指自然弧形范围内构建最舒适的点击区域,能提升主子们的点击意愿。

提高30%的电商转化率!这7个按钮设计技巧超好用!

麻省理工学院的实验室研究发现,手指垫宽度的平均值在 10~14mm 之间,指尖在 8-10mm 之间,这使得 10×10mm 的按钮尺寸是比较合理的。所以,42-72 像素之间的按钮准确率最高。也就是说,最适合用户的最小按钮尺寸是 42 像素,最大按钮尺寸是 72 像素。

另外,还要兼顾单屏的高度限制,重点引流按钮如果放在第二屏甚至长图最末尾,对点击转化来说是大打折扣的。对于这种情况,建议使用吸底按钮形式。吸底按钮的优先级在页面中相对最高,会一直贴在页面底部,不受篇幅长短影响。但需要注意的是,吸底按钮一定要是页面引导最重要的功能,且需要注意适配 iPhoneX 和 XS 这种类型的机型。

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

如下图演示,为了方便大家识别,吸底区域用绿色标明了。

提高30%的电商转化率!这7个按钮设计技巧超好用!

密集恐惧症的谋杀

大家请康康这张 H5 截图,底下的五个按钮,难道不是对密集恐惧症患者的谋杀吗?

提高30%的电商转化率!这7个按钮设计技巧超好用!

按钮数量一旦多了,就会分流,很大程度上降低点击率,且影响用户体验。在统筹 H5 框架的时候就应该提前想清楚,哪一个按钮对业务来讲是最重要的,其他的都弱化,把层级区分清楚。

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

少一层漏斗

一个商品促销活动页,普遍流程是点击商品,进入详情页,再加入购物车。

但对于一个页面里有很多个商品的情况来说,如果我看中了十个,需要点击-加购-返回-再点击-加购-再返回……来回至少点击29次才能把同一页面中的10个商品全部加购完成,那整体的加购率就会拉低。

严选的这个活动页就设计的很聪明,点击按钮直达加购,就算加购 20 件商品也不会让用户产生来回跳转的眩晕感。

提高30%的电商转化率!这7个按钮设计技巧超好用!

减一层漏斗,加购率飙升用户体验也提上去了。另外,需要注意一下各元素间的排版亲密关系,别让用户花一定识别成本才能选择下一步操作。

我们都穷

现代人民的大部分特征是什么呐?

1. 喜欢薅羊毛

  • 打一折?太便宜了简直跟白抢一样!
  • 有礼品?刺激阿单身多年好久没收到礼物了!

2. 追求稀缺感

  • 限时?完了看看还剩几秒钟!
  • 专属?如此尊贵的我怎能不拥有!

3. 抗拒被绑架

  • 必须购买?老子的钱还轮不到你管!
  • 不点是猪?你特么才是猪!

SO,在设计按钮的时候,对文案也要好好琢磨琢磨,太平淡、无利益点、刺激用户负面情绪,都会导致数据平平淡淡。

比如下图两版文案,你更愿意点哪一个呢?

提高30%的电商转化率!这7个按钮设计技巧超好用!

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

提高30%的电商转化率!这7个按钮设计技巧超好用!

另外,在 UI 设计中,按钮常会遇见有禁用态的情况,但在视觉活动设计当中,本阿姨并不建议大家使用,最好可以让按钮一直可点击。那如果遇到常态状况确实不可用的情况怎么办呢?来编几个例子侃侃。

提高30%的电商转化率!这7个按钮设计技巧超好用!

如图,当限量优惠券已领完的时候,图左状态会让用户失望的离去。即使有明日开放的文字提醒,也不会有多少人特地定个闹钟明天准时再来,就会造成一定流失。

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

提高30%的电商转化率!这7个按钮设计技巧超好用!

再如图,当用户查看自己在活动中的排名时,如果提示活动已结束的话,这波操作可能就在此闭环了。但如果优化成分享荣誉,用户还能将他的收获分享到各大社交媒体上去,就给活动带来了后续的良性传播,给下一季活动沉淀更多的基底,为大家下一次的业绩带来收益。

侃完了,很多时候做设计,就是在讲究各种细节,探索各个细节对目标达成的影响,而不是单纯做一张图而已。

本阿姨侃的也不一定专业,希望各位壮士多多交流指导,我们一起学习,一起进步,一起成为既有才华又美貌富裕的仙男仙女。

欢迎关注作者微信公众号:「米吸设计」

提高30%的电商转化率!这7个按钮设计技巧超好用!

收藏 1619
点赞 617

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。