体验更好的过渡效果

早年我们老是在叮嘱 <img /> 要加上  height、width,为的就是避免浏览器在加载图片的时候产生页面的闪动,因为在完全加载完图片之前,如果不写宽高的话浏览器是不知道这张图片的尺寸的,提前告诉浏览器的话,会预先留好位置给它从而避免闪动。这样就能很简单地优化等待图片加载的体验。

后来 lazyload 出现了,当一个页面上有太多图片的时候,我们会把用户暂时看不到的图片「隐藏」起来,等滚动到「隐藏」图片位置的时候再加载,这个时候我们常常会用一张占位图来暗示这个位置有一张图片,真正的图片加载出来之前看到的就是这张占位图。

占位图也可以理解为是内容框架,展示内容框架往往是低成本的,意味着不论是网站还是应用,先把即将展示的内容的「 UI 框架」显示出来是件简单的事情,好处是正在加载的内容不会一下子「闪出来」,呈现在用户的眼前,而是多了一个过渡效果,还可以让用户觉得你的产品性能不错,响应很快。

很多产品做到这一步就停止了,其实还有很多事情可以做。

不同产品的「内容框架」是很不一样的,在 Pinterest 中是一张带图片的卡片;在 facebook 网站上是一张 feed 信息卡片。

在 Pinterest 上,每一张卡片里的图片加载之前,会先显示这张图片的主要颜色。在这样一个重图片浏览体验的产品上,这个小细节真的很让人喜欢,你看到的不是千篇一律的灰底黑字的 palceholder,取而代之的是即将出现的图片的「预告」。

tumblr_mprze4jPz71qea4hso1_1280

Facebook 的主页上,在每一个 feed 加载之前,你所看到的卡片框架,也不是一张普普通通的图片,它是这样的:

未标题-1

2

拿这张框架图对比一下真实的内容,我们就可以感受到为什么框架图会做成这样,而在实际效果中,上图中的灰色部分是在不停地变换颜色的,整体上这样的过渡效果会让等待的人变得更加耐心,也可知道即将看到的「故事结构」:一张图片,几行信息,发生了什么故事。

这两个都是把内容框架和内容特征相结合的例子,虽是小细节,却给我留下很深的印象,他们都了解使用他们产品的用户的特点,知道他们的喜好。

过渡效果不应该局限在加上 loading、优先显示内容框架,从内容特征的角度看也可以做出一些体验比较好的过渡效果。当然过渡效果的好坏不单单是这方面,还有很多事情可以做,甚至我们应该尽量让用户看不到这些过渡效果。

 

适用于 PhoneGap App 的 UI 框架

之前为自己的一个 PhoneGap 挑选框架,中间走过不少弯路,也试过几款,回想一下,其实选一个适合自己的框架比无脑上一个 jQuery Mobile 会科学很多。

Mobile App UI 框架可以分为两种,一种是跑在普通手机浏览器上的网站,依赖 HTTP(s) 请求获取静态资源;另一种是与 PhoneGap/Appcelerator/Titanium 这些桥接器配合,做成真正或者说模拟 Native 体验的手机应用。

Continue reading “适用于 PhoneGap App 的 UI 框架” »

复杂应用的 CSS 性能分析和优化建议

译自:Profiling CSS for fun and profit. Optimization notes.

我最近正在为一个所谓的单页应用做性能优化,这是一个高度异步化、富交互并且使用了很 CSS3 效果的 web app,不单单是用点圆角和渐变之类的,还有阴影、旋转变换、过渡效果、半透明,当然还会用点 CSS 伪类技巧和一些尚在实验阶段的特性。
Continue reading “复杂应用的 CSS 性能分析和优化建议” »

美化 django admin 后台

Twitter Bootstrap 实在是太方便太齐全了,如果想美化一个么有任何样式的系统,真的只需要引入一个 bootstrap.css ,你的页面看起来都会不一样,当然在 ie6 下效果会比较差,所以看到 django 的后台功能这么强大,但是界面却如此朴素就有点看不下去了,然后就有了这个改造 django admin 后台的想法,直接拿 bootstrap 的样式来做,覆盖了 django 后台所需的全部样式,改造过程还是挺纠结的,因为 django admin 的模板代码还是有点让人头疼,只能说冗余太多,风格也比较凌乱,所以在美化样式的同时也修改了一下 html 结构,不过也再次感受到 django 写模板的逻辑是如此优雅。

先来个登录界面截图:

Continue reading “美化 django admin 后台” »

豌豆荚Web 重构小结

年底了很多人都在做年终总结,可惜我今年值得总结的东西周期没有到一年那么多,这次就对最近的一个重构项目做个笔记,总结一下完成思路和不足之处。

我需要完成的是对豌豆荚应用导航页面(也就是大家在豌豆荚客户端里看到的页面)进行重构,因为这些页面最终展示在webkit内核的终端上,所以实现技术上有很多可能,挑几个自己觉得需要投入思考的介绍如下:

Continue reading “豌豆荚Web 重构小结” »

权衡前端性能优化

web性能优化的技巧越来越被人所重视,不管是YSlow的14条优化建议,还是各种性能优化相关的书籍都从技术解决方案层面给出了令人满意的答案,已经有很多网站在性能优化方面进行了成功的实践,在尽可能减少请求数,压缩代码,图片合并等基础优化方面似乎是没有其他退路,而javascript性能优化,ajax优化等方面的进阶优化虽然没有很直接的7天速成指南可以参考,但是在技术积累稍微好一点的团队,这种代码层面上的性能优化相对来说没有压力,可以看出web性能优化技术越来越透明,并且性能优化也是一个老生常谈的问题,不过正是因为如此在做这些看似很美的事情之前更需要冷静下来仔细权衡。 Continue reading “权衡前端性能优化” »