干货！UI界面中“行为召唤按钮”的设计秘诀

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

数字产品的有效交互系统由具有其任务和功能的小元素组成。为了建立丰富的交互系统，关注所有小元素的设计细节至关重要。

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

Photo App

什么是行为召唤按钮？为什么它如此重要？

行为召唤（CTA）按钮是网页和移动用户界面中的常见互动元素：其主要目标是诱使用户采取某些操作，为特定页面或屏幕呈现转化，例如购买，联系 ，订阅等。

传统上，CTA按钮很容易被注意到，甚至有很多，设计者故意这样创建它们，以使人们无法抗拒点击它。这也是为什么它们通常都是以粗体字体呈现的原因，按钮中包含了一种特殊的行为召唤(例如:“学习更多”或“现在购买”)，这就鼓励我们主动去点击它。

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

数字机构的着陆页

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

有些人可能认为足够的“行为召唤按钮”设计仅适用于大尺寸和鲜艳的颜色，以实现其所有目标。不过，事实并非如此，确保CTA的有效性还有很多其它方面。让我们看看他们适当使用的实际例子。

Urban Sketcher App

是什么造就了强大的CTA按钮？

尺寸

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

尺寸大的按钮有很高的机会被发现和点击，但你也必须保持一些限制。一个引人注目的“行为号召按钮”通常是足够大，可以被快速找到，但不能太大，以免布局的视觉组合和层次结构受到破坏。市场领导者通常会在其准则中提供有关按钮有效大小的建议。例如，苹果公司表示，移动用户界面中的CTA按钮应至少为44× 44 像素，而微软推荐至少为34× 26 像素。

Tasty Burger App

颜色和形状

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