数字产品的有效交互系统由具有其任务和功能的小元素组成。为了建立足够的系统，关注所有细节至关重要。
按钮是用户界面的核心交互组件，它在用户体验以及网站和应用程序的转换率方面发挥着重要的作用。UI按钮根据其功能而有所不同，可以分为不同的类型。这篇文章致力于呼吁大家关注：CTA按钮（Call to Action用户行为号召）的设计技巧，涵盖了他们的本质，在直观导航中的角色以及业务目标的重要性。让我们通过实践学习来看看，是什么让CTA按钮脱颖而出。
https://dribbble.com/shots/3889567-Photo-App-Interactions
什么是CTA按钮，为什么它很重要？
行为召唤按钮（CTA）是任何网络和移动用户界面的互动元素：其主要目标是诱使用户采取某些操作，为特定页面或屏幕呈现转化，例如购买，联系，订阅等。
传统上，CTA按钮很容易被注意到，甚至，设计师故意以这种方式创建它们，以致人们忍不住去点击它。这就是为什么他们的按钮通常是大胆的，其中包含特定的号召性用语（例如“了解更多”或“立即购买”），它鼓励我们推动它。
潜在客户的生成和购买是可以创建号召性行动的基本业务目标。当一个按钮的设计足够吸引潜在客户的注意力时，它可以吸引他们点击并进入下一个阶段，比如填写一个简短的联系表单或完成产品的预定。
https://dribbble.com/shots/3874159-Digital-Agency-Landing-Page
通过这种方式，网站访问者和应用用户可以通过销售渠道从一个阶段引导到另一个阶段，帮助他们了解有关产品或服务的详细信息。即使是专业制作的内容也可能无法保证用户的高度参与度。如果没有CTA按钮，人们更有可能快速扫描内容，一览而过，但不包含任何交互操作。
有些人可能认为，一个足够的号召性按钮设计只适用于大尺寸和明亮的颜色，来实现其所有的目标。不过，确保CTA的有效性还有很多方面。让我们看看他们是什么以及他们适当使用的实际例子。
https://dribbble.com/shots/3446255-Urban-Sketcher-App
是什么让一个CTA按钮引人注目？
尺寸
大小是帮助按照其重要性划分UI组件的最常用工具之一。元素越大，它表现得越明显。由于CTA的先前目标是吸引用户的注意力，因此设计师通常会尝试让它们在屏幕上的其他按钮中脱颖而出，尤其是通过显著的尺寸。
大按钮有很高的机会被发现和点击，但你必须保持一些限制。一个引人注目的号召性用语按钮通常足够大，可以快速找到，但不会太大，以免布局的视觉组合和层次结构受到损害。市场领导者通常会在其准则中提供有关按钮有效大小的建议。例如，苹果公司表示，移动用户界面中的CTA应至少为44×44像素，而微软推荐34×26像素。
https://dribbble.com/shots/4038053-Tasty-Burger-App
颜色和形状
视觉上有吸引力的尺寸只是强大CTA的一个方面。为了让按钮更明显，选择合适的颜色和形状至关重要。人的情绪和行为与视觉环境高度相关。我们的思维对颜色和形状有反应，但我们通常不会注意到它。当我们的眼睛感觉到一种颜色时，它们与大脑相连，这个大脑向内分泌系统发出信号，释放荷尔蒙，负责情感和心情的转变。心理学中有不同的颜色和形状影响我们意识的具体分支。在我们以前的文章中，我们描述了这种影响对设计解决方案的作用。以下是关于颜色和形状具有的常见含义的简要指南。
颜色含义：
红色
自信，青春和力量。
橙色
友善，温暖，充满活力。
黄色
幸福，乐观和温暖。
绿色
和平，成长和健康。
蓝色
信任，安全和稳定。
紫色
豪华，富有创意，明智。
黑色
可靠，复杂，经验丰富。
白色
简单，冷静，干净。
形状含义：
正方形和矩形
纪律，力量，勇气，安全性，可靠性。
三角形
兴奋，风险，危险，平衡，稳定。
圆圈，椭圆和椭圆
永恒，女性，宇宙，魔法，神秘。
抽象形
意义的二重性，唯一性，精心制作。
传统上，CTA按钮看起来像水平矩形，因为人们习惯将这种形状视为可点击的按钮。此外，建议设计带有圆角的CTA按钮，因为它们被认为是指向按钮内部的引起注意力的复制。
颜色的选择取决于使过程更复杂的各个方面。设计师需要考虑这些因素，如作品的基本色彩，以及目标受众的潜在偏好和心理特征。在为CTA选择颜色时有一个条件非常重要：按钮和背景颜色的对比应该足够鲜明，以便CTA可以从其他UI组件中脱颖而出。
https://dribbble.com/shots/4025676-Dating-App-Landing-Page
位置
CTA按钮的放置对其性能至关重要。如果他们位于用户眼睛无法捕捉到的区域，则其他视觉方面（如颜色和尺寸）可能无法有效工作。但是如何理解什么样的位置更加合适？
许多研究表明，在阅读网页之前，人们会扫描它以了解他们是否感兴趣。考虑到这一事实，设计人员可能会了解最突出的可扫描区域，并将呼叫行为置于用户的路径中。
根据包括Nielsen Norman Group，UXPin团队等在内的不同研究报告，网页上有几种流行的扫描模式，其中包括“F”和“Z”模式。
F模式
F模式包含大量内容的网页，例如博客，新闻平台中是最常见的。用户首先扫描屏幕顶部的水平线，然后向下移动页面并读取通常覆盖较短区域的水平线。最后一个是在副本左侧的垂直线，在那里他们在段落的初始句子中查找关键字。
Z模式
Z模式是一种典型的扫描着陆页或未加载副本的网站的模型，并且不需要向下滚动页面，这意味着所有核心数据在预滚动区域中都可见。用户首先从左上角开始扫描页面顶部，寻找重要信息，然后沿着对角线向下到对角，结束于页面底部的水平线，再从左到右。
这些模式允许设计师将CTA放置在最受关注的位置，例如顶角，并将其他要点注意力放在顶部和底部。此外，将CTA按钮放置在布局的中心是一个好主意，特别是当它不与其他UI元素相互干扰时。
https://dribbble.com/shots/3601708-The-Gourmet-Website
微文案
微文案在CTA按钮设计中也发挥着重要作用。它被定义为CTA按钮内的小部分文本。更具体地说，微文案包括按钮内的标签，报错消息，安全说明，条款和条件，以及任何类型的产品使用说明。
CTA微文案实际上是一个导示，告诉用户如果点击按钮他们将采取什么行动。强大的CTA微文案通常很短但一致，因此可以快速吸引用户的注意力。
https://dribbble.com/shots/3501539-Bright-Vibe-Calendar
行为召唤按钮（CTA）是电子商务中功能最强大的销售工具之一，也是影响页面或屏幕良好转换的重要因素之一。设计师需要了解CTA的重要性，并深切关注影响其表现的所有细节。
我的设计作品（Dribbble）：https://dribbble.com/exciting
本文翻译来自Medium感谢Tubik Studio
网友评论