当前位置:
  1. 北极熊素材库
  2. 资讯
    1. 平面设计
    2. 产品交互
    3. 活动展览
    4. 设计聚焦
    5. 综合
  3. 产品交互
  4. 3个方面帮你提高CTA按钮的点击率

3个方面帮你提高CTA按钮的点击率

0 2022-03-28 16:25 内容校对:万万没想到
CTA 是英文 “call-to-action”的简写,又名行为召唤按钮。是 Web 和移动软件应用中最常用的交互元素,其主要作用就是引导人们做出某些特定操作,从而提高产品的转化率。
简而言之,就是设计师通过设计手法,视觉上突出按钮,让用户自然而然的产生点击按钮的行为,例如留下联系方式或者产生购买行为,都算是行为召唤。 行为召唤这一 UX 设计手段的主要目的就是催生交互、行为,提升转化,达成业务目标。 目前的主流电商 APP 在促销模块的购买按钮都在往大的面积,高饱和度,高层级的方向做。主要也是为了引导用户点击按钮并产生之后的一系列购买可能。

3个方面帮你提高CTA按钮的点击率

怎样设计 CTA 按钮,能够增加点击率和转化率

一、样式上

1)按钮在样式是必须看起像是按钮,符合用户对以往按钮的认知,提高可辨识度,降低用户的学习认知成本 。纯文本按钮会让用户迟疑到底是按钮还是内容,从而造成混淆,这种不确定性可能会导致他们直接跳过这些按钮。

3个方面帮你提高CTA按钮的点击率

如上图,在按钮在这个页面层级比较低,而且并不重要的时候可以是直接使用链接文字这样的按钮形式,一般的按钮根据在页面是视觉层级可以选择后面 2 种,无论是点击区域还是样式上更加容易吸引用户点击。

2)使用渐变、阴影、圆角让按钮样式看上去更加的逼真,引导用户点击 。这些样式的应用会让按钮看起来更加立体,模拟现实生活中的按钮样式,比如,开关灯、键盘按钮等。用户在现实生活也需要对这些按钮进行点击和交互,如此用户看到这些按钮时,就直接知道如何去操作。

3个方面帮你提高CTA按钮的点击率

3)正确的设计按钮的大小, 按钮的大小要符合拇指原则(44pt),同时按钮上下左右有足够的留白空间。需要一个页面相同位置的按钮组,必须有明确的层级区分,引导用户进行正确的操作,降低用户思考和选择的时间。

例如上图的虾米、京东、网易云音乐 app 的登录页面,除了最重要的登录按钮最大,最突出外;其他的第三方登录以及账号密码登录等按钮都根据不同的层级重要性进行了样式区分。让用户可以直接进行正确(或者是你希望)的操作行为,降低用户的选择时间。

3个方面帮你提高CTA按钮的点击率

二、文案上

1)行为召唤按钮 ,顾名思义按钮对于用户的行为有一定召唤,指示作用。所以按钮上的文案可以使用紧迫感和即时性的文字提示。比如:立即、马上、开抢等。这些文字会给用户营造一种紧张、兴奋、刺激的感觉,刺激用户进行点击和消费。
3个方面帮你提高CTA按钮的点击率
2)按钮文案应该表述明确,告知用户按钮的代表的意思,以及点击交互后会发生什么。通过清晰的文案给予用户操作预知,降低用户的使用成本和防备心态。同时文案也可以是利益点,促进用户点击,并产生消费。
图 1 是苏宁易购购物车左划时效果,3 个按钮文案分别是表述清楚了不同的操作以及给予用户相应的操作预期。同时不同的按钮背景颜色表述了不同的操作层级,删除按钮是不可逆的操作,所以红色示警。
3个方面帮你提高CTA按钮的点击率
图 2 是芒果台 tv 充值会员页面,按钮文案明确的说明:确认支付¥9,以及副文案开通会员后用户可以得到的利益点。用户可以很清楚的从按钮中的文案知道点击操作后,需要支付的¥9 元金额,以及可以得到的好处,排除了用户的疑惑,告知了用户好处,更有利于提高点击。

三、交互上

按钮在操作后需要及时给出用户不同状态的反馈,告知用户你的操作生效了,做到所见即所得,给用户安全感。例如:网页上的按钮鼠标悬停时,按钮会变色,提示并吸引用户点击。最起码按钮上的光标会变成小手;一些小游戏界面中需要引导用户点击按钮时,也会做各种动效,或是指引手势。

3个方面帮你提高CTA按钮的点击率

四、总结

CTA 是英文 “call-to-action”的简写,又名行为召唤按钮

按钮在样式是必须看起像是按钮,符合用户对以往按钮的认知,大小要符合拇指原则(44pt)

按钮文案上要清晰简洁,可以使用带有紧迫感、即时性、利益点的文案

页面中按钮过多时,需要根据层级作出明确区分,减少用户决策时间

按钮在操作后需要及时给出用户不同状态的反馈

0

赠人玫瑰,手有余香

本文链接 https://www.bjxku.com/news/51.html 文章为转摘文章,但不代表北极熊素材库立场。
Andrea

对设计有浓厚兴趣的小伙伴,快来看看吧!

共发布了34个文章 共获得36个赞

最新发布的教程

查看更多此作者的教程
参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

此分类其他精选文章
你可能会用到的Photoshop素材
  • 日历样机psd高清模板 日历样机psd高清模板
    日历样机psd高清图片素材,帮助您创建一个生动形象的挂历封面设计效果展示,通过psd格式的日历面贴图样机模板,设计师可以借助智能对象层展示艺术作品,让创意灵感直观地呈现出来。
    芷Chi
    2023-02-03
  • 外卖包装袋样机图片 外卖包装袋样机图片
    外卖包装袋样机素材,帮助您创建一个生动形象的包装纸袋设计效果展示,通过psd格式的外卖包装袋贴图样机模板,设计师可以借助智能对象层展示艺术作品,让创意灵感直观地呈现出来。
    花脸猫
    2023-01-28
  • 感恩节食物插画 感恩节食物插画
    感恩节食物插画,包括火鸡、面包、蜂蜜、感恩节、节日等元素,提供psd和jpg文件格式下载,可以运用到感恩节相关的设计创作中,插画支持根据需求更改大小和格式,用于海报、广告、传单、服装、墙纸、壁纸等设计创作之中。
    司姬
    2022-11-28
  • 感恩节帽子插画 感恩节帽子插画
    感恩节帽子插画,包括麦穗、南瓜、感恩节、节日等元素,提供psd和jpg文件格式下载,可以运用到感恩节相关的设计创作中,插画支持根据需求更改大小和格式,用于海报、广告、传单、服装、墙纸、壁纸等设计创作之中。
    喵喵喵
    2022-11-28
  • 感恩节南瓜水果插画 感恩节南瓜水果插画
    感恩节南瓜水果插画,包括美食、食物、感恩节、节日等元素,提供psd和jpg文件格式下载,可以运用到感恩节相关的设计创作中,插画支持根据需求更改大小和格式,用于海报、广告、传单、服装、墙纸、壁纸等设计创作之中。
    似曾相识
    2022-11-28
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员