用戶體驗一直是前端開闢須要斟酌的重要部份,在數據要求經常見到鎖屏的loading動畫,而如今越來越多的產物傾向於運用Skeleton Screen Loading(骨架屏)替換,以優化用戶體驗。
原文鏈接
Skeleton Screen
Skeleton Screen(骨架屏)就是在頁面數據還沒有加載前先給用戶展示出頁面的大抵構造,直到要求數據返回后再襯着頁面,補充進須要顯現的數據內容。常用於文章列表、動態列表頁。
要求處置懲罰
無論是PC端照樣挪動端,只需有數據要求都邑湧現肯定的延遲時間,之前關於這段等待時間的處置懲罰也是各不雷同。同步要求中頁面會卡住,直到要求完成,用戶時期沒法舉行任何操縱,有一種死機的覺得,體驗較差。異步要求中大多半會以鎖屏的loading動畫過渡等待時間,因而,也就湧現了製造差別loaidng狀況的炫技。
loading
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);
}
}
總結
前端優化似乎是一種無止境的探究,尤其是如今產物關於用戶體驗的注重,任何一點體驗的改良與提拔都邑增添用戶的友好度,最終使產物留下一個好印象。