当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 如何设计完美的行为引导按钮

心得技巧
网页设计欣赏:整体色彩搭配非常合理的设计实例
设计理论:浅析网页色彩应用
WEBJX收集30个优秀的成功电子商务网站设计
B2C电子商务网站的产品图片设计
B2C电子商务网站评论设计的5个不同境界
用户体验:当当网的糟糕的信息反馈页面设计
备受客户折磨的网页设计师
10条常犯的用户体验设计低级错误
10条极为糟糕的网站用户体验
全球知名logo标志设计师和他们的作品
交互设计:当当网提交订单缺货设计分析
交互设计:电子商务网站的打分模式设计心得
互联网产品设计:产品设计文档(PDD)
用户体验设计分析:一个标点的文案体验
交互设计:评价系统设计提纲
用户研究:互联网用户使用产品的习惯
视觉设计也可影响产品的功能
交互设计:适时的给用户操作提供帮助
互联网产品设计:新闻搜索的产品设计
互联网产品设计:卓越网分析报告

心得技巧 中的 如何设计完美的行为引导按钮


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 115 ::
收藏到网摘: n/a

行为引导按钮是你,作为网站设计师,希望你的用户点击的按钮。它们通常是一个下载、注册或出售的链接。

Seth Godin (The Big Red Fez)称这类按钮为香蕉,而你的用户就是那些猴子。目标是,猴子能在3秒钟内找到香蕉(在他们放弃和离开以前)。“强迫自己设计的每一个网页,只有一个主要目标。这就是香蕉。把它做的大些,把它做成蓝色(或红色) ,让他醒目”。

本文讨论如果设计完美的“行为引导”按钮,并展示30个比较棒的行为引导按钮设计

如何设计完美的行为引导按钮

你的行为引导按钮必须是醒目的,而且突然出现在用户的眼前。这里是5个典型的比较棒的行为引导按钮。

1. 色彩

按钮的颜色应该从页面的其它部分中突出出来,因此通常是一个比较鲜艳的高对比度的色彩。

Colour
2. 位置

它应该放到用户期望能容易找到的地方。文件上方、产品内部、页面的头部或者是顶部右侧的导航。它应该是醒目的,不难寻找的。

Location
3. 语言

你所使用的与你的用户沟通的语言很重要。它应该是比较短的,扼要(不罗嗦),而且应该由行为动词开头,比如 注册、下载、创建、试一下等等。

同时给用户一个点击行为引导按钮的理由,如“免费”对用户来说是排名第一的诱惑。

Language
4. 大小问题

为了使它醒目,因为它是你最最重要的按钮,你想让你的用户点击它,把它做的比其他按钮些,给用户足够大的地方来点击它。

Size
5.呼吸空间

你的按钮不能与其他元素挨的太紧,不能看起来拥挤。它需要足够的 margins,这样他就可以“鹤立鸡群”,文字也需要足够的padding ,这样它才易读。

Room to breathe

比较棒的行为引导按钮展示

1. Things
Things
2. Wordpress e-Commerce
Wordpress e-Commerce
3. Skype
CM Capture 3.png
4. PB Wiki
PB Wiki
5. Exceptional
Exceptional
6. PicsEngine
PicsEngine
7. InCase
InCase
8. GoodBarry
GoodBarry
9. Plan HQ
Plan HQ
10. TypePad
TypePad
11. Mozilla Firefox
Mozilla Firefox
12. 37 Signals
37 Signals
13. Hambo Design
Hambo Design
14. Cake PHP
Cake PHP
15. Traffik
Traffik
16. Boag World
Boag World
17. Donor Tools
Donor Tools
18. Luke Larsen
Luke Larsen
19. Square Space
Square Space
20. Wu Foo
Wu Foo
21. Barack Obama
Barack Obama
22. Freshbooks
Freshbooks
23. Crazy Egg
Crazy Egg
24. Web Notes
Web Notes
25. Campaign Monitor
Campaign Monitor
26. Light CMS
CM Capture 26.png
27. Litmus
Light CMS
28. Stumble Upon
Stumble Upon
29. Remember The Milk
Remember The Milk
30. Ekklesia 360
Ekklesia 360