編輯導(dǎo)語(yǔ)：Loading動(dòng)畫(huà)是當(dāng)前設(shè)計(jì)中必須考慮的系統(tǒng)因素，也可以用于減緩用戶(hù)焦慮的心情，滲透到品牌中，增加曝光度。

本篇文章作者分享了加載，以及怎么讓加載的體驗(yàn)變得更好，我們一起來(lái)看看吧。

一個(gè)好的加載應(yīng)當(dāng)具備什么特征？在人機(jī)互動(dòng)過(guò)程中，用戶(hù)與界面的每一次互動(dòng)都是一次加載過(guò)程。加載設(shè)計(jì)對(duì)于使用者來(lái)說(shuō)是非常影響體驗(yàn)的一個(gè)方面，后臺(tái)復(fù)雜的數(shù)據(jù)計(jì)算時(shí)間、網(wǎng)絡(luò)狀況不好都有可能造成等待時(shí)間長(zhǎng)而帶來(lái)焦慮，今天就讓我們好好來(lái)聊下加載，以及怎么讓加載的體驗(yàn)變得更好。

一、加載的出現(xiàn)

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

二、加載的重要性

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

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

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

為了降低用戶(hù)等待的焦慮，獲得更好的用戶(hù)體驗(yàn)，我們必須讓用戶(hù)知道我們正在努力加載，同時(shí)要讓加載更有趣來(lái)分散用戶(hù)等待的注意力。

三、加載的場(chǎng)景

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

1. 當(dāng)頁(yè)刷新

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

ins_下拉和上滑

2. 從后臺(tái)切回App

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

系統(tǒng)后臺(tái)切回

3. 啟動(dòng)App

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

App啟動(dòng)加載

4. 頁(yè)面間的跳轉(zhuǎn)

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

Moo音樂(lè)_頁(yè)面跳轉(zhuǎn)

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

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

番茄小說(shuō)_排行定時(shí)更新

6. 即時(shí)消息

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

Quack社交聊天

四、加載類(lèi)型的進(jìn)化

1. 加載器（Spinners）

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

旋轉(zhuǎn)菊花記載

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

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

Cream M.

Gleb Kuznetsov?

有道樂(lè)讀、嗶哩嗶哩漫畫(huà)

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

摩拜單車(chē)

ARCADE STUDIO

吸引用戶(hù)的眼球，感覺(jué)時(shí)間會(huì)過(guò)得更快一點(diǎn)，短暫忘記等待的過(guò)程。

Markus Magnusson

DeeKay

RWDS

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

Google

Medium

有道樂(lè)讀

開(kāi)言

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

1.1 白屏加載

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

1.2 Toast加載

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

1.3 進(jìn)度條加載

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

1.4 手動(dòng)刷新加載

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

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

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

加載器這種方式相對(duì)比較簡(jiǎn)單，但也會(huì)阻斷用戶(hù)的其他操作，用戶(hù)只能等待加載完成才能繼續(xù)操作。會(huì)給人的感覺(jué)時(shí)間較長(zhǎng)，且對(duì)于加載出來(lái)的頁(yè)面沒(méi)有任何預(yù)期。

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

1. 當(dāng)前的操作未成功，則接下來(lái)的操作或結(jié)果也無(wú)法顯示，例如：?jiǎn)?dòng)App、手機(jī)支付、渲染濾鏡等；
2. 當(dāng)前的操作本身不能與其他操作同步進(jìn)行，需停留在當(dāng)前界面保證操作完成，例如：掃描、遷移資料、實(shí)時(shí)翻譯等。

如果中斷時(shí)間較短可以使用toast加載提示，時(shí)間較長(zhǎng)則建議用專(zhuān)門(mén)的單頁(yè)且有可取消的按鈕來(lái)提示加載過(guò)程，以引起用戶(hù)的重視。

加載器的特點(diǎn)

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

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

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

2.1 灰色占位符

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

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

Youtube

2.2 品牌相關(guān)圖

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

Moo音樂(lè)、有道樂(lè)讀

2.3 彩色色塊

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

Behance、Apple Music

Pinterest

Google Search

2.4 模糊加載

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

Behance、Unsplash

分布加載的特點(diǎn)

3. 骨架加載（Skeleton Screens）

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

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

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

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

Medium手機(jī)版

Medium網(wǎng)頁(yè)版

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

夸克

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

Linkin

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

通常骨架和分布加載配合進(jìn)行，稱(chēng)為漸進(jìn)式加載

• 顯示UI骨架布局
• 優(yōu)先加載文字；
• 加載圖像（或主顏色）質(zhì)量較低的版本；
• 再在后臺(tái)加載高質(zhì)量圖像；
• 淡入高質(zhì)量圖像，取代之前的低質(zhì)量圖像。

骨架加載的特點(diǎn)

五、容易被忽略的加載

1.預(yù)加載

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

2. 智能加載

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

嗶哩嗶哩

3. 緩存加載

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

加載出錯(cuò)后的反饋：

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

嗶哩嗶哩漫畫(huà)、閑魚(yú)

Dribbble

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

六、總結(jié)

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

1. 讓用戶(hù)知道應(yīng)用程序正在運(yùn)行，給出大致的等待時(shí)間，簡(jiǎn)單的進(jìn)度條或更數(shù)字視覺(jué)化的方式；
2. 告訴用戶(hù)等待的原因，在處理什么動(dòng)作表明軟件并沒(méi)有崩潰而是處理請(qǐng)求；
3. 有趣的動(dòng)畫(huà)內(nèi)容來(lái)吸引注意力，讓等待變得可以忍受；
4. 加入品牌，讓用戶(hù)在等待的過(guò)程中加深品牌印象，形成品牌感知；
5. 盡量使用非中斷式加載，降低等待的心理感知時(shí)長(zhǎng)。

參考地址：

———8

作者：電鋸人阿丹，公眾號(hào)：阿丹的設(shè)計(jì)Lab

原文鏈接：

本文由 @阿丹的設(shè)計(jì)Lab 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議