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

頁(yè)面加載模式

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

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

頁(yè)面加載方法

以下頁(yè)面加載方法可以單獨(dú)使用，也可以混合使用。

整體加載

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

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

分塊加載

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

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

整頁(yè)加載

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

分頁(yè)加載

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

分屏加載

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

智能加載

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

WIFI預(yù)先加載

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

最后

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

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

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

相關(guān)閱讀

善用Axure寫PRD，移動(dòng)PD需要梳理這些流程圖

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

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

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

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

#專欄作家#

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

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