前端观察 » 按钮

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

神飞 — Wed, 04 Nov 2009 10:21:01 +0000

中文翻译行动召唤按钮：实例与最佳实践
英文原文Call to Action Buttons: Examples and Best Practices
版权所有，转载请注明出处，多谢！

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

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

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

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

用大小吸引用户注意

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

行动召唤按钮与周边元素

Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的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”放到它的下面。

本文由前端观察译自Smashing Magazine，转载请注明出处，多谢。

Wufoo
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
这里，你可以看到使用高对比色彩的以使行动召唤按钮脱颖而出的做法，尽管是在明显较大的页面元素中间。

行动召唤按钮的附加资源

如果你想了解更多的关于行动召唤按钮的信息，这里是一些其它网站上的相关资源和文章：

如何在Photoshop中制作一个光滑而简洁的按钮
这个教程是在Six Revision，由我(Jacob Gube)编写，将一步步向你展示如何制作大号的和能引起注意的行动召唤按钮。

网页设计中的灵感按钮
如果你需要一些优秀按钮设计的灵感，看一下这个Pattern Tap的收集吧。

有效的行动召唤按钮的10种技术
Paul Boag讨论一些关于制作良好的行动召唤按钮的技术

良好的行动召唤按钮
UX Booth关于“好的行动召唤按钮的组成”方面有一篇好文章

Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的
阅读一下一个好的行动召唤按钮如何提高转换。你将发现一个Firefox、Opera和IE使用的行动召唤按钮之间的对比。

网站设计趋势：行动召唤按钮(中文翻译)
Lee Munroe将一系列的行动召唤按钮放到一起，并附加了一个在当前设计趋势方面的讨论。

关于原作者

Jacob Gube是Six Revisions的创立者和主编。他同时也是一个专注于远程教育、前端开发和网站可用性的网页开发者/设计师，如果你想联系他，可以follow他的Twitter: @sixrevisions。

“添加到购物车”按钮设计展示

神飞 — Tue, 28 Jul 2009 15:17:46 +0000

原文：“添加到购物车”按钮设计展示
译自：“Add to Cart” Button Showcase
版权所有，转载请注明出处，多谢！！

在你浏览不同的电子商务网站(网上商店/网店)的时候，你或许会注意到有许多不同类型的按钮，它们被用来让用户将网站的产品添加到购物车。一旦产品被放入到购物车，你也将发现大部分电子商务网站用某种方式显示购物车中的产品，或者至少是购物车中产品的数目。

在本文中，你将发现超过60个例子，他们可以启发你的灵感。我们将首先展示”添加到购物车”按钮。之后，我们还将展示购物车图标和列表的现实方式。

添加到购物车按钮：

如果你在设计一个电子商务网站，希望这些按钮将为你提供一些灵感。

Active

Little Catwalk

Big Brown Box

Inkd

Little Kids Bedrooms

Tres Amigos Furniture

Bath and Body Works

Perfect Order

The Sak

Caddis Fly Shop

Lucky Brand

Soia & Kyo

Neighborhoodies

Tommy Bahama

Flax Matters

Ooga Zone

Scrap Graphic

Nodiktat

Tastebook

The Ultimate Green Store

RIPT Apparel

Nike

WooThemes

Bluefly

Sneaker Freaker

Better Closet

Walkie Talkies

Bored of Southsea

Mouse to Minx

The Mozilla Store

479 Popcorn

Happy Webbies

Icon Dock

购物车图标：

这里收集一些不同的电子商务网站显示购物车内容的不同方式

Little Kids Bedrooms

14 Tracks

Tres Amigos Furniture

Soup Studios

Cafe Press

Bras & Honey

Spreadshirt

RY

Ralph Lauren

Timberland

Aperion Audio

Maui Divers Jewelry

Mighty Leaf Tea

ShopRush

Barrie Pace

Pally Giraffe

Abel & Cole

TypeTees

Rugby

Brand Neusense

The Select Series

Fugitive Toys

Mr. Vector

Urban Originals

Bored of Southsea

Keedo

Big Brown Box

Bridge55

Happy Webbies

Roxy

使用CSS3和RGBa创建超酷的按钮

神飞 — Tue, 26 May 2009 15:02:33 +0000

呃，看到这个标题，我们可以首先将IE系浏览器无视了。

我承认，我是有极简主义倾向的，我希望能够使用最少的代码和图片做更多的事情。

虽然CSS3仅仅增加了少数新特性，但是这些属性却可以做很多有用的事情，可以大大的简化我们的工作。我们今天做的这些按钮，就是充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩。

让我们先来看一下demo吧：

点击图片查看演示。

我们可以通过四步来做出这些漂亮的按钮：

1.按钮的基本设置

我们需要先设置一下按钮的基本样式，这里我们使用a标签，当然也可以使用input、button标签等，这里使用a标签是因为这三个标签中只有a标签支持:hover伪类。

.btn {
	display: inline-block;/*thanks to ytzong*/
	/*display:block;
	float:left;
	margin:5px; */
	padding: 4px 10px;
	font:bold 13px/180% Tahoma, sans-serif;
	color: #fff;
	text-decoration: none;
	overflow:hidden;
}

此处多谢ytzong童鞋的建议，我们改为采用display:inline-block，这样可以省去float和margin两行代码。——神飞@05.31.2009

2.半透明的png渐变图片

这是我们这里唯一用到的一个图片，这个透明的png图片用来实现颜色的渐变。这个图片我们可以称之为单色透明度渐变。在CSS中，使用背景演示+这样的png图片就可以实现不同的色彩渐变效果。当然，这个不是CSS3的特性，除了IE6以下版本的浏览器，所有的浏览器都可以实现这样的效果。你可以点击这里查看该png文件。

.btn {
	...
	background: #222 url(sprites.png) repeat-x;
	/**background**/
}

3.圆角

圆角(border-radius)是目前浏览器支持最好的CSS3特性之一，除了IE系浏览器，各个A级浏览器都支持，尽管大都是通过私有属性来实现的，至少，这是可用的。

.btn {
	...
	background: #222 url(sprites.png) repeat-x;
	/**背景图片**/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/**圆角**/
}

4.阴影和RGBa

box-shadow和text-shadow是CSS3新增的两个重要的属性，它们可以很方便的实现块级元素阴影和文字的阴影。但是，如果如果阴影的颜色使用半透明效果，岂不是更好？这样元素可以更好的和背景融合到一起。值得注意的是，FF只有等到3.5版本才支持text-shadow属性（目前Firefox3.5beta4版本已经支持）。

.btn {
	...
	background: #222 url(sprites.png) repeat-x;
	/**背景图片**/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/**圆角**/
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	/**按钮阴影**/
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	/**文字阴影**/
}

好了，到现在，我们的按钮已经完全做好了。它已经实现我们的目标了。

这个按钮，是黑色的，那么其它颜色的按钮实现起来也就比较容易了：

...
.green.btn, .green.btn:visited {background-color: #91bd09;}
.green:hover {background-color: #749a02;}
.blue, .blue:visited {background-color: #2daebf;}
.blue:hover {background-color: #007d9a;}
.red, .red:visited {background-color: #e33100;}
.red:hover {background-color: #872300;}
...