淺析Loading動畫的設(shè)計要素

殷昕悅

（南京信息工程大學(xué) 江蘇 南京 210000）

Loading動畫指的是程序在后臺加載過程中用戶界面上展示的動畫動效。Loading動畫是UI界面設(shè)計中的一部分。如今，人們對于計算機以及移動客戶端的需求在飛速增加，甚至產(chǎn)生依賴。對于互聯(lián)網(wǎng)產(chǎn)品無論是網(wǎng)頁還是APP，用戶已經(jīng)不單純于追求其功能性，也更加在意視覺美感和人機之間的交互體驗。Loading動畫作為UI設(shè)計中不可或缺的一部分，由于其占據(jù)時長較長，頁面占比較大，且一般出現(xiàn)時機較為關(guān)鍵，把握其中的設(shè)計要素顯得尤為關(guān)鍵。

一、loading動畫的目的與作用

（一）過度界面。Loading動畫通常使用在界面之間交換銜接之處，并且往往會打亂用戶的使用節(jié)奏。以舒適平滑的的方式處理頁面或視圖之間的轉(zhuǎn)換，幫助用戶平緩過度期使用節(jié)奏的變化。

（二）信息傳遞。在程序打開或者大幅跳轉(zhuǎn)時，程序需要調(diào)用系統(tǒng)資源，不會立刻呈現(xiàn)出其信息或界面，loading動畫會起到告知用戶需加載內(nèi)容及加載狀態(tài)的作用，在加載時間過長時可以明確用戶所需時長或當(dāng)前加載進度。

（三）緩解焦慮。加載過程需要時間，且打斷用戶的流暢體驗。對于加載界面，用戶容易產(chǎn)生急躁心理。Loading動畫最主要的目的就是緩解用戶等待時的焦慮，以免用戶由于等待時間過長，從而失去對程序內(nèi)容的興趣和期望，導(dǎo)致用戶流失。

（四）美化裝飾。由于大部分的loading動畫時間較長，且頁面占比較大，loading動畫對程序的整體UI的風(fēng)格和視覺效果起著關(guān)鍵作用，可以做到豐富其整體UI的裝飾內(nèi)容，提升視覺沖擊的目的。

（五）品牌推廣。通過loading動畫的內(nèi)容進行品牌印象的加深和推廣， 例如將創(chuàng)意與品牌logo或者理念相結(jié)合，制作出的動畫，不僅能夠轉(zhuǎn)移用戶注意力，讓用戶眼前一亮，更可以將品牌視覺和理念推給用戶，加深給用戶的品牌印象。

二、loading動畫的主要類型

目前的程序設(shè)計之中，合理的數(shù)據(jù)加載方式主要分為全屏加載、優(yōu)先加載、整頁加載、自動加載、只能加載、離線加載。一般體現(xiàn)于用戶界面的加載主要是全屏加載、優(yōu)先加載、整頁加載和自動加載，智能加載與離線加載在用戶界面基本不會進行顯示，因此不作深究，根據(jù)加載方式的不同，loading動畫所占用的屏幕面積以及其動畫時長都有所不同，所使用的動畫類型也不盡相同。從loading動畫的形式上進行區(qū)分，主要包含以下幾種類型。

（一）條類型，也就是進度條類型。loading動畫，其進度條多為長條狀、圓形，也有不規(guī)則圖案，比如logo或者其他與當(dāng)前程序相關(guān)的圖形圖案。這類型的動畫一般都用于時間較長，加載內(nèi)容較多時使用，多配有明確的進度標(biāo)識，讓用戶對于當(dāng)前的加載狀態(tài)和剩余等待時間有明確的心理預(yù)期。多用于全屏加載，整頁加載偶爾也會用到這種類型的加載動畫。

（二）循環(huán)類型。一般這類型的動畫都是循環(huán)、旋轉(zhuǎn)動畫，利用旋轉(zhuǎn)或者規(guī)律性的循環(huán)運動暗示著時間的流逝，更能通過其有規(guī)律的動效和運動速率加快節(jié)奏，給用戶以時間加速的錯覺，減少用戶等待的焦慮感。這類型的動畫一般用于一些加載時間較短的環(huán)境，比如優(yōu)先加載、自動加載。這類型的動畫由于是循環(huán)動畫，且多不顯示加載進度，一般不使用于較長時間的加載中，否則由于其無限循環(huán)和快速的節(jié)奏，反而會使用戶更加急躁。

（三）動畫類型。即使用一個有形象或者有內(nèi)容的小動畫，將其作為loading動畫使用在產(chǎn)品中。最常見就是使用跑步或者走路的動作制作的循環(huán)動畫，還有一些便是根據(jù)產(chǎn)品的內(nèi)容設(shè)計更加與產(chǎn)品相關(guān)動畫內(nèi)容作為loading動畫，這類加載動畫占據(jù)較大頁面資源，需要一定的播放時間，適用于時間較長，加載量較大的環(huán)境，只在全屏加載和整頁加載時使用。這類動畫能大大體現(xiàn)產(chǎn)品的風(fēng)格特點，突出產(chǎn)品的個性特征，在給予用戶新奇、有趣的感受同時，能夠大大提高自身品牌的識別度，加大品牌影響力。

（四）除了以上三種之外，有一些網(wǎng)頁和手機游戲在再加載動畫中加入一些小的交互形式。這類型的交互都很簡單，以響應(yīng)式設(shè)計為主，以觸碰或者點擊作為觸發(fā)，產(chǎn)生反饋。此外，在一些優(yōu)先加載的情況下，設(shè)計師利用動效之間時間差來為加載爭取時間，省去一些不必要的加載動畫，利用動效變化讓程序加載的時間平滑地過度，給客戶以流暢的體驗，感覺不到加載所使用的時間。

三、loading動畫的設(shè)計要素

Loading動畫作為整體UI的一部分，也不能對其只進行單獨考慮，要將其置于整套UI設(shè)計中，考慮其整體性和統(tǒng)一性。因此，對于其設(shè)計要素分為以下幾點。

（一）形式合理。動畫設(shè)計前要對產(chǎn)品的目標(biāo)人群、產(chǎn)品主題，以及其功能目的都需要有進一步分析，更需要針對產(chǎn)品不同的加載形式進行研究，分析其加載形式以及加載的流量大小所需時長，加載時加載內(nèi)容的所占頁面大小，對于不同情況的加載環(huán)境進行分類，對于不同的環(huán)境設(shè)計其適應(yīng)的動畫類型和動畫形式。

（二）風(fēng)格統(tǒng)一。動畫的視覺設(shè)計要注重整體UI的和諧統(tǒng)一，將品牌和UI的視覺風(fēng)格、元素、符號融入到動畫設(shè)計之中，這樣不僅能夠給人耳目一新的感覺，而且能夠加深消費者對品牌的印象，提高品牌價值，有著很好的推廣效果。在動畫中加入該產(chǎn)品UI的特有動效，統(tǒng)一加強整體的UI風(fēng)格，使產(chǎn)品更加個性化，加深給用戶的印象。

（三）縮減成本。loading動畫雖是產(chǎn)品開發(fā)中不可或缺的一環(huán)，但不是產(chǎn)品核心，因此要在保證其功能和作用的情況下，縮減其動畫的開發(fā)成本。Loading動畫作為一個功能性動畫不能損失其功能性，在設(shè)計制作時，應(yīng)控制其運行時的流量占比，不能影響程序的運行和加載。循環(huán)動畫和簡單運動動畫成為loading動畫的最佳選擇。

（四）安撫情緒。作為UI設(shè)計的一部分，loading動畫的設(shè)計一定要以用戶體驗為第一要素，作為loading動畫最主要的就是緩解用戶等待時間的焦慮。減少用戶的焦慮心理主要有以下幾點。

第一，轉(zhuǎn)移注意力。讓用戶感覺到等待時間的減少最常用的手段便是轉(zhuǎn)移用戶的注意力，用其他有吸引力的東西，引導(dǎo)用戶注意力的轉(zhuǎn)移，從而讓用戶忘卻等待時間。這個方法的核心便是讓用戶在等待的時間內(nèi)有事可做。對于loading動畫來說，本身就是一種吸引用戶注意力的手段，如何讓動效更加有趣，吸引更多目光又不過于繁瑣花哨。更有一些公司將一些小的交互加入到loading動畫中，比如去年很火的音樂游戲《lovelive》該游戲的loading界面以游戲主要形象為主體，觸碰之后不僅在畫面上會與用戶有動作上的互動，而且伴有安撫用戶情緒的語音，讓用戶在等待時也可以有一些小的互動，以此減少用戶對等待時間的敏感程度。

第二，給予允諾。在loading動畫中通過畫面內(nèi)容或者百分比的標(biāo)識，告知用戶加載進度和所需等待時間，給以用戶以足夠的期望，并且可以了解當(dāng)前加載程度，不讓用戶因為對于等待時間的未知而產(chǎn)生厭煩焦躁心理。狀態(tài)型動畫大多都是遵從了這點，為了讓人有更高期望。例如一些loading動畫設(shè)計之中會將一條進度條拆分成幾次讀取，這樣可以加快緩沖速度，讓用戶一直保持著一種加載立刻就要完成的心態(tài)，但如果進度條分段太多，用戶一直處于0-100循環(huán)的狀態(tài)，會適得其反，不僅失去耐心，更會產(chǎn)生被欺騙的感覺從而對整個產(chǎn)品失去信任，造成對品牌形象的損壞。

第三，增加信息量。在loading動畫中加入一些關(guān)于產(chǎn)品部分功能的預(yù)覽或者一些小的提示，增加等待時間內(nèi)的信息提供量，不但可以吸引用戶注意，分散其注意力，更可以利用等待時間增加用戶對產(chǎn)品的期許，一些關(guān)于產(chǎn)品的小提示還能提高產(chǎn)品的親和力，提高用戶對產(chǎn)品的好感，類似的方法多運用于手機游戲的加載界面，大多數(shù)游戲的加載界面都伴有游戲簡介以及游戲中的一些小提示，比如網(wǎng)易的《乖離性百萬亞瑟王》、幻萌《戰(zhàn)艦少女R》以及絕大多數(shù)屬的手機端游都將這個方法運用在他們的游戲loading動畫設(shè)計中。

第四，為用戶提供簡單的等待提示。這種策略一般運用在等待時間較短的時候，雖然需要時間很短，但依然會打斷用戶的操作體驗，提供簡短提示可以讓用戶有一個心理準(zhǔn)備，有了提前的心理準(zhǔn)備，較短的加載時間會讓用戶產(chǎn)生一種加載很快的印象，從而提升用戶對產(chǎn)品的好感提升。

四、loading動畫的細節(jié)提升

（一）符合用戶心理預(yù)期。Loading動畫設(shè)計的內(nèi)容要符合用戶的心理模型，讓用戶一目了然此時產(chǎn)品的狀態(tài)和功能，在設(shè)計時可以使用一些比擬的手法，利用直線運動或者旋轉(zhuǎn)暗示加載進度和時間流逝。不僅可以非常明確地讓用戶了解當(dāng)前正處于需要等待的狀態(tài)，更可以通過不同的方式的比擬，設(shè)計出更有創(chuàng)意和新意的loading動畫，給用戶意料之外的驚喜。

（二）降低用戶觀看成本。loading動畫作為功能動畫，在用戶使用產(chǎn)品時，總會多次反復(fù)地出現(xiàn)在用戶面前，過于繁復(fù)的設(shè)計，雖然能在初次播放時抓住用戶注意力，給用戶帶來視覺沖擊，但多次反復(fù)地沖擊會給用戶帶來情緒上的負擔(dān)，反而適得其反。對于這類功能性動畫的設(shè)計，考慮到用戶的觀看成本，做到簡單卻不失特色，避免用戶負面情緒的產(chǎn)生。

（三）注意加載時間對用戶行為的影響。用戶會根據(jù)加載時間的長短對自身行為進行調(diào)整，當(dāng)時間小于0.1秒時用戶不會有任何感覺不會改變用戶正在進行的行為，當(dāng)時間在0.1秒-1秒之間時雖然用戶會感受到有一定的延遲但在接受范圍之內(nèi)，用戶不會對自身行為產(chǎn)生調(diào)整，1-10秒之間，10秒是用戶保持注意力的上限，這段時間雖然用戶可能會對自己的行為進行微調(diào)，比如，去看一則新聞，或者回一條信息，但用戶還會在短時間之內(nèi)切回產(chǎn)品進行后續(xù)操作。加載時間在10秒以上的，用戶一定會對自身行為進行調(diào)整，將注意力轉(zhuǎn)移到別處，此時將轉(zhuǎn)移至別處的注意力拉回便是設(shè)計重點。在設(shè)計動畫時要針對不同的加載時間，給予不同的設(shè)計思路，在時間較短時，轉(zhuǎn)移注意力，減少加載給用戶帶來的停頓感，安撫用戶情緒。在時間較長時，給予用戶允諾，加載完成后能夠?qū)⒁艳D(zhuǎn)移的注意力拉回，影響用戶行為。

五、結(jié)語

Loading動畫雖然只是作為UI設(shè)計其中的一小部分，但能影響到用戶的體驗和情緒，從而影響到整個產(chǎn)品給予用戶的印象?，F(xiàn)在的loading動畫類型眾多、形式多樣，雖然目前還不是當(dāng)前動效研究的重點，但其實loading動畫的設(shè)計還存在許多細節(jié)有待研究。loading動畫有著許多切合自己的設(shè)計要素，有著很強的目的性和功能性，通過不斷地深入研究和改進，可以讓用戶不再煩躁于漫長的等待，讓等待變成期待。