有些APP的頁面經(jīng)常容易出現(xiàn)一直轉(zhuǎn)菊花、等很久才能看到內(nèi)容、圖文顯示錯位等問題，這其實是沒有妥善的設(shè)計頁面加載邏輯。本文詳解了頁面加載的2種模式和7種方法，相信對初級PD有一定啟發(fā)。

頁面加載模式

頁面加載主要有2種模式，默認(rèn)是第2種，除非PD特殊說明。

• 先獲取數(shù)據(jù)再顯示頁面(預(yù)先加載下一個頁面數(shù)據(jù)，點擊后立即顯示下一個頁面的所有內(nèi)容。)
• 先顯示頁面再獲取數(shù)據(jù)(點擊某個按鈕立即進去下一個頁面，然后再獲取所有控件的數(shù)據(jù)。)

頁面加載方法

以下頁面加載方法可以單獨使用，也可以混合使用。

整體加載

需要注意的是，如果該頁面是H5實現(xiàn)，邏輯也是相似的。

• 定義：加載完所有內(nèi)容后，再展示給用戶看
• 作用：能保證內(nèi)容的整體性，能系統(tǒng)化的閱讀所有內(nèi)容。
• 交互：顯示在頁面中央，先顯示”加載中toast”，同時客戶端拉取數(shù)據(jù)，全部拉取成功后再隱藏”加載中toast”，如果拉取失敗則顯示”失敗toast”。
• 場景：某些重要頁面，比如購物車
• 注意：可能有強烈的等待感，當(dāng)超過3s后讓用戶產(chǎn)生焦躁。

分塊加載

• 定義：根據(jù)資源類型進行先后加載。文字→圖片→語音→視頻封面→其他資源
• 作用：可以幫助用戶快速閱讀內(nèi)容。
• 場景：文章閱讀頁、新聞詳情頁
• 注意：也許會丟失掉重要的關(guān)鍵信息，無法建立信息獲取的閉環(huán)。

需要注意的是，分塊本身就有先后加載邏輯。

整頁加載

• 定義：當(dāng)前頁與下一頁是整頁切換的時候，可以采用整頁加載的形式。
• 作用：能保證每個頁面的完整性，體驗比較順暢。
• 場景：全屏查看多圖
• 注意：不好保證整頁的加載效率，且有可能影響瀏覽的流暢度。另外每個頁面的數(shù)據(jù)量不能很大。

分頁加載

• 定義：展示列表數(shù)據(jù)的時候，比如默認(rèn)展示20條，滾動到最后的時候自動再加載20條或者手動點擊加載。
• 作用：把用戶代入無盡瀏覽模式，讓用戶一直向下滾動，不需要手動點擊下一頁。
• 場景：列表頁，比如Pinterest的首頁瀑布流
• 注意：沒有盡頭，容易迷失，不方便快速索引定位到某個內(nèi)容。另外加載方式可選自動和手動點擊2種。

分屏加載

• 定義：先加載框架和文字，再加載第一屏數(shù)據(jù)，向下滾動到哪里加載到哪里。
• 作用：可以幫助用戶快速閱讀內(nèi)容。
• 場景：多屏并且數(shù)據(jù)較大的頁面，比如h5電商活動頁
• 注意：也許會丟失掉重要的關(guān)鍵信息，無法建立信息獲取的閉環(huán)。

智能加載

• 定義：非WIFI網(wǎng)絡(luò)下，只加載內(nèi)容框架以及文字，圖片視頻等只顯示占位符。點擊占位符，才去獲取真實圖片。WIFI網(wǎng)絡(luò)下，初始加載所有資源。
• 作用：根據(jù)具體場景來控件流量和加載速度。
• 場景：數(shù)據(jù)量比較大的頁面，比如優(yōu)酷的視頻詳情頁
• 注意：不一定真實有效的命中用戶需求。

WIFI預(yù)先加載

• 定義：有WIFI的時候預(yù)先加載常用數(shù)據(jù)，緩存到本地，當(dāng)沒網(wǎng)的時候，直接加載已經(jīng)緩存下來的內(nèi)容。使用了預(yù)加載+離線緩存機制。
• 作用：解決了沒網(wǎng)獲取數(shù)據(jù)的問題，且節(jié)約了流量。
• 場景：小說閱讀App、視頻類App。
• 注意：占用本地存儲空間，有時候預(yù)加載的內(nèi)容最后用戶沒看。

最后

大家可以根據(jù)自己的業(yè)務(wù)需求，選擇適合自己的頁面加載模式和加載方法。

當(dāng)然最好是在APP剛創(chuàng)建的時候去從全局的角度來定義該規(guī)則，其次重構(gòu)客戶端的時候也可以，平常只適合修改單個頁面的規(guī)則。

提供Axure源文件點擊下載，在線查看唯一更新網(wǎng)址。

相關(guān)閱讀

善用Axure寫PRD，移動PD需要梳理這些流程圖

善用Axure寫PRD，全局規(guī)范一個都不能少

善用Axure寫PRD，徹底丟棄Word和PPT

善用Axure寫PRD，APP文本框通用的輸入規(guī)則

善用Axure寫PRD，PM應(yīng)該知道的APP授權(quán)知識

#專欄作家#

浪子，公眾號langzishuo，人人都是產(chǎn)品經(jīng)理專欄作家。

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