殷昕悅

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

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

一、loading動(dòng)畫(huà)的目的與作用

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

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

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

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

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

二、loading動(dòng)畫(huà)的主要類(lèi)型

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

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

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

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

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

三、loading動(dòng)畫(huà)的設(shè)計(jì)要素

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

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

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

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

（四）安撫情緒。作為UI設(shè)計(jì)的一部分，loading動(dòng)畫(huà)的設(shè)計(jì)一定要以用戶(hù)體驗(yàn)為第一要素，作為loading動(dòng)畫(huà)最主要的就是緩解用戶(hù)等待時(shí)間的焦慮。減少用戶(hù)的焦慮心理主要有以下幾點(diǎn)。

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

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

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

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

四、loading動(dòng)畫(huà)的細(xì)節(jié)提升

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

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

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

五、結(jié)語(yǔ)

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