文章針對APP載入狀態展開了較為系統的分析總結， 希望能夠對你有所受用。
當我們進入一個應用或在應用中切換跳轉時， 經常會遇到網路延遲或頁面記憶體過大導致載入過慢需要使用者等待幾秒的場景，
我們需要針對不同的載入內容設計合適的載入策略， 而載入策略會受到載入內容的大小、內容的數量、網速等因素的影響。 針對這些影響因素， 我們需要設計對應的載入形式。 常見的形式有全頁面載入、預留位置載入、分步載入、懶載入、進度條載入， 以及預載入等幾種形式。
全頁面載入全頁面載入， 顧名思義是將整個頁面一起載入， 這是頁面載入最原始的狀態， 當頁面元素較多時， 這種載入方式需要將所有內容都下載後才顯示內容， 內容呈現的等待時間會變得很長。
由於這種載入gif帶有時間不確定性， 如果等待時間過長， 用戶很容易失去耐心而離開。 目前很多app將這種載入動畫設計成許多有創意的形式來留住用戶的注意力。
占位色塊載入占位色塊載入就是在頁面即將出現的位置載入占位元色塊，
分步載入是占位色塊載入的優化形式， 為了讓使用者能儘快地看到部分內容， 瞭解頁面的基本資訊。 在多元素的頁面中， 頁面先載入基本框架和記憶體較小的文字內容， 再載入較大的圖片、視頻等內容， 讓使用者先看到部分內容， 其他內容再逐步載入， 使用者在網速不夠快時也能提前預覽即將出現的內容， 這就是分步載入。
在分步載入的頁面中，當只載入了部分內容時，未載入的內容會對頁面的美觀程度產生影響，同時也會影響使用者對頁面內容的理解。目前有許多app會在默認圖上設計一些有品牌識別的圖片來代替未載入的圖片，使介面在未載入圖片內容時，也能有較好的展示效果，讓使用者更好地理解介面含義，同時也能更好的傳達品牌。
懶載入懶載入，顧名思義就是一種偷懶的載入方式，使用者打開app時僅載入使用者可以看到的區域，看不到區域則需要通過使用者的流覽行為來喚起內容的載入。例如當頁面滾動到底部盡頭或下拉頁面時，才會自動載入內容。
懶載入一般用在無盡的資訊流頁面中。這種方式能有效的提升頁面的打開速度，讓使用者可以順暢地流覽而不用一直等待載入。在進行懶載入時，一次要載入的內容數量和載入時間段一般會根據頁面展示內容的大小、高度和使用者的流覽速度來決定。
預載入預載入是和懶載入恰恰相反的載入方式，它不僅不會偷懶，而且會提前準備好你即將流覽的內容。當a頁面載入完成時它並沒有停下來，而是悄悄的載入你即將打開的b頁面，在你打開b頁面時可能c頁面也一起準備好了。
預載入一直走在用戶前面，給用戶一種無縫連接的感覺，享受到極快的載入速度。
而使用這種方式伺服器的壓力會增加，用戶也會耗費更多流量。目前測試了許多app只看到今日頭條使用了這種載入方式，在網路正常下打開app，斷網後依然可以正常流覽內頁文字內容，文章底部會提示當前無網路狀態。
進度條載入進度條相信大家都不陌生，最常見的就是在下載頁面，我們可以清楚的看到當前進度，回饋十分明確。目前許多app將進度條運用在app的載入頁，讓用戶可以清楚的查看當前頁面的載入進度，來瞭解需要等待的時長。最常見的就是google流覽器，不管是web還是手機端許多場景都使用了這種載入方式，體驗十分友好。
混合載入模式為了能讓產品有一個流暢的體驗，很多app會根據產品的各種不同場景來組合使用不同載入方式。上文中舉例的產品都使用了不止一種載入手段。例如，enjoy打開時首先進行全頁面載入，然後進行分步載入，打開內容時則會出現進度條載入。所以我們在設計載入方案時需要結合產品的場景來決定對應的載入方式。
總結全頁面載入 優點：適用於各個場景缺點：由於時間的不確定性，載入過慢時容易流失用戶占位色塊載入 優點：適合有固定佈局的頁面，體驗比全頁面載入流暢缺點：不適合佈局多變的頁面分步載入 優點：先載入頁面框架和文字資訊，在網速較慢時能提前預覽即將出現的內容缺點：只載入了部分內容的頁面會對整體美觀度產生影響，也會影響使用者對頁面內容的理解懶載入 優點：只載入使用者看得到的內容，頁面載入速度快，伺服器壓力較小，節省使用者流量，體驗較好缺點：當網路狀況不佳時可能會出現體驗不流暢，載入延遲等狀況預載入 優點：預先載入即將出現的內容，使用者可以順暢的在應用中交互，享受到極快的載入速度缺點：伺服器壓力增加，使用者會耗費更多流量進度條載入 優點：回饋明確，清晰易懂缺點：頁面無內容，美觀度較低混合載入 優點：根據不同場景來設計，體驗升級缺點：需要對各場景制定對應的載入規範，保證交互一致性本文由 @ 李惠丸 原創發佈于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基於CC0協議
在分步載入的頁面中，當只載入了部分內容時，未載入的內容會對頁面的美觀程度產生影響，同時也會影響使用者對頁面內容的理解。目前有許多app會在默認圖上設計一些有品牌識別的圖片來代替未載入的圖片，使介面在未載入圖片內容時，也能有較好的展示效果，讓使用者更好地理解介面含義，同時也能更好的傳達品牌。
懶載入懶載入，顧名思義就是一種偷懶的載入方式，使用者打開app時僅載入使用者可以看到的區域，看不到區域則需要通過使用者的流覽行為來喚起內容的載入。例如當頁面滾動到底部盡頭或下拉頁面時，才會自動載入內容。
懶載入一般用在無盡的資訊流頁面中。這種方式能有效的提升頁面的打開速度，讓使用者可以順暢地流覽而不用一直等待載入。在進行懶載入時，一次要載入的內容數量和載入時間段一般會根據頁面展示內容的大小、高度和使用者的流覽速度來決定。
預載入預載入是和懶載入恰恰相反的載入方式，它不僅不會偷懶，而且會提前準備好你即將流覽的內容。當a頁面載入完成時它並沒有停下來，而是悄悄的載入你即將打開的b頁面，在你打開b頁面時可能c頁面也一起準備好了。
預載入一直走在用戶前面，給用戶一種無縫連接的感覺，享受到極快的載入速度。
而使用這種方式伺服器的壓力會增加，用戶也會耗費更多流量。目前測試了許多app只看到今日頭條使用了這種載入方式，在網路正常下打開app，斷網後依然可以正常流覽內頁文字內容，文章底部會提示當前無網路狀態。
進度條載入進度條相信大家都不陌生，最常見的就是在下載頁面，我們可以清楚的看到當前進度，回饋十分明確。目前許多app將進度條運用在app的載入頁，讓用戶可以清楚的查看當前頁面的載入進度，來瞭解需要等待的時長。最常見的就是google流覽器，不管是web還是手機端許多場景都使用了這種載入方式，體驗十分友好。
混合載入模式為了能讓產品有一個流暢的體驗，很多app會根據產品的各種不同場景來組合使用不同載入方式。上文中舉例的產品都使用了不止一種載入手段。例如，enjoy打開時首先進行全頁面載入，然後進行分步載入，打開內容時則會出現進度條載入。所以我們在設計載入方案時需要結合產品的場景來決定對應的載入方式。
總結全頁面載入 優點：適用於各個場景缺點：由於時間的不確定性，載入過慢時容易流失用戶占位色塊載入 優點：適合有固定佈局的頁面，體驗比全頁面載入流暢缺點：不適合佈局多變的頁面分步載入 優點：先載入頁面框架和文字資訊，在網速較慢時能提前預覽即將出現的內容缺點：只載入了部分內容的頁面會對整體美觀度產生影響，也會影響使用者對頁面內容的理解懶載入 優點：只載入使用者看得到的內容，頁面載入速度快，伺服器壓力較小，節省使用者流量，體驗較好缺點：當網路狀況不佳時可能會出現體驗不流暢，載入延遲等狀況預載入 優點：預先載入即將出現的內容，使用者可以順暢的在應用中交互，享受到極快的載入速度缺點：伺服器壓力增加，使用者會耗費更多流量進度條載入 優點：回饋明確，清晰易懂缺點：頁面無內容，美觀度較低混合載入 優點：根據不同場景來設計，體驗升級缺點：需要對各場景制定對應的載入規範，保證交互一致性本文由 @ 李惠丸 原創發佈于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基於CC0協議