网站按钮的设计 -- 视觉设计 -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> 视觉设计 --> 网站按钮的设计

网站按钮的设计

浏览:1764次出处信息

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

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

一、行动召唤最佳实例

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

用大小吸引用户注意

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

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

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

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

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

paramoreredd

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

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

放置在明显的区域

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

dailymile

放置在网页顶部

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

yourwebjob

放在网页的中间

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

picsengine

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

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

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

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

icondock

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

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

donortools

使用高对比度的颜色

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

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

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

notepod

背景色与前景色的反差

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

valley_creek_church

提供次要的替代行动

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

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

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

officevp

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

transmission

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

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

virb

传递一种紧迫感

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

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

taptaptap

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

barack_obama

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

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

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

basecamp

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

tea_round_app

告诉用户期待什么

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

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

firefox

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

onehub

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

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

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

campaign_monitor

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

fileshare

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

livestreamdotcom

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

traffik

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

hambo_design

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

resumator

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

wufoo

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

mobile_web_design

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