行动召唤按钮：实例与最佳实践(一)

行动召唤在网页设计中——尤其是在用户体验方面——是一个描述在网页中用于诱导用户行为的元素的术语。在网站界面中，最流行的行动召唤的表现是出现在点击表单按钮、完成一个行动(比如”Buy this now!”)或使用附加信息带到一个页面(比如”Learn more …”)等请求用户来采取行动的地方。

我们如何创建有效的行动召唤按钮来吸引用户的注意并引诱他们点击？我们将在本文中通过分享一些有效的设计技术和查看一些实例来尝试回答这个问题。

有效的行动召唤按钮的最佳实践

设计行动召唤按钮到网站界面需要一些远见和计划；它必须是你的原型和信息结构流程的一部分以使他们能够正常工作。在本节中，我们将讨论行动召唤按钮的设计技术。

用大小吸引用户注意

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站的某种行为有多么至关重要，行动召唤按钮的型号也应相应的调整。

行动召唤按钮与周边元素

Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的logo对比。为了吸引用户的注意，这个行动召唤按钮在宽度方面比logo大了大约20%。尽管logo在页面中放的比较高，你的眼睛还是被吸引到了行动召唤按钮，因为它相对于周边元素比较大。

行动召唤按钮与不太重要的行动召唤的大小

一个网页可能有多个行动召唤。为了区分一个行动召唤与其它行动的相关重要性，你可以改变他们的大小。这里在paramore|redd网站有一个使用这个理念的实例，那个页面的让用户注册以获取邮件通知的行动召唤按钮明显的比继续阅读性东召唤按钮大一些，表明在该网页中，与继续阅读日志相比他们更希望你采取订阅

使用突出的位置吸引用户注意

页面中的行动召唤按钮的位置是吸引访问者的注意的关键。放置在突出的位置，比如页面的章节的头部可以带来较高的页面转换因为用户将很可能注意到行动召唤按钮并采取行动。

放置在明显的区域

将一个行动召唤按钮放置在一个明显的区域是一个让它在页面布局中突出的一个方法。你可以在dailymile看到这个概念，行动召唤按钮看起来在一个比其它元素比如图形条高的层面上(在顶部)。

放到页面的头部

为了阐述这个概念，看一下位于Your Web Job页面最右上角的”Post a Job!”行动召唤按钮。通过将行动召唤按钮放到一个非常醒目的区域，这样好像用户会注意到它或者稍后记住它，在他们看过网站的内容之后。比如一个职位发布者想要在他们发布职位之前浏览一下网站，”Post a Job!”按钮将随时为他们准备好，无论哪个页面引导他们跳转，他们会更可能记得他们可以很容易的执行这个行动的地方，因为它的位置足够显眼。

放在布局的中间

将一个行动召唤按钮定位到页面布局的中间——而不是两侧(或明显比较小或者不重要)的位置——可以是一个很有效的吸引注意和诱导一个行动的方法。在例子PicsEngine中，尽管这个行动召唤按钮没有使用与其背景色和页面中周边元素高对比的色彩，它依然能够因为其居中的位置而很容易引起注意。

使用空白来从其他页面元素中区分行动召唤按钮

行动召唤按钮周围的空白（或者无效空间）的使用是一个让它在有很多元素的区域中突出的很有效的方法。

改变空白的数量以表明逻辑关系

行动召唤按钮与其周边的元素之间的空白越多，他们的联系越少。因此，如果你有其它元素能够有助于说服用户采取行动，减少那些元素之间的空白和间隔。

例如，Donor Tools在他们的”Sign Up”行动召唤按钮上面有些文字，它们告诉用户注册的好处。在它的右边是一个浏览器截图只是用于美化的，而且对激励用户点击”Sign Up”行动召唤按钮不是必须的。通过减少文字和行动召唤按钮之间的空白，你将这两个元素可视的组织到了一起。浏览器截图和一个图片保证用户的实现不会从行动召唤按钮上面转移走。

用于区分行动召唤按钮的空白

IconDock展示如何有效的利用空白。即便使用一个很小而且简单设计的行动召唤按钮，它依然很突出，因为在它和邻近元素之间的空间。

使用高对比度的颜色

决定在行动召唤按钮上使用哪个颜色很重要。在你的行动召唤按钮上使用一个相对于周边元素和背景色对比度高的色彩，因为这是让用户注意到你的行动召唤按钮的关键。

与周边元素形成对比的颜色

Notepod例证在一个行动召唤按钮和它周边元素的色彩反差是如何能够有效的吸引用户的注意的。周围元素都是黑色的，而这个行动召唤按钮却是浅蓝色。

背景/前景色彩反差

Valley Creek Church设置它的浅黄色”Learn More”召唤按钮到一个灰度图片上面。就算使用一个简单的行动召唤按钮设计在一个复杂元素的上面(此处是一个图片)，它依然因为色彩选择而醒目。

提供次要的替代行动

一个页面可以有多个行动召唤按钮。有时候有必要提供一个次要行动以便于说服用户稍后访问你希望的主要的行动召唤。比如，在用户注册一些网络服务之前，一些用户需要了解更多的信息才去执行注册的行为；次要行为可以请求他们体验一次产品之旅或者访问展示产品的更多信息的页面。

在主要行动旁边显示次要行动

OfficeVP显示两个挨着的行动召唤按钮——居中并放在页面头部。通过区分颜色，用户可以看到他们有两条不同的路：他们可以直接注册(主要行动)，或者如果他们在注册前希望了解更多，他们可以选择第二个行为，体验一下先。

Transmissions 也展示了在期望的重要行动旁边放一个次要行动按钮的概念。这样的话，主要行动就是让用户购买该应用。如果他们想在购买前试用一下，那么第二期望的行动就是先下载该应用。注意主要行动通过做的比次要行动按钮更醒目来被标识出来，相对于背景色比次要行动按钮有更鲜明的对比色。这样，你就很有效的从左到右移动目光。