認識Skeleton Screen【螢幕載入骨架】

草榴社群發表於2017-10-24

一直以來，無論是web還是iOS、android的應用中，為了提升應用的載入等待這段時間的使用者感知體驗，各種奇門遁甲之術層出不窮。其中，菊花圖以及由它衍生各種載入動畫是一個非常大的流派，如下圖所示：

由它衍生而出的各種載入動畫也是遍地開花：

在很多的應用的互動中，這種菊花的載入的設計已然要一統江湖了。

不過，現在對於載入的設計體驗有了比菊花載入體驗更棒的方法，即本文要講的Skeleton Screen Loading，中文一般叫做骨架屏。骨架屏聽起來總覺得怪怪的，本文還是沿用英文的叫法Skeleton Screen Loading。

所謂Skeleton Screen Loading即表示在頁面完全渲染完成之前，使用者會看到一個樣式簡單，描繪了當前頁面的大致框架，感知到頁面正在逐步載入，載入完成後，最終骨架屏中各個佔位部分將被真實的資料替換。

一圖勝千言，來看看微信閱讀的客戶端，它就使用了Skeleton Screen Loading來提升它的載入體驗，可以下載它的客戶端實際感受下：

現在好多web和客戶端都已經放棄了以前的那種菊花的載入體驗，轉而使用Skeleton Screen Loading，比如Facebook、medium以及slack等。國內的餓了麼、掘金等也都使用Skeleton Screen Loading來提升它們的載入體驗。

下面這段話，是iOS中關於載入體驗的互動設計標準的一個說明：

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人機互動設計指南。本文就來講講如何使用vue來實現Skeleton Screen Loading。

VUE實現思路

在本文中，我們將會使用vue元件 (Component) 功能來實現一個Skeleton Screen Loading，如下圖所示：

具體vue元件 (Component) 功能這裡就不詳講了，可以去官方的文件看看詳細的資訊。

這裡推薦一個模擬開發資料的開源服務jsonplaceholder，類似經常使用的圖片佔位服務一樣，它提供了在web開發中一些常見資料型別的api服務，比如文章、評論、使用者系統等，都提供了對應的介面，在開發除錯階段還是非常方便的。

比如我們做的這個例子要用到使用者系統，直接使用這個使用者資料介面就行了。

首先，主要的工作是實現Skeleton Screen Loading載入動畫，先使用常規的html和css來實現這個動畫。

動畫效果如下所示：

先定義好html結構：

 <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>
複製程式碼

下面來說說實現動畫的主要思路：

要實現這樣的效果，需要使用一點點小技巧。先在圖層animated-background定義一個大的漸變背景，然後在不需要顯示背景圖的位置，定義幾個佔位的結構填充為白色就可以實現上圖所示的UI展現形式。最後使用background-position來移動背景圖片的位置，就可以實現圖中的動畫效果。

詳細的程式碼可以去這裡檢視，demo。

主要的效果實現了，下面就可以正式開工來定義我們的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>`
})
複製程式碼

上面定義了兩個元件，一個是用來顯示使用者資訊資料的元件user-item；一個在載入完之前來顯示Skeleton Screen Loading效果的loading-item元件。

定義好元件後，然後在主檔案定義好對應的結構來註冊使用元件：

<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>
複製程式碼

根據上面定義好的元件，上面的程式碼表示，當資料載入完後，顯示使用者資料。當還沒有載入完使用者資料，則顯示預先定義好的載入元件即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 = result
          this.loading = true
        });
    }
  },
  created: function() {
    setTimeout(() => {
      this.getUserDetails()
    }, 1000);
  }
});
複製程式碼

一個簡單優雅的Skeleton Screen Loading就完成了。

通過上面簡單的例項，可以明顯感受到當使用Skeleton Screen Loading來代替傳統的菊花圖在體驗上更加好一些。

使用Skeleton Screen Loading，可以利用一些視覺元素來將內容的輪廓更快顯示在螢幕上，讓使用者在等待載入的過程中對將要載入的內容有一個更加清晰的預期，特別是在弱網路的場景下，Skeleton Screen Loading的體驗無疑是更好的，用起來吧。

對於Skeleton Screen Loading，你有什麼樣的看法呢？歡迎在評論區留言一起分享你的看法。


相關文章