使用 Skeleton Screen 提高用戶感知體驗

1024程序猿節「願世界和平，沒有bug」， 騰訊雲社區向改變世界的程序猿致敬！

做者：陳緯傑 

一直以來，不管是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，你有什麼樣的見解呢？歡迎在評論區留言一塊兒分享你的見解。

參考資料：

www.phpgang.com/facebook-st…

css-tricks.com/building-sk…

Facilitating Better Interactions using Skeleton Screens

推薦閱讀

一種避免 iOS 內存碎片的方法

小程序測試方案初探

騰訊雲分佈式數據庫可用性系統實踐

此文已由做者受權騰訊雲技術社區發佈，轉載請註明文章出處原文連接：https://cloud.tencent.com/community/article/332283