移動(dòng)APP產(chǎn)品的信息都是通過頁面來承載的或是加載的，同時(shí)APP頁面的加載方案設(shè)計(jì)是交互設(shè)計(jì)師和移動(dòng)產(chǎn)品經(jīng)理需要面對(duì)的一個(gè)重要的課題。

良好的移動(dòng)APP加載頁面設(shè)計(jì)對(duì)于APP來說是非常重要的。直接影響用戶的體驗(yàn)和APP的轉(zhuǎn)化率問題。

今天，25學(xué)堂跟大家來小議一下3種常見的 APP?頁面加載設(shè)計(jì)方案。這些應(yīng)該都是不錯(cuò)的APP設(shè)計(jì)干貨分享。值得大家收藏和轉(zhuǎn)載。

3種常見的APP導(dǎo)航設(shè)計(jì)方案優(yōu)劣勢(shì)分析

APP登錄界面設(shè)計(jì)的幾種常見的設(shè)計(jì)思路

10個(gè)APP啟動(dòng)頁面設(shè)計(jì)欣賞和常見設(shè)計(jì)思路

移動(dòng)APP頁面加載設(shè)計(jì)方案一、單頁面加載方案

單頁面加載方案分為整體加載方案設(shè)計(jì)和分塊加載方案設(shè)計(jì)。

優(yōu)點(diǎn)：1、單頁面加載方案是比較簡(jiǎn)單的加載方案設(shè)計(jì)，一般運(yùn)用在頁面內(nèi)容比較單一的情況下，所以直接一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容。

單頁面加載失敗的狀態(tài)也比較好處理。直接不顯示信息或者是出現(xiàn)加載失敗等等。

缺點(diǎn)：這種單頁面的加載方式比較傳統(tǒng)和簡(jiǎn)單。對(duì)于復(fù)雜的APP界面數(shù)據(jù)應(yīng)用是不合理的。有一定的局限性。

所以就出現(xiàn)了 單頁面分塊加載的機(jī)制。

2、單頁面分塊加載的機(jī)制

這種方案的特點(diǎn)：是能讓用戶逐步看到內(nèi)容，在這個(gè)漸進(jìn)的過程中降低用戶的等待的焦慮心理。同時(shí)提高用戶使用率。然而單頁面分塊加載方案，其中又可以分為，模塊間有關(guān)聯(lián)性的，先加載父內(nèi)容，再加載子內(nèi)容。如下圖顯示。

這種分模塊加載的優(yōu)點(diǎn)：

在需要特別注意加載失敗的狀態(tài)，畢竟每個(gè)模塊都提示加載失敗，點(diǎn)擊重試是很挫的一件事，可以根據(jù)信息的優(yōu)先級(jí)來決定哪些數(shù)據(jù)失敗了采用默認(rèn)狀態(tài)，哪些數(shù)據(jù)采用失敗提示等。也是目前來說采用比較多的app頁面加載方式。

分模塊加載的缺點(diǎn)：影響了APP界面設(shè)計(jì)的美觀度，在網(wǎng)速不佳的情況下，容易出現(xiàn)加載失敗等。

移動(dòng)APP頁面加載設(shè)計(jì)方案二、跨頁面加載方案

跨頁面加載的方案就是在父頁面&子頁面 or 同一app內(nèi)，頁面間字段可以復(fù)用的，在加載子頁面時(shí)不需要重新加載新數(shù)據(jù)。特別的例子就是jquery moblie 這個(gè)移動(dòng)開發(fā)工具。

多個(gè)頁面直接的跳轉(zhuǎn)，其實(shí)都是一個(gè)頁面先加載完成的。所以，切換起來很流暢很舒服。

或者很多APP 的我的模塊 或者是信息中心這塊，基本采用的都是跨頁面加載方案設(shè)計(jì)。

比如：微信的個(gè)人信息，支付寶的個(gè)人信息等等。

移動(dòng)APP頁面加載設(shè)計(jì)方案三：預(yù)加載設(shè)計(jì)方案

優(yōu)點(diǎn)是：在加載一個(gè)頁面內(nèi)容的同時(shí)，預(yù)測(cè)用戶的下一步行為，并為他下一步需要使用的頁面加載內(nèi)容，使得他在下一步的操作中能立刻獲取信息而不需要加載等待。比如我們經(jīng)?？吹降囊粋€(gè)不停在轉(zhuǎn)動(dòng)的圖標(biāo) 加上 正在加載中這樣的標(biāo)識(shí)。

預(yù)加載提供給用戶無縫的產(chǎn)品使用體驗(yàn)，使得用戶在使用產(chǎn)品的過程中更直接流暢，沒有被打斷的感覺。

比如：當(dāng)你瀏覽圖集的時(shí)候，當(dāng)看到第一張的圖片時(shí)，就自動(dòng)后臺(tái)加載第二第三第四張圖片，用戶瀏覽完第一張圖片切換到第二張時(shí)就不會(huì)有加載等待的過程。再比如在瀏覽新聞列表時(shí)，就把每篇新聞的內(nèi)容在后臺(tái)進(jìn)行預(yù)加載，用戶選擇看某篇新聞時(shí)，能立刻閱讀到內(nèi)容。

這個(gè)預(yù)加載的模式跟pc端的按需加載方式的是差不多。大家見的最多的就是瀑布流的布局加載?；蛘呤菆D片的按需加載等等。這些都是屬于預(yù)加載方案設(shè)計(jì)。

在移動(dòng)APP端，比如通過觸發(fā)滾動(dòng)條來預(yù)加載。這種預(yù)加載方案設(shè)計(jì)應(yīng)該說是比較常見的加載方式。

缺點(diǎn)：預(yù)加載也需要時(shí)間的，他只是不在客戶端顯示給用戶，默默在后臺(tái)運(yùn)作而已，需要特殊考慮未加載完用戶就使用到那些信息的情況，所以在做預(yù)加載設(shè)計(jì)時(shí)需要同時(shí)考慮另一種適合該情況的普通加載方式。預(yù)加載需要根據(jù)具體的場(chǎng)景來進(jìn)行設(shè)計(jì)，設(shè)定好信息優(yōu)先級(jí)，綜合考慮各種類型信息的具體大小流量，整體考慮預(yù)加載的方式，這些都是需要經(jīng)過精心分析思考的。

擴(kuò)展閱讀：成功設(shè)計(jì)一款App需要注意哪些問題？

25學(xué)堂跟大家分享的是頁面加載設(shè)計(jì)方案。而平常我們所看到的彈出層 ，彈出加載圖片，頁面刷新等都屬于操作加載，不屬于頁面加載機(jī)制！務(wù)必請(qǐng)分清楚！