Skeleton Screen -- 骨架屏

shmily 发布于2019-08-29 14:15 / 2183人阅读

摘要：原文链接骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。请求处理无论是端还是移动端，只要有数据请求都会出现一定的延迟时间，之前对于这段等待时间的处理也是各不相同。

用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验。

原文链接

Skeleton Screen

Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页。

请求处理

无论是PC端还是移动端，只要有数据请求都会出现一定的延迟时间，之前对于这段等待时间的处理也是各不相同。同步请求中页面会卡住，直到请求完成，用户期间无法进行任何操作，有一种死机的感觉，体验较差。异步请求中大多数会以锁屏的loading动画过渡等待时间，于是，也就出现了制作不同loaidng状态的炫技。

Skeleton Screen优势

锁屏loading在一定程度限制了用户的操作，所以为了进一步提升用户体验，Skeleton Screen被越来越多的公司产品采用，如：Facebook、简书、知乎、掘金等，在动态、文章加载时预先渲染出结构布局，数据加载完成后再填充数据显示，这样的好处在于不干扰用户操作，使用户对于加载的内容有一个大致的预期，特别是弱网络环境下极大的优化了用户体验。

Skeleton Screen实现

主要步骤：
1、创建与显示内容相似的html结构
2、在需要显示内容的元素上增加背景色

第一种

简单堆砌出元素结构

html

css

.skeleton {
    padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
    background: rgb(194, 207, 214);
}

.skeleton-head {
    width: 100px;
    height: 100px;
    float: left;
}

.skeleton-body {
    margin-left: 110px;
}

.skeleton-title {
    width: 500px;
    height: 60px;
}

.skeleton-content {
    width: 260px;
    height: 30px;
    margin-top: 10px;
}

第二种

背景动画，html结构相同，修改部分css样式

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
    background: rgb(194, 207, 214);
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.15) 25%, transparent 25%);
    background-size: 20rem 20rem;
    animation: skeleton-stripes 1s linear infinite;
}

@keyframes skeleton-stripes {
    from {
        background-position: 0 0 ;
    }
    to {
        background-position: 20rem 0;
    }
}

第三种

元素结构长度变化

.skeleton {
  padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
  background: rgb(194, 207, 214);
}

.skeleton-head {
  width: 100px;
  height: 100px;
  float: left;
}

.skeleton-body {
  margin-left: 110px;
}

.skeleton-title {
  width: 500px;
  height: 60px;
  transform-origin: left;
  animation: skeleton-stretch .5s linear infinite alternate;
}

.skeleton-content {
  width: 260px;
  height: 30px;
  margin-top: 10px;
  transform-origin: left;
  animation: skeleton-stretch .5s -.3s linear infinite alternate;
}

@keyframes skeleton-stretch {
  from {
    transform: scalex(1);
  }
  to {
    transform: scalex(.3);
  }
}

总结

前端优化仿佛是一种无止境的探索，尤其是现在产品对于用户体验的重视，任何一点体验的改善与提升都会增加用户的友好度，最终使产品留下一个好印象。

云服务器 GPU云服务器 Skeleton screen webrtc screen intel webrtc screen

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113020.html

Skeleton Screen -- 骨架屏

摘要：原文链接骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。请求处理无论是端还是移动端，只要有数据请求都会出现一定的延迟时间，之前对于这段等待时间的处理也是各不相同。 showImg(https://segmentfault.com/img/bV9l7N?w=700&h=312);用户体验一直是前端开发需要考虑的重要部分，...

waterc 2019-08-22 16:41 评论0 收藏0
小程序构建骨架屏的探索

摘要：第二套方案，一定程度上改善了第一套方案带来的维护成本增加的缺点，主要还是使用工具预渲染页面，获取到节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本图片或者是等节点上面，最后将生成的和打包出来，就是一个带有骨架屏的页面。首屏一般情况下，在首屏数据未拿到之前，为了提升用户的体验，会在页面上展示一个loading的图层，类似下面这个showImg(https://segment...

shiweifu 2019-08-23 10:39 评论0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

huhud 2019-08-02 16:07 评论0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

MkkHou 2019-08-23 14:07 评论0 收藏0
Vue单页面骨架屏实践

github 地址： VV-UI/VV-UI 演示地址: vv-ui 文档地址：skeleton 关于骨架屏介绍骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。这里主要通过代码为大家展示如何一步步做出这样一个骨架屏： show...

DevTTL 2019-08-02 16:00 评论0 收藏0