一直以來(lái)，無(wú)論是web還是iOS、android的應(yīng)用中，為了提升應(yīng)用的加載等待這段時(shí)間的用戶感知體驗(yàn)，各種奇門遁甲之術(shù)層出不窮。其中，菊花圖以及由它衍生各種加載動(dòng)畫是一個(gè)非常大的流派，如下圖所示：

由它衍生而出的各種加載動(dòng)畫也是遍地開(kāi)花：

在很多的應(yīng)用的交互中，這種菊花的加載的設(shè)計(jì)已然要一統(tǒng)江湖了。

不過(guò)，現(xiàn)在對(duì)于加載的設(shè)計(jì)體驗(yàn)有了比菊花加載體驗(yàn)更棒的方法，即本文要講的Skeleton Screen Loading，中文一般叫做骨架屏。骨架屏聽(tīng)起來(lái)總覺(jué)得怪怪的，本文還是沿用英文的叫法Skeleton Screen Loading。

所謂Skeleton Screen Loading即表示在頁(yè)面完全渲染完成之前，用戶會(huì)看到一個(gè)樣式簡(jiǎn)單，描繪了當(dāng)前頁(yè)面的大致框架，感知到頁(yè)面正在逐步加載，加載完成后，最終骨架屏中各個(gè)占位部分將被真實(shí)的數(shù)據(jù)替換。

一圖勝千言，來(lái)看看微信閱讀的客戶端，它就使用了Skeleton Screen Loading來(lái)提升它的加載體驗(yàn)，可以下載它的客戶端實(shí)際感受下：

現(xiàn)在好多web和客戶端都已經(jīng)放棄了以前的那種菊花的加載體驗(yàn)，轉(zhuǎn)而使用Skeleton Screen Loading，比如Facebook、medium以及slack等。國(guó)內(nèi)的餓了么、掘金等也都使用Skeleton Screen Loading來(lái)提升它們的加載體驗(yàn)。

下面這段話，是iOS中關(guān)于加載體驗(yàn)的交互設(shè)計(jì)標(biāo)準(zhǔn)的一個(gè)說(shuō)明：

Don’t make people wait for content to load before seeing the screen they’re expecting. Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn’t available yet. Replace these placeholder elements as the content loads.?—?Apple iOS Human Interface Guidelines

使用Skeleton Screen Loading也充分遵循了iOS人機(jī)交互設(shè)計(jì)指南。本文就來(lái)講講如何使用vue來(lái)實(shí)現(xiàn)Skeleton Screen Loading。

VUE實(shí)現(xiàn)思路

在本文中，我們將會(huì)使用vue組件 (Component) 功能來(lái)實(shí)現(xiàn)一個(gè)Skeleton Screen Loading，如下圖所示：

具體vue組件 (Component) 功能這里就不詳講了，可以去官方的文檔看看詳細(xì)的信息。

這里推薦一個(gè)模擬開(kāi)發(fā)數(shù)據(jù)的開(kāi)源服務(wù)jsonplaceholder，類似經(jīng)常使用的圖片占位服務(wù)一樣，它提供了在web開(kāi)發(fā)中一些常見(jiàn)數(shù)據(jù)類型的api服務(wù)，比如文章、評(píng)論、用戶系統(tǒng)等，都提供了對(duì)應(yīng)的接口，在開(kāi)發(fā)調(diào)試階段還是非常方便的。

比如我們做的這個(gè)例子要用到用戶系統(tǒng)，直接使用這個(gè)用戶數(shù)據(jù)接口就行了。

首先，主要的工作是實(shí)現(xiàn)Skeleton Screen Loading加載動(dòng)畫，先使用常規(guī)的html和css來(lái)實(shí)現(xiàn)這個(gè)動(dòng)畫。

動(dòng)畫效果如下所示：

先定義好html結(jié)構(gòu)：

<div class="timeline-item"><div class="animated-background"><div class="background-masker header-top"></div><div class="background-masker header-left"></div><div class="background-masker header-right"></div><div class="background-masker header-bottom"></div><div class="background-masker subheader-left"></div><div class="background-masker subheader-right"></div><div class="background-masker subheader-bottom"></div></div> </div>

下面來(lái)說(shuō)說(shuō)實(shí)現(xiàn)動(dòng)畫的主要思路：

要實(shí)現(xiàn)這樣的效果，需要使用一點(diǎn)點(diǎn)小技巧。先在圖層animated-background定義一個(gè)大的漸變背景，然后在不需要顯示背景圖的位置，定義幾個(gè)占位的結(jié)構(gòu)填充為白色就可以實(shí)現(xiàn)上圖所示的UI展現(xiàn)形式。最后使用background-position來(lái)移動(dòng)背景圖片的位置，就可以實(shí)現(xiàn)圖中的動(dòng)畫效果。

詳細(xì)的代碼可以去這里查看，demo。

主要的效果實(shí)現(xiàn)了，下面就可以正式開(kāi)工來(lái)定義我們的Skeleton Screen Loading組件。

Vue.component('user-item', {props: ['email', 'name'],template: `<div><h2 v-text="name"></h2><p v-text="email"></p></div>` })Vue.component('loading-item', {template: `<div class="animated-background"><div class="background-masker header-top"></div><div class="background-masker header-left"></div><div class="background-masker header-right"></div><div class="background-masker header-bottom"></div><div class="background-masker subheader-left"></div><div class="background-masker subheader-right"></div><div class="background-masker subheader-bottom"></div></div>` })

上面定義了兩個(gè)組件，一個(gè)是用來(lái)顯示用戶信息數(shù)據(jù)的組件user-item；一個(gè)在加載完之前來(lái)顯示Skeleton Screen Loading效果的loading-item組件。

定義好組件后，然后在主文件定義好對(duì)應(yīng)的結(jié)構(gòu)來(lái)注冊(cè)使用組件：

<div id="app"><div v-for="user in users" class="items" v-if="loading"><user-item :name="user.name" :email="user.email"></user-item></div><div v-for="load in loades" v-if="!loading"><loading-item></loading-item></div> </div>

根據(jù)上面定義好的組件，上面的代碼表示，當(dāng)數(shù)據(jù)加載完后，顯示用戶數(shù)據(jù)。當(dāng)還沒(méi)有加載完用戶數(shù)據(jù)，則顯示預(yù)先定義好的加載組件即loading-item。

var app = new Vue({el: '#app',data: {users: [],loading: false,loades: 10},methods: {getUserDetails: function() {fetch(`https://jsonplaceholder.typicode.com/users`).then(result => result.json()).then(result => {this.users = resultthis.loading = true});}},created: function() {setTimeout(() => {this.getUserDetails()}, 1000);} });

一個(gè)簡(jiǎn)單優(yōu)雅的Skeleton Screen Loading就完成了。

通過(guò)上面簡(jiǎn)單的實(shí)例，可以明顯感受到當(dāng)使用Skeleton Screen Loading來(lái)代替?zhèn)鹘y(tǒng)的菊花圖在體驗(yàn)上更加好一些。

使用Skeleton Screen Loading，可以利用一些視覺(jué)元素來(lái)將內(nèi)容的輪廓更快顯示在屏幕上，讓用戶在等待加載的過(guò)程中對(duì)將要加載的內(nèi)容有一個(gè)更加清晰的預(yù)期，特別是在弱網(wǎng)絡(luò)的場(chǎng)景下，Skeleton Screen Loading的體驗(yàn)無(wú)疑是更好的，用起來(lái)吧。

對(duì)于Skeleton Screen Loading，你有什么樣的看法呢？歡迎在評(píng)論區(qū)留言一起分享你的看法。

總結(jié)

以上是生活随笔為你收集整理的认识Skeleton Screen【屏幕加载骨架】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。