导航设计中一个基本的任务点是准确标明当前选中项，不当的设计很容易造成用户困惑。尤其是只有两个列表项时，要对用户准确传达当前的选中项，设计上要很谨慎。针对最近项目中遇到的这个问题，记一笔。

用户判断选中状态的心智模型有两种：

一种是指示灯式，如红绿灯、电梯操作面板、各种仪表盘等，指示灯亮起表示选中——即高亮；

另一种是按钮式，按钮陷下去表示选中——即灰掉。明显告诉用户这个正在使用中，不可点。

===========================案例分割线============================

以上两个分别来自淘宝 和 有啊，都是选中状态高亮。（合理的指示灯式体验）

以上两个设计分别来自google和iTunes，都是选中状态灰掉。相信不管两个列表项还是三个列表项，都可以清楚知道哪个是选中项。（合理的按钮式体验）

上图来自阿里国际站，图标+链接的形式，选中状态图标灰掉。图标和链接都能传达选中状态，当用户对两者认知不一致时，该相信图标还是相信链接？（指示灯式与按钮式混用，且指示灯式反着用）

上图来自alibaba wholesale， 选中状态图标灰掉。与有啊一模一样的设计，实际意义竟然完全相反。（可以看成指示灯式反着用，也可以看成按钮式却没设计成按钮）

========================总结分割线============================

综合以上的案例，造成用户困惑的设计，要么是把指示灯式反着用，要么是按钮式没设计成按钮，要么是两者混着用却没统一。

总结：
1、选中状态高亮，代表最广大用户的认知习惯。
2、使用图标表示选中状态时，应该让选中状态的图标高亮。如果非要让选中状态的图标灰掉，图标应该设计成按钮质感，视觉上明确表现出陷下和浮起的状态。
3、利用链接与非链接也可以准确地表示选中状态。图标+链接的形式慎用。

源地址：http://www.pigtwo.com/blog/?p=3

目前，国内在使用和发布wave的时候有很多插件和功能的限制，不过还不至于不影响预览这款备受期待的网络产品。

首先，打开google wave的主界面就让人眼前一亮。google一贯的简洁风格的界面配合柔和的投影和晕色给视觉以干净和舒服的感觉。

干净的、国际化的“去web化”界面
说实话，第一眼看上去，wave很像是flash或者flex之类开发的界面，但鼠标右键一点，货真价实的html+CSS+js。firebug查看，代码复杂程度难以言表，据说wave的开发使用了html5的标准，不知是真假。google wave自然秉承google的高精尖技术，撇开技术开发的话题不说，作为产品人员体验的主要是那些新功能、新思路以及可能给互联网带来革新的东西。

自由伸缩的面板
google wave界面中的各个panel都可以自由的最大化和最小化。

google_wave03

最小化后的panel停放在google wave的顶部。在最小化时，当使用鼠标点击panel会浮动展开。

google_wave04

看到这里让猫嗔看到了Adobe CS4软件的身影。当年Adobe推出cs4的时候就说，使用这个版本的软件能提高工作效率50%。现在，google也秉承了adobe的设计和交互理念，也算是两大巨头的一次相互认可和致敬吧。

adobe_cs4

我们无疑从这个设计中感受到很好的适用性，首先是空间得到了最大限度的利用，并让用户随着使用阶段（初级用户到高级用户）、使用目的（专心的单条wave交流或者查找所有话题wave等）的不同，自由选择自己的操作重心。

我相信使用了一段时间的用户会将导航（Navigation）和通讯录（contacts）最小化在顶部。

google_wave05

更适合宽屏使用
同时，google wave的设计初衷应该是针对宽屏或者大屏的。只有在大分辨率屏中才能一次显示所有的操作功能项。网站或者web应用的宽度设计在这里也得到充分的考虑。（针对阅读信息为主的网站以定宽950为宜，对于web应用、后台系统多以自适应为主）

界面和交互的亮点
说到界面和交互设计，google wave中有两个不得不说亮点：
1.紧凑式滚动条的设计
刚打开界面第一眼看到google wave的滚动条时，我还以为是浏览器的兼容性问题导致的错位。但随机拖动了几下才知道自己刚才小愚蠢了一下。这是一种新式的滚动条。这种滚动条具备了很好的手感（拖动的时候有力的回馈，有弹性而不生硬）。同时，即使遇到大屏幕的浏览器，竖向滚动条很长的时候，也不必担心。因为将向上、向下和拖动条合并在一起，会让滚动操作时不必进行大距离的移动鼠标，可以说是体贴之举。
但是，就目前试用（在ff中），这种移动的精度似乎让人觉得有些问题，并且可能是因为系统资源的问题感觉还有些卡，有待进一步的改进。

google_wave02

2.操作选项形式的改变
首先，在panel上的所有操作都放在了头部，并以一种按钮菜单的方式呈现。这种排布让所有可用的操作一目了然，也省去了逐行都列出操作时所占用的大量空间。

google_wave06

但是，同样一个问题，当初级用户或者陌生用户使用时，会一下子难以适应，因为那个位置在普通人的映像中是用来放置title的，即使有操作也是排序和筛选。他们会找不到操作的地方和感觉。
当然，改变和培养用户习惯向来是google的一种产品理念，这种设计是会流行起来还是被抛弃，还需要时间的检验，但就猫嗔的个人观点认为这种方式还是很不错的。

在navigation中和wave项中，当鼠标点击三角ico会显出可用的操作菜单。这其实是沿用了Gmail的设计理念，但说的更古老一点就是 windows中单击右键弹出的quick menu的延伸。quick menu的作用在与能够区分某一“按钮”的主要功能和对该按钮的相关操作，同时也可以不断的添加新的相关功能和扩展。

google_wave07

到位的交互细节
在创建wave的交流过程，我还看到了对方输入文字的全过程。
这个过程是这样的，在对方每输入一个字母时我都可以看到，我是看着对方把文字一个字母一个字母输入完的，甚至包括删除和修改的过程。并不是输入之后才提交的，就像在我面前输入一样。这让我很震惊，不知道google是如何让这一个一个key的事件都传递的，如果每次key事件之后都连接一次服务器，那将是多大的一个资源的损耗啊！除了赞叹，还是赞叹。

总的来说，google wave让人们看到一个已经近乎以假乱真的web环境中的软件。不由得让我们惊叹google工程师的创造力和产品的开发能力，对于google OS也更加的期待。这种web技术的革命将是未来几年互联网行业新的发展方向和价值增长点。

一点点迷惑
但是，作为一个理智的产品人员，在看到大公司的一款新产品，在首先肯定其产品的创新和优势之外，不盲目迷信而去找点问题是我告诫自己的一个做事准则。

作为一个IM和SNS的交集的产品，我还不知道该怎么去定位这样一款产品。或者说我不知道怎么定义这样一款产品在中国的发展。除了完全基于web以外，其它功能还没有那么足够的吸引我去放弃现有的IM和SNS产品。

原因是什么呢？
1.如果说是为了群组交流，那么私密性比不上qq群，公开性比不上bbs或者是twitter。
2.如果说是IM和SNS的升级产品，那么其信息的交流在信息量巨大的时候会让查阅显得有些力不从心。或者说，当一个有几千人参与的wave中，每个人说一句话，我甚至不知道怎么会有耐心去浏览完所有人的发言，而且搜索功能也还不够完善。
3.如果说一条wave其实就是一个bbs中的“话题贴”的话，那不如直接bbs来的痛快。
4.这里也就只有添加（+）联系人来参与到wave讨论这个功能是很不错的，要优于bbs中推荐贴子的方式，但同时这又和qq中的讨论组功能产生了交叉。

以上的几点，胡说也好，或者是因为暂时不了解google wave也好，更或者是因为自己的目光短浅也好，总之对这款产品的定位还是有些迷惑。或者说它也许很符合国外人团队交流和合作的方式，但却有点不适应中国的国情，也许qq的功能还难以跨越（不要有人朝我扔鸡蛋）。

总得来说是相当好的产品
当然，看到google wave我还是无比的赞叹，对于这种泛网络化的交流平台的产生也让我感到浑身的激情。让信息更好的在互联网中传播、沉淀、升华是每一位互联网人的努力和方向，google在其中功不可没，从google的搜索到wave，一个收集信息的方式从“蜘蛛”到“蛛网”，平台从“展示信息”到“聚合智慧”，这些都是伟大的创新，我只愿能越来越好。

写在最后，需要更深度的发掘

在使用者发布每一条新wave的时候，wave中支持文本、link（链接）、Add Attachment（文件）、google search（结果）、add gadget by URl（Google个人化网页迷你程式）、投票、地图、视频或者自制api插件等等方式。

google_wave08

这些灵活的信息储存方式和交流展示方式或许才是google wave真正的卖点和要推广的理念吧。

http://longstep.cn/?p=201

行动召唤在网页设计中——尤其是在用户体验方面——是一个描述在网页中用于诱导用户行为的元素的术语。在网站界面中，最流行的行动召唤的表现是出现在点击表单按钮、完成一个行动(比如”Buy this now!”)或使用附加信息带到一个页面(比如”Learn more …”)等请求用户来采取行动的地方。

我们如何创建有效的行动召唤按钮来吸引用户的注意并引诱他们点击？我们将在本文中通过分享一些有效的设计技术和查看一些实例来尝试回答这个问题。

有效的行动召唤按钮的最佳实践

设计行动召唤按钮到网站界面需要一些远见和计划；它必须是你的原型和信息结构流程的一部分以使他们能够正常工作。在本节中，我们将讨论行动召唤按钮的设计技术。

用大小吸引用户注意

在网页中，一个元素相对于其周围元素的大小表明其重要性：元素越大，它就越重要。判断网站的某种行为有多么至关重要，行动召唤按钮的型号也应相应的调整。

行动召唤按钮与周边元素

Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的logo对比。为了吸引用户的注意，这个行动召唤按钮在宽度方面比logo大了大约20%。尽管logo在页面中放的比较高，你的眼睛还是被吸引到了行动召唤按钮，因为它相对于周边元素比较大。

行动召唤按钮与不太重要的行动召唤的大小

一个网页可能有多个行动召唤。为了区分一个行动召唤与其它行动的相关重要性，你可以改变他们的大小。这里在paramore|redd网站有一个使用这个理念的实例，那个页面的让用户注册以获取邮件通知的行动召唤按钮明显的比继续阅读性东召唤按钮大一些，表明在该网页中，与继续阅读日志相比他们更希望你采取订阅

使用突出的位置吸引用户注意

页面中的行动召唤按钮的位置是吸引访问者的注意的关键。放置在突出的位置，比如页面的章节的头部可以带来较高的页面转换因为用户将很可能注意到行动召唤按钮并采取行动。

放置在明显的区域、

将一个行动召唤按钮放置在一个明显的区域是一个让它在页面布局中突出的一个方法。你可以在dailymile看到这个概念，行动召唤按钮看起来在一个比其它元素比如图形条高的层面上(在顶部)。

放到页面的头部

为了阐述这个概念，看一下位于Your Web Job页面最右上角的”Post a Job!”行动召唤按钮。通过将行动召唤按钮放到一个非常醒目的区域，这样好像用户会注意到它或者稍后记住它，在他们看过网站的内容之后。比如一个职位发布者想要在他们发布职位之前浏览一下网站，”Post a Job!”按钮将随时为他们准备好，无论哪个页面引导他们跳转，他们会更可能记得他们可以很容易的执行这个行动的地方，因为它的位置足够显眼。

放在布局的中间

将一个行动召唤按钮定位到页面布局的中间——而不是两侧(或明显比较小或者不重要)的位置——可以是一个很有效的吸引注意和诱导一个行动的方法。在例子PicsEngine中，尽管这个行动召唤按钮没有使用与其背景色和页面中周边元素高对比的色彩，它依然能够因为其居中的位置而很容易引起注意。

使用空白来从其他页面元素中区分行动召唤按钮

行动召唤按钮周围的空白（或者无效空间）的使用是一个让它在有很多元素的区域中突出的很有效的方法。

用于区分行动召唤按钮的空白

IconDock展示如何有效的利用空白。即便使用一个很小而且简单设计的行动召唤按钮，它依然很突出，因为在它和邻近元素之间的空间。

改变空白的数量以表明逻辑关系

行动召唤按钮与其周边的元素之间的空白越多，他们的联系越少。因此，如果你有其它元素能够有助于说服用户采取行动，减少那些元素之间的空白和间隔。

例如，Donor Tools在他们的”Sign Up”行动召唤按钮上面有些文字，它们告诉用户注册的好处。在它的右边是一个浏览器截图只是用于美化的，而且对激励用户点击”Sign Up”行动召唤按钮不是必须的。通过减少文字和行动召唤按钮之间的空白，你将这两个元素可视的组织到了一起。浏览器截图和一个图片保证用户的实现不会从行动召唤按钮上面转移走。

使用高对比度的颜色

决定在行动召唤按钮上使用哪个颜色很重要。在你的行动召唤按钮上使用一个相对于周边元素和背景色对比度高的色彩，因为这是让用户注意到你的行动召唤按钮的关键。

与周边元素形成对比的颜色

Notepod例证在一个行动召唤按钮和它周边元素的色彩反差是如何能够有效的吸引用户的注意的。周围元素都是黑色的，而这个行动召唤按钮却是浅蓝色。

背景/前景色彩反差

Valley Creek Church设置它的浅黄色”Learn More”召唤按钮到一个灰度图片上面。就算使用一个简单的行动召唤按钮设计在一个复杂元素的上面(此处是一个图片)，它依然因为色彩选择而醒目。

提供次要的替代行动

一个页面可以有多个行动召唤按钮。有时候有必要提供一个次要行动以便于说服用户稍后访问你希望的主要的行动召唤。比如，在用户注册一些网络服务之前，一些用户需要了解更多的信息才去执行注册的行为；次要行为可以请求他们体验一次产品之旅或者访问展示产品的更多信息的页面。

在主要行动旁边显示次要行动

OfficeVP显示两个挨着的行动召唤按钮——居中并放在页面头部。通过区分颜色，用户可以看到他们有两条不同的路：他们可以直接注册(主要行动)，或者如果他们在注册前希望了解更多，他们可以选择第二个行为，体验一下先。

Transmissions 也展示了在期望的重要行动旁边放一个次要行动按钮的概念。这样的话，主要行动就是让用户购买该应用。如果他们想在购买前试用一下，那么第二期望的行动就是先下载该应用。注意主要行动通过做的比次要行动按钮更醒目来被标识出来，相对于背景色比次要行动按钮有更鲜明的对比色。这样，你就很有效的从左到右移动目光。。

另外，注意两个行动召唤按钮之间相对于该区域其它元素的缩少的空白的使用，有效的将按钮组织到了一起。

在主要行动召唤按钮下面显示次要行动按钮

另外，你可能想将次要按钮放到主要行动下面。如果你需要更好的区分你的行动召唤按钮的话，这可能就是有必要的了。Virb 展示了这个方案，”Join Now” 行动召唤按钮被放在次要行动“体验产品之旅”的上面。注意，次要行动按钮因为它的默认状态被用比较弱的色彩远远的从主要行动隔开了。

传递一种紧迫感

通过使用大胆的、肯定的和命令的词语表达这个行动可以改变用户的看法，用这种方法说服他们不应再等待才去采取行动，以及等待可能会造成某些惩罚或者错失良机。

tap tap tap通过给一个行动召唤按钮添加紧迫性来证明了这个主意。”Buy Now”行动召唤按钮上面有“价格信息(Intro price)”的文字，巧妙的暗示用户行动拖延越久，将来在这个介绍的价格过期的时候可能要支付的更多的风险就越高。

通常，创造紧迫感可以有效的暗示用户去采取行动。使用单词比如”now”、”immediately”和”right now”可以传递这种紧迫感。看一看Organizing for America (BarackObama.com) 呼吁网站访问者”DONATE NOW”的例子。如果只是简单的说”Donate”，紧迫感就会消失，用户也可能会更少的去采取行动。

告诉用户采取行动是很容易的

通常，用户迟疑采取行动是源于考虑一个姓对可能会比较困难、昂贵或者费时。通过照顾这些担心，你的行动召唤按钮能带来更多的转换(点击)。

你如，在Basecamp上，行动召唤按钮明确显示用户注册将会花费的时间以及注册是不花钱的(free)。 这种做法消除了用户将要在线采取行动是的两个主要顾虑：费用(这也会要求他们采取格外的操作比如拿出他们的信用卡) 和时间限制。

在Tea Round App的例子中，他们告诉用户注册他们的邮件服务将不会受到垃圾邮件，这是无论何时将你的Email提供给第三方服务时担心的一个事情。

告诉用户期待什么

大部分网站用户犹豫于相信在网页上呈现的表面价值。根据经验，他们的信任已经被烧光了——声称免费服务的链接，却不得不输入他们的信用卡号码才能得到他们想要的服务。为了增加点击转换率和重建信任，预期用户的怀疑并告诉他们通过采取你为他们准备的行动将会得到什么。当设计一个行动召唤按钮，考虑到用户可能会有的所有潜在的问题，然后确定你可以及时的回答他们。

Mozilla Firefox 告诉用户通过点击他们的行动召唤按钮的详细的预期。这个行动召唤按钮告诉你你将会得到Firefox 3.5，它是免费的，以及(对那些更多的特性)它的确切的版本是3.5.3 forWindows 操作系统，语言是English，然后你可以预期一个7.7MB 的下载。

Onehub预料到用户是否(在采取行动上)需要先支付或者他们是否能够用一下产品作一下测试的问题，告诉用户如果他们采取注册的行为，他们将获得30天的免费试用。

转载请注明出处：前端观察。

行动召唤按钮设计展示

现在我们已经讲了一些设计行动召唤按钮的最佳实践，让我们看一些网页上的行动召唤按钮的典型实现。我们将配合这些设计和上面的技术和最佳实践，并浏览他们如何帮助实现这些良好的设计。

Campaign Monitor
这套行动召唤按钮显示两个潜在的用户行为：”Try it for free”和”View features”。对于已经了解Campaign Monitor 和想要现在尝试的用户来说，他们可以执行首要期望的行动，而其它的想要在作出时间承诺之前浏览一下可以选择查看该网络应用的更多特性的次要行动。

Fileshare HQ
这个行动召唤按钮告诉用户预期的事情(”开始在片刻间分享文件(start sharing files in minutes)”).

Livestream.com
这组行动召唤按钮使用垂直排列分组以表示展示给用户的这些行动的期待的重要性顺序。主要期望的行动是获取一次评估，接着是了解服务的详情，最后是对比不同方案之间的差别。

Traffik CMS
这个行动召唤按钮被放在一个非常醒目的位置，在页面的最顶部，并用型号和色彩从周边相关元素中高亮了出来。

Hambo Design
这个行动召唤按钮告诉用户预期的事情：通过获得报价，没有附加的东西。它预料到了”如果我要花费时间进行这个流程的话一份报价将花费我多少?”的问题。(该网站已经被改版——译者，神飞。)

The Resumator
你可以在这个行动召唤按钮上看到很多最佳实践。首先，它使用了空白、大小和颜色来清晰的将自己和页面其它元素区分开来。然后，为了创造逻辑的分组以说服用户采取行动，它在按钮上面的推荐文字上使用较少的空白，然后将次要行动”Take a tour first”放到它的下面。

本文由前端观察译自Smashing Magazine，转载请注明出处，多谢。

Wufoo
Wufoo提供了两个行动，用户可以看到一个水平排列的样式，主要期待行动是左边的那个。这些按钮很大而且很难错过，尽管看网站的全局设计的时候它们并不是很显眼。

Mobile Web Design
这个行动召唤按钮被放在一个醒目的位置；它有较大的型号和一个独特的颜色——尊重了周边的元素。为了“Purchas the book”上提供附加的上下文，这个行动召唤按钮下面防止了一些文字注释的价格和可用的格式(传统图书或者PDF)。

NCover
这些行动召唤按钮很整齐。主要行动在蓝色的次要行动的上面。用户被吸引到这个按钮是因为大小，而且对次要期望行动使用蓝色调可以减弱它对相对于主要期望的行动。注意空白的使用以创建三个相关元素的逻辑分组有助于实现销售：文字告诉用户Ncover是干什么的，注册行动召唤按钮，以及体验行动召唤按钮。相比之下，注意此组和右边的元素之间的空白变化。

Xero
本组行动召唤按钮展示听过一个次要行动的用法。在主要期待行动的右边，有一个文字链接请求用户“了解更多(find out more)”，对于不想立马注册的用户来说，这个设计增加了用户会在注册之前“了解更多”的可能性。

Tao Effect – Espionage
这是一组行动召唤按钮，为用户提供三个选择：Download、Buy Now或者Upgrade。这样的话，主要期待行动就是下载这个应用，紧跟着两个同样的行动“Buy Now”和“upgrade”。区别是在行动召唤按钮上使用不同哦你高的颜色，主要行动比两个次要行动的颜色更醒目。

The Invoice Machine
这里你可以看到两个使用蓝色边框高亮的行动召唤按钮，因为它们使用了同样的风格，我们可以假定它们有相同的重要性。或许该公司确定用户在看到他们提供的东西之前不太可能选择注册的行为，也或者他们确信产品之旅将更有效的帮他们将访问者转换为会员。

Ekklesia 360
这套行动召唤按钮展示使用图标来指示向前的感觉(用指向右边的箭头表示)。他们使用了一个相对于黑蓝色背景的高对比的色彩以使行动召唤按钮从页面设计中突出出来。

Checkout
通过使用一个相对于全局设计的非常突出的颜色到他们的行动召唤按钮，尽管在它上面的图片明显比按钮的型号还要大，它依然能够吸引用户的注意。

spinen
使用直接而清晰的语言告诉用户当他们采取行动后预期的事情：这样的话，点击这个行动召唤按钮将让他们找到产品的更多信息。

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。

源地址：http://www.qianduan.net/call-to-action-buttons-examples-and-best-practices.html

一.布局

Wave界面布局和理念设计是真正的一页式体验，所有的操作都是一个页面完成。而在web产品中一页式体验最常用的就要数Email产品了。而Gmail更是将之发挥到极致。至于SNS产品譬如，Facebook首页和Twitter首页其实也是一页式体验的典型代表。

下面是几张不同应用的布局对比

由上面的布局对比我们可以看出，Wave是介于IM、Email、Twitter之间的一种全新的产品。不仅技术上采用了最新的HTML5，而且这种三列的布局明显是为了大屏幕，宽屏幕设计的。

二.交互细节

1.滚动条

当我最开始使用wave的时候，觉得最有意思的就是这个滚动条，虽然这种滚动条好像曾经在那个软件上看到过，但是出现的Web产品上还是第一次看到。

由于现在屏幕越来越大，那么就意味着传统滚动条的整体就越来越长，拖动还还好，但是要点击向上和向下箭头确实不是一件很容易的事情，每次一次点击，鼠标都要移动很大的距离。而Wave的滚动条，把向下、向上和拖动合并到一起，这样就能很好的解决这个问题，再加上拖动的算法，设定一个阀值，这样一般情况下用户之需要传统滚动条一半的距离就可以完成整个内容的拖动操作。

2.区块缩放

Wave中的每个区块都是可以缩小的，缩小以后会自动到顶部，当你最小化后的区块，不是直接最大化，而是显示出缩小后的操作界面，你可以直接在这里进行对区块内容的操作。这点设计十分类似于Windows7的Superbar。在这个时候你每开一个Wave就相当于一个新的窗口，这样就你可以快速的切换几个主题进行交互。初始的布局很适合新用户，当用户变成中级用户以后，就会发现初始的这种布局很有限制性，那么这种最小化的方式就很适合为中级和高级用户使用。

3.选项

在左上角的Navigation区域中，当鼠标悬浮到一个选项的时候最右侧会出现一个箭头，单击箭头会出现快捷操作，Movie Up，Movie Down，Set color。虽然这种悬浮快出现经常看到，但是一般都是在客户端或者表格操作中。在左侧导航确实很少。说到表格操作，通常的设计是把譬如编辑，删除，更新。默认不出现，当悬浮的时候直接出现，这三个操作的名字。我觉得这种设计很容易干扰用户，而wave这种把所有的操作隐藏到一个小箭头下就非常好，既可以完成操作，又不会干扰用户，而且便于以后功能扩展。

三.Wave到底带来了这么？

IM是对真实聊天的一种模拟，Email是对真实信件的模拟，这两种产品做得再好也只是模拟而已。而搜索引擎则不一样，他不存在与真实世界，他只存在于互联网，他是互联网中原生态的产品。同样，Facebook也是如此，Twitter也是如此。那么Wave呢？，其实Wave也是如此。Facebook和Twitter被誉为是Email的升级产品能，甚至有言论说Email会消失等等。那么Wave呢？属于IM的升级产品？还是Facebook和Twitter的升级产品？现在还真的很难看出，但是无论怎样Wave是一种全新的人和人之间的沟通工具或者说是沟通模式，而这种沟通模式只存在于互联网。google search是：机器->信息；而google wave是：人->信息。

http://blog.d8in.com/posts/603.html

苹果把推送叫做 Push Notification (推送通知/提醒)，说明他认为推送是个通知。和传统的手机厂家，比如 Nokia 一样。

Nokia 这么认识来源于手机厂家的悠久历史。移动互联网时代以前的手机，如果有事发生要通知用户，会有一个窗口弹出，告诉用户正在发生什么。可能是未接电话的提示，日历的提醒，或者是一封新彩信。推送最早被用于 Email 的通知，他又和彩信有什么不同呢？所以，通知属性就如此继承下来了。

如果 Nokia 还可以用传统作为借口。 苹果这么干就是纯粹的愚蠢或者懒惰了。把系统现有的通知机能拿过来就用而已，没有更多的思考。考虑到苹果在软键盘和操控UI上的苦心，这种做法实在有失苹果的一贯水准。

—————————————————-

变化

推送在迅速的普及和变化。今天他已经不仅仅推送邮件了。

iPhone 上， App Store 上的程序可以让你推送 Twitter 的 Mentions ， DM 。推送 IM 消息。推送网络上记入的 TODO 。在两个手机之间用推送聊天。甚至，在某个 App 降价到你希望的价钱时，通过推送提醒你！

iPhone 上的推送刚刚开始出现不到1年，就已经开始被滥用了。连接网络设置日程，到时候再通过推送提醒你的程序竟然也有不少下载！这些人似乎忘了，系统的日程自带提醒。

这种情况下坚持推送的通知属性，就会导致一些脑残事。

比如推送的覆盖。如果你有一段长时间的离线，一旦上线，各种推送会扑面而来。你刚刚看了个开头：“亲爱的。。。”。下一个弹出窗口就会覆盖掉上一个，显示的信息变为： “中国移动提醒您，您的余额已经少于10元”。

噩梦才刚刚开始，通知仅仅是个弹出窗口而已，系统中没有个地方提供这些通知的一览。如果你同时设置了 Twitter ， IM 还有 邮件的推送，面对着这几个程序上的红色数字，你知道那封缠绵的消息是通过什么过来的？

打开邮件查询，没有。打开 Twitter 查询，没有。太好了，那一定是 IM 了！心潮澎湃之际，又一个通知出现了: “中国移动提醒您，您已经欠费停机”。

—————————————————-

对应

推送的变化，并非被所有人忽视。

WebOS

WebOS 设计者搞出了非打扰通知。推送仍然是通知，但是已经具备了一定的消息属性。他可以分类，可以查看一览。

Android

(该段内容来源于 @Logoutx 兄，稍有修改)

顶部追加的下拉筐中集中显示通知。尽管有各种各样的不如意，但是总算是个好的开始。Android 自带的下拉通知栏中统一收集推送，而且可以集成第三方程序的消息。

(以下的说明和截图则要谢谢 @StanleyLin 兄 ，照抄了。)

Android系统屏幕顶部的状态栏也是通知栏，有消息推送进来的时候，在状态栏处会显示消息的类型标识和内容预览。如下图所示，在通知栏可以看到有sms进来。

在通知栏往下一拉，就是Notification Panel，可以集中一览各种通知。

第三方应用的推送也可以显示在通知栏，例如下图的Tweet消息。

Moto Blur

(该段内容来源于 @ StanleyLin 兄，稍有修改)

Blur 应是目前所有先进的通知方式的集大成者。和 WebOS 相比，青出于蓝而胜于蓝。Pre 上的地址簿，可以显示联系人协和的其他服务。但是， Blur 除了这点，更多了两个标签： History 和 Happening 。

History 显示你和这个联系人之间的多种消息的纪录。短信， Email ，也包括电话。关于你老婆的推送消息可以集中显示于她的名下。有效避免了回复小情的 IM 却误送给老婆的悲剧。

Happening 显示这个联系人的所有状态更新。还记得 Maemo 上收集朋友签名的程序? Moto 已经无缝整合进地址簿了！

iPhone

Blur 几乎让 iPhone 的推送颜面无存。 即使 Android 对于推送的统一收集和管理也是 iPhone 不具备的。

但 iPhone 的强项之一，就是苹果搞砸的事情，有第三方软件厂商弥补。（不过，地址簿协和有些超出它们的能力了。那是苹果或者 Cydia 上 Hacker 们的任务。）他们未必有 WebOS 或者 Blur 的设计高度，但是用户的反馈在一步步的引导他们。 Boxcar 早期是个简单的 Twitter 推送程序。IM+ 也仅仅支持 IM 推送。在用户的要求下，他们开始整合更多服务进来： Twitter Search ， Facebook , Email 。。。

最终，Boxcar ，IM+ 这种程序，将要演变成 iPhone OS 上的推送管理中心。他们不

但收集各种推送，弹出通知窗口。并且，他们显示所有这些推送的一览。“亲爱的。。。”是谁，什么时候，通过什么发过来的？在 Boxcar 里面一目了然。点一下，他自然带你去该去的程序。

下图仅仅表示了 Twitter ，但还可以加紧 Facebook 和 Gmail 。 他们产生的所有推送，都保存在云端( 即 Syncode 上。) 随时等待你的查询。

看来，不是 WebOS , Blur 设计者那样的天纵奇才，也仍然有办法提供最出色的用户体验：建立和用户的迅速反馈，认真倾听他们的声音。

Maemo?

是另一种非打扰，可分类的处理方式。由 @rabbitrun84 兄专文另述。

—————————————————-

消息！

推送是通知。但是从 WebOS 开始，到今天深入而广泛整合 SNS 的 Blur 。推送在一定程度上，被当作消息管理了。

恐龙横行的年代，推送可以点一下就消失。但是今天已经是 21 世纪。一个合格的智能手机系统，应该有Android 的顶部下拉栏那样的地方，汇集所有推送消息。应该有WebOS 或者 Boxcar 那种按来源的分类能力。应该有 Moto Blur 那种按人来分类过滤的能力。

更进一步，用户需要的是一种快速浏览所有更新的解决方案。

无论这些更新来自网络，还是来自本机。(你的 Facebook 好友改了签名和日历项目到期其实没有区别)。

同时，用户需要完善的分类功能。以便在海量的状态更新中区分出来源，或者，区分出人。(哪些推送来自 Twitter ? 日历或者 Email 。 iFanr 这段时间给我发了几个 Twitter DM ，打了几个电话?)

如果有一天，我们可以像查找 Email 那样查找推送，我一点也不会惊讶。因为，以下等式正在成为现实：

推送 = 通知 + 消息。

http://www.ifanr.com/5099