提高转化率的界面，终极触发设计指南

Sponsor

不论是网页设计师还是电商设计师，转化率是非常重要的KPI。如下图“PUSH HERE”的控件，它不仅仅是UI界面设计的一个元素，更是引导用户点击网页或商品的终极“触发”。如果没有这个按钮，网页就不会形成二次点击，商品详情页之后不会形成购买。

“PUSH HERE”的触发按钮

在这里我们先解释一个名词：CTA，CTA即是“Call-to Action”的缩略语。任何形式的UI界面设计，营销人员都希望用户能够进行下一步的动作，最终形成购买，提高转化。然而越来越多的电子产品让现代人的注意力难以集中和专注，任何一个小东西都能分散我们的注意力，因此设计一个出色的Call-to Action Button变得极为重要。

在UI设计中 ，CTA是一类具有特殊功能的控件，能够引导用户立刻进行下一步操作的控件（通常位于比较明显的位置，优先级高于其他按钮）

本文将告诉您如何通过文字引导、按钮颜色、按钮大小和位置，去抓住用户的注意力，为营销带来高转化率。

文字引导

艾伦要打印一些东西，但是排队的人很长，她想插队，所以她用了三种提问方式：

1、不好意思，我有五页纸要复印，能让我先用吗？——60%的人点头

2、不好意思，因为我有急事，能先借我用下打印机吗？就五页。——94%的人点头

3、不好意思，因为我想复印，能先借我用下打印机吗？就五页。——93%的人点头

你看，“原因”一词的位置和后面的内容导致了结果如此不同。人们通常更关心“原因”而不是“结果”。

因此，不要忽视了中文里不同词语的强大力量，它们具有非常大的说服力。有专家表示，在简历中加入一些涉及情感的特定词汇，可以让您的简历更能打动HR。

例如上图的网页设计中，搜索框旁边的触发控件是“TRY FOR FREE”，设计师Stack利用了“FREE”一词的双重含义：免费点击、自由选择。这样的按钮是不是看起来很棒？

许多网站在CTA控件设计时采用的另一个策略是“利用词语自身传递的信息”。比如动词就能很直接地传递信息，它能触发用户采取特定的操作，用户点击控件是因为他们很明白按钮的意思。

使用较多的动词如：

英文：Try It Free, Learn More, Get Early Access, Get Started。

中文：免费尝试、了解更多、进一步了解、从这里开始等。

控件颜色

CTA是冯·瑞瑟夫效应最好的案例，也被称为隔离效应。这个效应是对视觉产生记忆的预测，它简单解释为：当有多个相似物体共同存在时，与其他物体不同的那个最容易被记忆。

这也是为什么必须将CTA控件设计得与众不同的原因。

首先，确定CTA控件的设计要素：颜色、视觉效果、排版等，同时还要让它们具备可读性、易读性和高对比度，正式发布前，要进行不断改动和测试。

Starkplugin是一款非常好用的、协助您进行对比度检查的软件。像花哨的渐变或太过鲜艳的颜色，Starkplugin都会显示是低对比度。如下图所示。

对比度不仅仅是设计一个CTA控件要考虑的问题，整体也要考虑对比度。强大的CTA控件不仅能做到对比度的自我协调，还能实现整体协调。

Sketch的着陆页就是一个非常完美的案例。它显示了CTA控件的重要性，还有协调性；不仅塑造了良好的品牌形象，更极大地抓取了用户的眼球。

下图是它的着陆页，作为设计师的您千万别错过！

控件尺寸

尺寸也是设计CTA控件时需要重视的要素。控件尺寸不仅取决于自身的内容，还受到页面周围元素的影响。

设计界有一个通用的标准，基本能够适用大部分页面，包括针对老年人开发的页面。如下图所示。

研究表明，42-72像素之间的按钮视效比最高。这意味着42像素是最小值，72像素是最适合用户的按钮大小。

大的按钮会吸引用户的绝大多数注意力，让用户看不到网页提供了什么服务，这对页面的其他内容会产生重要影响。然而使按钮太小会严重影响其操作性，没有什么比按钮太小而无法按下更令人沮丧的了。

移动端则面临另一个常见问题。Scott Hurff曾提出一个理论：“为手指设计”，您要留意一下它的意思。这个理论告诉我们，要在手指的自然弧度范围内创建最舒适的界面。

IPHONE的手指区域热图

显而易见，移动端的CTA控件必须做到高度舒适。仔细对照参考上图所示的手指区域热图，就能很容易知道按钮在哪个位置最舒适，而在该舒适区内，会极大地提高点击率。

控件位置

用户在使用界面时，线性路径的设计至关重要。通过文字引导和合适的按钮位置，让用户自然地访问界面，那么就能够使用户更快地注意到您的CTA控件。

这就是菲特定律。

菲特定律：获取目标的时间是到目标的距离和大小的函数

因此，缩短到CTA控件的时间和距离，对提高转化非常有帮助。

仔细观察注意力热度图，你会发现最常见的阅读模式是F型。近几年的人眼追踪研究表明，F型模式仍然存在，而且同时适用于PC和移动端。

这种迷人的阅读模式是由于人类本身的行为学，而不是一种技术，这意味着“搜索”控件可以放在左下角。

Airbnb的设计师们采用了一种不同的方法。他们利用z型布局和古登堡图。CTA控件被放置在终端区域，用来与其他内容区别开，并触发用户点击。

当用户到达表单的右下角时，浏览过程停止，需要让用户知道该进行什么操作，因此这是插入Call to Action元素的最佳位置。

总结

CTA控件会对转化率产生巨大的影响，并且是页面设计中最重要的元素。通过牢记一些基本的设计原则，你可以让你的按钮脱颖而出，并抓住用户所有的注意力。

最后，通常情况下，创新并不是那么必要，有时真正做好某事的最佳方法是向行业领袖学习。仔细研究一下最成功的互联网公司，看看他们是如何围绕着CTA控件来组织内容的，这将帮助您找到适合您的、最大程度提高转化率的界面。

原文作者：Jim Raptis
原文地址：https://medium.muz.li/call-to-action-an-extensive-guide-140fef523b08
翻译作者：秀芳 | 运营设计师
编辑整理：铅笔头 | 设计达人编辑组

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。