載入此視頻的更高質量版本時出錯(載入此照片的更高質量版本時出錯)

編輯導語：Loading動畫，在現在的設計中已經是一個必須要考慮的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。本篇文章作者分享了加載，以及怎么讓加載的體驗變得更好，我們一起來看看吧。

一個好的加載應當具備什么特征？在人機互動過程中，用戶與界面的每一次互動都是一次加載過程。加載設計對于使用者來說是非常影響體驗的一個方面，后臺復雜的數據計算時間、網絡狀況不好都有可能造成等待時間長而帶來焦慮，今天就讓我們好好來聊下加載，以及怎么讓加載的體驗變得更好。

一、加載的出現

加載指的是用戶在客戶端發出一個指令后，直到出現反饋結果時，中間這段時間內計算機完成的一系列執行動作，所以只要你在App中操作請求更多數據那就不可避免有加載。

二、加載的重要性

根據一份調查得出，用戶能夠忍受加載的最長時間在：3到8秒。8秒是一個臨界值。但現在的高速互聯網真是把我們寵壞了，如果一個頁面的加載時間超過4秒，可能會被用戶直接退出，除非Ta一定要打開那個頁面。

這里有個很重要的數據叫跳出率，在谷歌的一項調查中就已經發現：

1-3 秒的加載時間跳出率提高了 32%。1-5 秒的加載時間跳出率提高了 90%。1-6 秒的加載時間跳出率提高了 106%。

為了降低用戶等待的焦慮，獲得更好的用戶體驗，我們必須讓用戶知道我們正在努力加載，同時要讓加載更有趣來分散用戶等待的注意力。

三、加載的場景

首先我們要先了解以下這些App中最常見的加載場景，也就是那些發出指令后應用需要長時間處理的加載過程。

1. 當頁刷新

下拉刷新（請求最新數據）+上滑加載（請求更多數據）

ins_下拉和上滑

2. 從后臺切回App

當你在多個App中切換使用時，超過一定時間間隔就需加載數據。

系統后臺切回

3. 啟動App

當應用出現異常關閉、應用閃退等情況重新啟動app，需要進行數據加載。

App啟動加載

4. 頁面間的跳轉

頁面加載新的數據，涉及原生跳原生或者H5頁面。

Moo音樂_頁面跳轉

5. 定時數據刷新

在特定的時間內頁面自動進行數據刷新，例如每天0點更新排行，大部分用在運營或跟時間相關的場景。

番茄小說_排行定時更新

6. 即時消息

通訊類社交的App都采用實時推送機制，不需要用戶手動操作也能接收到最新的數據。

Quack社交聊天

四、加載類型的進化1. 加載器（Spinners）

加載器是最早被使用的方式，適用于快速加載，這也是使用率最高的一種。

旋轉菊花記載

然而這種加載器有個缺點就是無法告知用戶需要等多久，Nieln Norman早在1993年就提到響應時間和loading動畫，“如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋。”【Myers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】

所以加載器和進度條成了黃金組合，適用于長時間（10秒或更長）的加載過程，顯示一個操作將花費多長時間以及目前所處的狀態，通常有線性進度、百分比、直觀數字等。

Cream M.

Gleb Kuznetsov?

有道樂讀、嗶哩嗶哩漫畫

在此基礎上加載器也開始往趣味/品牌化發展，使用情感化加載動畫，可以讓等待過程變得輕松、愉悅。Tips：搭建符合目標用戶群體的生活場景，能拉近與用戶之間的距離。

摩拜單車

ARCADE STUDIO

吸引用戶的眼球，感覺時間會過得更快一點，短暫忘記等待的過程。

Markus Magnusson

DeeKay

RWDS

通過品牌logo或產品相關的圖形呈現在界面上，將品牌基因融入整個Loading動畫中。

Google

Medium

有道樂讀

開言

加載器和進度條這一組合有很多變體，可以應用在不同的頁面位置：

1.1 白屏加載

當前頁面內容需一次性加載完成后才能顯示內容，這是頁面加載最原始的狀態。當頁面元素較多時，內容呈現的等待時間會變得很長，一旦時間太久要給予提示。

1.2 Toast加載

當用戶執行某個操作時，為了防止用戶繼續操作導致數據加載失敗，則用Toast的樣式來提示正在加載。在畫面中間出現提示框，有時會加上黑色透明底蓋在畫面中間，這種情況一般除了返回上一級的操作可點，其他操作將受到限制。

1.3 進度條加載

可以是在頂部或底部欄上，告知用戶等待的時間長度，讓用戶有一定的心理預期。

1.4 手動刷新加載

通過手勢操作，快速加載和更新當前頁面的內容。

1.5 局部模態加載

在特定位置進行加載，功能指示更明確，避免用戶反復操作。

加載器這種方式相對比較簡單，但也會阻斷用戶的其他操作，用戶只能等待加載完成才能繼續操作。會給人的感覺時間較長，且對于加載出來的頁面沒有任何預期。

那什么時候是需要中斷用戶操作呢？主要有以下兩種情況可以作為判斷：

當前的操作未成功，則接下來的操作或結果也無法顯示，例如：啟動App、手機支付、渲染濾鏡等；當前的操作本身不能與其他操作同步進行，需停留在當前界面保證操作完成，例如：掃描、遷移資料、實時翻譯等。

如果中斷時間較短可以使用toast加載提示，時間較長則建議用專門的單頁且有可取消的按鈕來提示加載過程，以引起用戶的重視。

加載器的特點

2. 分布加載（占位符Placeholder）

占位符分布加載就是當界面中圖文同時存在時，如果獲取完所有信息才顯示所耗費的時間是很長的，因此為了縮短用戶等待的時間，會選擇優先加載快的元素（文字），慢的元素（圖片視頻等）則用其他的方式占位，最終等待加載全部完成。較為適合feed或瀑布流模式。

分步加載的好處是在等待加載的時間里用戶可以看到相關的文字內容，不會像空白頁加載或Toast加載，只能默默地等待加載的過程。

2.1 灰色占位符

將圖片用灰色或灰色圖（對開發更易用）來代替，中性灰在界面中不會搶風頭，在暗黑模式中也適用。

灰色色值（例如#EFEFEF）或灰色圖片

Youtube

2.2 品牌相關圖

在灰色圖上加入品牌元素也是不錯的方式，例如logo或吉祥物IP，將品牌人格化、情感化，輔助企業向用戶傳達產品的氣質特征，在各類產品中廣泛運用。

Moo音樂、有道樂讀

2.3 彩色色塊

通過程序提取面積較大的主色調，并設置幾種符合產品調性的默認色，以防取色失敗。需保證色彩庫的顏色高級耐看，飽和度不要太高，不然很刺眼反倒引起到不好的體驗。

Behance、Apple Music

Pinterest

Google Search

2.4 模糊加載

模糊圖像也稱為模糊技術，渲染圖像的一個低質量版本，然后過渡到高質量版本，初始圖像的像素和 kB 都很小。為了去除偽影，圖像會被放大和模糊。

Behance、Unsplash

分布加載的特點

3. 骨架加載（Skeleton Screens）

骨架加載就是先加載UI布局框架，再加載框架中的內容，細節通常按照骨架輪廓（也稱為占位UI）、文本、圖像的順序出現。通過這種方式直觀地提前讓用戶知道整個界面的架構，并營造出一種漸進的感覺，使用戶感知加載穩定且速度快，提高了產品的體驗感。

“Skeleton Screens”這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕，通過將被動等待變為主動等待。

被動等待是指你只是坐在那里無所事事，看著加載器轉了一圈又一圈。積極等待是當你在等待時做一些感覺像是進步的事情。骨架加載通過在每次屏幕更新時為用戶提供新信息來鼓勵主動等待。

通過這種方式，骨架屏幕將焦點從您等待的時間量上移開，并將其放在您面前發生的實際進度證明上，從而使加載過程感覺更快。當它顯示已加載的內容和剩余的內容時，它允許用戶構建準確的UI界面期望。

Medium手機版

Medium網頁版

實現骨架屏幕時，請確保占位符 UI 大部分準確表示最終 UI 的外觀。否則，就會在期望與現實之間產生差距。

夸克

LinkedIn 最近開始使用 Skeleton Screens 進行加載，骨架屏幕轉移了用戶的注意力。它使人們專注于進度，而不是等待時間。

Linkin

骨架加載提升了加載界面的速度進度，這種速度反饋表現的更加友好并減少了不確定性，如果加載時間比預期的要長，也可以在骨架之前短暫地顯示一個加載器，這應該會為你爭取更多時間來完成加載。

通常骨架和分布加載配合進行，稱為漸進式加載

顯示UI骨架布局優先加載文字；加載圖像（或主顏色）質量較低的版本；再在后臺加載高質量圖像；淡入高質量圖像，取代之前的低質量圖像。

骨架加載的特點

五、容易被忽略的加載1.預加載

預加載就是用戶瀏覽當前頁面時就預加載下一級所有列表的文字內容，當用戶點擊進入已加載的頁面就感受不到等待，在無網絡情況下也能進行正常的閱讀，在閱讀文字的時候再進行圖片或視頻的加載（相反地則叫懶加載，進入頁面時再加載數據）。但是這種方式會增加客戶端和服務器的負載，也會占用一定的網絡帶寬。

2. 智能加載

根據不同的網絡狀況選擇不同的數據加載方案，最常見就是用在音樂/視頻/下載更新等占用比較大流量的產品，當判斷用戶處于3G/4G或網絡卡斷的情況下，為了既讓用戶使用流暢也不浪費流量，會自動切換至低速低畫質；而處于Wi-Fi條件下，會優先選擇高清或高質量進行播放。

嗶哩嗶哩

3. 緩存加載

也就是離線加載，通過現有Wifi資源將服務器內容緩存到本地，無網絡或是弱網環境下讀取緩存加載?？梢越鉀Q無網或弱網情況下數據獲取的問題，會占用本地的存儲空間，以及后續的緩存處理需要考慮。

加載出錯后的反饋：

加載時間過長可能會損害你的網站的整體用戶體驗。如果加載的速度很慢會導致用戶點擊多次，這時我們需給用戶一個明確的提示“網站正在發生的事情是什么，提供適當的視覺反饋”，加載失敗后最重要的是給出解決方案，讓用戶可再嘗試或尋求幫助。請記住，提供反饋是良好的交互設計和積極的用戶體驗。

嗶哩嗶哩漫畫、閑魚

Dribbble

在過去，設計良好有趣的加載器是我們所能做的最好的事情，而現在，漸進式加載成為值得考慮的替代方案，它加快了等待時間感知，還清晰地呈現了UI布局并建立用戶預期。但這并不意味著不繼續思考更好的加載方案，期待未來出現更好的交互體驗。

六、總結

一個好的加載應當具備以下特征：

讓用戶知道應用程序正在運行，給出大致的等待時間，簡單的進度條或更數字視覺化的方式；告訴用戶等待的原因，在處理什么動作表明軟件并沒有崩潰而是處理請求；有趣的動畫內容來吸引注意力，讓等待變得可以忍受；加入品牌，讓用戶在等待的過程中加深品牌印象，形成品牌感知；盡量使用非中斷式加載，降低等待的心理感知時長。

參考地址：

https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e

https://medium.com/flawless-app-stories/everything-you-need-to-know-about-loading-animations-10db7f9b61e?source=arch_post———8

http://www.woshipm.com/ucd/3948565.html

https://boldist.co/usability/loading-spinner-ux-killer/

作者：電鋸人阿丹，公眾號：阿丹的設計Lab

原文鏈接：https://mp.weixin.qq.com/s/vFVgEG6Mmz1ky6aLgh1xDg

本文由 @阿丹的設計Lab 授權發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議