「设计技巧」7个CTA按钮设计原则

本篇译文共1627字，阅读大约需要5分钟。

精心设计的CTA按钮能帮助用户在产品中导航，在版本迭代后会收到更多的评论。

Illustration by Ouch.pics

获取用户的注意力很难，尤其是现在处处都在争夺用户注意力。调查显示用户停留在整个页面的注意力已经降低到8.25s，这也是为什么很多新兴公司把用户界面做的极简的原因：最大程度的减少干扰视觉的元素。

通过将注意力锁定在重要元素上，这样会增加重要性，提高交流效率，这其中非常重要的元素“CTA”按钮，会出现在大部分网站和产品中，它们被设计成用户可以采取特殊行动的按钮：比如创建新内容，加入购物车，购买产品等等。优秀的设计使这些按钮即能在产品中提供高效率的导航，又能在版本迭代中发生更重要的作用。

这篇文章结合很多网站案例，教你设计良好易用的CTA按钮所要遵循的一些原则。

1.保持简洁

-

Google的UX设计师Allison Rung提出一条重要原则，少即是多，但结论并不只是一味地少，而是在所用术语和含义传达之间的一种平衡。当用一个词表达目的时，这时候信息传达要非常简练。

落地页和CTA的交互不同，前者是通过传达长信息，更加直接的将产品信息和利益点传达给用户，而后者是尽可能用最少的词引导用户进行点击。

2.保持清晰

-

CTA的文案是设计核心，一般用2-4个词来表达，文案选择直接影响到用户是否会点击。

Airbnb’s listing page — “Reserve” button

大家都知道Airbnb在列表中使用“Reserve”(保留)来代替“Book”(预定)，用保留代替预定，是他们采取的一种策略，可以让用户在24小时内决定是否入住，让用户感知不到这个动作是跟支付相关联的。

3.保持专注

-

像之前所说，按钮可以在版本迭代中进行引导，但是太多的方向引导提示会让用户迷茫，将单个页面的承载的按钮数量减到最少-给出的选择越少，用户越容易做出选择，这是非常重要的。

这就是很多快餐店菜单种类较少的原因，通过提供有限的选择，让用户更容易的做出选择来提升转化率。

Slite’s landing page, as with all new startup only has one primary call-to-action for the user

浏览市面上很多产品的官网，他们的首页往往只包含一个CTA按钮，让用户登录或者订阅，或其他转化行为，作为一个UX设计师，要和老板沟通好最主要的商业目的，来决定按钮数量和引导动作。

4.使用颜色对比

-

按钮的颜色取决于很多因素：背景色，品牌色，或者跟接下来的落地页相关。当没有颜色选择依照的时候，选择一个和背景色对比强烈的是非常重要的，如果背景是蓝色的，那最好选择黄色或红色。

What’s the first thing that catches your eye?

5.巧妙安排位置

-

上面提到过加强颜色对比可以有效吸引用户注意力，巧妙的安排位置可以进一步加强这一点。这里有两种位置摆放技巧：一种是根据用户心理模型，第二种是根据用户体验地图。

心理模型是由流畅的系统和简便易用的功能组成的，在不看屏幕的情况下，如果我让你指出注册按钮在哪，你会指哪里？我可以读出你的心理，猜你想要放在右上角，充分了解用户是如何使用产品的，可以帮我们正确的放置CTA按钮。

对于第二种方式，你可以通过用户体验地图，预测到用户的眼动路线，引导他们在页面中点击CTA。例如：很多落地页的banner上图一般有主标题，副标题，最后是CTA按钮-用户在读完信息之后大概率会点击CTA按钮。

前置的CTA按钮位置用来增加预定率

6.创建视觉层级

-

大多数情况下，CTA按钮会成对出现：“登录/注册”，“确认/取消”，这时我们需要区分首要的CTA按钮，并在视觉上强化突出，使之成为用户主要专注的点，主要的CTA按钮可以是加粗的方式（使用色块按钮+有对比度的文字颜色）摆放在右侧，然后二级按钮使用幽灵按钮或者是一个简单的文字链接。

创建视觉层级会引导用户到我们希望他们到达的页面中去，是达成转换率目标的主要方式。

7. A/B测试

-

上面的提示能够提升CTA的设计，但最好还是通过A/B测试：基于产品用户偏好和用户界面来确定CTA按钮的颜色，大小，位置，形状和风格。

设计CTA按钮，设计师需要专注于主要信息并通过多轮A/B测试来对比数据，一个有最合适的尺寸、颜色、位置的CTA按钮可以有效的吸引用户注意力，鼓励他们采取行动。

欢迎关注我的微信公众号“彩虹BOOK”，你的关注就是对我最大的鼓励，谢谢！