交互设计,自然用户界面,用户体验,人机交互产品,IT酷玩
打造完美WEB2.0的“行为请求按钮”！
声明：本文为作者理解的译作，文中涉及作者的主观意见，请免板砖。如果需要原汁原味，请访问【原文链接】
[版权声明]:版权归作者Lynn和非凡体验设计所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明：http://www.yalynn.com
今天看到SMASHING提出了一篇关于“Call to Action Buttons”的文章。那么什么是“call to action buttons”呢？我暂且译为“行为请求按钮”（欢迎对文章中的翻译与术语进行指证）。这种按钮是网页设计中常见的“征求用户行为的按钮！”举个简单的例子，如常见的“Buy this now!”按钮，“Learn more…”按钮。这种按钮请求用户进行点击，进而用来完成一种额外的操纵。
那么我们如何更好的设计能够有效鼓励用户点击、吸引用户注意力的“行为请求按钮”呢？这篇文章就将分享一些行之有效的设计方法和进一步对“行为请求按钮”进行深入的探索。
有效的最佳实践
设计行为请求按钮一定是要深思熟虑并且再三规划，为了更好的工作，设计“行为请求按钮”的步骤应该是你设计系统原型和信息架构时的一部分，在这里将介绍一些设计技术。
绘制引人注目的尺寸
尺寸的大小在网页设计元素中的重要性：较大的元素更为重要，当决定行为的重要性时尺寸的大小对“行为请求按钮”至关重要。
行为呼叫按钮尺寸与周围的元素
Lifetree Creative展示了行为请求按钮尺寸的重要性。将其与LOGO进行呼应。为了抢眼，行为请求按钮大概比LOGO宽出20%。即使LOGO放在了网页的最顶部，您的眼睛仍然请求你采取点击行为，这恰恰因为其较大的按钮尺寸。
相对与行为请求按钮的尺寸更重要的“请求行为”
一个网页可能会有多个请求行为。为了说明一个行为请求按钮相对其他按钮的重要性，你可能会改变他们的大小。这里有一个paramore|redd网站关于行为请求按钮中“注册sign up”按钮比“继续阅读continue reading”按钮更大，这也说明了在这个博客中注册行为比继续阅读行为更为重要的原因。
建立更有吸引力的突出布局
行为呼叫按钮在网页中的位置也是吸引眼球的决定性因素。相对其他按钮更为靠近顶部的按钮位置更能带来目标网页的转化率，这是因为用户更容易收到鼓动，进而采取行动。
安排在一个更与众不同的位置
“行为请求按钮”安置在一个网页布局的与众不同的位置，这里大家可以参考这个网站dailymile，他们的“行为请求按钮”看上去相对其他网站元素飘起来一样。
放置在网页顶部
为了说明这一概念，让我们来看看“Post a job发布工作”这个行为请求按钮。她被放置在Your Web Job顶部的右上角。 这是一个非常突出的位置。他更容易引起注意，进而被记住。例如，一个发布工作的浏览者不论在那个页面浏览，他们都能够更加印象深刻的记住“Post a job”这个按钮。
放置在布局的中心
行为请求按钮放置在布局的中心更能影响用户的行为。例如这个网站，行为请求按钮没有被制作成与其他网页元素更高的对比度，他用了一个非常简单吸引注意力的方法。
使用空白来分离“行为呼叫按钮”
IconDock显示如何使用足够的空白来达到效果，或者使用一小部分空白来设计“行为请求按钮”这是因为利用空白来分离的元素与元素。
利用空白的变化来表示逻辑上的关系
使用高对比度的颜色
颜色对比周围的元素
背景色与前景色的对比
提供一个间接的替代行为
一个页面能够拥有多个“行为请求按钮”，有时有必要提供一个次要的“行为”用来说服用户如果采取行动必须的首要行为。例如，在用户注册网络服务之前一些用户可能会需要进一步的资料，提示以注册的后续行为;次要的行为可能会要求他们采取的产品旅游或访问更多的信息。
主要行为旁边显示次要行为
也显示了如果需要次要按钮进行下一步所需要的主要按钮的概念。在这个案例中，主要行为是“Buy it”购买，而如果需要在购买之前进行尝试，那么可以通过次级行为首先进行“下载”。注意主要行为的背景对比度更高，其次也利用了从右至左的视觉特点。
Displaying secondary actions below the primary action在主要行为下方显示次要行为
Alternatively, you may wish to display the secondary action below the primary action. This may be necessary if you need to have greater visual separation of your calls for action. Virb shows this situation where the “Join Now” call to action is placed above the secondary action of taking the product tour. Notice that the secondary action is further separated from the primary action by using a more muted color for its default state.
Convey a sense of urgency传达一种紧迫感
通过大胆，自信和具有指令性的词语来达到这种效果。这种概念用来说服用户不要在迟疑，等待，否则会得到惩罚或丧失机会。
告诉用户采取行动是很容易的
传达用户所期待的
“行为请求按钮”的设计案例
关于“行为请求按钮”的额外资源
How to Create a Slick and Clean Button in Photoshop
This tutorial on Six Revisions, written by me, will show you how to make large and noticeable call to action buttons step by step.
Inspirational Buttons in web design – Pattern Tap
If you need some inspiration on good button designs, check out this Pattern Tap collection.
10 techniques for an effective ‘call to action’
Paul Boag discusses some techniques for making good call to action buttons.
Good Call-To-Action Buttons
UX Booth has a good piece on what a good call to action button consists of.
Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance
Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer.
Web Design Trends: Call To Action Buttons
Lee Munroe puts together a showcase of call to action buttons, along with a discussion on current design trends.
声明：本文为作者理解的译作，文中涉及作者的主观意见，请免板砖。如果需要原汁原味，请访问【原文链接】
[版权声明]:版权归作者Lynn所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明：http://www.wangyaliln.com.cn
| 打印文章 | 这篇文章由admin于2009年10月14日 11:17 上午发表在未分类。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
作者：魔术方块 Lynn