Skeleton Screen

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

一种自动生成网页骨架屏的方式
前端骨架屏方案小结
Skeleton Screen — 骨架屏

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

请求处理

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

Skeleton Screen优势

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

Skeleton Screen实现

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

第一种

简单堆砌出元素结构

html

<div class="skeleton"><div class="skeleton-head"></div><div class="skeleton-body"><div class="skeleton-title"></div><div class="skeleton-content"></div></div>
</div>

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);}
}

总结

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

原文地址：http://www.bestvist.com/2018/01/19/skeleton-screen/

Skeleton Screen — 骨架屏相关推荐

Skeleton Screen -- 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. 原文 ...
【微信技术-微信小程序】------- 渐进式骨架屏（加载流）（第二篇）
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录一.什么是渐进式骨架屏? 二.实现渐进式骨架屏三.效果展示下载示例代码地址: 渐进式骨架屏示例代码-下载一 ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
Android中骨架屏(Skeleton Screen)使用
Android中骨架屏(Skeleton Screen)使用 1.什么是骨架屏页面在没有完全渲染完成之前,用户会看到一个占位的样式,用以描绘了当前页面的大致框架,加载完成后,最终骨架屏中各个占位部分 ...
#周分享#骨架屏[Skeleton Screen]
什么是骨架屏骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容.常用于文章列表.动态列表页等相对比较规则的列表页面是进度条和菊花圈的 ...
认识Skeleton Screen【屏幕加载骨架】
一直以来,无论是web还是iOS.android的应用中,为了提升应用的加载等待这段时间的用户感知体验,各种奇门遁甲之术层出不穷.其中,菊花图以及由它衍生各种加载动画是一个非常大的流派,如下图所示: ...
vue-cli 构建的项目如何加入骨架屏 skeleton
在使用 Native APP 时我们经常可以看到在实际内容加载出来之前会有一些占位图片,因为其结构和实际加载内容相似(如新闻页面加载之前也会有一个纵向列表),因此让用户感知到自己的页面正在加载中,体 ...
Vue 实现骨架屏（skeleton）
Vue实现骨架屏的步骤: 1.安装骨架屏插件: npm install vue-skeleton-webpack-plugin 2.由于骨架屏插件依赖服务端渲染,再安装vue-server-rende ...
CSS实现骨架屏 Skeleton 效果
转自:掘金 - CodingStartup起码课 https://juejin.cn/post/6916748944789733390 现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方 ...

Skeleton Screen — 骨架屏

Skeleton Screen

请求处理

Skeleton Screen优势

Skeleton Screen实现

第一种

第二种

第三种

总结

Skeleton Screen — 骨架屏相关推荐

最新文章

热门文章