专栏首页陈纬杰的专栏使用 Skeleton Screen 提升用户感知体验
原创

使用 Skeleton Screen 提升用户感知体验

一直以来,无论是web还是iOS、android的应用中,为了提升应用的加载等待这段时间的用户感知体验,各种奇门遁甲之术层出不穷。其中,菊花图以及由它衍生各种加载动画是一个非常大的流派,如下图所示:

由它衍生而出的各种加载动画也是遍地开花:

在很多的应用的交互中,这种菊花的加载的设计已然要一统江湖了。

不过,现在对于加载的设计体验有了比菊花加载体验更棒的方法,即本文要讲的Skeleton Screen Loading,中文一般叫做骨架屏。骨架屏听起来总觉得怪怪的,本文还是沿用英文的叫法Skeleton Screen Loading

所谓Skeleton Screen Loading即表示在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架,感知到页面正在逐步加载,加载完成后,最终骨架屏中各个占位部分将被真实的数据替换。

一图胜千言,来看看微信阅读的客户端,它就使用了Skeleton Screen Loading来提升它的加载体验,可以下载它的客户端实际感受下:

现在好多web和客户端都已经放弃了以前的那种菊花的加载体验,转而使用Skeleton Screen Loading,比如Facebook、medium以及slack等。国内的饿了么、掘金等也都使用Skeleton Screen Loading来提升它们的加载体验。

下面这段话,是iOS中关于加载体验的交互设计标准的一个说明:

Don’t make people wait for content to load before seeing the screen they’re expecting. Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn’t available yet. Replace these placeholder elements as the content loads. — Apple iOS Human Interface Guidelines

使用Skeleton Screen Loading也充分遵循了iOS人机交互设计指南。本文就来讲讲如何使用vue来实现Skeleton Screen Loading。

VUE实现思路

在本文中,我们将会使用vue组件 (Component) 功能来实现一个Skeleton Screen Loading,如下图所示:

具体vue组件 (Component) 功能这里就不详讲了,可以去官方的文档看看详细的信息。

这里推荐一个模拟开发数据的开源服务jsonplaceholder,类似经常使用的图片占位服务一样,它提供了在web开发中一些常见数据类型的api服务,比如文章、评论、用户系统等,都提供了对应的接口,在开发调试阶段还是非常方便的。

比如我们做的这个例子要用到用户系统,直接使用这个用户数据接口就行了。

首先,主要的工作是实现Skeleton Screen Loading加载动画,先使用常规的html和css来实现这个动画。

动画效果如下所示:

先定义好html结构:

 <div class="timeline-item">
   <div class="animated-background">
     <div class="background-masker header-top"></div>
     <div class="background-masker header-left"></div>
     <div class="background-masker header-right"></div>
     <div class="background-masker header-bottom"></div>
     <div class="background-masker subheader-left"></div>
     <div class="background-masker subheader-right"></div>
     <div class="background-masker subheader-bottom"></div>
   </div>
</div>

下面来说说实现动画的主要思路:

要实现这样的效果,需要使用一点点小技巧。先在图层animated-background定义一个大的渐变背景,然后在不需要显示背景图的位置,定义几个占位的结构填充为白色就可以实现上图所示的UI展现形式。最后使用background-position来移动背景图片的位置,就可以实现图中的动画效果。

详细的代码可以去这里查看,demo

主要的效果实现了,下面就可以正式开工来定义我们的Skeleton Screen Loading组件。

Vue.component('user-item', {
  props: ['email', 'name'],
  template: `<div>
      <h2 v-text="name"></h2>
      <p v-text="email"></p>
    </div>`
})

Vue.component('loading-item', {
  template: `<div class="animated-background">
     <div class="background-masker header-top"></div>
     <div class="background-masker header-left"></div>
     <div class="background-masker header-right"></div>
     <div class="background-masker header-bottom"></div>
     <div class="background-masker subheader-left"></div>
     <div class="background-masker subheader-right"></div>
     <div class="background-masker subheader-bottom"></div>
   </div>`
})

上面定义了两个组件,一个是用来显示用户信息数据的组件user-item;一个在加载完之前来显示Skeleton Screen Loading效果的loading-item组件。

定义好组件后,然后在主文件定义好对应的结构来注册使用组件:

<div id="app">
  <div v-for="user in users" class="items" v-if="loading">
    <user-item :name="user.name" :email="user.email"></user-item>
  </div>
  <div v-for="load in loades" v-if="!loading">
    <loading-item></loading-item>
  </div>
</div>

根据上面定义好的组件,上面的代码表示,当数据加载完后,显示用户数据。当还没有加载完用户数据,则显示预先定义好的加载组件即loading-item。

var app = new Vue({
  el: '#app',
  data: {
    users: [],
    loading: false,
    loades: 10
  },
  methods: {
    getUserDetails: function() {
      fetch(`https://jsonplaceholder.typicode.com/users`)
        .then(result => result.json())
        .then(result => {
          this.users = result
          this.loading = true
        });
    }
  },
  created: function() {
    setTimeout(() => {
      this.getUserDetails()
    }, 1000);
  }
});

一个简单优雅的Skeleton Screen Loading就完成了。

通过上面简单的实例,可以明显感受到当使用Skeleton Screen Loading来代替传统的菊花图在体验上更加好一些。

使用Skeleton Screen Loading,可以利用一些视觉元素来将内容的轮廓更快显示在屏幕上,让用户在等待加载的过程中对将要加载的内容有一个更加清晰的预期,特别是在弱网络的场景下,Skeleton Screen Loading的体验无疑是更好的,用起来吧。

对于Skeleton Screen Loading,你有什么样的看法呢?欢迎在评论区留言一起分享你的看法。

参考资料:

http://www.phpgang.com/facebook-style-timeline-content-loading-placeholder-with-css_4994.html

https://css-tricks.com/building-skeleton-screens-css-custom-properties/

Facilitating Better Interactions using Skeleton Screens

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue.js 初体验:Chrome 插件开发实录

    通过一个Chrome插件的开发,来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中,开发一些小工具可以大大的提高我们的工...

    陈纬杰
  • VeeValidate 的使用场景以及配置

    这个例子中发验证码是一个验证 注册又是一个验证 所以有点意义! 在发送验证码的时候需要验证手机号码和图形验证码 注册的时候需要验证除图形验证码之外的数据

    李昊天
  • 如何在Vuejs中实现页面空闲超时检测

    您是否需要检查用户在Vue应用程序中的不活跃状态?如果用户在一段时间内处于非活动状态,则要自动注销该用户或显示一个计时器。通常,具有机密数据的系统(如银行)通常...

    前端知否
  • CSS3萌宠系列,纯CSS3诞生的可爱狗狗

    好可爱一只小狗狗!睡觉憨憨的样子,听到细微的声音,立马竖起他的耳朵,看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢?

    Javanx
  • vue数据立刻绑定到dom元素

    使用vue修改一个数据之后,它不会立刻修改,而是在当前函数执行完毕之后才会进行渲染。

    陈灬大灬海
  • jquery属性操作 html() prop()

    使用html()相当于原生javascript的innerHtml,即可以获取元素的之间的html内容,还可以创建新的html元素。

    Devops海洋的渔夫
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    王小婷
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674

扫码关注云+社区

领取腾讯云代金券