Skeleton Screen -- 骨架屏

shmily 發(fā)布于2019-08-29 14:15 / 2244人閱讀

摘要：原文鏈接骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再渲染頁面，補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容。請求處理無論是端還是移動(dòng)端，只要有數(shù)據(jù)請求都會(huì)出現(xiàn)一定的延遲時(shí)間，之前對于這段等待時(shí)間的處理也是各不相同。

用戶體驗(yàn)一直是前端開發(fā)需要考慮的重要部分，在數(shù)據(jù)請求時(shí)常見到鎖屏的loading動(dòng)畫，而現(xiàn)在越來越多的產(chǎn)品傾向于使用Skeleton Screen Loading(骨架屏)替代，以優(yōu)化用戶體驗(yàn)。

原文鏈接

Skeleton Screen

Skeleton Screen(骨架屏)就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再渲染頁面，補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容。常用于文章列表、動(dòng)態(tài)列表頁。

請求處理

無論是PC端還是移動(dòng)端，只要有數(shù)據(jù)請求都會(huì)出現(xiàn)一定的延遲時(shí)間，之前對于這段等待時(shí)間的處理也是各不相同。同步請求中頁面會(huì)卡住，直到請求完成，用戶期間無法進(jìn)行任何操作，有一種死機(jī)的感覺，體驗(yàn)較差。異步請求中大多數(shù)會(huì)以鎖屏的loading動(dòng)畫過渡等待時(shí)間，于是，也就出現(xiàn)了制作不同loaidng狀態(tài)的炫技。

Skeleton Screen優(yōu)勢

鎖屏loading在一定程度限制了用戶的操作，所以為了進(jìn)一步提升用戶體驗(yàn)，Skeleton Screen被越來越多的公司產(chǎn)品采用，如：Facebook、簡書、知乎、掘金等，在動(dòng)態(tài)、文章加載時(shí)預(yù)先渲染出結(jié)構(gòu)布局，數(shù)據(jù)加載完成后再填充數(shù)據(jù)顯示，這樣的好處在于不干擾用戶操作，使用戶對于加載的內(nèi)容有一個(gè)大致的預(yù)期，特別是弱網(wǎng)絡(luò)環(huán)境下極大的優(yōu)化了用戶體驗(yàn)。

Skeleton Screen實(shí)現(xiàn)

主要步驟：
1、創(chuàng)建與顯示內(nèi)容相似的html結(jié)構(gòu)
2、在需要顯示內(nèi)容的元素上增加背景色

第一種

簡單堆砌出元素結(jié)構(gòu)

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

第二種

背景動(dòng)畫，html結(jié)構(gòu)相同，修改部分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;
    }
}

第三種

元素結(jié)構(gòu)長度變化

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

總結(jié)

前端優(yōu)化仿佛是一種無止境的探索，尤其是現(xiàn)在產(chǎn)品對于用戶體驗(yàn)的重視，任何一點(diǎn)體驗(yàn)的改善與提升都會(huì)增加用戶的友好度，最終使產(chǎn)品留下一個(gè)好印象。

云服務(wù)器 GPU云服務(wù)器 Skeleton screen webrtc screen intel webrtc screen

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113020.html

發(fā)表評論

登陸后可評論

0條評論

shmily

男|高級講師

我要關(guān)注我要私信

TA的文章

dns主機(jī)別名怎么用-私人dns主機(jī)名設(shè)置？

閱讀 4604·2021-09-22 14:57
使用es6實(shí)現(xiàn)iview的選項(xiàng)卡切換

閱讀 565·2019-08-30 15:56
掌握緩存，不再讓你藍(lán)瘦香菇

閱讀 2672·2019-08-30 15:53
Skeleton Screen -- 骨架屏

閱讀 2245·2019-08-29 14:15
字符串截取的幾種辦法（php，js，css三種）

閱讀 1691·2019-08-28 17:54
網(wǎng)頁加密16進(jìn)制

閱讀 564·2019-08-26 13:37
Cookie就擺在那，為什么死活吃不到？

閱讀 3483·2019-08-26 10:57
熱播劇因“問題地圖”踩雷，創(chuàng)作平臺如何規(guī)避？

閱讀 1049·2019-08-26 10:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Skeleton Screen -- 骨架屏

相關(guān)文章