首页 孤独与我正文

数据占位符

夏雨 孤独与我 2020-04-21 23:04:18 709 0

数据占位符

福利QQ群 994819852

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

  • 及时给用户反馈

  • 避免静态的加载提示

  • 使用动态的加载提示

    • 短时间的加载:使用无限转动的小指针

    • 长时间的加载:使用百分比动画

  • 扭转用户对时间的感知

    • 进度条 (Progress bar)

    • 加载占位图 (skeleten screen)

    • 后台处理 (Background operations)

    • 使用模糊效果逐步加载图片 (Progressive image loading)

    • 使用视觉效果分散注意力

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

<html><head>    
<title>掘金数据占位符</title>    
<style>    
.shadow {    
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);    
}    
.skeleton-row {    
margin-bottom: .8rem;    
height: 1.2rem;    
background-color: #f3f3f3;    
}    
.skeleton-list {    
padding: 20px;    
background-color: #fff;    
border-radius: 0 0 .2rem .2rem;    
overflow: hidden;    
}    
.skeleton-list .skeleton-row:first-of-type {    
width: 40%;    
}    
.skeleton-list .skeleton-row {    
margin-bottom: 16px;    
background: linear-gradient(90deg,#fff,#edeff1,#fff);    
background-size: 480px 480px;    
animation: skeleton-stripes-data-v-4ac07fca .6s linear infinite;    
}    
.skeleton-list .skeleton-row:nth-of-type(2), .skeleton-list .skeleton-row:nth-of-type(3) {    
width: 80%;    
}    
.skeleton-list .skeleton-row:last-of-type {    
margin-bottom: 0;    
}    
@-moz-keyframes skeleton-stripes-data-v-4ac07fca {    
0% {    
background-position: 0 0    
}    
to {    
background-position: 480px 0    
}    
}    
@-webkit-keyframes skeleton-stripes-data-v-4ac07fca {    
0% {    
background-position: 0 0    
}    
to {    
background-position: 480px 0    
}    
}    
@-o-keyframes skeleton-stripes-data-v-4ac07fca {    
0% {    
background-position: 0 0    
}    
to {    
background-position: 480px 0    
}    
}    
@keyframes skeleton-stripes-data-v-4ac07fca {    
0% {    
background-position: 0 0    
}    
to {    
background-position: 480px 0;    
}    
}</style>    
</head>    
<body style="background: #8080801f;">    
<div class="loading-empty">    
<div class="skeleton-list shadow">    
<div class="skeleton-row"></div>    
<div class="skeleton-row"></div>    
<div class="skeleton-row"></div>    
</div></div></body></html>


文章标题:数据占位符

本页链接:https://www.xiayu.wang/gdyw/sjzwf.html

版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。

评论

©️ 2020 夏雨博客 Sitemap | 网站地图 | 蜀ICP备17011287号-1