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