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

最新推荐文章于 2023-07-14 21:00:00 发布

翻译最新推荐文章于 2023-07-14 21:00:00 发布 · 356 阅读

文章标签：

#交互设计 #原型设计

UI 同时被 3 个专栏收录

610 篇文章

订阅专栏

产品经理

517 篇文章

订阅专栏

移动开发

422 篇文章

订阅专栏

本文介绍了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按钮不会受到其他界面部件的干扰的情况下，你也可以将其放置在页面的中部，所能达到的效果也是非常明显的。