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

加載的出現(xiàn)

加載指的是用戶在客戶端發(fā)出一個指令后，直到出現(xiàn)反饋結(jié)果時，中間這段時間內(nèi)計算機完成的一系列執(zhí)行動作，所以只要你在App中操作請求更多數(shù)據(jù)那就不可避免有加載。

加載的重要性

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

這里有個很重要的數(shù)據(jù)叫跳出率，在谷歌的一項調(diào)查中就已經(jīng)發(fā)現(xiàn)：

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

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

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

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

加載的場景

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

1、當(dāng)頁刷新

下拉刷新（請求最新數(shù)據(jù)）+上滑加載（請求更多數(shù)據(jù)）

▲ins_下拉和上滑

2、從后臺切回App

當(dāng)你在多個App中切換使用時，超過一定時間間隔就需加載數(shù)據(jù)。

▲系統(tǒng)后臺切回

3、啟動App

當(dāng)應(yīng)用出現(xiàn)異常關(guān)閉、應(yīng)用閃退等情況重新啟動app，需要進行數(shù)據(jù)加載。

▲App啟動加載

4、頁面間的跳轉(zhuǎn)

頁面加載新的數(shù)據(jù)，涉及原生跳原生或者H5頁面。

▲Moo音樂_頁面跳轉(zhuǎn)

5、定時數(shù)據(jù)刷新

在特定的時間內(nèi)頁面自動進行數(shù)據(jù)刷新，例如每天0點更新排行，大部分用在運營或跟時間相關(guān)的場景。

▲番茄小說_排行定時更新

6、即時消息

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

▲Quack社交聊天

加載類型的進化

1、加載器（Spinners）

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

▲旋轉(zhuǎn)菊花記載

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

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

▲Cream M.

▲Gleb Kuznetsov?

▲有道樂讀、嗶哩嗶哩漫畫

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

▲摩拜單車

▲ARCADE STUDIO

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

▲Markus Magnusson

▲DeeKay

▲RWDS

通過品牌logo或產(chǎn)品相關(guān)的圖形呈現(xiàn)在界面上，將品牌基因融入整個Loading動畫中。

▲ Google

▲Medium

▲有道樂讀

▲ 開言

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

1.1、白屏加載

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

1.2、Toast加載 

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

1.3、進度條加載 

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

1.4、手動刷新加載 

通過手勢操作，快速加載和更新當(dāng)前頁面的內(nèi)容。

1.5、局部模態(tài)加載

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

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

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

1-當(dāng)前的操作未成功，則接下來的操作或結(jié)果也無法顯示，例如：啟動App、手機支付、渲染濾鏡等；

2-當(dāng)前的操作本身不能與其他操作同步進行，需停留在當(dāng)前界面保證操作完成，例如：掃描、遷移資料、實時翻譯等。

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

加載器的特點

· 適用性廣

· 拓展性強（趣味性及品牌宣傳）

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

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

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

2.1、灰色占位符

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

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

▲Youtube

2.2、品牌相關(guān)圖

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

▲Moo音樂、有道樂讀

2.3、彩色色塊

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

▲Behance、Apple Music

▲Pinterest

▲Google Search

2.4、模糊加載

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

▲Behance、Unsplash

分布加載的特點

? 良好的閱讀性；

? 準確區(qū)分已加載和尚未加載的內(nèi)容

3、骨架加載（Skeleton Screens）

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

“Skeleton Screens”這個詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設(shè)計師的支持，LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕，通過將被動等待變?yōu)橹鲃拥却?/p>

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

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

▲Medium手機版

▲Medium網(wǎng)頁版

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

▲夸克

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

▲Linkin

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

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

? 顯示UI骨架布局

? 優(yōu)先加載文字；

? 加載圖像（或主顏色）質(zhì)量較低的版本；

? 再在后臺加載高質(zhì)量圖像；

? 淡入高質(zhì)量圖像，取代之前的低質(zhì)量圖像。

骨架加載的特點

? 感知更快的加載速度

? 清晰的可視化進度指示

容易被忽略的加載

1、預(yù)加載

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

2、智能加載

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

▲嗶哩嗶哩

3、緩存加載

也就是離線加載，通過現(xiàn)有Wifi資源將服務(wù)器內(nèi)容緩存到本地，無網(wǎng)絡(luò)或是弱網(wǎng)環(huán)境下讀取緩存加載?？梢越鉀Q無網(wǎng)或弱網(wǎng)情況下數(shù)據(jù)獲取的問題，會占用本地的存儲空間，以及后續(xù)的緩存處理需要考慮。

加載出錯后的反饋

加載時間過長可能會損害你的網(wǎng)站的整體用戶體驗。如果加載的速度很慢會導(dǎo)致用戶點擊多次，這時我們需給用戶一個明確的提示“網(wǎng)站正在發(fā)生的事情是什么，提供適當(dāng)?shù)囊曈X反饋”，加載失敗后最重要的是給出解決方案，讓用戶可再嘗試或?qū)で髱椭?。請記住，提供反饋是良好的交互設(shè)計和積極的用戶體驗。

▲嗶哩嗶哩漫畫、閑魚

▲Dribbble

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

總結(jié)

一個好的加載應(yīng)當(dāng)具備以下特征：

1 讓用戶知道應(yīng)用程序正在運行，給出大致的等待時間，簡單的進度條或更數(shù)字視覺化的方式；

2 告訴用戶等待的原因，在處理什么動作表明軟件并沒有崩潰而是處理請求；

3 有趣的動畫內(nèi)容來吸引注意力，讓等待變得可以忍受；

4 加入品牌，讓用戶在等待的過程中加深品牌印象，形成品牌感知；

5 盡量使用非中斷式加載，降低等待的心理感知時長。

參考地址：

·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=search_post---------8

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

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

Powered by Froala Editor