体验更好的过渡效果

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

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

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

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

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

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

tumblr_mprze4jPz71qea4hso1_1280

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

未标题-1

2

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

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

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

 

安卓 Launcher 概念设计

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