@Mockplus原型設(shè)計(jì)?：如今，越來(lái)越多的優(yōu)秀 iOS 應(yīng)用程序、MacOS 工具和網(wǎng)站爭(zhēng)相出現(xiàn)，用戶對(duì)產(chǎn)品質(zhì)量的要求也水漲船高。在用戶心中，真正優(yōu)秀的產(chǎn)品必然是要能夠快速響應(yīng)他們的需求。

分享一個(gè)真實(shí)案例：我們最近發(fā)布了一款工具，為 iOS 應(yīng)用程序提供用戶反饋，不出所料，第一個(gè)版本并不完美，加載也會(huì)延遲 2-3 秒。

你猜怎么著？

用戶以為這 3 秒加載延時(shí)是一個(gè) bug。在實(shí)際開(kāi)發(fā)環(huán)境中，總是會(huì)有諸多問(wèn)題，網(wǎng)絡(luò)遲緩，代碼不優(yōu)化，操作時(shí)間長(zhǎng)或者數(shù)據(jù)太多等等，因此，App 運(yùn)行的速度很難做到用戶期望的那么快。雖然最早期的忠實(shí)用戶可能會(huì)稍有耐心，但絕大多數(shù)用戶會(huì)選擇立即關(guān)閉。

要是產(chǎn)品界面可以為用戶立即提供明確的反饋信息，那結(jié)果可能就很不一樣了。剛才發(fā)生的操作是一個(gè) bug？還是只是在等待服務(wù)器請(qǐng)求？用戶需要等待多長(zhǎng)時(shí)間？用戶為什么要等待？

要弄明白以上問(wèn)題，不妨一起深入地研究一下吧。為了方便理解，今天主要從以下幾個(gè)方面講解加載動(dòng)畫(huà)：

• 加載動(dòng)畫(huà)的由來(lái)
• 加載動(dòng)畫(huà)：101
• 不可忽視的UI細(xì)節(jié)
• 簡(jiǎn)單處理還是制作精良

加載動(dòng)畫(huà)的由來(lái)

有這樣一類(lèi)反饋形式，設(shè)計(jì)師使用進(jìn)度條，加載指示器，預(yù)加載器或旋轉(zhuǎn)器等來(lái)告知用戶什么時(shí)間發(fā)生了什么或者加載了什么，從而減少用戶心理焦慮。

這種類(lèi)型的反饋是什么時(shí)候開(kāi)始使用的呢？

無(wú)意中看到一篇關(guān)于 Nielsen Norman 的文章，原來(lái)在 1993 年就已經(jīng)提到過(guò)有關(guān)于響應(yīng)時(shí)間和加載動(dòng)畫(huà)的描述。（參考1985年的文獻(xiàn)資料）

如果計(jì)算機(jī)無(wú)法提供快速響應(yīng)，則應(yīng)以百分比進(jìn)度指標(biāo)的形式向用戶提供持續(xù)反饋。

進(jìn)度指標(biāo)有三個(gè)用途：首先，提示用戶系統(tǒng)沒(méi)有崩潰而是正在解決問(wèn)題；其次，告知用戶最大等待時(shí)長(zhǎng)，因而用戶可以在等待期間做點(diǎn)其他的事情；最后，為用戶提供界面視覺(jué)內(nèi)容，減輕用戶心理焦慮。

Web 1.0后，幾乎每個(gè)網(wǎng)站都采用了預(yù)加載器。用戶的注意力很可能被那些移動(dòng)的動(dòng)畫(huà)吸引，與此同時(shí)，頁(yè)面的其余內(nèi)容在進(jìn)行加載。

在 2007 年，網(wǎng)站預(yù)加載器長(zhǎng)這樣：

那時(shí)候，還有專(zhuān)門(mén)的指南幫助你使用 Fireworks（2007）或Flash（2008）創(chuàng)建加載動(dòng)畫(huà)，還有一些工具，比如「加載GIF生成器」（2009）。

到2010年，CSS3 技術(shù)運(yùn)用到加載動(dòng)畫(huà)的制作中來(lái)，出現(xiàn)了大量的教程教授如何制作 CSS3 動(dòng)畫(huà)和加載動(dòng)畫(huà)包。設(shè)計(jì)師也可以在 Photoshop CS5 中制作加載動(dòng)畫(huà)，這在十年前是非常流行的。

在那時(shí)，加載動(dòng)畫(huà)更偏重于 web 端問(wèn)題，加載動(dòng)畫(huà)本身也是一個(gè)非常嚴(yán)重的問(wèn)題。在 2010 年的時(shí)候，很多 Flash 網(wǎng)頁(yè)開(kāi)始制作一些更具創(chuàng)意的加載動(dòng)畫(huà)：

一直以來(lái)，進(jìn)度條和旋轉(zhuǎn)器在 Skeleton 屏幕備受爭(zhēng)議。顯然，簡(jiǎn)單的進(jìn)度條和旋轉(zhuǎn)器已經(jīng)不能滿足需求，在 2014 年至 2016 期間，設(shè)計(jì)師也開(kāi)始花費(fèi)更多精力在這一領(lǐng)域，更多優(yōu)質(zhì)的加載動(dòng)畫(huà)教程，設(shè)計(jì)資源，插件，開(kāi)源項(xiàng)目也爭(zhēng)相出現(xiàn)。

盡管設(shè)計(jì)趨勢(shì)和設(shè)計(jì)技術(shù)不斷變化，但向用戶提供界面反饋的需求卻始終不變。

加載動(dòng)畫(huà)：101

理想狀態(tài)中，加載動(dòng)畫(huà)也許具有以下特色。

1. 盡可能少地顯示加載動(dòng)畫(huà)

如果你有辦法讓你的工具或網(wǎng)站非常高效的運(yùn)行，那真的是非常厲害。或者說(shuō)，至少可以達(dá)到用戶的期望值。即使加載動(dòng)畫(huà)設(shè)計(jì)得再好，如果加載時(shí)間過(guò)長(zhǎng)，用戶也會(huì)失去耐心，或者只顯示加載動(dòng)畫(huà)，不提示用戶等待時(shí)長(zhǎng)，這也是非常不好的體驗(yàn)。總之，加載動(dòng)畫(huà)只是一種緩兵之計(jì)，解決內(nèi)容加載的問(wèn)題才是根本之道。

2. 給出加載時(shí)間預(yù)估

可以反饋給用戶一個(gè)大致的等待時(shí)間，或者更直觀地顯示加載進(jìn)度。比如說(shuō)，一共需要上傳了多少個(gè)文件？軟件更新需要多少時(shí)間？已經(jīng)進(jìn)行到了哪個(gè)環(huán)節(jié)？這些用戶體驗(yàn)細(xì)節(jié)都可以幫助設(shè)定用戶預(yù)期，減少心理焦慮。

3. 給出用戶需要等待的原因

一些 APP 或工具的加載動(dòng)畫(huà)其實(shí)并不能被用戶立即理解，這時(shí)候，就需要非常巧妙地提示用戶為什么他們需要等待，加載時(shí)軟件背后在做些什么。

說(shuō)回上文提到的反饋工具，因?yàn)闊o(wú)法做到 1s 內(nèi)完成內(nèi)容加載，因此向用戶解釋等待時(shí)長(zhǎng)就非常重要。動(dòng)畫(huà)會(huì)提示用戶軟件正在加載界面，這樣用戶就會(huì)知道，軟件不是出 bug 了，而是在處理請(qǐng)求：

4. 讓等待過(guò)程更有趣

放置一個(gè)引人入勝的加載動(dòng)畫(huà)吸引用戶注意力。

5. 減少用戶等待時(shí)間的感知

這與上述觀點(diǎn)非常相關(guān)。如果在等待時(shí)可以提供吸引用戶注意力的東西，會(huì)減輕用戶心理焦慮。可以考慮吸引人的顏色搭配，一些新穎的想法等等。

6. 傳遞公司品牌形象

如果用戶在使用你的產(chǎn)品或者網(wǎng)站時(shí)，無(wú)論如何都需要等待，那為什么不有效利用這個(gè)時(shí)間呢？并不是說(shuō)非要做一些厲害的加載動(dòng)畫(huà)，或者非要使用什么心理學(xué)技巧，只需將加載體驗(yàn)與你的品牌形象保持一致即可。

不可忽視的UI細(xì)節(jié)

雖然有人可能認(rèn)為加載器只是一個(gè)很小的 UI 細(xì)節(jié)，但它卻有多種類(lèi)型和變化。這里提供了幾種形式的進(jìn)度條，無(wú)限循環(huán)加載動(dòng)畫(huà)和骨架圖。

1. 進(jìn)度條

如果可以明確加載時(shí)間，可以使用進(jìn)度條，其原理是通過(guò)數(shù)字或視覺(jué)形象來(lái)表現(xiàn)，形式也可以做到多種多樣。

數(shù)字進(jìn)度條有時(shí)被稱(chēng)做百分比指示器。它們可以簡(jiǎn)單直接，也可以極具創(chuàng)意，選取適合的就行。

更有趣的進(jìn)度條，具有百分比指示的循環(huán)動(dòng)畫(huà)：

進(jìn)度條的作用就是告知用戶等待時(shí)長(zhǎng)，并且向用戶展示到目前為止的進(jìn)展?fàn)顟B(tài)。根據(jù)具體情況，進(jìn)度條也可以只是線性的，不用都具備百分比指示。

舉個(gè)例子，Gmail。它在加載時(shí)，也沒(méi)有顯示進(jìn)度百分比，但用戶卻可以很清晰地感覺(jué)到加載進(jìn)度，以下兩個(gè)例子都是非常具有創(chuàng)意的：

2. 無(wú)限循環(huán)加載動(dòng)畫(huà)

當(dāng)加載時(shí)間未知時(shí)，可以考慮使用無(wú)限循環(huán)加載動(dòng)畫(huà)。可以是默認(rèn)的循環(huán)動(dòng)畫(huà)，也可以添加一些創(chuàng)意，總之，告知用戶 APP「依舊在工作」。

具有創(chuàng)意的循環(huán)動(dòng)畫(huà)可以緩解用戶心理焦慮，因?yàn)樗谙蛴脩艚忉尀槭裁醇虞d需要時(shí)間。

創(chuàng)意循環(huán)動(dòng)畫(huà)可以與產(chǎn)品和業(yè)務(wù)很好結(jié)合，輔助打造品牌形象。

無(wú)限加載動(dòng)畫(huà)提示用戶在程序上傳或執(zhí)行某些操作時(shí)需要等待，但不指定需要多長(zhǎng)時(shí)間。一般來(lái)講，環(huán)狀循環(huán)動(dòng)畫(huà)是不錯(cuò)的選擇，可以簡(jiǎn)潔直觀，也可以精心設(shè)計(jì)。

不難看出，如今的加載動(dòng)畫(huà)早已不僅僅是系統(tǒng)的狀態(tài) UI 元素，而更像是一種藝術(shù)表達(dá)。

3. 骨架圖

骨架圖可以提供加載界面的漸進(jìn)過(guò)程。你可以把它想象成頁(yè)面占位符，然后逐步加載圖片，文本和其他內(nèi)容。

骨架圖這個(gè)術(shù)語(yǔ)最先出現(xiàn)在 Luke Wroblewski 的《移動(dòng)設(shè)計(jì)細(xì)節(jié)：避免旋轉(zhuǎn)器》文章中。盧克建議使用骨架圖來(lái)提供更好的加載體驗(yàn)。這個(gè)想法也獲得了其他設(shè)計(jì)師的支持，并在 Facebook，LinkedIn，YouTube，Google Drive 等用戶界面中運(yùn)用。

分享一個(gè)案例，如果你在使用網(wǎng)頁(yè)設(shè)計(jì)工具Figma，你會(huì)看到其頁(yè)面頂部有一個(gè)漸進(jìn)加載的進(jìn)度條，你會(huì)先看到項(xiàng)目的占位符，然后才顯示可用數(shù)據(jù)：

簡(jiǎn)單處理還是制作精良？

拋開(kāi)一些設(shè)計(jì)精細(xì)的例子和 Dribbble 的概念設(shè)計(jì)，在大多數(shù)應(yīng)用程序中，你看到的是默認(rèn)或簡(jiǎn)單的加載動(dòng)畫(huà)。

很長(zhǎng)時(shí)間以來(lái)，簡(jiǎn)單的加載動(dòng)畫(huà)被廣泛運(yùn)用，并被視為最佳的加載辦法。使用默認(rèn)或開(kāi)源加載動(dòng)畫(huà)不僅輕松簡(jiǎn)單，設(shè)計(jì)師也不用花費(fèi)時(shí)間來(lái)制作自定義動(dòng)畫(huà)，還可以節(jié)省開(kāi)發(fā)人員的開(kāi)發(fā)時(shí)間。

那么，加載動(dòng)畫(huà)應(yīng)該簡(jiǎn)單處理還是精良制作？這個(gè)問(wèn)題其實(shí)說(shuō)法不一。

一方面，操作系統(tǒng)的默認(rèn) UI 組件可以讓設(shè)計(jì)師進(jìn)行原生設(shè)計(jì)，實(shí)現(xiàn)更好的用戶體驗(yàn)。用戶也更熟悉本機(jī)組件，可以很快弄明白如何使用，并且預(yù)期結(jié)果。

舉個(gè)例子，蘋(píng)果用戶對(duì)于蘋(píng)果平臺(tái)的標(biāo)準(zhǔn)導(dǎo)航控件，按鈕或圖標(biāo)都更熟悉，用戶甚至可能在遇到默認(rèn)加載時(shí)，都不會(huì)感知到加載的存在。

另一方面，用戶也有可能對(duì)默認(rèn)組件有不好的體驗(yàn)，尤其是對(duì)于加載器。

還有一點(diǎn)，如果一個(gè)應(yīng)用程序使用操作系統(tǒng)的加載指示器而不是自定義加載指示器，用戶可能會(huì)抱怨網(wǎng)絡(luò)連接或者設(shè)備速度。

關(guān)于這個(gè)觀點(diǎn)，目前還沒(méi)有找到相關(guān)研究，但確實(shí)也是一個(gè)有意思的思考點(diǎn)。

如果你正在開(kāi)發(fā) MVP（最小可行產(chǎn)品）或者項(xiàng)目的第一個(gè)版本，使用簡(jiǎn)單、默認(rèn)或開(kāi)源加載動(dòng)畫(huà)似乎更合乎情理。在此階段，即使是使用最有創(chuàng)意的加載動(dòng)畫(huà)也不能解決根本問(wèn)題，因?yàn)楦締?wèn)題應(yīng)該是產(chǎn)品本身。

有趣的是，在 2016-2019 年之間出現(xiàn)了大量精心制作的加載動(dòng)畫(huà)。究其原因，細(xì)節(jié)的重視，設(shè)計(jì)技術(shù)日益成熟，技術(shù)環(huán)境的改善以及動(dòng)畫(huà)制作工具的出現(xiàn)等等，所有這些都使得加載動(dòng)畫(huà)更具創(chuàng)造性。如果瀏覽 Dribbble，可以找到非常多酷炫的加載動(dòng)畫(huà)。

即使我們是一個(gè)只有 5 個(gè)人的創(chuàng)業(yè)公司，我們也會(huì)考慮更好的用戶體驗(yàn)，讓用戶的等待體驗(yàn)更加愉快。否則，我們的產(chǎn)品只會(huì)慢慢失去用戶。

歡迎關(guān)注譯者的微信公眾號(hào)：「摹客」