DaisyWithCat

      原文：The Ultimate UX Design of the Perfect CTA Button

      作者：Jerry Cao

      译者：熠枫（Desideria）

      按钮是最重要的元素之一，特别是当按钮作为用户行为号召（Call to Action）时。如果你到最后一分钟才关注按钮，那么你的设计可能就在让转化率冒险。      这篇文章将探讨按钮的尺寸，风格，放置的位置和颜色——你需要知道的一切，有关于如何创建有效的用户行为号召来增强用户体验。

      按钮的重要性 

      按钮如果放置在页面错误的位置上，又使用了错误的颜色，将会阻碍用户的体验路径。而按钮原本就是用来引导用户行为的。

      如果用户不按照你希望的去行动，那么按钮很有可能设计失败了，原因有以下几点：

• 按钮被放置在用户不熟悉的位置上

• 按钮的颜色让用户不想点击，或者不够显眼

• 一眼望去，按钮无法立即可见 

      根据UX Movement，我们可以归纳所有CTA按钮的分类：

• 积极的：变更，发送或者添加信息。例如，一个按钮，旁边伴随着新闻邮件的邮箱登记框，那么点击这个按钮则会发送信息。

• 中立的：不进行任何变更，或者按钮能让用户返回界面。例如取消按钮。

• 消极的：删除或重置信息。 

      考虑颜色和对比

      UX Movement指出，设计按钮时需要清晰的颜色对比，这能帮助用户识别出到底该做什么操作。如果你主要的CTA按钮与背景太相近，或者与其他按钮很相像，那么用户就会觉得不确定。最好的情况是，用户会放慢决策或行动的速度，最坏的情况是，他们根本就不去点！

      对于那些患有色盲症的用户，按钮颜色对比将至关重要。对于色盲用户来说，有些颜色可能看起来非常类似，即使这些颜色对于视力良好的用户来说明明完全不同。

      红色按钮与绿色按钮之争就是很好的例子来解释为什么你应该考虑色盲用户。

      让我们来简要地回顾一下红绿按钮的争论。在大多数人们的印象里，红色通常意味着“停止”或“删除”。但还有观点认为用户更倾向于点击红色按钮更甚于绿色。那么问题就变成了——选择哪种颜色？

      看看上面的图片。左边的是正常视力用户看到的红色绿色对比。再看右边，色盲用户的眼中，这两种颜色看起来非常相似。

      正如Web UI Design for the Human Eye一文中描述的，这种差异是因为红色和绿色在色轮上的位置相反（他们是互补而不是对比）。色盲用户面对这两个颜色进行解读和理解时，可能就不会采取行动了。

      使红色按钮和绿色按钮相邻肯定会是一个错误。你还得考虑按钮下的背景色。例如，一个绿色的按钮在一个蓝色背景中肯定会消失，因为颜色太相似了。这肯定会让用户不做任何操作，并且引起用户分析麻痹。

      下图会给你进行一次快速的色彩心理学知道，告诉你该选择什么颜色的按钮是恰当的。当然，这也取决于你设计的网站类型和品牌个性。您还应该考虑将会是哪些用户使用网站并且会点击按钮。这些都将影响你的选择。

      因此你不仅需要谨慎地选择按钮的颜色，还应该确保所选的颜色是与背景相反的，同时适合相应的按钮。

      把按钮放置在用户体验路径中

      按钮放置的位置与它的颜色，文案同样重要。

      页面上的按钮应该是突出的。

      那么，考虑一下用户在页面上的浏览路径吧。Jeremy Smith在 Crazy Egg blog post 一文中指出，按钮的位置的摆放是有逻辑性的，应该放置在用户即将浏览到的地方。你需要考虑用户实际上是怎么浏览页面的。

      接下来简略地介绍一下F-模式和Z-模式。 

      F-模式

      F模式对于都是文字的网站，比如新闻网站和博客来说，是一种标准。用户的眼睛会扫描整个页面，从左到右，然后并不会向下移动，而是又从左边开始向右移动。在下面的例子中，你应该把你的按钮放在用户视线从左到右扫描之后的落脚点处。

      Z-模式

      你会发现当内容更宽时，用户扫描页面的实现就如同佐罗画Z似的。在下面的例子中，你应该把你的用户行为号召按钮沿着Z路线摆放，最好是在接近结束的地方。

      遵从上面的两个模式，就能把按钮放置在用户浏览路径中。毕竟你也不想把按钮放在页脚中自生自灭，而不会有任何人发现和点击。最后，不要拒绝使用Web上的既定规则——事物经常被摆放的位置都是有充分理由支撑的，因为确实奏效。 

      让按钮看起来是可以点击的

      有几种方法可以让按钮看起来可点击。

      在Gabrielle Gosha的文章中，她列举了一些值得考虑的点：

• 正如我们上面所说的，颜色是非常重要的因素之一，可以让你的按钮脱颖而出。让按钮看起来可点击，颜色也同样起着很大的作用。如果按钮与背景颜色太融合，用户可能意识不到这是可点击的。

• 按钮上的文案，也应该为用户提供进一步的线索，告知用户接下来该如何行动。文案应该直接而清晰地引导用户，例如：“注册”，“立即加入”或者“点此开始”

• 给按钮一些呼吸的空间。当按钮放置在一大块文本下时，建议在文本和按钮之间加个间距，保证至少有按钮高度的2/3。

• 大小对按钮也很重要。你需要考虑按钮的跟页面其他元素的相对大小。太小，它会被忽略；太大，它可能会淹没用户。还需要考虑移动端的按钮尺寸。 
  

      正如上面的例子中，三个不同的按钮对用户行为有不同的影响。左边的CTA按钮很小，但是很难被忽略；中间的按钮很不显眼；右边的按钮则太大了，以至于偏离了它上面的内容。颜色和大小可以产生如此多的不同。

      在创建按钮时避免过于艺术性，保持按钮简洁并且是矩形的。把按钮做得非常精致，再配上巧妙的文案甚至Gif，几乎无法达到好的用户体验——它使用户迷惑，因为用户对这种按钮并不熟悉。

      正如Kanmil Zieba在文章 Web Design for the Human Eye中所说：“巧妙之前是清晰。”不要使用这样的按钮文案，如：“Cool, Let’s rock it!”，而简单的“提交”可能更能告诉用户这个按钮是做什么的。 

      使按钮的形状是圆角矩形

      按钮应该是矩形的，因为我们熟悉这样的按钮。我们能够理解这些按钮的作用。

      根据 Paul Olyslager 的文章，这些矩形的按钮最好是圆角的。有研究发现这样会使按钮的表现更好。因为圆角会将用户的注意力引导至按钮中间的文案上，因为圆角有指向内部的趋势。也因为我们作为人类，更倾向于避免任何有尖锐角度的事物，他们看起来具有威胁性，可能会受伤。

      建议读一读 Paul的四篇文章，这几篇文章会对按钮各个方面进行探讨，包括按钮大小等等。

      浮动操作按钮（Floating Action Buttons, FABs） 

      创建一个有效的CTA按钮，依赖很多影响因素，包括相对大小，颜色和文案。以下将用一个简单的例子来展示上面讨论过的一些好方法实践。

      关于按钮的位置，浮动操作按钮在近年来越来越受欢迎。FABs通常是圆形的按钮，浮动在用户界面上，用来提升用户行动。我们将看到更多的网站使用它们来“表现用户在屏幕界面上最常用的操作”，图形界面设计师Teo Yu Siang如此说到。

      Siang同时也指出，尽管FABs看似是个不错的设计，并能在理想的场景中提供良好的用户体验，但实际上，广泛地采用FABs可能会伤害产品的整体用户体验。

      这是因为它们会减少用户沉浸式的体验，它们覆盖在屏幕的每一个UI元素上。这分散了用户对整体体验的注意力，因此，你需要谨慎考虑是否要在页面上添加FABs，可能会适得其反。

      不仅如此，Siang还表示：“在屏幕上占据主权的FABs，会明显地阻碍内容的呈现。”

      这并不是建议你不要用FABs，而是说你应该谨慎考虑它们的使用和摆放位置，因为它们可能会减少愿意采取行动的用户数量。 

      按钮教程

      创建一个有效的CTA按钮，依赖很多影响因素，包括相对大小，颜色和文案。以下将用一个简单的例子来展示上面讨论过的一些方法实践。

      1. 人们会最先注意到主角（重点）

      最大的，最顶部的元素会获得最多的注意。

      2. 他们的视线会向下游走    

      紧接着是子标题：文本形式的，并不那么突出，会形成另一个层次的关注度。

      3. 内容会促使他们前进

      用户有可能会从副标题直接跳到按钮处，但往往他们需要知道每个按钮将会把他们引导到哪里去。“推销”文案将详细解释为什么用户需要点击按钮。这些内容是对用户的一种承诺：点击这些按钮，你将得到些什么？

      4. 行为号召

      CTA按钮本身还有三个要素要考虑：

• 对比：按钮本身的颜色要在背景之中脱颖而出；

• 文案：干净清晰，通常使用无衬线字体；

• 位置：置于相同的一行，nice。

      它是如何奏效的

      这种模式利用了语言从左到右的阅读流：人们已经习惯了从左上角到右下角进行阅读，将元素遵照这种传统思维方式排列，会让用户觉得自然——即使读者们并不会感知到。

      更多的资源

• UXPin– Web Design for the Human Eye (free e-book explaining how to keep users on a site longer with smart visual design. 30+ deconstructed examples from top companies included.)

• Hubspot – Call-to-action best practices

• Hong Kiat – 38 CTA templates that stand out

• Wordstream – CTA button best practices

• Content Verve – 10 button case studies with real-life examples

• Impact Branding – 4 creative tweaks for high-value buttons