CTA 按钮设计,提高转化率的关键之一

CTA按钮设计是高转化率的关键之一。本文描述了用于 Web 和移动界面的强大 CTA 的重要组件。

按钮是用户界面的核心交互组件,在 UX 以及网站和应用程序的转换率方面发挥着重要作用。用户界面按钮根据其特点不同,可分为不同的类型。

CTA 按钮设计,提高转化率的关键之一插图

什么是 CTA 按钮,为什么它很重要?

CTA ,俗称号召性按钮,它是 Web 和移动设备的任何用户界面的交互元素:它的主要目的是诱使用户采取某些操作,为特定页面或屏幕呈现转化,例如购买,联系,订阅等。

传统上,有效的号召性用语按钮很容易被注意到,更重要的是,设计师故意以这种方式设计它们,以致人们忍不住去点击它。这就是为什么它们通常非常醒目,容易吸引用户注意力。其中包含带有特定号召性用语(例如“了解更多”或“立即购买”)的微文案,促使用户点击。

潜在客户的生成和购买是可以创建号召性行动的基本业务目标。当按钮设计足够引人注目以立即吸引潜在客户的注意力时,它可以诱使他们点击并进入下一阶段,例如填写简短的联系表格或预订产品。

CTA 按钮设计,提高转化率的关键之一插图(1)

通过这种方式,用户可以通过销售渠道从一个阶段引导到另一个阶段,帮助他们了解产品或服务的详细信息。即使是专业制作的内容也可能无法保证高度的参与度。如果没有 CTA 按钮,人们更有可能快速扫描内容并保持原样不动,不会进行下一步的交互操作。

有些人可能认为一个足够的号召性用语按钮设计仅适用于大尺寸和明亮的颜色来实现。尽管如此,确保 CTA 的有效性还有很多方面。让我们看看它们是什么以及它们适当使用的实际示例。

CTA 按钮设计,提高转化率的关键之一插图(2)

是什么造就了强大的 CTA 按钮设计?

尺寸

尺寸是帮助根据重要性划分 UI 组件的最常用工具之一。元素越大,它变得越明显。由于 CTA 的首要目标是吸引用户的注意力,因此设计师通常会尝试让它们在屏幕上的其他按钮中脱颖而出,尤其是通过醒目的尺寸。

大按钮很有可能被注意到和点击,但你必须保持一些限制。一个引人注目的号召性用语按钮通常足够大以便快速找到,但又不能太大,以免破坏布局的视觉构成和层次结构。例如,Apple 表示移动 UI 中的 CTA 至少应为 44×44 像素,而微软建议为 34×26 像素。

CTA 按钮设计,提高转化率的关键之一插图(3)

颜色和形状

具有视觉吸引力的尺寸只是强大的号召性用语按钮设计的一个方面。为了使按钮更加引人注目,选择足够多的按钮至关重要颜色和形状 。

问题是人类的情绪和行为与视觉环境高度相关。我们的大脑会对颜色和形状做出反应,而我们通常不会注意到它。当我们的眼睛感知颜色的那一刻,它们与大脑连接,大脑向内分泌系统发出信号,释放负责情绪和情绪变化的激素。

心理学有专门的分支专门研究不同颜色的影响并塑造我们的意识。以下是关于颜色和形状的常见含义的简要指南。


颜色含义:

  • 红色。自信、青春和力量。
  • 橙色。友好、热情、充满活力。
  • 黄色。幸福、乐观和温暖。
  • 绿色。和平、成长和健康。
  • 蓝色。信任、安全和稳定。
  • 紫色。奢华、创意和智慧。
  • 黑色。可靠、成熟、经验丰富。
  • 白色。简单、平静、干净。


形状含义:

  • 正方形和长方形的含义:纪律、力量、勇气、安全、可靠。
  • 三角形含义:兴奋、风险、危险、平衡、稳定。
  • 圆形、椭圆形和椭圆形的含义:永恒、女性、宇宙、魔法、神秘。
  • 抽象塑造意义:意义的二重性、唯一性、精细化。

传统上,CTA 按钮看起来像水平矩形,因为人们习惯于将这种形状视为可点击按钮。此外,建议设计带有圆角的 CTA,因为它们被认为是指向按钮内部,从而引起注意。

颜色选择取决于使过程更加复杂的各个方面。设计师需要考虑构图的基本颜色以及目标受众的潜在偏好和心理特点等因素。在为 CTA 选择颜色时,请牢记一个至关重要的条件:按钮和背景颜色应具有足够的对比度,以便 CTA 能够从其他 UI 组件中脱颖而出。

CTA 按钮设计,提高转化率的关键之一插图(4)

放置

CTA 按钮的位置对其功能至关重要。如果它们位于用户眼睛无法捕捉到的区域,则颜色和大小等其他视觉方面可能无法有效发挥作用。但是如何理解哪个位置更好了?

许多研究表明,在阅读网页之前,人们会先扫描它以了解他们是否感兴趣。考虑到这一事实,设计人员可能会了解最突出的可扫描区域并将号召性用语放置在用户的视眼路径中。

根据不同的研究,包括 Nielsen Norman Group、UXPin 团队等的出版物,有几个流行的扫描模式对于网页,其中“F”和“Z”模式。

F-pattern 最常见于具有大量内容的网页,例如博客、新闻平台。用户首先扫描屏幕顶部的一条水平线,然后将页面向下移动一点,并跨过通常覆盖较短区域的水平线进行阅读。最后一个是副本左侧的垂直线,他们在其中寻找段落开头句子中的关键字。

Z-pattern 是一种典型的扫描登陆页面或未加载副本且不需要向下滚动页面的网站的模型,这意味着在预滚动区域中可以看到所有核心数据。用户首先从左上角开始扫描页面顶部,寻找重要信息,然后以对角线向下到对角,以页面底部的水平线结束,再次从左到右。

这些模式允许设计人员将 CTA 放置在最受关注的位置,例如顶角,并将其他需要关注的点放在顶线和底线。此外,将 CTA 按钮放置在布局的中心也是一个好主意,尤其是当它没有被其他 UI 元素干扰。

CTA 按钮设计,提高转化率的关键之一插图(5)

微文案

微文案在号召性用语的效率中起着重要作用。它被定义为文本作为对用户的提示。更具体地说,微文案包括按钮和菜单文案、错误消息、安全说明、条款和条件,以及任何类型的产品使用说明。

CTA 微文案实际上是一个导示,它告诉用户如果点击按钮他们将采取什么行动。强大的 CTA 微文案通常简短但一致,因此可以迅速吸引用户的注意力。

CTA 按钮设计,提高转化率的关键之一插图(6)

号召性用语按钮是电子商务中最强大的销售工具之一,也是页面或屏幕转换良好的影响因素。设计人员需要了解 CTA 的重要性,并深入关注对其性能产生影响的所有细节。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
deise的头像-UItheme

昵称

取消
昵称表情