文章針對APP加載狀態(tài)展開了較為系統(tǒng)的分析總結(jié)，希望能夠?qū)δ阌兴苡谩?/p>

當我們進入一個應(yīng)用或在應(yīng)用中切換跳轉(zhuǎn)時，經(jīng)常會遇到網(wǎng)絡(luò)延遲或頁面內(nèi)存過大導(dǎo)致加載過慢需要用戶等待幾秒的場景，而這些場景是提升產(chǎn)品體驗的重要環(huán)節(jié)，也是移動應(yīng)用設(shè)計過程中需要考慮的重要因素。

我們需要針對不同的加載內(nèi)容設(shè)計合適的加載策略，而加載策略會受到加載內(nèi)容的大小、內(nèi)容的數(shù)量、網(wǎng)速等因素的影響。針對這些影響因素，我們需要設(shè)計對應(yīng)的加載形式。常見的形式有全頁面加載、占位符加載、分步加載、懶加載、進度條加載，以及預(yù)加載等幾種形式。

全頁面加載

全頁面加載，顧名思義是將整個頁面一起加載，這是頁面加載最原始的狀態(tài)，當頁面元素較多時，這種載入方式需要將所有內(nèi)容都下載后才顯示內(nèi)容，內(nèi)容呈現(xiàn)的等待時間會變得很長。在加載時頁面會處于全空白或展示一個gif，比較常見的就是頁面中央的菊花gif圖。

由于這種加載gif帶有時間不確定性，如果等待時間過長，用戶很容易失去耐心而離開。目前很多app將這種加載動畫設(shè)計成許多有創(chuàng)意的形式來留住用戶的注意力。例如猩便利使用自帶品牌形象設(shè)計的一個十分滑稽可愛的猩猩gif圖，遇到網(wǎng)絡(luò)加載過慢時可以很好的緩解用戶焦慮。58同城也使用了帶有自身品牌特色的加載gif，形式十分有趣。

占位色塊加載

占位色塊加載就是在頁面即將出現(xiàn)的位置加載占位色塊，等到數(shù)據(jù)加載完成后將數(shù)據(jù)陸續(xù)填進色塊，給用戶加載很快的感覺，體驗會比全頁面加載流暢。這種方式適合內(nèi)容排版布局固定的頁面，先加載大致輪廓，再加載細節(jié)。但是需要注意的是，如果使用占位色塊的頁面改版了，占位圖也需要進行對應(yīng)的更新，不然加載前后有閃屏的感覺。

分步加載

分步加載是占位色塊加載的優(yōu)化形式，為了讓用戶能盡快地看到部分內(nèi)容，了解頁面的基本信息。在多元素的頁面中，頁面先載入基本框架和內(nèi)存較小的文字內(nèi)容，再加載較大的圖片、視頻等內(nèi)容，讓用戶先看到部分內(nèi)容，其他內(nèi)容再逐步加載，用戶在網(wǎng)速不夠快時也能提前預(yù)覽即將出現(xiàn)的內(nèi)容，這就是分步加載。

在分步加載的頁面中，當只加載了部分內(nèi)容時，未加載的內(nèi)容會對頁面的美觀程度產(chǎn)生影響，同時也會影響用戶對頁面內(nèi)容的理解。目前有許多app會在默認圖上設(shè)計一些有品牌識別的圖片來代替未加載的圖片，使界面在未加載圖片內(nèi)容時，也能有較好的展示效果，讓用戶更好地理解界面含義，同時也能更好的傳達品牌。

懶加載

懶加載，顧名思義就是一種偷懶的加載方式，用戶打開app時僅加載用戶可以看到的區(qū)域，看不到區(qū)域則需要通過用戶的瀏覽行為來喚起內(nèi)容的加載。例如當頁面滾動到底部盡頭或下拉頁面時，才會自動加載內(nèi)容。

懶加載一般用在無盡的信息流頁面中。這種方式能有效的提升頁面的打開速度，讓用戶可以順暢地瀏覽而不用一直等待加載。在進行懶加載時，一次要加載的內(nèi)容數(shù)量和加載時間段一般會根據(jù)頁面展示內(nèi)容的大小、高度和用戶的瀏覽速度來決定。

預(yù)加載

預(yù)加載是和懶加載恰恰相反的加載方式，它不僅不會偷懶，而且會提前準備好你即將瀏覽的內(nèi)容。當a頁面加載完成時它并沒有停下來，而是悄悄的加載你即將打開的b頁面，在你打開b頁面時可能c頁面也一起準備好了。

預(yù)加載一直走在用戶前面，給用戶一種無縫連接的感覺，享受到極快的加載速度。

而使用這種方式服務(wù)器的壓力會增加，用戶也會耗費更多流量。目前測試了許多app只看到今日頭條使用了這種加載方式，在網(wǎng)絡(luò)正常下打開app，斷網(wǎng)后依然可以正常瀏覽內(nèi)頁文字內(nèi)容，文章底部會提示當前無網(wǎng)絡(luò)狀態(tài)。

進度條加載

進度條相信大家都不陌生，最常見的就是在下載頁面，我們可以清楚的看到當前進度，反饋十分明確。目前許多app將進度條運用在app的加載頁，讓用戶可以清楚的查看當前頁面的加載進度，來了解需要等待的時長。最常見的就是google瀏覽器，不管是web還是手機端許多場景都使用了這種加載方式，體驗十分友好。

混合加載模式

為了能讓產(chǎn)品有一個流暢的體驗，很多app會根據(jù)產(chǎn)品的各種不同場景來組合使用不同加載方式。上文中舉例的產(chǎn)品都使用了不止一種加載手段。例如，enjoy打開時首先進行全頁面加載，然后進行分步加載，打開內(nèi)容時則會出現(xiàn)進度條加載。所以我們在設(shè)計加載方案時需要結(jié)合產(chǎn)品的場景來決定對應(yīng)的加載方式。

總結(jié)

全頁面加載

• 優(yōu)點：適用于各個場景
• 缺點：由于時間的不確定性，加載過慢時容易流失用戶

占位色塊加載

• 優(yōu)點：適合有固定布局的頁面，體驗比全頁面加載流暢
• 缺點：不適合布局多變的頁面

分步加載

• 優(yōu)點：先加載頁面框架和文字信息，在網(wǎng)速較慢時能提前預(yù)覽即將出現(xiàn)的內(nèi)容
• 缺點：只加載了部分內(nèi)容的頁面會對整體美觀度產(chǎn)生影響，也會影響用戶對頁面內(nèi)容的理解

懶加載

• 優(yōu)點：只加載用戶看得到的內(nèi)容，頁面加載速度快，服務(wù)器壓力較小，節(jié)省用戶流量，體驗較好
• 缺點：當網(wǎng)絡(luò)狀況不佳時可能會出現(xiàn)體驗不流暢，加載延遲等狀況

預(yù)加載

• 優(yōu)點：預(yù)先加載即將出現(xiàn)的內(nèi)容，用戶可以順暢的在應(yīng)用中交互，享受到極快的加載速度
• 缺點：服務(wù)器壓力增加，用戶會耗費更多流量

進度條加載

• 優(yōu)點：反饋明確，清晰易懂
• 缺點：頁面無內(nèi)容，美觀度較低

混合加載

• 優(yōu)點：根據(jù)不同場景來設(shè)計，體驗升級
• 缺點：需要對各場景制定對應(yīng)的加載規(guī)范，保證交互一致性

本文由 @?李惠丸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議