UI欄目 撰稿： Jing（微信公衆号：IQS開發者社群）
随着5G時代的來臨，網頁端或移動端的運作也愈加快速，但當遇到大量頁面内容加載、下載下傳檔案過大時，依然會導緻頁面跳轉或加載出現延遲，這時不可避免的需要使用者等待。那麼，如何緩解使用者由于等待而産生的消極情緒，如何轉移使用者注意力，便成了UI/UX設計師急需要去解決的問題。
從目前已知的頁面加載形式上來看，動态效果的頁面可以有效的提高使用者對因果關系和指向性的感覺，提升使用者的興趣度，讓使用者能享受浏覽過程。是以動态加載也成為了網絡應用中不可或缺的元素之一。
由于動态加載頁面能夠有效打破原有界面中時間與空間的限制，承載更多更強烈的表現形式，是以其設計方向也逐漸由原來單一化、批量化的模式轉向更為豐富多彩的情感化設計模式，其功能性上也不僅僅隻是為了提醒加載進度，而是被賦予了吸引注意力、緩解情緒、挽留使用者、表達内涵等更多元化的設計理念在裡面，并通過新穎的動畫加載模式去表現。
本文歸納總結了五種比較常見的加載動畫形式分别為進度條型動畫、結果導向型動畫、節奏型動畫、産品導向型動畫、趣味創意型動畫。
1. 進度條型動畫
進度條是目前最經典的頁面加載動畫形式，其界面簡易，直覺，主要的作用就是告訴使用者等待的時長，并向使用者展示頁面加載運作到了哪一個階段。
圖1
除了以上（圖1）中所展示的基本線性外，不少設計師也會對進度條的形式采取一些變形設計，例如環形或者圓形等其他圖案并配備百分比提醒，以簡潔明了的方式告知使用者需要等待的時長，幹預使用者的心理預期，一定程度上緩解由于等待産生的焦慮心理，例如下圖（圖2）所示：
圖2
2. 結果導向型動畫
這類加載動畫的變化過程主要是為結果服務的，最終導向為加載成功的結果。較為典型的加載動畫形式有沙漏漏下、水杯倒滿、電池充飽等。這是一種兼具提醒以及提高使用者期待值的動畫表現形式，它即将加載進度融合在圖形變化之中，起到明确的提示作用，又利用常用物品形象拉近與使用者的距離，安撫使用者情緒，實作與使用者在情感層面的交流。
圖3
圖4
3. 節奏型動畫
從美學角度來說，節奏是一種“美”的形态，具備營造美感的視覺規律。将其引入近加載動畫設計當中，其實就是利用這一視覺規律，讓使用者融入進去，打破原有的時間節奏，呈現新的視覺感受，削弱等待的沉悶感。
圖5
圖6
通過利用相同圖像在一定時間内完成相同運動軌迹變化，比如跳躍、旋轉、循環、位移等動作，可以有效引導使用者在觀看過程中産生并進入新的節奏韻律中去。同時，規律運動的時間也需要嚴格把控，不宜過短影響視覺表現力，使其反而産生催促情緒；也不宜過長影響時間節奏，通過研究一般一個運動周期在2-4秒是最為合适。如圖例所示：
圖7
圖8
另外，利用不同圖形的變化産生的一定空間的落差，圖形的遞增或遞減都遵循規律的運動軌迹，比如形變，單個圖像的形态變化，如（圖9）所示。或是在一定空間範圍内嚴格按照一定的運動軌迹消散或聚攏，如（圖10）所示，這些都能讓使用者對空間上的變化産生期待，進而産生愉快的視覺觀感。
圖9
圖10
4. 産品導向型動畫
設計師通過結合企業的産品、品牌特色等相關内容，對加載頁面進行設計，展示産品或者企業文化，加深使用者對産品、企業甚至是品牌的印象，提高産品知名度。如（圖11）的星巴克所做的加載頁動畫，形象的把産品外形輪廓融入到了加載頁面中，并增加一定規律的系列動作，輕松有趣的引領使用者直接認識了産品，并加深了品牌印象。
圖11
5. 趣味創意型動畫
趣味創意型的加載動畫是時下的一個設計趨勢，它能将嚴肅、冰冷的界面語言轉化為生動活潑的互動語言，讓有趣的、“魔性”的、“無厘頭”的畫面語言給使用者帶來樂趣。其表現的形式也更為豐富，可以通過故事化、拟人化、誇張化的方法大大提升使用者體驗的愉悅感，給使用者留下深刻的印象，削弱使用者等待意識，讓等待變為一種享受。
圖12
圖13
圖14
綜上所述，加載動畫作為設計師用于留住使用者的重要手段之一，無論是簡單明了的動态進度條還是充滿趣味诙諧的動畫頁面，其目的都是立足于使用者情感之上，利用加載的動态效果來改變緩慢的時間節奏，解決由于網絡不流暢導緻的頁面無法及時顯示的問題，使其能在等待過程中減少焦慮感，提升使用者體驗，增強品牌印象。
注：以上圖例均來自www.pinterest.com，僅供參考。
·end·