作為一名"偽全棧工程師"方仿，曾經也做過一些UI、UE的工作佩谣，不過最近兩年這在方面就做的很少了胶惰，這幾天整理過去的資料，翻到了些過去的總結鞋拟，今天結合現(xiàn)在的經驗重新整理一下，供大家參考。
1. Loading是什么嗦篱？
Loading一詞原意為：裝載、裝填幌缝。
在UE設計中灸促，Loading是指可包含圖像、聲音涵卵、視頻浴栽、游戲等元素的加載動畫，不過我更習慣于稱它為“過門”轿偎，因為我覺得戲曲中的過門更形象的解釋了Loading的意義典鸡。
Loading的出現(xiàn)和網絡狀況、設備性能贴硫、程序性能等都有關系椿每，我覺得得感謝第一個想到它的設計師。
許多研究都表明英遭，用戶能夠忍受的最長等待的時間在6-8秒之間间护，簡單說8秒是一個等待的臨界值，如果一個頁面或功能打開速度在8秒以上挖诸，那么大部分訪問者都會離之而去汁尺；如果等待12秒以上網頁還是沒有載入，那么99%以上的用戶會選擇關閉多律。但是如果在等待載入期間痴突，網站能夠向用戶顯示反饋消息搂蜓，比如一個進度條，那么用戶可以忍受的時間就會延長到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
當用戶在首次打開應用或網站時出現(xiàn)的Loading冠骄，通常我們說到的啟動畫面其實就屬于這一類。這類的Loading通常比較醒目瘩绒、突出猴抹，設計師在設計此類Loading時往往會格外動一番腦筋，既要新穎以避免平淡锁荔，又要考慮與主頁面的聯(lián)系，甚至要暗示出主頁面的藝術效果蝙砌。有的初始Loading設計形式新穎阳堕，讓瀏覽者滿懷期待。也有的Loading設計平實單純择克，卻也能讓瀏覽者靜心等待恬总。
這類loading也可以巧妙的植入廣告或者理念。
2.2. 切換Loading
指一個頁面切換到另一個頁面時相互鏈接過程中的Loading肚邢，也稱作跳轉Loading壹堰，此類Loading往往是貫穿相鄰幾個頁面，一般設計得比初始化Loading要簡潔骡湖，講究與頁面間動畫效果的呼應連貫贱纠。
2.3. 加載Loading
指在同一頁面內部對圖片、視頻响蕴、數(shù)據等內容進行加載過程中出現(xiàn)的Loading谆焊。此類Loading宜小巧精致，不必太花哨浦夷。常見的幾種設計是：細長的進度條辖试，寬大的色塊辜王，以及沿圓周運動的漸變色帶等。
2.4. 動作Loading
在一個頁面內觸發(fā)了一個需等待的動作罐孝，這個過程中使用到的Loading稱為動作Loading呐馆。比如進行文件上傳時的進度條，比如進行保存時的等待框莲兢。
這類設計需要醒目提示汹来，讓用戶清楚動作已經觸發(fā)，請等待怒见，不要多次操作俗慈。可以有效的避免二次提交遣耍。
3. Loading的表現(xiàn)形式
3.1. 抽象表現(xiàn)
此類Loading設計以抽象的加載數(shù)據和進度條為設計元素進行設計闺阱，視覺效果簡潔而直觀。常見的形式是一根進度條舵变，它的上方配以數(shù)據百分比顯示加載進度酣溃。此類Loading是在常規(guī)Loading形式的基礎上，對數(shù)字的字體形式以及圖形效果進行設計變化纪隙。
3.2. 具象表現(xiàn)形式
此類Loading多用GIF動畫圖片實現(xiàn)赊豌，目前也比較流行，在加載過程中循環(huán)播放動畫绵咱。動畫形象往往以卡通物體碘饼、人物、動物悲伶。這類形式新穎艾恼、有趣，可以在短時間內吸引用戶麸锉，特別是年輕用戶的注意力钠绍。如在可口可樂的一個產品網站中，Loading動畫設計為一個胖呼呼的卡通人物在不停地轉著呼拉圈花沉，人物的動作姿態(tài)生動而有趣柳爽，富有活力。而在另一個設計公司的網站里碱屁，首先進入我們視野的是一個小巧的機器人形象磷脯，它從頁面左側跳出來，推動著纖細的邊框一直到最右邊忽媒，在這個過程中Loading其后的動畫頁面争拐，該網站利用卡通角色設計的Loading別具創(chuàng)意，富有吸引力。
4. Loading的設計規(guī)范
優(yōu)秀的Loading設計是獨具匠心的架曹，而不僅僅是Loading代碼的拷貝隘冲，只注重頁面效果而忽略細節(jié)設計的設計師不能算是優(yōu)秀的。
一般來說Loading設計應符合以下幾點绑雄。
4.1. 進度清晰展辞、明了
進度清晰的Loading，可以幫助用戶預估等待時間万牺，幫助他們保持耐心罗珍，以免出現(xiàn)在頁面加載完成的前一秒轉換頻道的情況。值得一提的是脚粟，統(tǒng)計數(shù)字表明覆旱，互聯(lián)網用戶可以接受的等待時間一般在30秒以內。這就需要設計師在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. 文件大小
受設備毒嫡、網速等因素的限制，Loading的設計有著許多限制幻梯。這主要體現(xiàn)在文件的大小上兜畸。因此努释，Loading作為一個預加載動畫，其自身的動畫只能簡化咬摇，從而減小文件量伐蒂，節(jié)約時間。
5.2. 提高真正的速度
Loading雖然在某個程度上可以緩解用戶等待時間過長的問題肛鹏，但這不是一個根本的解決辦法逸邦，要讓用戶獲得更好的體驗，就需要從根入手在扰，真正解決程序設計缕减、網絡速度、服務器性能等多方面的問題芒珠，從而使用戶能夠快速得到相應而不是Loading桥狡。
Loading不是萬能的，也不適合大量使用妓局，在恰當?shù)牡胤脚紶柺褂脮纬筛玫挠脩趔w驗总放，但這個度，就需要你自己總結經驗了好爬。
祝工作順利局雄！
