淺析Loading動畫的設計要素

殷昕悅

（南京信息工程大學 江蘇 南京 210000）

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

一、loading動畫的目的與作用

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

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

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

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

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

二、loading動畫的主要類型

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

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

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

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

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

三、loading動畫的設計要素

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

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

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

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

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

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

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

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

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

四、loading動畫的細節提升

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

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

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

五、結語

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