2019-4-23 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
Loading動畫，在現(xiàn)在的設(shè)計中已經(jīng)是一個必須要設(shè)計的系統(tǒng)元素，它能減緩用戶等待焦慮的心態(tài)，也能用來作為品牌透傳，增加曝光。
那關(guān)于loading動畫相關(guān)知識，我覺得對于設(shè)計師來說是有必要去了解的，所以我找到了這篇優(yōu)秀文章，讓大家能夠深入了解loading動畫，透過現(xiàn)象看本質(zhì)，學以致用。
圖片來源：Domaso
沒有人喜歡等待
在用戶心目中，優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。
舉一個真實的例子：最近我們新發(fā)布了一個用戶評價的應(yīng)用，第一個版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認為這3秒是一個故障。在實際開發(fā)中，你可能要面對龜速的網(wǎng)絡(luò)，沒有優(yōu)化的代碼，操作時間長或數(shù)據(jù)處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產(chǎn)品第二次機會，但絕大多數(shù)人會立即退出它。
除非你的產(chǎn)品界面對用戶的行為提供了明確的即時反饋。剛才發(fā)生了什么？是操作錯誤還是在等待服務(wù)器的請求？用戶需要等待多長時間才能正常使用這個工具或網(wǎng)站？用戶為什么要等待呢?
讓我們一起深入了解Loading動畫：
1、loading動畫的歷史由來
2、優(yōu)秀loading動畫所具備的特征
3、細節(jié)可以做出精彩
4、簡單處理還是精心制作
loading動畫的歷史由來
對于這種類型的反饋，設(shè)計師會使用進度條、loading示意圖、預loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時間發(fā)生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設(shè)計師是從什么時候開始考慮加上這種反饋的？
我很驚訝的看到關(guān)于Nielsen Norman的一篇文章，提到響應(yīng)時間和loading動畫是在1993年（參考1985年的資料）：
如果計算機無法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?！綧yers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
顯示進度的三個主要優(yōu)點：向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容，減少等待的焦慮。—?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個網(wǎng)站都有l(wèi)oading狀態(tài)，用戶可以注意到當頁面內(nèi)容正在loading時，這些Loading動畫活躍的身影。
在2007年的時候，網(wǎng)站的Loading形式大概是下面這張圖上的樣子：
2007年時的Loading
在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。
到了2010年，隨著CSS3的迅猛發(fā)展，出現(xiàn)了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設(shè)包。設(shè)計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。
在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動畫：
30個創(chuàng)意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設(shè)計師們開始不滿足于簡單的進度條和旋轉(zhuǎn)Loading，到2014年-2016年的時候，變得更加關(guān)注這塊的設(shè)計。所以，你能發(fā)現(xiàn)更多關(guān)于loading教程，免費的Loading設(shè)計資源，插件和開源項目。
2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設(shè)計趨勢和方法已經(jīng)發(fā)生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優(yōu)秀loading動畫所具備的特征
在一個完美的世界里，loading動畫應(yīng)該：
盡可能少的顯示給用戶
如果你的工具或網(wǎng)站工作的足夠快，那就是非常完美的。或者至少要使得它們的速度符合用戶的預期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應(yīng)該是解決內(nèi)容的loading問題。
給出具體時間
它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募?？更新需要多少分鐘？已經(jīng)進行到了什么階段？這些體驗上的設(shè)計細節(jié)都可以給用戶預期并減少焦慮。
宇航員數(shù)據(jù)loadingby Cream M.
告訴用戶為什么需要等待
一些應(yīng)用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動畫 by Vinoth
讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應(yīng)用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的loading動畫
讓等待的過程不那么讓人無聊
可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。
動畫來源：Alex Kunchevsky
減少用戶等待時間的心理感知
這與上面提到的一點非常相關(guān)，如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。
蛋糕loading by Pierre Kleinhouse
透傳公司品牌形象
如果用戶在用你的應(yīng)用或者網(wǎng)站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設(shè)計細節(jié)：
BCG的車票應(yīng)用動畫 by Antonin
細節(jié)可以做出精彩
雖然有些人可能會認為Loading只是一個很小的UI細節(jié)，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環(huán)的loading圖和骨架圖。
進度條
當可以明確loading時間時使用，進度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。
有數(shù)字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創(chuàng)意，需要對你的用戶業(yè)務(wù)表達更有效：
一個app loading頁 by Nguyen Tran
你也可以找到有趣的進度條和循環(huán)動畫結(jié)合的loading圖。
Loading動畫by Dragonlady
進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態(tài)。根據(jù)UI需求的不同，進度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創(chuàng)意的例子：
Gamil loading和一個創(chuàng)意loading動畫 by Allen Zhang
無限loading動畫
當loading的時間是未知的時候來使用，它可以是默認的旋轉(zhuǎn)圖，也可以是一些創(chuàng)意動畫，顯示應(yīng)用正在做一些事情。
計算loading圖標 by Hoang Nguyen
創(chuàng)意性loading動畫一樣可以與業(yè)務(wù)緊密相關(guān)，并幫助支持品牌發(fā)聲。請思考下那些應(yīng)用會使用這種loading動畫？
LittlePin Spinner by Daniel Sofinet
無限循環(huán)動畫要求用戶在上傳或執(zhí)行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創(chuàng)意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。
如你所見，如今的loading動畫不僅僅只是一個系統(tǒng)狀態(tài)的UI元素。
骨架動畫
骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內(nèi)容。
這個詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設(shè)計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。
舉個栗子，如果你使用的是網(wǎng)頁設(shè)計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數(shù)據(jù)：
Figma UI
簡單處理還是精心制作
除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計概念，在目前大多數(shù)應(yīng)用中，你可能能看到還是一個默認的Loading。
有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設(shè)計師和開發(fā)花心思來設(shè)計和實現(xiàn)它。
如果你正在開發(fā)MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創(chuàng)意，也并不會對你的產(chǎn)品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節(jié)，日益成熟的設(shè)計公司，更好的科技環(huán)境，更方便的設(shè)計工具，這些都使得loading動畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現(xiàn)自己設(shè)計能力的一種方式。
藍藍設(shè)計( m.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://m.wnxcall.com
