如何创建有效的行动召唤按钮(9)
你可以看到使用相对于周边元素的鲜明的色彩、足够的空间、以及型号的一些用户注意的效果。简单的语言传递一种很容易的感觉,生存你可以通过点击立马“开始(start)”。
这个行动召唤按钮显示如何通过使用一个非传统的设计,你依然可以在周围元素比较大的情况下吸引用户的注意。
这个行动召唤按钮明确的高速用户:通过点击这个行动召唤按钮,他们可以只付$3.99。使用单词”only”提示这是个相当不错的交易,这显然有利于销售。
下面是一组使用两种不同颜色的行动召唤按钮。更醒目的那个,”get a quote” 暗示它就是主要期待行动。
该行动召唤按钮设法通过大量的空白、显眼的位置和使用一个图标以使自己显眼以吸引注意力。通过使用单词”now”,它传递了一种紧迫感和立马行动的需求。
这个行动召唤按钮的型号和项目位置吸引了用户的注意。放大镜图标给行动添加了语境。添加“Free for search”文字消除了用户关于行动的费用的顾虑。
这里,你可以看到使用高对比色彩的以使行动召唤按钮脱颖而出的做法,尽管是在明显较大的页面元素中间。
行动召唤按钮的附加资源
如果你想了解更多的关于行动召唤按钮的信息,这里是一些其它网站上的相关资源和文章:
这个教程是在Six Revision,由我(Jacob Gube)编写,将一步步向你展示如何制作大号的和能引起注意的行动召唤按钮。
如果你需要一些优秀按钮设计的灵感,看一下这个Pattern Tap的收集吧。
Paul Boag讨论一些关于制作良好的行动召唤按钮的技术
UX Booth关于“好的行动召唤按钮的组成”方面有一篇好文章
Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的
阅读一下一个好的行动召唤按钮如何提高转换。你将发现一个Firefox、Opera和IE使用的行动召唤按钮之间的对比。
Lee Munroe将一系列的行动召唤按钮放到一起,并附加了一个在当前设计趋势方面的讨论。
关于原作者
Jacob Gube是Six Revisions的创立者和主编。他同时也是一个专注于远程教育、前端开发和网站可用性的网页开发者/设计师,如果你想联系他,可以follow他的Twitter: @sixrevisions。












