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

資訊專欄INFORMATION COLUMN

Skeleton Screen -- 骨架屏

waterc / 1563人閱讀

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


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

原文鏈接

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

請求處理

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

loading Skeleton Screen優(yōu)勢

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

Skeleton Screen實現(xiàn)

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

第一種

簡單堆砌出元素結構

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;
}
第二種

背景動畫，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);
  }
}
總結

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

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

轉載請注明本文地址：http://systransis.cn/yun/94573.html

相關文章

  • Skeleton Screen -- 骨架屏

    摘要：原文鏈接骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結構，直到請求數(shù)據(jù)返回后再渲染頁面，補充進需要顯示的數(shù)據(jù)內容。請求處理無論是端還是移動端，只要有數(shù)據(jù)請求都會出現(xiàn)一定的延遲時間，之前對于這段等待時間的處理也是各不相同。 用戶體驗一直是前端開發(fā)需要考慮的重要部分，在數(shù)據(jù)請求時常見到鎖屏的loading動畫，而現(xiàn)在越來越多的產品傾向于使用Skeleton Screen Load...

    shmily 評論0 收藏0

  • 小程序構建骨架屏的探索

    摘要：第二套方案，一定程度上改善了第一套方案帶來的維護成本增加的缺點，主要還是使用工具預渲染頁面，獲取到節(jié)點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文本圖片或者是等節(jié)點上面，最后將生成的和打包出來，就是一個帶有骨架屏的頁面。 首屏 一般情況下，在首屏數(shù)據(jù)未拿到之前，為了提升用戶的體驗，會在頁面上展示一個loading的圖層，類似下面這個showImg(https://segment...

    shiweifu 評論0 收藏0

  • 【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

    摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

    huhud 評論0 收藏0

  • 【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

    摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

    MkkHou 評論0 收藏0

  • Vue單頁面骨架屏實踐

    github 地址： VV-UI/VV-UI 演示地址: vv-ui 文檔地址：skeleton 關于骨架屏介紹 骨架屏的作用主要是在網絡請求較慢時，提供基礎占位，當數(shù)據(jù)加載完成，恢復數(shù)據(jù)展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。 常見的骨架屏實現(xiàn)方案有ssr服務端渲染和prerender兩種解決方案。這里主要通過代碼為大家展示如何一步步做出這樣一個骨架屏： show...

    DevTTL 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<