作者：?李惠丸
當(dāng)我們進(jìn)入一個(gè)應(yīng)用或在應(yīng)用中切換跳轉(zhuǎn)時(shí)，經(jīng)常會(huì)遇到網(wǎng)絡(luò)延遲或頁面內(nèi)存過大導(dǎo)致加載過慢需要用戶等待幾秒的場景淹遵，而這些場景是提升產(chǎn)品體驗(yàn)的重要環(huán)節(jié)履澳，也是移動(dòng)應(yīng)用設(shè)計(jì)過程中需要考慮的重要因素。
我們需要針對(duì)不同的加載內(nèi)容設(shè)計(jì)合適的加載策略麦箍，而加載策略會(huì)受到加載內(nèi)容的大小瓦哎、內(nèi)容的數(shù)量、網(wǎng)速等因素的影響。針對(duì)這些影響因素蒋譬，我們需要設(shè)計(jì)對(duì)應(yīng)的加載形式割岛。常見的形式有全頁面加載、占位符加載犯助、分步加載癣漆、懶加載、進(jìn)度條加載剂买，以及預(yù)加載等幾種形式惠爽。
全頁面加載
全頁面加載，顧名思義是將整個(gè)頁面一起加載瞬哼，這是頁面加載最原始的狀態(tài)婚肆，當(dāng)頁面元素較多時(shí)，這種載入方式需要將所有內(nèi)容都下載后才顯示內(nèi)容坐慰，內(nèi)容呈現(xiàn)的等待時(shí)間會(huì)變得很長较性。在加載時(shí)頁面會(huì)處于全空白或展示一個(gè)gif，比較常見的就是頁面中央的菊花gif圖结胀。
由于這種加載gif帶有時(shí)間不確定性赞咙，如果等待時(shí)間過長，用戶很容易失去耐心而離開糟港。目前很多app將這種加載動(dòng)畫設(shè)計(jì)成許多有創(chuàng)意的形式來留住用戶的注意力攀操。例如猩便利使用自帶品牌形象設(shè)計(jì)的一個(gè)十分滑稽可愛的猩猩gif圖，遇到網(wǎng)絡(luò)加載過慢時(shí)可以很好的緩解用戶焦慮秸抚。58同城也使用了帶有自身品牌特色的加載gif速和，形式十分有趣。
占位色塊加載
占位色塊加載就是在頁面即將出現(xiàn)的位置加載占位色塊耸别，等到數(shù)據(jù)加載完成后將數(shù)據(jù)陸續(xù)填進(jìn)色塊健芭，給用戶加載很快的感覺，體驗(yàn)會(huì)比全頁面加載流暢秀姐。這種方式適合內(nèi)容排版布局固定的頁面慈迈，先加載大致輪廓，再加載細(xì)節(jié)省有。但是需要注意的是痒留，如果使用占位色塊的頁面改版了，占位圖也需要進(jìn)行對(duì)應(yīng)的更新蠢沿，不然加載前后有閃屏的感覺伸头。
分步加載
分步加載是占位色塊加載的優(yōu)化形式，為了讓用戶能盡快地看到部分內(nèi)容舷蟀，了解頁面的基本信息恤磷。在多元素的頁面中面哼，頁面先載入基本框架和內(nèi)存較小的文字內(nèi)容，再加載較大的圖片扫步、視頻等內(nèi)容魔策，讓用戶先看到部分內(nèi)容，其他內(nèi)容再逐步加載河胎，用戶在網(wǎng)速不夠快時(shí)也能提前預(yù)覽即將出現(xiàn)的內(nèi)容闯袒，這就是分步加載。
在分步加載的頁面中游岳，當(dāng)只加載了部分內(nèi)容時(shí)政敢，未加載的內(nèi)容會(huì)對(duì)頁面的美觀程度產(chǎn)生影響，同時(shí)也會(huì)影響用戶對(duì)頁面內(nèi)容的理解胚迫。目前有許多app會(huì)在默認(rèn)圖上設(shè)計(jì)一些有品牌識(shí)別的圖片來代替未加載的圖片喷户，使界面在未加載圖片內(nèi)容時(shí)，也能有較好的展示效果晌区，讓用戶更好地理解界面含義摩骨，同時(shí)也能更好的傳達(dá)品牌。
懶加載
懶加載朗若，顧名思義就是一種偷懶的加載方式恼五，用戶打開app時(shí)僅加載用戶可以看到的區(qū)域，看不到區(qū)域則需要通過用戶的瀏覽行為來喚起內(nèi)容的加載哭懈。例如當(dāng)頁面滾動(dòng)到底部盡頭或下拉頁面時(shí)灾馒，才會(huì)自動(dòng)加載內(nèi)容。
懶加載一般用在無盡的信息流頁面中遣总。這種方式能有效的提升頁面的打開速度睬罗，讓用戶可以順暢地瀏覽而不用一直等待加載。在進(jìn)行懶加載時(shí)旭斥，一次要加載的內(nèi)容數(shù)量和加載時(shí)間段一般會(huì)根據(jù)頁面展示內(nèi)容的大小容达、高度和用戶的瀏覽速度來決定。
預(yù)加載
預(yù)加載是和懶加載恰恰相反的加載方式垂券，它不僅不會(huì)偷懶花盐，而且會(huì)提前準(zhǔn)備好你即將瀏覽的內(nèi)容。當(dāng)a頁面加載完成時(shí)它并沒有停下來菇爪，而是悄悄的加載你即將打開的b頁面算芯，在你打開b頁面時(shí)可能c頁面也一起準(zhǔn)備好了。
預(yù)加載一直走在用戶前面凳宙，給用戶一種無縫連接的感覺熙揍，享受到極快的加載速度。
而使用這種方式服務(wù)器的壓力會(huì)增加氏涩，用戶也會(huì)耗費(fèi)更多流量届囚。目前測試了許多app只看到今日頭條使用了這種加載方式有梆，在網(wǎng)絡(luò)正常下打開app，斷網(wǎng)后依然可以正常瀏覽內(nèi)頁文字內(nèi)容意系，文章底部會(huì)提示當(dāng)前無網(wǎng)絡(luò)狀態(tài)淳梦。
進(jìn)度條加載
進(jìn)度條相信大家都不陌生，最常見的就是在下載頁面昔字，我們可以清楚的看到當(dāng)前進(jìn)度，反饋十分明確首繁。目前許多app將進(jìn)度條運(yùn)用在app的加載頁作郭，讓用戶可以清楚的查看當(dāng)前頁面的加載進(jìn)度，來了解需要等待的時(shí)長弦疮。最常見的就是google瀏覽器夹攒，不管是web還是手機(jī)端許多場景都使用了這種加載方式，體驗(yàn)十分友好胁塞。
混合加載模式
為了能讓產(chǎn)品有一個(gè)流暢的體驗(yàn)咏尝，很多app會(huì)根據(jù)產(chǎn)品的各種不同場景來組合使用不同加載方式。上文中舉例的產(chǎn)品都使用了不止一種加載手段啸罢。例如编检，enjoy打開時(shí)首先進(jìn)行全頁面加載，然后進(jìn)行分步加載扰才，打開內(nèi)容時(shí)則會(huì)出現(xiàn)進(jìn)度條加載允懂。所以我們在設(shè)計(jì)加載方案時(shí)需要結(jié)合產(chǎn)品的場景來決定對(duì)應(yīng)的加載方式。
總結(jié)
全頁面加載
優(yōu)點(diǎn)：適用于各個(gè)場景
缺點(diǎn)：由于時(shí)間的不確定性衩匣，加載過慢時(shí)容易流失用戶
占位色塊加載
優(yōu)點(diǎn)：適合有固定布局的頁面蕾总，體驗(yàn)比全頁面加載流暢
缺點(diǎn)：不適合布局多變的頁面
分步加載
優(yōu)點(diǎn)：先加載頁面框架和文字信息，在網(wǎng)速較慢時(shí)能提前預(yù)覽即將出現(xiàn)的內(nèi)容
缺點(diǎn)：只加載了部分內(nèi)容的頁面會(huì)對(duì)整體美觀度產(chǎn)生影響琅捏，也會(huì)影響用戶對(duì)頁面內(nèi)容的理解
懶加載
優(yōu)點(diǎn)：只加載用戶看得到的內(nèi)容生百，頁面加載速度快，服務(wù)器壓力較小柄延，節(jié)省用戶流量蚀浆，體驗(yàn)較好
缺點(diǎn)：當(dāng)網(wǎng)絡(luò)狀況不佳時(shí)可能會(huì)出現(xiàn)體驗(yàn)不流暢，加載延遲等狀況
預(yù)加載
優(yōu)點(diǎn)：預(yù)先加載即將出現(xiàn)的內(nèi)容拦焚，用戶可以順暢的在應(yīng)用中交互蜡坊，享受到極快的加載速度
缺點(diǎn)：服務(wù)器壓力增加，用戶會(huì)耗費(fèi)更多流量
進(jìn)度條加載
優(yōu)點(diǎn)：反饋明確赎败，清晰易懂
缺點(diǎn)：頁面無內(nèi)容秕衙，美觀度較低
混合加載
優(yōu)點(diǎn)：根據(jù)不同場景來設(shè)計(jì)，體驗(yàn)升級(jí)
缺點(diǎn)：需要對(duì)各場景制定對(duì)應(yīng)的加載規(guī)范僵刮，保證交互一致性
