界面设计中如何增强CTA按钮召唤力？

以下内容由Mockplus（摹客）团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

网页和软件应用之类数字产品的有效交互系统一般是由拥有各种任务和功能的小元素构成。而为创建更加完整流畅的交互系统，Web和软件应用的每一个细节都应该被重视。这一点必须牢记。

按钮，作为Web和软件应用用户界面最核心的交互元素之一，对于提升用户体验，增加网页和软件应用转化率，发挥着非常重要的作用。而这些界面按钮因其功能的不同又可以划分为多种不同的类型。其中最为设计师重视并高频使用的一类，就是一种名为“call-to-action”(CTA)的按钮。无论就其本质而言，还是从其在设计直观的界面导航中发挥的作用以及对实现商务目标的重要性方面而言，它在网页和软件的界面设计中，都是不可或缺的。

所以，我们如何才能让界面的CAT按钮设计从众多的优质设计中脱颖而出呢？以下为大家详细的讲解：

首先，什么是CTA按钮，它为何在界面设计中如此重要？

CTA按钮（又名行为召唤按钮）是Web和移动软件应用中最常用的交互元素：其主要作用就是引导人们做出某些特定行为，例如购买，联系或订阅等。

一般而言，CTA按钮很容易引起用户注意。所以，一些界面设计师有意通过按钮设计引导甚至诱导用户执行某些特定行为，让他们抑制不住而点击。这也就解释了为什么CTA按钮时常被设计成为包含有特定微文案的粗体按钮（例如“详情阅读”或“立即购买”），以吸引和鼓励用户点击。

而且，设计师之所以为界面设计和创建各类行为召唤按钮，其所要达到的基本业务目标是开发潜在客户，增加产品销量。当一个CTA按钮足够吸引潜在用户注意力时，它就能够刺激用户点击，从而引导用户进入下一个阶段。比如填写简洁的联系表单或完成产品预订等。

如此，网站访问者或软件用户就可以通过各类销售渠道逐步从一个阶段进入另一个阶段，了解更多产品或服务的细节，从而增加产品销量。虽然某些情况下，最专业，最优质的设计并不是高用户参与度的保证，但是，界面设计中如若没有CTA按钮，用户则更有可能简单扫一下，就直接离开了，更别提增加销量。所以，界面设计之中，CTA按钮的设计非常重要。

有人认为，要设计足够优质的CTA按钮，只需使用大尺寸的按钮和明亮的颜色，就能实现其吸引用户的目标。然而，事实上，实现CTA按钮有效性的方式远远不止这些。

那么这些方式具体是什么呢？我们如何才能更加恰当地选择和使用它们呢？

如何让CTA按钮设计更有召唤力？

尺寸

尺寸，是设计师们最常用于划分Web或软件界面各类组件重要性的方式之一。组件尺寸越大，就越能引人注意。加之，CAT按钮设计的首要目标本就是吸引用户注意。所以，设计师们往往会尝试通过放大CAT按钮尺寸，让其与界面剩下的按钮和元素形成鲜明对比，从而使其更加显著突出。

尽管尺寸稍大的CTA按钮被用户注意并点击的机率更大，但并不是尺寸越大越好。事实上，一个优质且极具吸引力的行为召唤按钮，通常应该是大到能够快速吸引用户注意，同时又不会太大，从而影响甚至破坏整个界面的视觉效果和层级布局。这也是为什么，市场管理者时常会建议，为界面添加更加协调且有效的按钮尺寸的原因。比如，苹果建议移动端界面设计的CAT按钮尺寸至少为44×44 px，而微软则是建议至少为34×26 px。

色彩和形状

通过尺寸差异来营造视觉吸引力，仅仅只是一款优质的CTA按钮设计能够实现地效果的一个方面。为了让按钮更加显著突出，其色彩和形状的选择也同样重要。总所周知，人类的情绪和行为与周围的环境，尤其是视觉环境，息息相关。我们的大脑对于色彩和形状的感知和反应也非常迅速。一般而言，当我们的眼睛捕捉到一种色彩之后，它会迅速地向大脑传递信息， 从而刺激大脑分泌系统发出信号，产生一种名为荷尔蒙的激素，最终引起我们情绪和情感的变化。而且，心理学方面也设置了专门的学科分支，集中研究不同颜色和形状对于人类意识的影响。

总之，无论是颜色和形状，对于增强CAT按钮的吸引力也是至关重要的。

以下为大家简单介绍一些常见颜色和形状的含义：

常用色彩的含义：

*红色：自信，青春，力量

*橙色：友善，热情，活力

*黄色：快乐，乐观，温暖

*绿色：祥和，成长，健康

*蓝色：信任，安全，稳定

*紫色：豪华，创意，智慧

*黑色：可靠，老练，经验丰富

*白色：简单，冷静，纯洁

常用形状的含义：

*正方形和长方形：自律，力量，勇气，安全，可靠

*三角形：兴奋，风险，危险，平衡，稳定

*圆形和椭圆：永恒，女性，宇宙，魔法，神秘

*抽象图形：双重性，独特性，精心打造

传统的CTA按钮通常会选择矩形，这因为已然已然习惯将这种形状视为可点击的按钮。而且，随着设计规范的日益发展和更迭，也有更多的设计规范建议添加一些带有圆角的矩形CTA按钮。因为这样的设计，会使按钮更加的内化，让用户更注意按钮内部的文字或内容，从而提升按钮点击率。

然而，颜色的选择则取决于方方面面的因素，更加复杂而多变。设计师在设计之中需要考虑到各个方面的因素，比如整个设计的基本配色，目标用户的偏好以及心理特征等等。同时，在选择界面CTA按钮的颜色时，也需要牢记一个点：利用按钮与界面背景的强烈对比，让CTA按其它其它界面部件中脱颖而出，从而更具召唤力。

位置

CTA按钮在界面中摆放的位置对于其功能的实现，作用也是相当显著的。如若将其放置在界面内用户眼睛无法触及的区域，那么设计师希望达到的视觉效果，例如利用按钮色彩和尺寸的独特设计吸引用户注意力等，就很难实现。但具体如何放置CTA按钮才会更高效呢？

大量研究显示，在浏览网页之前，人们时常会预先快速扫视整个页面，以判断页面内容是否有趣或实用。所以，考虑到这一点，设计师需要研究和发现界面中最突出，且用户最容易扫视的区域，用以放置行为召唤按钮，引导用户点击。

而且，根据不同研究（尤其是用户研究领域权威Nielsen Norman Group的研究）显示，用户总是在网页浏览中惯用几种阅读模式，例如极具代表性的“F”和“Z”模式：

“F”模式是用户阅读信息类网页，比如博客或新闻平台等，最常使用地阅读模式。在网页扫描中，用户首先会沿着水平方向阅读页面顶部的内容。然后紧接着下移一部分区域，阅读涵盖区域较少的内容。最后，用户会将视线移动到页面左侧，继续垂直浏览段落的首句，搜寻需要的关键词进行阅读。这样，就形成了一个大大的“F”的阅读轨迹，所以常被称作“F”模式。

“Z”模式则是用户浏览登录页面或网页的典型模式。由于这类登录页面或网页的所有重要内容都集中显示在其着陆页内，用户无需滚动即可阅读所需内容。所以，用户在浏览这类网页时，首先会从页面左上角的内容开始阅读，查找重要信息。然后沿着对角线向下移动到另一角。最后，在页面底部沿着水平方向从左至右阅读，直至结束。从而，形成了一个大大的“Z”的阅读轨迹，所以常被称作“Z”模式。

在学习和了解这些用户常用的阅读模式之后，CTA按钮的位置选择就不再是难事，例如将其放置在页面的顶部或底部。当然，在你的CTA按钮不会受到其他界面部件的干扰的情况下，你也可以将其放置在页面的中部，所能达到的效果也是非常明显的。

微文案

微文案在CTA按钮设计中的作用也日益重要。 那CTA按钮的微文案具体指的是什么呢？答案很简单。微文案，顾名思义，就是CTA按钮内的小段文本，给予用户提示，以刺激用户点击。更具体地说，微文案包括按钮内的标签，报错信息，安全提示，条款和条件以及各种产品相关说明等等。

CTA按钮微文案的添加实则是为了告诉用户，当点击按钮时，他们会得到什么。优秀高效的按钮文案时常是简洁且指向明确，以便迅速吸引用户的注意力。

结语

作为电子商务类软件和网页最有效的销售工具之一，行为召唤（CTA）按钮也是提升页面或网页转化率的重要因素。所以，在界面设计中，设计师不仅需要认识到CTA按钮的重要性，同时也需要深思和推敲其每一个细节，例如上面所分析到的尺寸，色彩，形状，页面位置以及微文案等等，力求实现其最佳效果。

当然，如若确实不太清楚，设计的CTA按钮能否以最快的速度引起用户注意，并引导其点击， 也可选择一款优秀的原型工具（例如颇受用户青睐地简单快速的原型工具，Mockplus），将其制作成更加直观的交互原型，收集用户反馈，从而及时做出修改和提升。

作者：Tubik Studio

原文地址：https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2