作為一名"偽全棧工程師"，曾經(jīng)也做過一些UI、UE的工作，不過最近兩年這在方面就做的很少了，這幾天整理過去的資料，翻到了些過去的總結(jié)，今天結(jié)合現(xiàn)在的經(jīng)驗重新整理一下，供大家參考。
1. Loading是什么？
Loading一詞原意為：裝載、裝填。
在UE設計中，Loading是指可包含圖像、聲音、視頻、游戲等元素的加載動畫，不過我更習慣于稱它為“過門”，因為我覺得戲曲中的過門更形象的解釋了Loading的意義。
Loading的出現(xiàn)和網(wǎng)絡狀況、設備性能、程序性能等都有關系，我覺得得感謝第一個想到它的設計師。
許多研究都表明，用戶能夠忍受的最長等待的時間在6-8秒之間，簡單說8秒是一個等待的臨界值，如果一個頁面或功能打開速度在8秒以上，那么大部分訪問者都會離之而去；如果等待12秒以上網(wǎng)頁還是沒有載入，那么99%以上的用戶會選擇關閉。但是如果在等待載入期間，網(wǎng)站能夠向用戶顯示反饋消息，比如一個進度條，那么用戶可以忍受的時間就會延長到38秒，由此Loading出現(xiàn)了。
從UED（用戶體驗設計）的角度來看，Loading設計則是一個充滿趣味性、凝聚創(chuàng)意的工作，本文將從UED的角度進行探討分析。
2. Loading的應用場景
隨著計算機軟件對用戶體驗的重視，Loading已被廣泛應用于各種B/S、C/S、APP系統(tǒng)中，甚至是操作系統(tǒng)，總之Loading的身影隨處可見。從Loading的應用場景上區(qū)分，大致有以下類別：
2.1. 初始化Loading
當用戶在首次打開應用或網(wǎng)站時出現(xiàn)的Loading，通常我們說到的啟動畫面其實就屬于這一類。這類的Loading通常比較醒目、突出，設計師在設計此類Loading時往往會格外動一番腦筋，既要新穎以避免平淡，又要考慮與主頁面的聯(lián)系，甚至要暗示出主頁面的藝術效果。有的初始Loading設計形式新穎，讓瀏覽者滿懷期待。也有的Loading設計平實單純，卻也能讓瀏覽者靜心等待。
這類loading也可以巧妙的植入廣告或者理念。
2.2. 切換Loading
指一個頁面切換到另一個頁面時相互鏈接過程中的Loading，也稱作跳轉(zhuǎn)Loading，此類Loading往往是貫穿相鄰幾個頁面，一般設計得比初始化Loading要簡潔，講究與頁面間動畫效果的呼應連貫。
2.3. 加載Loading
指在同一頁面內(nèi)部對圖片、視頻、數(shù)據(jù)等內(nèi)容進行加載過程中出現(xiàn)的Loading。此類Loading宜小巧精致，不必太花哨。常見的幾種設計是：細長的進度條，寬大的色塊，以及沿圓周運動的漸變色帶等。
2.4. 動作Loading
在一個頁面內(nèi)觸發(fā)了一個需等待的動作，這個過程中使用到的Loading稱為動作Loading。比如進行文件上傳時的進度條，比如進行保存時的等待框。
這類設計需要醒目提示，讓用戶清楚動作已經(jīng)觸發(fā)，請等待，不要多次操作?？梢杂行У谋苊舛翁峤弧?/p>
3. Loading的表現(xiàn)形式
3.1. 抽象表現(xiàn)
此類Loading設計以抽象的加載數(shù)據(jù)和進度條為設計元素進行設計，視覺效果簡潔而直觀。常見的形式是一根進度條，它的上方配以數(shù)據(jù)百分比顯示加載進度。此類Loading是在常規(guī)Loading形式的基礎上，對數(shù)字的字體形式以及圖形效果進行設計變化。
3.2. 具象表現(xiàn)形式
此類Loading多用GIF動畫圖片實現(xiàn)，目前也比較流行，在加載過程中循環(huán)播放動畫。動畫形象往往以卡通物體、人物、動物。這類形式新穎、有趣，可以在短時間內(nèi)吸引用戶，特別是年輕用戶的注意力。如在可口可樂的一個產(chǎn)品網(wǎng)站中，Loading動畫設計為一個胖呼呼的卡通人物在不停地轉(zhuǎn)著呼拉圈，人物的動作姿態(tài)生動而有趣，富有活力。而在另一個設計公司的網(wǎng)站里，首先進入我們視野的是一個小巧的機器人形象，它從頁面左側(cè)跳出來，推動著纖細的邊框一直到最右邊，在這個過程中Loading其后的動畫頁面，該網(wǎng)站利用卡通角色設計的Loading別具創(chuàng)意，富有吸引力。
4. Loading的設計規(guī)范
優(yōu)秀的Loading設計是獨具匠心的，而不僅僅是Loading代碼的拷貝，只注重頁面效果而忽略細節(jié)設計的設計師不能算是優(yōu)秀的。
一般來說Loading設計應符合以下幾點。
4.1. 進度清晰、明了
進度清晰的Loading，可以幫助用戶預估等待時間，幫助他們保持耐心，以免出現(xiàn)在頁面加載完成的前一秒轉(zhuǎn)換頻道的情況。值得一提的是，統(tǒng)計數(shù)字表明，互聯(lián)網(wǎng)用戶可以接受的等待時間一般在30秒以內(nèi)。這就需要設計師在Loading設計中充分考慮用戶心理，或是以數(shù)字顯示進程，或是以圖像形式顯示進度，從而方便用戶估計時間，耐心等待。
4.2. 形式新穎、有趣
Loading動畫如果設計得新穎、有趣，可以吸引用戶的目光，消磨等待時間。常規(guī)的Loading設計往往是套用代碼，生成的只是普通的進度條伸展動畫，缺乏特色，久視易導致視覺疲勞。而有創(chuàng)意的Loading設計，則往往將進度條的伸展變?yōu)楦骶咛厣膭赢?，使原本枯燥乏味的等待變成了值得期待的觀賞活動。
?
4.3. 與頁面整體視覺風格統(tǒng)一
Loading設計是用戶界面整體設計中十分重要的一環(huán)，Loading不僅是主頁面的開場白，也是各頁面之間聯(lián)系的橋梁。在設計時既要考慮效果突出，同時也要兼顧整體頁面風格，相互聯(lián)系，保證視覺風格的統(tǒng)一。
5. Loading的問題
5.1. 文件大小
受設備、網(wǎng)速等因素的限制，Loading的設計有著許多限制。這主要體現(xiàn)在文件的大小上。因此，Loading作為一個預加載動畫，其自身的動畫只能簡化，從而減小文件量，節(jié)約時間。
5.2. 提高真正的速度
Loading雖然在某個程度上可以緩解用戶等待時間過長的問題，但這不是一個根本的解決辦法，要讓用戶獲得更好的體驗，就需要從根入手，真正解決程序設計、網(wǎng)絡速度、服務器性能等多方面的問題，從而使用戶能夠快速得到相應而不是Loading。
Loading不是萬能的，也不適合大量使用，在恰當?shù)牡胤脚紶柺褂脮纬筛玫挠脩趔w驗，但這個度，就需要你自己總結(jié)經(jīng)驗了。
祝工作順利！
