-
行动召唤按钮：实例与最佳实践(四)
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。
中文翻译行动召唤按钮：实例与最佳实践
英文原文Call to Action Buttons: Examples and Best Practices
感谢：前端观察 翻译分享
