關於載入設計，你要知道的8種策略和4種樣式

前言

8月5號早讀文章由@金醬醬分享。

正文從這開始～

載入如同反饋，在人機交互中，用戶與界面的每一次互動都是一次載入過程。因操作導致的頁面跳轉、刷新或彈窗等從而使頁面元素或信息發生變化行為，頁面都需要向伺服器發送請求信息，伺服器接收到後在發送反饋信息，而由於網路及頁面自身處理信息的原因導致這個信息對換的過程可能發生延長從而需要一個「反饋」即載入來緩和用戶的等待。載入有快有慢，快得可以讓你根本沒意識到這種「反饋」，同時慢得也會讓你感到崩潰。

因此我們需要一種設計來緩解用戶等待時間內的焦慮感，同時即時反饋頁面狀態——那就是載入。

8種常見的載入策略，及其設計意義

啟動頁載入

說到啟動頁，大家肯定首先想到的是廣告位、節日營銷或加強品牌意識。可以點擊，並且一般都可以選擇跳過。實現方式可以為靜態頁，也可以是動態圖。

其實不然，啟動app需要一個短暫的過程，啟動頁的作用是自然地過渡這個過程。除了上述的3中做法，啟動頁還有一種做法就是，做出和首頁一樣，給人感覺進入首頁特別快。

界面跳轉載入

可分為兩種方式，當前頁載入和進入下頁載入。

1.當前頁載入：點擊按鈕後，在當前頁提示正在載入並處理，成功後進入下一頁。適用於需要判斷及驗證處理的頁面中。例如表單信息判斷和登錄驗證等。

2.進入下頁載入：點擊按鈕，跳轉至下一頁面並載入內容。絕大部分app採用這種載入方式，極大的增強了流暢的感覺。

白屏載入

多出現在H5頁面中，特點是一次性載入完所有數據，界面單一。若載入失敗，頁面為空。

分布載入/懶載入/預載入

界面中各類元素多種多樣，根據不同需求有不同載入方式，主要分以下三種：

1.分步載入：優先載入占網路資源較小的元素，如先文字和默認圖標後圖片，圖片載入完成前使用佔位符顯示；當載入的頁面內容有固定的框架時，可以先載入框架，再載入框架內的內容。此方式能夠及時展示相應內容，減少用戶心理等待時間。

2.懶載入：圖片一直是網路資源佔用大戶，對於一個前端有幾百張圖片的網站來說，如果首屏即載入所有圖片（無論這些圖片有沒有被用戶看到），那無疑是既浪費網路資源，又傷害用戶體驗的事。目前，淘寶網、知乎等大流量網站都已經使用了圖片滾動懶載入的方案——僅當圖片滾入視窗，被用戶看到的時候，才會去真正載入。

3.預載入：就是提前載入。如在啟動頁時預載入首頁；通常應用在信息流中。比如搜索結果頁，也就是我們經常看到的列表視圖。當我們「將要滑到」頁面底部時，頁面自動請求數據，為你載入出下一頁。所以一般你在瀏覽下圖這種列表時，感覺非常流暢。因為頁面進行了預載入。

智能載入

考慮網路流量問題，智能載入不僅需要考慮載入的速度，還需要考慮用戶流量成本。因此通常應用於WIFI和4G網路切換條件下，另外還需產品判定網路是否通暢。

在WIFI條件下：優先載入高質量圖片、優質音樂和視頻；

在4G條件下：下載行為自動終止，優先載入普通甚至停止載入圖片或音樂視頻；

在網路不通暢下：默認載入低質量甚至停止載入圖片或音樂視頻；

緩存載入

針對無網路的情況下，讓用戶仍能查看之前已緩存在本地的信息，使頁面不至於空白，這不僅能夠有效減少用戶流量成本，同時增加了訪問速度。

4種載入樣式

1.狀態欄載入：一般系統默認配置載入樣式。

2.導航欄載入：將導航欄標題臨時變成載入信息文字提示。

3.界面中載入：下拉刷新、懶載入和吐司載入。

總結：載入設計的核心原則

載入貫穿用戶的行為路徑，通過以上的案例背後設計的目的我們可以總結出載入設計的原則：

讓載入時間變得更有價值——減少等待時間。

讓載入變得更加有趣——忘記等待。

保證用戶對載入的可控性——及時退出載入。

減少等待時間

上述提到的載入策略都有案例分析，不再做描述。

忘記等待

讓載入有趣，情感化載入，即將情感化的設計元素融入到界面中，不僅增加了產品生趣，還緩解用戶等待的焦慮感。情感化的載入不僅能夠適當降低用戶的焦慮感，同時能夠突顯品牌或其他信息。

及時退出

由於網路或系統的原因，載入有時會時間過長，用戶並沒有足夠的耐心停留在當前頁等待你慢慢載入。此時用戶有選擇退出載入的權利，同時也可以設置默認時間內載入無法進行提示用戶重新載入。

關於本文

作者：@ 金醬醬

活動

2017.08.26 北京FEDAY等你來～

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！