发布日期 » 2017年12月14日 星期四

版权声明 » 帅华君原创文章,未经允许不得转载。

Facebook占位加载动效知乎的前端实现原理

加载时间(loadingtime)会影响用户体验,让用户等太久会让他们失去耐心。一旦他们有这样的感受,很可能就换别的网站或者APP用去了。幸好,我们有一些设计技巧可以让用户有更好的加载体验。

  • 及时给用户反馈
  • 避免静态的加载提示
  • 使用动态的加载提示
    • 短时间的加载:使用无限转动的小指针
    • 长时间的加载:使用百分比动画
  • 扭转用户对时间的感知
    • 进度条 (Progress bar)
    • 加载占位图 (skeleten screen)
    • 后台处理 (Background operations)
    • 使用模糊效果逐步加载图片 (Progressive image loading)
    • 使用视觉效果分散注意力

上一篇译文中以“使用模糊效果逐步加载图片”为切入点讨论了相似的“加载占位图”的情况:

探索图片渐进式加载及显示方式

本篇将从前端技术的角度以知乎加载动效为例来探讨“加载占位图”这一提升用户体验的设计方法。

知乎和facebook以及微博都采用这种低保真原型图的方式为即将加载出来的内容占位。

FACEBOOK移动端未加载完成时的占位效果

加载占位图基本上就是在界面上待加载区域填充灰色的占位图,给传统的动效过渡提供了另一个可选项。加载占位图让用户注意力集中在想象页面加载出来之后的样子,而不是留意着等待的时间。

占位图通常很快就显示出来,因为他们的视觉都很简单文件都很小。这在APP的设计里很有用,因为这些很小的占位图可以直接储存在手机里。Facebook的UI就是在加载的时候使用了占位图,灰色的色块和线条说明正在加载的图片和文字。

一旦加载完成,图片和文字就会出现在这些位置上。虽然实际上时间并没有缩短,但用户感知到的时间会比使用上文提到的无限转动指针要短。

我使用Chrome浏览器设置较慢的网速,清楚的看到了这一加载状态的全部过程。

查看了知乎源代码,关键在于下方这段html代码片段,可以发现,原型图的部分使用svg实现,辉光动效使用CSS3的@keyframes特性实现。

<div data-reactid="1204">
	<div class="Card">
		<div class="PlaceHolder List-item">
			<div class="PlaceHolder-inner">
				<div class="PlaceHolder-bg"></div>
				<svg width="656" height="108" viewBox="0 0 656 108" class="PlaceHolder-mask">
					<title></title>
					<g>
						<path d="M0 0h656v108H0V0zm0 0h350v12H0V0zm20 32h238v12H20V32zM0 32h12v12H0V32zm0 32h540v12H0V64zm0 32h470v12H0V96z" fill="#FFF" fill-rule="evenodd"></path>
					</g>
				</svg>
			</div>
		</div>
	</div>
</div>

svg可以让设计师从AI中导出,辉光动效是一个类名为PlaceHolder-bg的div标签加上@keyframes动画产生的动效。

在我将这一svg保存到本地单独浏览时,发现还有一点值得一提的知识点:填充规则。填充规则分为“非零环绕规则”和“奇偶环绕规则”,在 Canvas实现虚拟元素拖拽 这篇文章谈论过:

通过这两张图就可明白:

参考链接:
loading加载设计,UI设计高手都关注这个小细节