网站按钮的设计

呼吁采取行动（行动召唤）在网页设计特别是在用户体验方面特别的重要，是网页中用于诱导用户行为的一个元素。在网站界面中，最流行的行动召唤的表现是点击按钮的形式，比如执行操作按钮（“马上购买！”），或引导用户访问另一个页面（“了解详情…”），用以要求用户采取行动。

我们怎样才能建立有效的鼓动性按钮，抓住用户的注意力，吸引他们点击？我们将尝试分享一些有效的设计技术和通过一些例子来回答这个问题。

一、行动召唤最佳实例

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

用大小吸引用户注意

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站上某种行为的重要性，设计与重要性相匹配的行动按钮。

行动召唤按钮相对于周边元素的大小

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

行动召唤按钮相对于行动召唤的大小

一个网页可能会有多个行动召唤。可以通过改变行动召唤的大小来说明某一个行动召唤相比其他行动的重要性。在paramore|redd就有这样一个实例，页面的让用户注册并获取邮件通知的行动召唤按钮明显的大于继续阅读召唤按钮，以此来说明他们更希望你订阅内容而不是继续查看内容。

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

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

放置在明显的区域

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

放置在网页顶部

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

放在网页的中间

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

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

在行动召唤按钮周围使用空白是一个让它在有很多元素中脱颖而出的方法。

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

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

使用空白空间的距离来表明逻辑

行动召唤按钮与其周边的元素之间的空白越大，说明他们的联系越小。所以，如果有其它元素能够有助于说服用户采取行动，那么就减少那些元素与空白空间的间距。在Donor Tools的“Sign Up”行动召唤按钮上方有些用户注册好处的文字，而在它的右边是一个用于美化的浏览器截图，对鼓励用户点击“Sign Up”不是必须的。通过减少文字和行动召唤按钮之间的空白，将这两个元素可视的组织到了一起。浏览器截图和行动按钮的距离保证用户视线不会从行动召唤按钮上面移走。

使用高对比度的颜色

决定在行动召唤按钮上使用哪个颜色是非常重要的。在你的行动召唤按钮上使用一个相对于周边元素和背景色对比度高的色彩，以确保用户注意到你的行动召唤按钮。

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

Notepod充分反映了一个行动召唤按钮和它周边元素的色彩反差是如何有效的吸引用户注意的。周围的元素都是黑色的，而这个行动召唤按钮却是一个明亮的蓝色。

背景色与前景色的反差

Valley Creek Church将一个浅黄色得“Learn More”召唤按钮放置在一个灰度图片上。即使在一个复杂图形的图像下面使用一个简单的行动召唤按钮设计，它依然因为颜色的选择而醒目。

提供次要的替代行动

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

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

OfficeVP显示两个紧挨着的行动召唤按钮（居中并放在页面头部）。通过辨别颜色，用户可以看到他们有两个不同的路线：他们既可以直接注册（主要行动），或者在注册前了解更多，选择第二个行为，体验一下。

Transmissions 也展示了在期望的重要行动旁边放一个次要行动按钮。在这种情况下，主要行动就是让用户购买该应用。如果他们想在购买前试用一下，那么第二个行动就是先下载试用该应用。请注意，主要行动通过做的比次要行动按钮更醒目（相对于背景色比次要行动按钮有更鲜明）来被标识出来，这样就很有效的从左到右移动目光。另外，两个行动召唤按钮之间相对于该区域其它元素缩少的空白，有效的将按钮组织到了一起。

在主要行动召唤按钮下面显示次要行动按钮

另外，您可能将次要按钮放到主要行动下面。如果你需要更好的区分行动召唤按钮的话，这可能就是有必要的。Virb 的“Join Now” 行动召唤按钮被放在次要行动“体验产品之旅”的上面。注意，次要行动按钮因为它的默认状态被用比较弱的色彩和主要行动隔开了。

传递一种紧迫感

通过通过大胆，自信，和指挥的话语表达这个行动可以改变用户的看法，用这种方法说服他们不应再等待，以及等待可能会造成某些惩罚或错失良机。

tap tap tap给一个行动召唤按钮添加了紧迫性。“Buy Now”按钮上面有“价格信息(Intro price)”的文字，巧妙的暗示用户行动拖延越久，这个价格过期后可能要支付更多费用。

通常情况下，创造紧迫感可以有效的暗示用户去采取行动。使用诸如“现在（now）”，“立即（immediately）”与“马上（right now）”可以传递这种紧迫感。Organizing for America (BarackObama.com) 呼吁网站访问者“DONATE NOW”的例子。如果只是说“Donate”，紧迫感就会消失，可能更少的用户也会去采取行动。

告诉用户采取行动是很容易的

通常，用户迟疑采取行动是源于担心行动将是困难，昂贵或费时的。通过照顾这些担心，你的行动召唤按钮能带来更多的转换（点击）。

例如，在Basecamp上，行动召唤按钮明确显示用户注册将会花费的时间以及注册是不花钱的（free）。 这种做法消除了用户将要在线采取行动是的两个主要顾虑：费用（这也会要求他们采取额外的操作比如拿出他们的信用卡）和时间限制。

在Tea Round App这个例子中，他们告诉用户注册他们的邮件服务将不会受到垃圾邮件，这是无论何时将你的Email提供给第三方服务时所担心的一件事。

告诉用户期待什么

大部分网站用户都不太愿意相信在网页上呈现的内容。声称免费服务的链接，却不得不输入他们的信用卡号码才能得到他们想要的服务。为了增加点击转换率和重建信任，预期用户的怀疑并告诉他们通过采取你为他们准备的行动将会得到什么。当设计一个行动召唤按钮，考虑到用户可能会有的所有潜在的问题，然后确定你可以及时的回答他们。

Mozilla Firefox 告诉用户通过点击他们的行动召唤按钮的详细的预期。这个行动召唤按钮告诉你你将会得到Firefox 3.5，它是免费的，以及（对于更多的特性它的确切的版本是3.5.3 forWindows 操作系统，语言是English，然后你可以预期一个7.7MB 的下载。

Onehub预料到用户是否（在采取行动上）需要先支付或者他们是否能够试用一下产品，告诉用户如果他们采取注册的行为，他们将获得30天的免费试用。

二、行动召唤按钮设计展示

现在，我们已经介绍了设计要求行动召唤按钮的一些最佳实践，让我们来看看一些网页上的行动召唤按钮的典型实现。我们将结合设计和技术来探讨如何在实现良好的设计。

Campaign Monitor这套行动召唤按钮显示两个潜在的用户行为：“Try it for free”和“View features”。对于已经了解Campaign Monitor 和想要现在尝试的用户来说，他们可以执行首要行动，而其它的想要在作出时间承诺之前浏览一下可以选择查看该网络应用更多特性的次要行动。

Fileshare HQ这个行动召唤按钮告诉用户预期的事情：开始在片刻间分享文件（start sharing files in minutes）。

Livestream.com这组行动召唤按钮使用垂直排列组合来展示给用户的这些行动的期待的重要性顺序。主要期望的行动是获取一次评估，接着是了解服务的详情，最后是对比不同方案之间的差别。

Traffik CMS这个行动召唤按钮被放在一个非常醒目的位置，在页面的最顶部，并用大小和色彩从周边相关元素中高亮了出来。

Hambo Design这个行动召唤按钮告诉用户预期的事情：获得报价，没有附加的东西。

The Resumator你可以在这个行动召唤按钮上看到很多最佳实践。首先，它使用了空白、大小和颜色来清晰的将自己和页面其它元素区分开来。然后，为了创造逻辑的分组以说服用户采取行动，它在按钮上面的推荐文字使用较少的空白，然后将次要行动“Take a tour first”放到它的下面。

Wufoo提供了两个行动，用户可以看到一个水平排列的样式，主要期待行动是左边的那个。这些按钮很大而且很难被错过，尽管在全局设计的时候它们并不是很显眼。

Mobile Web Design这个行动召唤按钮被放在一个醒目的位置；它相对于周围元素有较大的型号和独特的颜色。为了“Purchas the book”提供附加的上下文，这个行动召唤按钮下面放置了价格和格式（传统图书或者PDF）。

NCover这些行动召唤按钮很整齐。主要行动在蓝色的次要行动的上面。用户被吸引到这个按钮是因为大小，而且对次要期望行动使用蓝色调可以减弱它对相对于主要期望的行动。空白的使用以创建三个相关元素的逻辑分组有助于实现销售：文字告诉用户Ncover是干什么的，注册行动召唤按钮，以及体验行动召唤按钮。相比之下，注意此组和右边的元素之间的空白变化。

 

Xero本组行动召唤按钮展示一个次要行动的用法。在主要期待行动的右边，有一个文字链接请求“了解更多(find out more)”，对于不想立马注册的用户来说，这个设计增加了用户会在注册之前“了解更多”的可能性。

Tao Effect – Espionage这组行动召唤按钮，为用户提供三个选择：Download、Buy Now和Upgrade。主要期待行动就是下载这个应用，紧跟着两个同样的行动“Buy Now”和“upgrade”。区别是在行动召唤按钮上使用不同的颜色，主要行动比两个次要行动的颜色更醒目。

The Invoice Machine这里可以看到两个使用蓝色边框高亮的行动召唤按钮，因为它们使用了同样的风格，我们可以假定它们有相同的重要性。或许该公司确定用户在看到他们提供的东西之前不太可能选择注册的行为，也或者他们确信产品之旅将更有效的帮他们将访问者转换为会员。

Ekklesia 360使用按钮展示的图标来表示一个向前意识（由指向箭头表示）。他们利用对深蓝色背景的高对比度的颜色，使调用的页面设计得更加突出。

Checkout在它的行动召唤按钮使用一个相对于全局设计的非常突出的颜色，尽管在它上面的图片明显比按钮的型号还要大，它依然能够吸引用户的注意。

spinen使用直接而清晰的语言告诉用户当他们采取行动后预期的事情：点击这个按钮将让他们找到产品的更多信息。

Codebase这个行动召唤按钮告诉用户，通过执行这个行动他们能得到什么：免费15天的试用。它通过使用高对比色彩、左边的一个图标以及大量的空白来吸引用户的注意。

GoodBarry在这个行动召唤按钮中，你可以看到空白、型号以及聪明的色彩选择是如何有效的让一个行动召唤按钮变得非常醒目。强调这个行动是免费的“FREE”能够暗示用户他们的预期。

Wake Interactive这个行动召唤按钮相对于其周边元素的色彩令它突出出来，尽管它的周围的空白比较小。

OH! Media这个行动召唤按钮真的从页面中脱颖而出了，因为它的位置、周围的空白以及最重要的颜色的选择。看一下这个页面，目光将被直接吸引到这个行动召唤按钮上。

Pixelcrayons看看空白能够如何很棒的提升行动召唤按钮吸引注意。

Ballpark这个行动召唤按钮的型号有效的吸引了用户的注意。它清晰而直接的语言明确地告诉用户执行行动之后的预期结果。

One Theme Per Month这个行动召唤按钮组将主要希望行动放到替代行动的中间。通过为主要期望行动添加一个非常醒目的颜色，以及一个较大的空间，试图将它的重要性放到次要行动的上面。

Scrapblog相对于周边元素的鲜明的色彩、足够的空间、以及型号等一些用户注意的效果。简单的语言传递一种很容易的感觉，你可以通过点击立马“开始（start）”。

13 Creative这个行动召唤按钮显示如何通过使用一个非传统的设计，在周围元素比较大的情况下吸引用户的注意。

Kalculator这个行动召唤按钮明确的告诉用户：通过点击这个按钮，他们可以只付$3.99。使用单词“only”提示这是个相当不错的交易，这显然有利于销售。

Web Design Beach是一组使用两种不同颜色的行动召唤按钮。更醒目的那个，“get a quote” 暗示它就是主要期待行动。

The Highland Fling该行动召唤按钮设法通过大量的空白、显眼的位置和使用一个图标以使自己显眼以吸引注意力。通过使用单词“now”，传递了一种紧迫感和立马行动的需求。

 Commercial IQ这个行动召唤按钮的型号和项目位置吸引了用户的注意。放大镜图标给行动添加了语境。添加“Free for search”文字消除了用户关于行动的费用的顾虑。

dashboard这里，你可以看到使用高对比色彩的以使行动召唤按钮脱颖而出的做法。

转自（略有修改）：http://www.qianduan.net/call-to-action-buttons-examples-and-best-practices.html

原文地址：http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/