界面设计中如何加强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