干货！我必须知道UI界面“行为调用按钮”的设计秘密

以下内容由Mockplus团队翻译，用于学习交流。 Mockplus是一种更快速，更简单的原型制作工具。

一个有效的数字产品交互系统由小元素及其任务和功能组成。为了构建一个丰富的交互系统，重要的是要注意所有小元素的设计细节。

按钮是用户界面的核心交互组件，在高质量的用户体验和网站和应用程序的转换率中发挥着重要作用。 UI按钮可根据其功能分为不同类型。本文致力于解释“CTA”按钮，该按钮涵盖了它们的本质，它们在直观导航中的作用以及它们在业务目标中的重要性。让我们来看看是什么让CTA按钮从最佳实践中脱颖而出。

照片应用程序

什么是行为呼叫按钮，为什么它如此重要？

行动呼吁（CTA）按钮是网页和移动用户界面中的常见交互元素：其主要目标是诱使用户采取某些操作来呈现特定页面或屏幕的转换，例如购买，联系人，订阅和更多。传统上，CTA按钮很容易被注意到，并且有许多，设计师故意创建它们，以便人们无法抗拒点击它。这就是为什么它们通常以粗体字体呈现，并且按钮包含一个特殊的行为调用（例如:“了解更多”或者“现在购买”），这鼓励我们采取主动点击它。

潜在客户的生成和购买是创建号召性用语的基本业务目标。当按钮被设计为吸引潜在客户的注意力时，它可以吸引他们点击并进入下一阶段，例如填写简短的联系表格或提交产品预订。

数字代理登陆页面

通过这种方式，网站访问者和应用程序用户可以通过销售渠道从一个阶段引导到另一个阶段，以帮助他们了解有关产品或服务的更多信息。即使是专业制作的内容也可能无法保证高度的用户参与度。如果没有CTA按钮，人们更有可能只是快速扫描内容然后忽略它。

有些人可能认为足够的“行为呼叫按钮”设计只适合大而鲜艳的颜色来实现他们的所有目标。然而，事实并非如此，还有许多其他方面可以确保CTA的有效性。让我们来看看它们正确使用的实际例子。

Urban Sketcher App

什么是强大的CTA按钮？

大小

大小是帮助划分UI组件重要性的最常用工具之一。元素大小越大，它就越明显。由于CTA之前的目标是引起用户的注意，设计师经常试图让它们从屏幕上的其他按钮中脱颖而出，特别是通过显着的尺寸差异。

较大的按钮很有可能被发现和点击，但您还必须保持一些限制。一个引人注目的“行为呼叫按钮”通常很大，可以快速找到，但不能太大，以免破坏布局的视觉组合和层次结构。市场领导者经常就其指南中按钮的有效尺寸提供建议。例如，Apple表示移动用户界面中的CTA按钮应该至少为44次; 44像素，而微软推荐至少34倍; 26像素。

美味的汉堡应用

颜色和形状

视觉上吸引人的尺寸只是强大的CTA的一个方面。为了使按钮更加醒目，选择丰富的颜色和形状非常重要。事实表明，人们的情绪和行为与视觉环境高度相关。我们的想法会对颜色和形状做出反应，但我们通常不会注意到这些细节。当我们的眼睛感知某种颜色时，它们与大脑相连，大脑向内分泌系统发出信号，释放激素，负责情绪和情绪的变化。心理科学对不同颜色和形状如何影响我们的意识进行了具体的分支研究。在我之前的文章中，我描述了这种影响对设计解决方案的影响。以下是颜色和形状的常见含义的简要指南。

颜色含义：

红色。信心，青春和力量。橙子。友好，温暖，充满活力。黄色。幸福，乐观和温暖。绿色。和平，成长和健康。蓝色。信任，安全和稳定。紫色。奢华，富有创意，睿智。黑色。可靠，复杂和经验丰富。白色。简单，平静，干净。

形状含义：

正方形和矩形的含义：纪律，力量，勇气，安全，可靠性。三角形的含义：兴奋，风险，危险，平衡，稳定。圆形，椭圆形和椭圆形的含义：永恒，女性，宇宙，魔法，神秘。抽象形式意义：二元性，独特性，精细化。

传统上，CTA按钮看起来像水平矩形，因为人们习惯将这种形状看作可点击的按钮。此外，建议设计带圆角的CTA，因为它们被认为具有吸引内部注意力的按钮。颜色的选择取决于使设计过程更复杂的各个方面。设计师需要考虑这些因素，例如作品的基本颜色，以及目标受众的潜在偏好和心理特征。在为CTA选择颜色时有一个条件很重要：按钮和背景颜色应该足够清晰，以便CTA可以从其他UI组件中脱颖而出。

约会APP登陆页面

放置

CTA按钮的放置对其性能至关重要。如果其他视觉方面（例如颜色和大小）位于用户眼睛无法捕捉的区域中，则可能无效。但是，您如何理解哪个职位更有效？

许多研究表明人们在阅读网页内容之前阅读它，以了解他们是否感兴趣。考虑到这一点，设计者可能知道最突出的可扫描区域并将行为调用按钮放在用户的视觉路径中。

根据不同的研究，包括尼尔森诺曼集团，UXPin团队和其他发表的文章表明，该网页有几种流行的扫描模式，包括“F”和“Z”“模式。

对于包含大量内容的网页，例如博客，新闻平台，F模式是最常见的扫描模式。用户首先扫描屏幕顶部的水平线，然后向下移动页面并读取通常覆盖较短区域的水平线。最后一行是左侧的垂直线，用户在段落的初始句子中找到感兴趣的关键字。

Z模式是用于扫描未加载副本的登录页面或网页的典型模式，并且不需要向下滚动页面，这意味着所有核心数据在预滚动区域中可见。用户首先从左上角扫描页面顶部以查找重要信息，然后向下到页面的另一侧，结束页面底部的水平线，然后再从左到右开始。

这些模式允许设计人员将CTA放置在用户最关注的位置，例如顶角，并将其他点聚焦在顶部和底部。此外，将CTA按钮放在布局的中心是个好主意，特别是如果它没有超过其他UI元素。

美食页面

显微术

Microcopy在行为调用的效率中起着重要作用。它被定义为一个小的文本文本提示，可以帮助用户执行某些操作。更具体地说，它包括按钮和菜单副本，错误消息，安全说明，条款和条件以及任何类型的产品使用说明。

CTA Microcopy实际上是一个看起来很小的元素，可以快速让用户突然清楚，告诉用户如果他们点击按钮会触发什么。功能强大的CTA Microcopy通常很短但一致，因此可以迅速吸引用户的注意力。

明亮的Vibe日历

“行为呼叫按钮“是电子商务中最强大的销售工具之一，也是影响页面或屏幕转换率的重要因素之一。设计师需要了解CTA的重要性，并密切关注影响其性能的所有细节。

原作者：Tubik Studio

原始地址：https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2 Mockplus是一个原型，更快，更简单。立即下载Mockplus，享受免费的原型设计之旅。

« 沃森的黄金十年结束了。可以打赌电子商务迎来复兴吗？ | 北斗科技朱永敏：站在物联网的风口，谁能成为时代的猫头鹰？ »