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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這個(gè)預(yù)加載的模式跟pc端的按需加載方式的是差不多。大家見(jiàn)的最多的就是瀑布流的布局加載。或者是圖片的按需加載等等。這些都是屬于預(yù)加載方案設(shè)計(jì)。

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

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

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

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