数字产品的交互系统由具有任务和功能的小元素组成。为了构建一个完整的系统，关注所有的细节非常重要。
按钮是用户界面的核心交互组件，它对于网站或者应用的转化率有着非常重要的作用。按钮因为其特性不同，所以被分为不同的类型。此篇新文章专门讨论了其中被称为行动召唤的按钮，文章涵盖了行动召唤按钮的本质，以及它在视觉引导中的作用和实现业务目标的重要性。让我们先看看行动召唤按钮如何从优秀案例中脱颖而出的。
什么是行动召唤按钮？为什么它很重要？
对于任何一个网站或移动用户界面来说，行动召唤按钮是一个非常重要的交互元素。它的主要目的是引导人们采取某种行动，为特定页面提供转化，例如购买，联系，订阅等。
习惯上来说，按钮本来就容易被注意到，甚至，设计师故意用某些方式创造他们，让用户忍不住去点击它。这就是为什么他们加粗按钮中的微文案（例如“了解更多”或“立即购买”），来鼓励我们点击它。
引导和提高购买是行动召唤按钮被创造出来的基本商业目标。当按钮设计足够引人注目，能够立刻吸引客户的注意力，就能够使用户去点击进入下一个步骤，例如完成简短的联系方式的表单，或者预定产品。
通过这种方式，网站访问者和移动产品用户可以通过销售漏斗从一个阶段被引导到另一个阶段，帮助他们了解有关产品或服务的详细信息。即使是专业的内容制作，也不能保证用户的高参与度。没有行动召唤按钮，用户更可能快速的浏览内容并且不作任何操作离开网站。
一些人认为行动召唤按钮设计只适用于大尺寸和明亮颜色的界面，才能完成所有的既定目标。不过，依然还有很多方面能够确保行动召唤按钮的有效性。让我们来看一看他们在实际的项目中如何被使用的。
是什么造就了强大的行动召唤按钮按钮？
尺寸
大小是能够帮助我们根据重要程度区分UI元素最常见工具之一。所以，越大的元素越显而易见。由于行动召唤按钮的优先目标是吸引用户的关注，所以设计师经常尝试让行动召唤按钮能够在屏幕上脱颖而出，最多的方式是通过放大尺寸来吸引用户。
更大的按钮有更大的机会被发现和点击到，但你仍然得遵循一些限制。一个引人注目的行动召唤按钮通常足够大并且可以快速被找到，但同时也不会过大，以避免对布局的视觉结构和层次造成损害。市场上的领导者通常会提供关于按钮有效尺寸的建议，以备设计师作为参考。例如，苹果宣称在手机界面设计中，行动召唤按钮至少需要44x44像素，然而微软的推荐是34x26像素。
颜色和形状
视觉上，醒目的尺寸只是强大的行动召唤按钮的一个方面。要想使按钮更加醒目，选择合适的颜色和形状就显得尤为重要。人的情绪和行为是与视觉环境高度相关的。我们的大脑对颜色和形状都有反应，然而我们并没有注意到。当我们的眼睛察觉到颜色的时候，眼睛会连接上大脑，将信号传递至内分泌系统发出信号，通过释放荷尔蒙来负责情绪的变化。心理学有专门的分支，致力于研究不同颜色和形状对我们意识的影响。在前面的文章中，我们描述了这种影响对设计解决方案的作用。下面是一些关于颜色和形状具有哪些常见含义的简要参考。
颜色含义：
红色：自信、年轻和力量；
橙色：友好、温暖和活力；
黄色：幸福、乐观和温暖；
绿色：和平、成长和健康；
蓝色：信任、安全和稳定；
紫色：奢侈、创意和明智；
黑色：可靠的、精致的和有经验的；
白色：简单、平静和干净；
形状含义：
正方形和矩形的含义：严谨、力量、勇气、安全和可靠性；
三角形的含义：兴奋、挑战、危险、平衡和稳定性；
圆形和椭圆形的含义：永恒、女性、宇宙、魔法和未知；
抽象形状的含义：二次元、独特的、详细的；
传统上来说，行动召唤按钮看起来像横向的矩形，因为人们习惯将这种形状感知为可以点击的按钮。另外，建议设计具有圆角的行动召唤按钮，因为他们被认为会更好的将用户的注意力指向按钮内部。
颜色的选择取决于设计过程中更加复杂的各个方面。设计师需要考虑例如作品的基本色彩，以及目标受众的潜在偏好和心理特征。在为行动召唤按钮选择颜色时，我们有个重要的原则要牢记在心：按钮和背景的颜色需要有强烈的对比，使行动召唤按钮能够从UI组件中脱颖而出。
位置
从可用性的角度来说，行动召唤按钮的摆放位置至关重要。如果行动召唤按钮处在用户无法观测到的位置，那么颜色和尺寸这两个视觉要素也就不能发挥作用。但是按钮在什么位置更容易被点击。
许多研究表明，用户在浏览网页之前，会快速扫描网页以了解他们是否感兴趣。鉴于此，设计师需要学习和了解页面最突出的浏览区域，然后将行动召唤按钮放置在用户浏览路径之上。
根据不同的研究，包括尼尔森诺曼集团，UXPin团队和其他人的研究：网页有几种主流的浏览模式，其中包括“F”和“Z”模式。
“F”模式在包含大量文本的网页中最为常见，像博客和新闻平台。用户首先会沿着页面顶部的水平线浏览，然后微微向下移动页面，沿着水平线继续浏览。最后用户会在页面左侧沿垂直方向查找关键词信息。
“Z”模式是指用于登录页面或者不需要向下滚动的页面的一种典型的浏览模式，这意味着所有的核心数据都能够在预滚动区域被观察到。用户首先从页面的左上角沿水平线开始浏览，寻找重要的信息，然后沿对角线方向到达页面的对角，最后沿页面底部水平线从左向右浏览。
这些模式要求设计师将行动召唤按钮放置在页面受关注的位置，例如放在页面顶部的角落或沿着页面的顶部和底部水平线放置。将行动召唤按钮放置在页面布局的中心也是个非常好的主意，尤其是当页面的UI元素过多时。
微文案
微文案在行动召唤的使用效率上发挥着重要的作用。它被定义为提示用户的小短文本。更具体来说，微文案包括按钮和菜单内的文案，错误消息，安全提示，条件和条款，以及任何一种产品的使用说明。行动召唤的微文案实际上是一个提示，告诉用户如果点击按钮将会有什么影响。行动召唤的微文案通常短小精悍，能迅速吸引用户的注意力。
行动召唤按钮是电子商务网站中最强大的销售工具之一，也是影响页面获得良好转换率的一个重要因素。设计师需要意识到行动召唤按钮的重要性，同时关注到所有细节对于行动召唤按钮的影响。
原文：https://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2