Skeleton Screen — 骨架屏
2024-08-31 01:53:44
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的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/
最新文章
- [转]Java中导入、导出Excel
- oracle impdp 导入
- 【Bootstrap】入门例子创建
- UISearchBar
- cocos2d-x之初试内存管理机制
- sql遍历树
- 数据库中使用 Synonym和openquery
- power desinger 学习笔记<;八>;
- .net core 系列
- 老李分享:adb发送的指令都有哪些
- Github 开源:升讯威 Winform 开源控件库( Sheng.Winform.Controls)
- 10970 - Big Chocolate
- Vim设置Tab宽度/替换Tab为空格
- maven向本地仓库导入jar包
- NYOJ37-回文字符串(dp)
- MATLAB与C语言对比实例:随机数生成
- hdu 1097 A hard puzzle 快速幂取模
- Unity 3D-AR开发-Vuforia教程手册
- CH#46A 磁力块
- Oracle数据库将varchar类型的字段改为clob类型
热门文章
- excel 2003 默认保存后出现超级连接解决方法
- 模拟赛 Problem 1 高级打字机(type.cpp/c/pas)
- uva 10716 Evil Straw Warts Live(贪心回文串)
- Android 自己定义圆圈进度并显示百分比例控件(纯代码实现)
- 小贝_mysql sql语句优化过程
- Music information retrieval
- cookie知识点简点
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
- [BZOJ 3132] 上帝造题的七分钟
- RDA EQ&;频响曲线