体验更好的过渡效果

by Z.J.T on July 28, 2014

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

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

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

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

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

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

tumblr_mprze4jPz71qea4hso1_1280

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

未标题-1

2

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

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

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

 

适用于 PhoneGap App 的 UI 框架

by Z.J.T on November 14, 2013

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

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

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

安卓 Launcher 概念设计

by Z.J.T on April 27, 2013

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

神庙逃亡 2 终于发布了

by Z.J.T on January 24, 2013

神庙逃亡做为一个长期霸占安卓游戏下载第一位置的游戏,也是时候推出新版了,至于之前报导的神庙逃亡是由一对传奇夫妻搭档完成,可以看成是神庙逃亡2 发布的一个预告,以为这些喜闻乐见的故事经常被拿来做推广。 Continue reading “神庙逃亡 2 终于发布了” »

SEO 网站之虚

by Z.J.T on January 7, 2013

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

Continue reading “SEO 网站之虚” »

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

by Z.J.T on November 22, 2012

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

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

产品为什么延期

by Z.J.T on October 10, 2012

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

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

maven 和 r.js 的整合

by Z.J.T on July 9, 2012

看到这个话题,可能有人会觉得不解,为什么会有这样的场景,为什么 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 的整合” »

低成本的前端性能优化

by Z.J.T on April 10, 2012

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

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

美化 django admin 后台

by Z.J.T on April 5, 2012

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

先来个登录界面截图:

Continue reading “美化 django admin 后台” »