一个月前,Gmail重新设计了所有按钮。
原来的按钮是这样的。
新设计的按钮是这样的。
事实上,不仅是Gmail,Google公司很多其他项目都在使用后一种风格的按钮。
比如 Google Site。
再比如Picasa。
这种按钮设计最大的特点,就是完全不使用背景图片,是纯粹的HTML+CSS。同时,它也不使用任何表单元素,目的是在不同浏览器下,争取视觉效果的最大统一。
Google的工程师、设计者Douglas Bowman最近写了篇文章,介绍了设计思路。但是,他最后没有给出代码,只是说:
To see the final code we ended up using in Gmail and Reader, you'll have to reverse engineer the button code in one of those products.
如果你想看我们在Gmail和Google Reader中使用的最终代码,你必须自己对按钮代码进行反向工程。
我对这个很有兴趣,昨天晚上就真的去做反向工程了。由于Gmail的CSS文件都是被压缩过的,简直无法读,不过好在按钮部分还没有被压缩,因此还算顺利,就把代码提取出来了。
下面我就来介绍,如何制作Gmail式的按钮。使用的全部都是Gmail中的实际代码。
请先看我制作的一个范例页面。
第一步,按钮的HTML代码如下:
<div class="goog-imageless-button goog-inline-block">
<div class="goog-inline-block goog-imageless-button-outer-box">
<div class="goog-inline-block goog-imageless-button-inner-box">
<div class="goog-imageless-button-pos">
<div class="goog-imageless-button-top-shadow"> </div>
<div class="goog-imageless-button-content">Button</div>
</div>
</div>
</div>
</div>
每个按钮都是一个四层的盒状结构,共包含6个div区块。
第二步,将button.css文件加入样式表。
@import url("button.css");
这个时候,按钮就应该可以正常显示了。
第三步,做一些修饰工作。
你可以根据按钮的不同情况,为前面HTML代码中第1个div区块,添加相应的class。
i. 如果一个按钮是主按钮,那么添加"goog-imageless-button-primary"。
ii. 如果一个按钮不允许用户使用,那么添加"goog-imageless-button-disabled"。
iii. 如果好几个按钮组成一个"按钮组",就像范例中的Example 3,那么最左边的按钮添加"goog-imageless-button-collapse-right",最右边的按钮添加"goog-imageless-button-collapse-left",中间的按钮则是同时添加这两个class。
iv. 如果一个按钮保持选中状态,那么添加"goog-imageless-button-checked"。
第四步,用Javascript加入动作代码。我使用的库是jQuery。
i. 加入鼠标悬停效果。
$(".goog-imageless-button").hover(
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).addClass("goog-imageless-button-hover");
}
},
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).removeClass("goog-imageless-button-hover");
}
}
);
ii. 加入鼠标点击的效果。
$(".goog-imageless-button").mousedown(
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).addClass("goog-imageless-button-checked");
}
}
).mouseup(
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).removeClass("goog-imageless-button-checked");
}
}
);
iii. 加入focus和blur事件的代码。
$(".goog-imageless-button").focus(function(){$(this).addClass("goog-imageless-button-focused")});
$(".goog-imageless-button").blur(function(){$(this).removeClass("goog-imageless-button-focused")});
到了这一步,就算基本完成了。以后只要再针对按钮的click或submit事件,写入相应代码与服务器端互动,就可以了。
最后,说一点我的看法。
虽然这种按钮的视觉效果比较理想,有很多设计上的优点,但是局限性也很大。一方面,它需要大量的冗余代码,与语义网的原则相违背;另一方面,它太依赖Javascript和桌面环境,一旦用户使用移动设备或不支持Javascript的浏览器上网,那么整张网页的就完全失效了。所以,除非你开发的是针对桌面浏览器的互联网应用程序,否则还是不要使用上面的设计方法,而是用Douglas Bowman提供的一种比较简化的形式(需要背景图片)。
(完)
Nicky 说:
竟然是纯css和html做的?以前还真没注意,不过gmail下面,这几个button显示中文的时候,可真难看,几个字都特别模糊。我用firefox3.0
2009年3月 1日 20:39 | # | 引用
cherry 说:
一峰老师,您的专攻是什么啊?我真的很吃惊您的研究之广。
2009年3月 1日 21:28 | # | 引用
gonnar 说:
阮老师的兴趣一向是很广泛滴。。。
2009年3月 1日 23:07 | # | 引用
工。 说:
“由于Gmail的CSS文件都是被压缩过的,简直无法读,不过好在按钮部分还没有被压缩,因此还算顺利,就把代码提取出来了。”
問個問題,您是怎麽看到css的?
2009年3月 1日 23:18 | # | 引用
fisio 说:
老的按钮并不一定是那个样子,只是用了默认按钮,在不同的系统皮肤下可以不同哦
2009年3月 2日 00:38 | # | 引用
vinsa 说:
有点小缺憾,在IE6下惨不忍睹
2009年3月 2日 12:44 | # | 引用
宇宙超人 说:
阮大哥 我太佩服你啦
2009年3月 2日 12:45 | # | 引用
不空 说:
很棒,再接再厉。GOOGLE的思路很好。
2009年3月 2日 13:19 | # | 引用
jerry 说:
css代码再多执行速度也比读取哪怕1k的图片快。应该是这个概念。
2009年3月 2日 14:48 | # | 引用
要 说:
这类按钮其他网站上多的是
2009年3月 2日 17:19 | # | 引用
Ruan YiFeng 说:
2009年3月 2日 19:01 | # | 引用
Ruan YiFeng 说:
另外更正一下,结尾处的“针对按钮的click或submit事件,写入相应代码与服务器端互动”是错的。我后来才想到,按钮是div对象不存在submit事件,只有click事件。
2009年3月 2日 19:02 | # | 引用
积木球 说:
Hi 阮一峰,还记得我吗?
一直在关注你的blog,比较喜欢你聊民生的部分。有个问题让我感到比较迷惑:你是个经济学博士,但貌似对于一些技术细节的兴趣过于入迷了点,以至于一个button都会让你琢磨半天。我是计算机系毕业的,工作也10年了,现在对我来说技术都是透明的,业务流程和数据才是最重要的。除非某些技术有了本质的飞跃,完全颠覆了过去的理念。
记得我刚毕业的时候,也着迷于各种新的技术和coding,但过了没多久,我就明白了长江后浪推前浪,前浪死在沙滩上的道理。一门计算机技术你研究得再怎么透彻,只要有新的coding出来,你的那些技术和理论马上变成昨日黄花。
2009年3月 3日 08:46 | # | 引用
Jade 说:
什么样的飞跃才算本质的飞跃呢?
本来我以前的观点和你差不多,但后来我发现这种观点有问题。
比如,你如果不了解一些 语言/产品的新功能,你怎么可能能用的好呢?
比如SQL Server 2008 的 FileStream 和 LinQ for XML
2009年3月 3日 14:25 | # | 引用
solar 说:
2009年3月22日 20:57 | # | 引用
闲耘 说:
IETester是靠不住的。
2009年4月29日 07:06 | # | 引用
houkai 说:
牛 你原先的截图是怎么来的 这个应该是你发现按钮更新后写的吧 难道你之前就有截图?
2009年12月23日 11:47 | # | 引用
IT不倒翁 说:
信不信过不了几年,成熟的网站上(包括国内)的按钮几乎没有使用图片的了,全部是样式控制。
2011年9月15日 23:50 | # | 引用
crossyou 说:
现在看这篇文章,依然受用~~
2012年7月17日 22:48 | # | 引用
Ju2ender 说:
当一个人热爱某一事物,他所为之付出的代价是常人无法理解的,但这对他却是乐趣、是享受。
时间久了,关于这一事物的认知也达到了一个高度,常人也会对他的观点呲之以鼻,但往往他的话得到了事实和时间的印证。
2013年1月22日 11:20 | # | 引用
邵波 说:
打不开
2014年11月30日 18:21 | # | 引用