什么是CTA按钮?诸如引导用户进行点击按钮、登录、注册、留下联系方式、联系客服、加入购物车或确认订单等交互行为,都称之为CTA按钮。添加CTA按钮是当UI设计师在网页设计或APP设计中,想要通过该设计去引导或诱导用户执行上述交互行为时所采取的设计技巧。因此CTA按钮设计得好与坏,直接影响着用户的体验和页面转化率。

今天Pixso设计师给大家讲解下 7 个常见的CTA按钮设计陷阱,快来看看你是不是也中过招?

1. 尺寸不合适

通过视觉目标的尺寸大小来划分元素的重要性是UI设计中常用的设计手段。元素的重要层级越高,视觉应该越突出,尺寸应该足够大,这样才能吸引用户的注意力。通常情况下,大尺寸按钮会比小尺寸按钮更能被用户发现和被用户点击到,但也不能无限制地方大。

如下方Pixso资源社区中的《电子书APP》案例所示,用于诱导用户点击开始和阅读书本的CTA按钮,尺寸被设定为368x60px就比较合适,既能避免掉入尺寸不合适的CTA按钮设计陷阱中,也能保持页面整体的协调性。

cta按钮设计

2. 指示不明确

想要不掉入指示不明确的CTA按钮设计陷阱,就要确保CTA按钮上的文案精准、直接、简洁地传达按钮所触达的功能,冗长和有歧义的按钮文案并不利于用户执行CTA按钮所号召的行为。

如Pixso资源社区中的《餐饮网站设计》案例,设计师在第一屏和第二屏的大标题下都分别添加了两个CTA按钮设计,按钮上的文案都清晰地告知用户点击可以查看更多详情、下发订单或查看视频等。从用户角度出发,越是简单明确的指示文案,用户就越愿意点击尝试。

cta按钮设计

3. 数量不精简

尽量避免让用户处于必须在两个主要的CTA按钮之间进行选择的情况,这样也能避免因CTA按钮数量不精简而掉入CTA按钮设计陷阱中。建议要有1个主要的CTA按钮,允许1-2个次要的CTA按钮。主按钮用实心背景填充,次要按钮用空心背景或者直接采用文字作按钮的形式。

如Pixso的资源案例《APP身份验证界面》所示,每个界面都只保留一个视觉突出的主CTA按钮设计,引导用户创建账户、登录、点击下一步等,而创建账户页面中的登录按钮和登录页面中的注册按钮都采用了文字链接形式作辅助,有效地引导用户执行号召行为。

cta按钮设计

4. 号召无动力

在页面中添加CTA按钮的目的就是为了号召用户行动起来,若设计师掉入号召无动力的CTA按钮设计陷阱中,将会大大降低该页面的转化率。因此CTA按钮设计的文案必须有足够的动力劝说用户,给用户一个充分的理由作为触发器去引导用户触发点击行为。

使用“现在就试试”和“让我们聊一聊”等贴心的文案,拉近与用户的距离,挖掘用户的情感诉求,结合大标题阐述能吸引用户的利益点,正是Pixso资源社区的《营销机构登录页设计》案例所使用的CTA按钮设计技巧,不仅增强了用户对品牌的认可度,同时提升了用户点击按钮的动力。

cta按钮设计

5. 图文不达意

有研究表明,为CTA按钮添加相关的图标可以提高转化率。但如果添加不恰当的、杂乱的图标不仅对提高转化率毫无帮助,还会导致CTA按钮设计图文不达意。因此,建议选择与号召文案目标一致的图标,避免使用太复杂或太花哨的图标,因为这会影响用户对CTA按钮的关注度,从而无法发现并点击按钮。

Pixso的设计师推荐使用《交互按钮设计》素材,以互动和娱乐的方式学习如何在CTA按钮中添加微动效图标,从而增加CTA按钮设计的趣味性,引起用户好奇心。点击上方注册Pixso,一键获得Pixso资源社区丰富的CTA按钮设计资源。

cta按钮设计

6. 对比不突出

CTA按钮设计的色彩、文本和图形等视觉元素需要跟背景有对比才能在屏幕上呈现清晰的视图。而CTA按钮设计陷阱之一就包括按钮的色彩对比不够突出。这需要设计师结合页面整体的配色方案、用户群体的潜在偏好和心理特征等因素,使用合适的配色才能让CTA按钮在界面中脱颖而出。

对此,Pixso资源社区提供免费的《CTA行动按钮》素材,内含多种不同的CTA按钮设计风格,以及CTA按钮各个状态的组件变体,还有深色和浅色两种模式选择,一键复制,立即拥有,快速帮助设计师创建出吸引用户的CTA按钮。现在注册Pixso账号,即可免费下载这套行动号召按钮,还能进行在线编辑!

cta按钮设计

7. 布局缺细节

CTA按钮作为提升转化率和用户体验的重要关口,需要时刻出现用户的视线范围之内。随着用户滑动页面查看相关内容,CTA按钮应始终摆放在一个引人注目的位置或让它保持随时准备的状态,以免用户错过或者想要触达时却需要重新返回页面顶部去寻找按钮。

在Pixso资源社区的《IT网站模板》案例中,首屏的界面将CTA按钮分别被摆放在导航栏的右侧、Banner标题的下方,而当用户滑动到第二屏界面了解完团队介绍后,下方的卡片式CTA同样时刻保持着引导用户点击触发获得即时专业建议的行为。

cta按钮设计

在线的CTA按钮设计工具优选Pixso

在这个信息爆炸的时代,想要通过更专业和优质的内容做好品牌营销,让用户保持高度的参与,就少不了出色的CTA按钮设计。而想要做好CTA按钮设计,提升用户体验和页面转化率,就得选择专业的在线CTA按钮设计工具Pixso了。 现在前往 Pixso 官网注册账号,可以享受到Pixso会员的所有权益:无限文件数量、无协作者人数限制、无限云存储空间等等,快来尝试一下吧~

  • Pixso的资源社区提供了海量CTA按钮设计的模板和素材,设计师可以将优秀的素材复制到个人文档,并将其融入到产品的界面设计中,开启敏捷高效设计工作。
  • 在线的CTA按钮设计工具Pixso具有自动布局功能,能够帮助设计师创建可以随着文案内容的变化而自适应的CTA按钮设计,大大提高设计效率。
  • 当设计师遇到整体按钮切换、改变颜色等需求时,专业CTA按钮设计工具Pixso的组件变体功能能够快速完成所有按钮样式改变的工作,减少设计师大量的重复工作。
  • CTA按钮设计工具Pixso的智能选择可以让设计师快速调整两个主要和次要的CTA按钮之间的排列和间距,节省繁琐工作的时间,轻松构建布局。

cta按钮设计