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

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

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

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

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

10個APP啟動頁面設(shè)計欣賞和常見設(shè)計思路

移動APP頁面加載設(shè)計方案一、單頁面加載方案

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

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

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

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

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

2、單頁面分塊加載的機制

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

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

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

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

移動APP頁面加載設(shè)計方案二、跨頁面加載方案

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

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

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

比如：微信的個人信息，支付寶的個人信息等等。

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

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

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

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

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

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

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

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

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