体验更好的过渡效果

早年我们老是在叮嘱 <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 框架” »

安卓 Launcher 概念设计

Facebook Home 最近的发布真是雷声大雨点小,在 Google Play 上的评分如此之低,低到想笑,我相信每个好的应用都有共同点,而不好的应用却是各不相同。在我看来,只有 Facebook 如今的市场地位才能做这样的 App,不过现在看起来他们确实有点一厢情愿。 Continue reading “安卓 Launcher 概念设计” »

SEO 网站之虚

SEO网站在国内是比较奇葩的一类网站,不过它们的存在都是在满足一部分人求知的需求,SEO知识一般也是与时俱进的,因为搜索引擎自身不断地会有算法改进,完善搜索引擎本身对于在网络中信息的辨识和处理,可以说这些对于多数人来说是个黑盒子,包括搜索引擎工程师也可能只是一知半解,所以很多不确定的技术手段就常常引人津津乐道。

Continue reading “SEO 网站之虚” »

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

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

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

产品为什么延期

产品延期听起来是个挺悲伤的事情,可是对于那些走错了方向的产品来说还是会有收获的,但是对于正计划快速迭代的团队来说来挺糟糕的,这种糟糕不是产品本身没有发布出去,而是延期变成了一种习惯,习惯到在做这个产品的人自己都没有发觉,也无能为力。大部分正常的延期并不是一个人造成的,这里所谓的“正常”是指,产品事先进行了充分的准备、做好了大量计划,并使用了科学的工具和迭代方法,每个人都是干劲十足的,结果产品延期了。看起来像是每个事先做的计划,每个人在其中所做的所有事情才是根本原因。

Continue reading “产品为什么延期” »

maven 和 r.js 的整合

看到这个话题,可能有人会觉得不解,为什么会有这样的场景,为什么 js app 需要和 java 项目整合到一起,其实就是为了让开发效率更高,更加集中关注应用的实现过程,而不用纠结 host 绑定、如何测试、如何发布。

Maven 除了可以做项目的 build (通常是服务端项目),还可以做一些额外的事情,这些事情就是帮我们 build js app,这里的 build 通常就是指把一些开发过程产出的源代码变成线上代码的过程,如果没有在使用 AMD api 来构建应用,通常仅仅需要简单的文件压缩合并,这里我们会介绍怎么在 maven 项目中使用 r.js 来 build 基于 AMD api 实现的应用,这里也推荐一下比较复杂的应用使用尽量转到 AMD 来实现,参考 Why AMD,然后推荐 r.js 是因为这个算是目前做得最好的 build 工具。
Continue reading “maven 和 r.js 的整合” »

低成本的前端性能优化

说到前端优化总让我想起很多灵感,这些灵感来源于对数据提升的“感性”预测,举个例子:我总是幻想把 Javascript 都重构了,网站的 TTI 可以提升个 10% +,但是除非你的代码中有严重的逻辑问题,这样的想法总只是幻想,因为重构代码而带来初始化性能提升的实在是太有限了,远远低于 5%,所以做重构这样的事情更重要的目标是让应用更易维护,以及有良好的架构能支撑 2 年左右无需再次重构。

Continue reading “低成本的前端性能优化” »

美化 django admin 后台

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

先来个登录界面截图:

Continue reading “美化 django admin 后台” »