发现
咪咪 又发邀请了。从十天前的14个到隔夜后缩减到的3个再到前两天新增的4个，紧张过度了吧，能折腾... 在经历中文用户刷屏后，popular 恢复了正常，不过依然是满眼猎奇大图，也是，如此清新销魂的页面，不使劲儿往上招呼图片视频才是大不敬。
说正题，来简单关注下
雅虎 meme 的前端：
先说说设计meme 给我的第一印象非常好，甚至是惊喜，也许是受太多 twitter clone（包括围脖）雷同界面的影响一开始对其期望值不高形成的反差。后来发现，其实 mac 下
HelveticaNeue-Light 字体及平滑的文字效果也是功不可没。顺便提一句，Georgia italic 也是俺的大爱:)
meme 在区域的设计上使用了圆角，包括信息输入、展示区以及 form 中的各式输入框和按钮，对于信息中的图片也采用了双边框的设计，内深(#e2e2e2)外浅(#fcfcfc)，有淡淡的立体效果（firefox 中可以使用 -moz-border-bottom 快速完成）。说到圆角，其实只有 gecko 和 webkit 核心的浏览器才能看到，对于 IE 和 Opera 则完全无视了，当然 Camino 下的圆角效果还是一如既往的差，顽固地保持着 firefox2 的残迹，这些下面都会专门提到。皮肤方面，我还是忠于默认:)
上图是第一个按钮用到的透明图片，边缘溶解，最大限度地分离了前景和背景、减少图片用色（让 IE6 支持此透明 gif）和体积，但最后保存的格式却是 png，不太理解；从这副图片的名字也许可以看出一些原因： posts.gif.png，尝试了去掉 .png，没问题，原来本来就是张 gif，汗~ (注: 来自
chumsdock: “
关于gif/png的问题，IE6 是支持只有纯透明的 8 位 png 的，用法跟 gif 一样，但是 png 比 gif 尺寸更小。”)
继续瞎说交互这方面我一直都很外行，没数据的情况下基本是靠主观理解 *…*
先看上方的黄色提示，咪咪会识别新信息，但不会强行显示出来，这样的设计很适合中文用户，哈哈，在刚注册时 popular 满屏春色，而且源源不绝，现在虽然少了，但偶尔也能惊喜一下，如果这时被自动推出来，身后有人观摩就太尴尬了 - -!
接着看评论输入框，这是在 repost 后显示的，提示和样式都清晰明了；
最后两条灰色信息是我又爱又恨的地方，爱在于简明地显示了信息来源（你知道我在说哪里），恨在于字太小，如果有图和视频就更显得隐蔽，打开页面一眼望去不好区分哪些信息是首发哪些是 repost（当然现在我知道了按长度区分）。或许雅虎就是有意而为之，认为让用户第一时间获取信息本身才是最好的体验？纯属瞎猜...
说件土事儿，第一次来 meme 时俺竟然没找到在哪里输入信息，虽然 dashboard 页上方深灰色按钮赫然，但一时没意识到那里就是可以展开的输入区域，还一个劲儿的找大文本框。我想这个应该不属于交互设计的问题，是被 twitter 毒害太深，习惯成自然，meme 这个大框在之后用起来就很顺手了。
下面说说前端代码meme 的前端代码很随性。先看 GBS 最近一次更新：
虽然 IE6~8 在 XP 下依然被列为 A-grade，但 meme 似乎已经对 IE6 失去了耐心
IE6(左)高度有偏差，FF3.5(右)为正常
左侧的黄色区域是一个本不该显示的空层(divMessage)，用来防止相应的动态信息，但里面有个 ，所以对于 IE6 来说它并不为空，而且还要为其应用继承的文字样式，从而出现了最小高度的问题。黄色区域下方的蓝线是经典的 IE6 图片 3px 问题。
meme logo 是用 <a> 的背景图实现的，配合 text-indent: -9999px，照顾了爬虫又方便利用 css 控制鼠标悬停切换背景。IE6 用了比较屎的滤镜来解决不支持透明 png 的问题，这种方法的后遗症是无法通过控制背景图片的位置来实现悬停后 logo 外发光的效果，所以在 IE6 下鼠标悬停左上方 logo 是没有任何反应的：
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://l.yimg.com/cc/img/en_PH/1252444248/logo.png', sizingMethod='crop');
IE6, 7 无法将使用负 margin 的 div 背景图显示在其外层容器区域(#nav)之外，所以利用星标(*)为其做了 hack，这也是上图中 IE6 的 logo 位置会与标准浏览器下不同的原因（IE7 也是如此）：
margin-left: -6px; *margin-left: 0;除了 logo，meme 全站使用透明 png 的地方、可以产生经典 bug 的地方，在 IE6 下多多少少都还会有不尽如人意的地方，在此略去。可以说，meme 基本放弃了在外观上 hack IE6。
除了 IE6，meme 在 Opera 和 Camino 下的表现也不尽如人意：
FF3.5(上)为正常效果，Opera10(下)有明显错位(Camino 有同样问题)
代码中可以看到，头像为左浮动，用户名(<h1>)和简介(<p>)均为块级显示，而在头像与用户名、简介的水平方向均有相邻的 margin。在其他浏览器中如果是这种情况，用户名与简介的 margin-left 就会从外层容器(.info)的左边缘开始算起(不含 margin 与 padding 的宽度)，但 Opera 与 Camino 会与头像的 margin-right 相叠加，所以就出现了上图的错位。解决方法很简单，去掉用户名与简介的 margin-left，只使用头像的 margin-right 来区隔即可。
上图(右侧)是在 Camino 下一处比较诡异的地方，灰框本应是 repost 的按钮(如左图)，不知啥原因显示成这样。这个按钮是一个用背景图来控制样式的 input，不知是否和背景图使用了 transparent 有关。
接下来说圆角，上面已经提到，meme 使用了私有属性实现(-moz-border-radius 和 -webkit-border-radius)，没在这方面多较真，很好奇他们的设计稿是啥样的；IE 也就罢了，莫非连 Opera 用户都放弃了？圆角在 firefox 3.0+, safari, chrome 下看都很完美（最赞是 firefox，在 webkit 核心浏览器下，圆角部分比较虚，而同为 gecko 核心的 Camino 表现最差，见下图）
仔细看头像左侧的圆角边框，safari(左) 较虚，firefox(中) 最佳，camino(右) 不但不够平滑，每个方向的圆角样子还不同，这也是在 firefox 2.0 时期同样经历的老问题了，不过 camino 似乎并不在意，最新版 1.6.9 中问题依然存在(userAgent 中也有这样的提示: like Firefox/2.0.0.23)
说 meme 的前端代码随性还有个重要的地方，就是没有忠于 YUI，css 部分只使用了 reset，而 js 库方面除了 YUI 2.5.0 还用到了 jquery 为主的其他库及插件：
- jQuery v1.3.2
- Sizzle CSS Selector Engine - v0.9.3 (dojo)
- jQuery UI 1.7 custom
- jQuery Overlabel
- jQuery Tooltip plugin 1.3
... 更多可以直接看
这里。
meme 的 home 页对于图片展示的处理比较有意思，先看图：
默认情况下，信息列表中只显示裁切后的缩略图，当图片的实际尺寸大于缩略图时，点击图片便会出现类似视频加载的样式(左、中)，载入完毕，loader 消失，大图显示；如果要载入的是个动态 gif(右)，那么一开始就会在缩略图上方叠加个播放按钮，提示用户这里是可以播放的图片。这种加载方式可以带给用户很好的体验，尤其是动态 gif:)
ps, 上图左侧 IE6，注意看图片下端与边框的距离，3px bug 再现...
下面来看下实现的 JS 代码：
goodstuff.ui = function () {
h = function (t, r) {
r = r || $(document);
var s, q = jQuery('<span class="img_loader"></span>');
r.find(".gifplay").click(function () {
$(this).parent().children(".image").children("img").click();
});
r.find("img.image_expand").click(function (v) {
imageplace = $(this).parent().parent();
var u = $(this).parent().parent().children(".img_loader");
u.show();
if($(this).hasClass("small")) {
$(this).addClass("big").removeClass("small")
.load(function () {
u.hide();
$(this).parent().parent()
.children(".gifplay").hide();
$(this).parent().parent().parent()
.find(".clearexpand").show();
});
$(this).parent().parent().children(".gifplay").hide();
imageurl = $(this).attr("src");
$(this).attr(
"src",
imageurl.replace("/200x200/","/original/")
);
} else {
if($(this).hasClass("big")) {
u.hide();
$(this).addClass("small").removeClass("big");
imageurl = $(this).attr("src");
$(this).attr(
"src",
imageurl.replace("/original/","/200x200/"))
.load(function () {
$(this).parent().parent()
.children(".gifplay").show();
$(this).parent().parent().parent()
.find(".clearexpand").hide();
}
)
}
}
return false;
});
};
};.gifplay 和 .image_expand 分别是载入时用来叠加在动态 gif 和大图上的 loader 层，图片的切换用的是替换 url 的方法，所以如果想像个人页面一样直接显示大图和动画，自己写个 GM 脚本就好了。代码写的很直白，就不多解释了，汗一下选择符的使用 @__@
就写到这儿，最后再赞一下
meme 的设计，收工
