<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>紫枫印象 &#187; 按钮</title>
	<atom:link href="http://www.86ue.com/archives/tag/%e6%8c%89%e9%92%ae/feed" rel="self" type="application/rss+xml" />
	<link>http://www.86ue.com</link>
	<description>UED web2.0 前端技术 用户体验 SEO 80后</description>
	<lastBuildDate>Sun, 14 Mar 2010 14:02:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>行动召唤按钮：实例与最佳实践(二)</title>
		<link>http://www.86ue.com/archives/228</link>
		<comments>http://www.86ue.com/archives/228#comments</comments>
		<pubDate>Fri, 06 Nov 2009 14:27:21 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[按钮]]></category>
		<category><![CDATA[行动]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=228</guid>
		<description><![CDATA[另外，注意两个行动召唤按钮之间相对于该区域其它元素的缩少的空白的使用，有效的将按钮组织到了一起。

<img src="http://www.86ue.com/download/blog/200911/b98cGG6yyravbNK.jpg" alt="null" />

<strong>在主要行动召唤按钮下面显示次要行动按钮</strong>

另外，你可能想将次要按钮放到主要行动下面。如果你需要更好的区分你的行动召唤按钮的话，这可能就是有必要的了。Virb 展示了这个方案，”Join Now” 行动召唤按钮被放在次要行动“体验产品之旅”的上面。注意，次要行动按钮因为它的默认状态被用比较弱的色彩远远的从主要行动隔开了。

<img src="http://www.86ue.com/download/blog/200911/iMfsSl019NneN4y.jpg" alt="null" />

<strong>传递一种紧迫感</strong>

通过使用大胆的、肯定的和命令的词语表达这个行动可以改变用户的看法，用这种方法说服他们不应再等待才去采取行动，以及等待可能会造成某些惩罚或者错失良机。]]></description>
			<content:encoded><![CDATA[<p>另外，注意两个行动召唤按钮之间相对于该区域其它元素的缩少的空白的使用，有效的将按钮组织到了一起。</p>
<p><img src="http://www.86ue.com/download/blog/200911/b98cGG6yyravbNK.jpg" alt="null" /></p>
<p><strong>在主要行动召唤按钮下面显示次要行动按钮</strong></p>
<p>另外，你可能想将次要按钮放到主要行动下面。如果你需要更好的区分你的行动召唤按钮的话，这可能就是有必要的了。Virb 展示了这个方案，”Join Now” 行动召唤按钮被放在次要行动“体验产品之旅”的上面。注意，次要行动按钮因为它的默认状态被用比较弱的色彩远远的从主要行动隔开了。</p>
<p><img src="http://www.86ue.com/download/blog/200911/iMfsSl019NneN4y.jpg" alt="null" /></p>
<p><strong>传递一种紧迫感</strong></p>
<p>通过使用大胆的、肯定的和命令的词语表达这个行动可以改变用户的看法，用这种方法说服他们不应再等待才去采取行动，以及等待可能会造成某些惩罚或者错失良机。</p>
<p>tap tap tap通过给一个行动召唤按钮添加紧迫性来证明了这个主意。”Buy Now”行动召唤按钮上面有“价格信息(Intro price)”的文字，巧妙的暗示用户行动拖延越久，将来在这个介绍的价格过期的时候可能要支付的更多的风险就越高。</p>
<p><img src="http://www.86ue.com/download/blog/200911/hqLpYWyeDvIt8mN.jpg" alt="null" /></p>
<p>通常，创造紧迫感可以有效的暗示用户去采取行动。使用单词比如”now”、”immediately”和”right now”可以传递这种紧迫感。看一看Organizing for America (BarackObama.com) 呼吁网站访问者”DONATE NOW”的例子。如果只是简单的说”Donate”，紧迫感就会消失，用户也可能会更少的去采取行动。</p>
<p><img src="http://www.86ue.com/download/blog/200911/zI4e4AJ14pUfjvf.jpg" alt="null" /></p>
<p>告诉用户采取行动是很容易的</p>
<p>通常，用户迟疑采取行动是源于考虑一个姓对可能会比较困难、昂贵或者费时。通过照顾这些担心，你的行动召唤按钮能带来更多的转换(点击)。</p>
<p>你如，在Basecamp上，行动召唤按钮明确显示用户注册将会花费的时间以及注册是不花钱的(free)。 这种做法消除了用户将要在线采取行动是的两个主要顾虑：费用(这也会要求他们采取格外的操作比如拿出他们的信用卡) 和时间限制。</p>
<p><img src="http://www.86ue.com/download/blog/200911/wKzvj35bXEpc5ep.jpg" alt="null" /></p>
<p>在Tea Round App的例子中，他们告诉用户注册他们的邮件服务将不会受到垃圾邮件，这是无论何时将你的Email提供给第三方服务时担心的一个事情。</p>
<p><img src="http://www.86ue.com/download/blog/200911/RlNnjAVP0ZjN4Dt.jpg" alt="null" /></p>
<p>告诉用户期待什么</p>
<p>大部分网站用户犹豫于相信在网页上呈现的表面价值。根据经验，他们的信任已经被烧光了——声称免费服务的链接，却不得不输入他们的信用卡号码才能得到他们想要的服务。为了增加点击转换率和重建信任，预期用户的怀疑并告诉他们通过采取你为他们准备的行动将会得到什么。当设计一个行动召唤按钮，考虑到用户可能会有的所有潜在的问题，然后确定你可以及时的回答他们。</p>
<p>Mozilla Firefox 告诉用户通过点击他们的行动召唤按钮的详细的预期。这个行动召唤按钮告诉你你将会得到Firefox 3.5，它是免费的，以及(对那些更多的特性)它的确切的版本是3.5.3 forWindows 操作系统，语言是English，然后你可以预期一个7.7MB 的下载。</p>
<p><img src="http://www.86ue.com/download/blog/200911/v1eKU2rI71ywm8a.jpg" alt="null" /></p>
<p>Onehub预料到用户是否(在采取行动上)需要先支付或者他们是否能够用一下产品作一下测试的问题，告诉用户如果他们采取注册的行为，他们将获得30天的免费试用。</p>
<p><img src="http://www.86ue.com/download/blog/200911/9z1TyF6zd086Yc9.jpg" alt="null" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/228/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>行动召唤按钮：实例与最佳实践(一)</title>
		<link>http://www.86ue.com/archives/226</link>
		<comments>http://www.86ue.com/archives/226#comments</comments>
		<pubDate>Fri, 06 Nov 2009 14:15:58 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[按钮]]></category>
		<category><![CDATA[行动]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=226</guid>
		<description><![CDATA[行动召唤在网页设计中——尤其是在用户体验方面——是一个描述在网页中用于诱导用户行为的元素的术语。在网站界面中，最流行的行动召唤的表现是出现在点击表单按钮、完成一个行动(比如”Buy this now!”)或使用附加信息带到一个页面(比如”Learn more …”)等请求用户来采取行动的地方。

我们如何创建有效的行动召唤按钮来吸引用户的注意并引诱他们点击？我们将在本文中通过分享一些有效的设计技术和查看一些实例来尝试回答这个问题。

<strong>有效的行动召唤按钮的最佳实践</strong>

设计行动召唤按钮到网站界面需要一些远见和计划；它必须是你的原型和信息结构流程的一部分以使他们能够正常工作。在本节中，我们将讨论行动召唤按钮的设计技术。

<strong>用大小吸引用户注意</strong>

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站的某种行为有多么至关重要，行动召唤按钮的型号也应相应的调整。]]></description>
			<content:encoded><![CDATA[<p>行动召唤在网页设计中——尤其是在用户体验方面——是一个描述在网页中用于诱导用户行为的元素的术语。在网站界面中，最流行的行动召唤的表现是出现在点击表单按钮、完成一个行动(比如”Buy this now!”)或使用附加信息带到一个页面(比如”Learn more …”)等请求用户来采取行动的地方。</p>
<p>我们如何创建有效的行动召唤按钮来吸引用户的注意并引诱他们点击？我们将在本文中通过分享一些有效的设计技术和查看一些实例来尝试回答这个问题。</p>
<p><strong>有效的行动召唤按钮的最佳实践</strong></p>
<p>设计行动召唤按钮到网站界面需要一些远见和计划；它必须是你的原型和信息结构流程的一部分以使他们能够正常工作。在本节中，我们将讨论行动召唤按钮的设计技术。</p>
<p><strong>用大小吸引用户注意</strong></p>
<p>在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站的某种行为有多么至关重要，行动召唤按钮的型号也应相应的调整。</p>
<p><strong>行动召唤按钮与周边元素</strong></p>
<p>Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的logo对比。为了吸引用户的注意，这个行动召唤按钮在宽度方面比logo大了大约20%。尽管logo在页面中放的比较高，你的眼睛还是被吸引到了行动召唤按钮，因为它相对于周边元素比较大。</p>
<p><img src="http://www.86ue.com/download/blog/200911/YWRIPG64puCRwd4.jpg" alt="null" /></p>
<p><strong>行动召唤按钮与不太重要的行动召唤的大小</strong></p>
<p>一个网页可能有多个行动召唤。为了区分一个行动召唤与其它行动的相关重要性，你可以改变他们的大小。这里在paramore|redd网站有一个使用这个理念的实例，那个页面的让用户注册以获取邮件通知的行动召唤按钮明显的比继续阅读性东召唤按钮大一些，表明在该网页中，与继续阅读日志相比他们更希望你采取订阅</p>
<p><img src="http://www.86ue.com/download/blog/200911/0jNxssbmilRx3EX.jpg" alt="null" /></p>
<p><strong>使用突出的位置吸引用户注意</strong></p>
<p>页面中的行动召唤按钮的位置是吸引访问者的注意的关键。放置在突出的位置，比如页面的章节的头部可以带来较高的页面转换因为用户将很可能注意到行动召唤按钮并采取行动。</p>
<p><strong>放置在明显的区域</strong></p>
<p>将一个行动召唤按钮放置在一个明显的区域是一个让它在页面布局中突出的一个方法。你可以在dailymile看到这个概念，行动召唤按钮看起来在一个比其它元素比如图形条高的层面上(在顶部)。</p>
<p><img src="http://www.86ue.com/download/blog/200911/7zxTMzziY9bNzuY.jpg" alt="null" /></p>
<p><strong>放到页面的头部</strong></p>
<p>为了阐述这个概念，看一下位于Your Web Job页面最右上角的”Post a Job!”行动召唤按钮。通过将行动召唤按钮放到一个非常醒目的区域，这样好像用户会注意到它或者稍后记住它，在他们看过网站的内容之后。比如一个职位发布者想要在他们发布职位之前浏览一下网站，”Post a Job!”按钮将随时为他们准备好，无论哪个页面引导他们跳转，他们会更可能记得他们可以很容易的执行这个行动的地方，因为它的位置足够显眼。</p>
<p><img src="http://www.86ue.com/download/blog/200911/Ap3tzhwnPfPTAoT.jpg" alt="null" /></p>
<p><strong>放在布局的中间</strong></p>
<p>将一个行动召唤按钮定位到页面布局的中间——而不是两侧(或明显比较小或者不重要)的位置——可以是一个很有效的吸引注意和诱导一个行动的方法。在例子PicsEngine中，尽管这个行动召唤按钮没有使用与其背景色和页面中周边元素高对比的色彩，它依然能够因为其居中的位置而很容易引起注意。</p>
<p><img src="http://www.86ue.com/download/blog/200911/WAwVosSs7xtULJp.jpg" alt="null" /></p>
<p><strong>使用空白来从其他页面元素中区分行动召唤按钮</strong></p>
<p>行动召唤按钮周围的空白（或者无效空间）的使用是一个让它在有很多元素的区域中突出的很有效的方法。</p>
<p><img src="http://www.86ue.com/download/blog/200911/8BGzufPiLjYjHFh.jpg" alt="null" /></p>
<p><strong>改变空白的数量以表明逻辑关系</strong></p>
<p>行动召唤按钮与其周边的元素之间的空白越多，他们的联系越少。因此，如果你有其它元素能够有助于说服用户采取行动，减少那些元素之间的空白和间隔。</p>
<p>例如，Donor Tools在他们的”Sign Up”行动召唤按钮上面有些文字，它们告诉用户注册的好处。在它的右边是一个浏览器截图只是用于美化的，而且对激励用户点击”Sign Up”行动召唤按钮不是必须的。通过减少文字和行动召唤按钮之间的空白，你将这两个元素可视的组织到了一起。浏览器截图和一个图片保证用户的实现不会从行动召唤按钮上面转移走。</p>
<p><strong>用于区分行动召唤按钮的空白</strong></p>
<p>IconDock展示如何有效的利用空白。即便使用一个很小而且简单设计的行动召唤按钮，它依然很突出，因为在它和邻近元素之间的空间。</p>
<p><img src="http://www.86ue.com/download/blog/200911/SJbhTelyyx0Z3bI.jpg" alt="null" /></p>
<p><strong>使用高对比度的颜色</strong></p>
<p>决定在行动召唤按钮上使用哪个颜色很重要。在你的行动召唤按钮上使用一个相对于周边元素和背景色对比度高的色彩，因为这是让用户注意到你的行动召唤按钮的关键。</p>
<p><strong>与周边元素形成对比的颜色</strong></p>
<p>Notepod例证在一个行动召唤按钮和它周边元素的色彩反差是如何能够有效的吸引用户的注意的。周围元素都是黑色的，而这个行动召唤按钮却是浅蓝色。</p>
<p><img src="http://www.86ue.com/download/blog/200911/6LxpiCZU6QYRIxq.jpg" alt="null" /></p>
<p><strong>背景/前景色彩反差</strong></p>
<p>Valley Creek Church设置它的浅黄色”Learn More”召唤按钮到一个灰度图片上面。就算使用一个简单的行动召唤按钮设计在一个复杂元素的上面(此处是一个图片)，它依然因为色彩选择而醒目。</p>
<p><img src="http://www.86ue.com/download/blog/200911/PPGf3nWMswFmUZX.jpg" alt="null" /></p>
<p><strong>提供次要的替代行动</strong></p>
<p>一个页面可以有多个行动召唤按钮。有时候有必要提供一个次要行动以便于说服用户稍后访问你希望的主要的行动召唤。比如，在用户注册一些网络服务之前，一些用户需要了解更多的信息才去执行注册的行为；次要行为可以请求他们体验一次产品之旅或者访问展示产品的更多信息的页面。</p>
<p><strong>在主要行动旁边显示次要行动</strong></p>
<p>OfficeVP显示两个挨着的行动召唤按钮——居中并放在页面头部。通过区分颜色，用户可以看到他们有两条不同的路：他们可以直接注册(主要行动)，或者如果他们在注册前希望了解更多，他们可以选择第二个行为，体验一下先。</p>
<p><img src="http://www.86ue.com/download/blog/200911/gKBDnhEcAscDthg.jpg" alt="null" /></p>
<p>Transmissions 也展示了在期望的重要行动旁边放一个次要行动按钮的概念。这样的话，主要行动就是让用户购买该应用。如果他们想在购买前试用一下，那么第二期望的行动就是先下载该应用。注意主要行动通过做的比次要行动按钮更醒目来被标识出来，相对于背景色比次要行动按钮有更鲜明的对比色。这样，你就很有效的从左到右移动目光。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/226/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
