from Behance | yuanzi 0410

作者 | Luca Longo

译文 | ConineAcademy

使用户“上钩”的第一步，就是让用户有欲望行动，对产品产生兴趣。但一般人不会轻易对一件不了解的东西有什么反应，这时，CTA转换率就显得很重要。

CTA（Call to Action），即用户响应行动或叫用户行为召唤，下面就是行为召唤的一些栗子：

互联网中看不到这些赤果果的召唤文字，但它们隐藏在一个链接、一个图标、一个按钮之中，而正确地设计、使用CTA，会给网站或APP带来很高的转换率。今天，社长就给小伙伴们带来一篇来自Luca Longo的文章，他会告诉大家一个简单到荒谬地提升CTA转换率的界面按钮设计方式。

------

今天，我将向你展示我的两个客户：一个电子商务网站和一个手机分析应用，这两个项目使用我的诀窍，在6个月内平均提高了30％的CTA转换率。这里面涉及了很多色彩心理学的东西，但在今天我不会写那些刻板“规则”，我只想向大家展示出我对于这两个CTA按钮项目的一些想法。

|| 界面按钮类的用户体验

如果我们看一下Gmail的用户体验设计，会发现它的界面风格非常简单，并且看起来像是线框图的第一个阶段。它的设计非常简单，颜色使用也很单一，但很有效。这样极致的用户体验，很难用语言形容。

你看到了那个漂亮的蓝色“Send”按钮吗？

在这种情况下，按钮的颜色和位置往往比按钮本身的文本重要。设计师们完全可以使用一个通用符号来代替按钮上的文本，这对用户的操作没有任何的影响。

事实上，Gmail的移动端版本中，设计师们没有在按钮上添加文本，而是用一个简单的蓝色纸飞机箭头标志与整个页面的剩余部分形成鲜明对比（看上去就像一个按钮），让用户毫无疑问的将其看作主要互动点。

|| 如何用按钮抓住用户的注意力

在网页界面上设计CTA按钮需要进行一些评估规划，它们必须是你原型设计过程中的一部分，以确保你的设计能够起到有效作用。

你可以通过结合色彩研究和设计原则的方法设计CTA按钮来提升网站的转化率。在我的实践中，我经常会从6个关键点出发去完成有效果的设计：

❶ 位置（Position）

将你的按钮放置在一个突出的位置是非常重要的，因为位置是吸引用户眼球的关键点。在突出位置（分隔出的区域、页面顶端或者中心、页面的边角）放置可以形成网站的高转化率，因为用户有很大几率注意到CTA而采取行为互动。

▲ Dribbble | Josh Hemsley

❷ 简化信息或移动端的图标（Clear message or icons for mobile devices）

使用正确的语言，用最原始的动词去鼓励行为（例如：购买、观看、下载、测试等等）。根据以往经验，与用户建立信任往往是最大的问题。为了提升点击转化率并建立信任，需要推测用户的疑惑点，并向他们呈现你想表达的元素来告知他们在操作后会得到什么。

❸ 形状（Shape）

矩形的按钮往往会优于圆形的按钮。

▲ Dribbble | Gleb Stroganov

❹ 尺寸（Size）

某个元素相比其周围元素的大小可以凸显其重要性。记住：尺寸越大，就越重要。区分不同元素的重要性，然后依据它在进行尺寸的规划。

❺ 颜色（Coloring）

我觉得按钮的颜色是最重要的，因为颜色是直接与用户的心理去互动的。我觉得在按钮设计中理应选择与周围元素和背景高对比度的颜色以达到效果。

▲ Dribbble | Gleb Stroganov

❻ 提供备选操作选项（Offer alternative actions）

网页中一般的会存在多个互动，而为用户提供一些备选的操作方案有的时候是很有必要的，这样可以更有效的说服用户在后续的使用中采取更方便的主要操作方案。

▲ Dribbble | Andrew Lucas

|| 色彩心理学

现在我有个问题想问你：色彩真的会影响网站转化率吗？

有一个众所周知的事实是：不同的颜色会给人带来不同的情绪，因此，看到不同的颜色，人们也会有不同的反应（当然，不同文化中的颜色所带来的也是不一样的），所以，要依据你想表达的情感为你的设计选择颜色。例如：

红色：力量、激情、爱情、消极

绿色：成长、金钱、环境、积极

蓝色：信任、和平、忠诚、安全、积极

黑色：正式、奢华、复杂、中性

灰色：不完整

棕色：户外、食物、地球

橙色：信心、快乐、友善

紫色：忠诚、神秘、灵性

另外记住：颜色的对比很重要！

如果你想让某个元素突出，就填充背景的颜色吧！

我认为针对较大的按钮尽量不要选择过于突出的颜色（相比较周围的元素和背景），而对于小一点的按钮则最好选择明亮一些的色彩。但是无论你选择哪一种色彩都请记住不要让它影响你的整体设计。

记住，对比度不仅仅是色轮上的补充色，它体现的更多是价值。

一个亮色调的按钮不会从像暗色调的按钮那样一样亮色调的背景中凸显出来。

Bad example:

Good example:

|| 最有效的实践方法

现在，我来展示一个简易的按钮设计指导，在为客户制作CTA按钮、表单、弹出窗口等案例中我曾运用过这种方法。

就像我之前说过的那样，我将一些颜色归纳到我们最主要的四种情感中去：

❶ 积极的（CTA：存储、发送、下载）

     ➤ 蓝色、绿色

❷ 消极的（CTA：删除、组织、重置）

     ➤ 红色

❸ 中性的（CTA：查看更多、备选、寻找）

     ➤ 黑色

❹ 不完整的

     ➤ 灰色

如果我们在一个白色背景板上呈现这些颜色的按钮，你就更能理解我所说的了：

如果屏幕上两个非常相近的按钮相对背景的对比度相同，用户的注意力就将会被混淆。正如你所看到的，色彩在用户体验中扮演了一个关键的角色，因为它可以引导用户进行操作。

Luca Longo所说的这种简单到荒谬的界面按钮设计方法你get到了吗？现在就行动起来，试试看吧，你能让你的用户行动吗？

酷九合金社周末班（软件基础班/进阶提升班）即将开课啦~用2个月给自己的设计路搭一个台阶吧~

报名地址：https://jinshuju.net/f/fOjVm3

咨询微信：c9dkjhjs      咨询qq：483348967     

咨询电话：025 - 52850456