非常干貨系列之APP加載頁(yè)面的UI設(shè)計(jì)

一、認(rèn)識(shí)加載

1. 什么是加載

用戶在客戶端發(fā)出一個(gè)指令后，直到客戶端出現(xiàn)反饋結(jié)果時(shí)，這段時(shí)間內(nèi)計(jì)算機(jī)完成的一系列執(zhí)行動(dòng)作，可能包括有客戶端發(fā)出請(qǐng)求，服務(wù)器做出響應(yīng)，客戶端拿到數(shù)據(jù)后計(jì)算，渲染等，當(dāng)我們點(diǎn)擊應(yīng)用圖標(biāo)后，軟件需要將文件或者數(shù)據(jù)從 Rom 讀取到 Ram，這也是一個(gè)加載過(guò)程。
 

2. 加載有什么用

加載是電腦接收到用戶的指令然后實(shí)現(xiàn)用戶的目標(biāo)所必須經(jīng)歷的一個(gè)過(guò)程，如果沒(méi)有加載的話，計(jì)算機(jī)就無(wú)法實(shí)現(xiàn)用戶的目標(biāo)。
 

3. 加載帶來(lái)的問(wèn)題

有些加載過(guò)程的時(shí)間可能會(huì)比較長(zhǎng)，甚至用戶不知道此時(shí)應(yīng)用是卡死了還是在執(zhí)行命令，這樣就會(huì)導(dǎo)致用戶體驗(yàn)降低，用戶會(huì)對(duì)應(yīng)用失去耐心。

 

二、如何解決加載帶來(lái)的問(wèn)題

1. 梳理 App 中有哪些加載場(chǎng)景

要針對(duì) App 內(nèi)的加載場(chǎng)景帶來(lái)的問(wèn)題進(jìn)行設(shè)計(jì)，首先肯定是先羅列出我們的 App 中有哪些加載場(chǎng)景，然后針對(duì)不同的加載場(chǎng)景選取對(duì)應(yīng)的方法進(jìn)行設(shè)計(jì)。

下面羅列了在不同 App 中經(jīng)常出現(xiàn)的一些加載場(chǎng)景，其實(shí)在我們自己設(shè)計(jì)的 App 中大部分加載場(chǎng)景也就是這些，當(dāng)然不同的 App 情況也不完全一樣，還是需要我們針對(duì)不同的 App 去梳理的。那么我們?nèi)绾问崂砟兀繉⒛切┌l(fā)出指令后應(yīng)用需要長(zhǎng)時(shí)間處理的加載過(guò)程都羅列出來(lái)，簡(jiǎn)單說(shuō)就是把那些慢的地方都找出來(lái)。

常見(jiàn)的加載場(chǎng)景：

• 應(yīng)用啟動(dòng)
• 登錄注冊(cè)
• 上傳，下載
• 加載大量圖片文字的情況，圖片列表等
• 下拉刷新
• 上拉加載數(shù)據(jù)
• 點(diǎn)贊
• 進(jìn)入新頁(yè)面
• 手機(jī)付款

2. 采取對(duì)應(yīng)的解決辦法

梳理完了 App 中的加載場(chǎng)景后，接下來(lái)我們針對(duì)不同的加載場(chǎng)景采取對(duì)應(yīng)的解決辦法即可，這里為什么是對(duì)應(yīng)的解決辦法呢？因?yàn)榻酉聛?lái)要講的解決辦法也不是你想怎么用就怎么用的，我們要根據(jù)情況來(lái)選擇。

第一個(gè)辦法：選用加載策略

下面是一些常見(jiàn)的加載策略，我們可以針對(duì)不同的加載場(chǎng)景，選用合適的加載策略。

分步加載：

優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素。如先文字和默認(rèn)圖標(biāo)后圖片，圖片加載完成前使用占位符顯示。

懶加載（又稱為延遲加載）：

在網(wǎng)頁(yè)中，常常需要用到圖片，而圖片需要消耗較大的流量。正常情況下，瀏覽器會(huì)解析整個(gè)HTML代碼，然后從上到下依次加載<img src=」xxx」>的圖片標(biāo)簽。如果頁(yè)面很長(zhǎng)，隱藏在頁(yè)面下方的圖片其實(shí)已經(jīng)被瀏覽器加載了。如果用戶不向下滾動(dòng)頁(yè)面，就沒(méi)有看到這些圖片，相當(dāng)于白白浪費(fèi)了圖片的流量，不僅浪費(fèi)了流量，速度也很慢。

但是，淘寶、京東這些流量非常巨大的電商，商品介紹頁(yè)又必須有大量的圖片，因此，這些頁(yè)面的圖片都是「按需加載」，即用戶滾動(dòng)頁(yè)面時(shí)顯示出來(lái)的時(shí)候才加載圖片。當(dāng)網(wǎng)速非?？斓臅r(shí)候，用戶并不能感知懶加載的動(dòng)作，既省流量又不影響用戶瀏覽。

預(yù)加載：

通常應(yīng)用在信息流中。比如搜索結(jié)果頁(yè)，也就是我們經(jīng)常看到的列表視圖。當(dāng)我們「將要滑到」頁(yè)面底部時(shí)，頁(yè)面自動(dòng)請(qǐng)求數(shù)據(jù)，為你加載出下一頁(yè)。所以一般你在瀏覽下圖這種列表時(shí)，感覺(jué)非常流暢。因?yàn)轫?yè)面進(jìn)行了預(yù)加載。

預(yù)加載是貼心的小棉襖，會(huì)揣摩用戶的心思，偷偷提前做準(zhǔn)備。用戶在看 A 頁(yè)面時(shí)，客戶端就在準(zhǔn)備用戶可能會(huì)看的 B 頁(yè)面，用戶需要時(shí)，立刻給他，然后去準(zhǔn)備 C 頁(yè)面，給用戶提供無(wú)縫鏈接的感覺(jué)，代價(jià)就是服務(wù)端、客戶端都累的夠嗆，耗費(fèi)用戶更多的流量。

懶加載和預(yù)加載好像是相反的策略，那我們到底用哪個(gè)呢？如果用戶需要看的列表中圖片很多，文字較少，這種情況我們可能使用懶加載比較好；如果用戶要看的頁(yè)面并不需要花費(fèi)太多流量，那我們預(yù)加載可能就好一點(diǎn)，或者在 wifi 下使用預(yù)加載，在 4g 網(wǎng)絡(luò)時(shí)使用懶加載。

智能加載：

根據(jù)不同的網(wǎng)絡(luò)狀況來(lái)加載不同的數(shù)據(jù)

• 在 WIFI 條件下：優(yōu)先加載高質(zhì)量圖片、優(yōu)質(zhì)音樂(lè)和視頻。
• 在 4G 條件下：下載行為自動(dòng)終止，優(yōu)先加載普通甚至停止加載圖片或音樂(lè)視頻。
• 在網(wǎng)絡(luò)不通暢時(shí)：默認(rèn)加載低質(zhì)量甚至停止加載圖片或音樂(lè)視頻。

漸進(jìn)加載：

我們?cè)?PC 端用瀏覽器看圖片的時(shí)候，經(jīng)常是先看到一張模糊圖，然后再漸漸的變得清晰，這種情況在看漫畫(huà)的時(shí)候尤其常見(jiàn)，這種效果就叫做漸進(jìn)式加載，漸進(jìn)式加載能夠大大的提升體驗(yàn)感。

后臺(tái)加載：

用戶在操作后，客戶端立刻反饋操作成功，然后把請(qǐng)求放到后臺(tái)與服務(wù)器交互，這一過(guò)程用戶不需要了解，不需要等待，在正常情況下體驗(yàn)是非常棒的。

但是在極端情況下會(huì)出現(xiàn)一些莫名其妙的狀況，由于是后臺(tái)記錄請(qǐng)求并與服務(wù)器交互，所以實(shí)際請(qǐng)求是否成功客戶端是不說(shuō)明的，全部以操作成功來(lái)顯示，這就會(huì)導(dǎo)致用戶誤以為操作成功了，但實(shí)際上下次來(lái)看發(fā)現(xiàn)沒(méi)有成功。

所以這種加載方式是需要根據(jù)具體使用場(chǎng)景來(lái)權(quán)衡使用的，對(duì)于一些重要的操作，建議還是使用模態(tài)的方式加載，對(duì)于一些小操作，如點(diǎn)贊、訂閱、關(guān)注，可采用后臺(tái)加載的方式。

小結(jié)

這些加載策略能在很大程度上提高用戶的體驗(yàn)，但是我們可以看到，這些加載策略除了后臺(tái)加載外，其他的加載策略基本都是針對(duì)圖片文字的加載，也就是對(duì)應(yīng)于我們剛才列舉的眾多加載場(chǎng)景中的加載大量文字圖片和進(jìn)入新頁(yè)面這兩個(gè)場(chǎng)景，因此我們可以看出，這些加載策略能解決的加載場(chǎng)景是比較有限的，不過(guò)這些加載場(chǎng)景也是我們?cè)趹?yīng)用中最頻繁遇到的加載場(chǎng)景。

第二個(gè)辦法：提示

除了第一個(gè)辦法外我們還能做點(diǎn)什么呢？不能加快加載速度的話，我們就不管了嗎？顯然不是，其實(shí)用戶對(duì)于應(yīng)用中合理的加載比較慢的過(guò)程是可以理解的，因?yàn)楹芏嗖僮鞅緛?lái)就需要一定的時(shí)間，你要下載一個(gè)很大的視頻，目前還不具備一下子就下載好這樣的技術(shù)，其次很多加載過(guò)程慢不是應(yīng)用的錯(cuò)，也許是用戶的手機(jī)卡，也許是用戶的網(wǎng)絡(luò)慢。

但是我們?cè)谠O(shè)計(jì)應(yīng)用時(shí)也可以幫用戶分擔(dān)這些憂慮，盡量給用戶好的體驗(yàn)，那么我們就應(yīng)該在這些加載過(guò)程比較慢的地方加入合理的提示，讓用戶心里有數(shù)，而不是誤以為手機(jī)卡死了，或者應(yīng)用失靈了。這些合理的提示對(duì)于用戶體驗(yàn)的提高是顯而易見(jiàn)的，接下來(lái)讓我們看看應(yīng)該如何提示用戶。

提示類型：中斷用戶操作

在有些加載場(chǎng)景下，我們需要中斷用戶的其他操作，用戶只能等待加載場(chǎng)景結(jié)束，因?yàn)槿绻脩魣?zhí)行了其他操作就會(huì)打斷正在進(jìn)行的加載過(guò)程，實(shí)現(xiàn)不了用戶的目標(biāo)，用戶就得重新加載，那么我們?nèi)绾沃滥男┘虞d場(chǎng)景是需要中斷用戶操作的，哪些又是不需要的呢？

一般來(lái)說(shuō)需要中斷用戶操作的加載過(guò)程主要有兩種情況：

• 用戶接下來(lái)的操作與這一步的操作密切相關(guān)，如果這一步操作未執(zhí)行成功則接下來(lái)的操作也不能進(jìn)行。比如登錄，退出，應(yīng)用啟動(dòng)，手機(jī)支付等，這種場(chǎng)景的確定需要我們結(jié)合具體的應(yīng)用功能和業(yè)務(wù)場(chǎng)景來(lái)確定。
• 用戶執(zhí)行的操作本身不能和其他操作同時(shí)進(jìn)行，不知道大家有沒(méi)有用過(guò)微信遷移聊天記錄的功能，在遷移聊天記錄的過(guò)程中，應(yīng)用有提示「請(qǐng)始終保持微信在屏幕顯示」，這時(shí)如果我們做了其他事情，將會(huì)打斷傳輸過(guò)程，這種場(chǎng)景的確定需要我們和開(kāi)發(fā)人員溝通。

當(dāng)我們確定了提示類型是需要中斷用戶操作的，該怎么提示用戶呢？

如果中斷時(shí)間比較短，我們可以使用模態(tài)提示，模態(tài)提示就是在屏幕中間會(huì)彈出一個(gè)提示框，除了提示框以外的區(qū)域都會(huì)變灰，變灰就代表其他部分都不能點(diǎn)擊，比如下圖中的登錄，退出。

當(dāng)然也不是說(shuō)只能用模態(tài)提示，當(dāng)我們的 App 在啟動(dòng)時(shí)，需要將文件和數(shù)據(jù)從 Rom 中讀取到 Ram 中，這個(gè)過(guò)程也比較長(zhǎng)，且用戶也不能執(zhí)行任何操作，幾乎所有的 App 都是使用廣告頁(yè)來(lái)占用這段時(shí)間的，而不是模態(tài)提示，所以我們還是要靈活運(yùn)用。除了廣告頁(yè)，我們還可以使用品牌頁(yè)，活動(dòng)頁(yè)來(lái)占用加載過(guò)程。

如果中斷時(shí)間比較長(zhǎng)，我們需要使用專門(mén)的頁(yè)面來(lái)提示用戶，以引起用戶的重視。

注意：當(dāng)加載過(guò)程需要中斷用戶的其他操作的話，我們最好給用戶留下取消加載過(guò)程的按鈕，當(dāng)用戶不想加載了可以取消加載。

總的來(lái)說(shuō)需要中斷用戶操作的加載場(chǎng)景相對(duì)不中斷的還是要少很多的。

提示類型：不中斷用戶操作

如果我們的加載場(chǎng)景不需要打斷用戶的操作，常見(jiàn)的提示方式有導(dǎo)航欄提示用戶，在控件本身提示用戶，或者頁(yè)面局部區(qū)域提示用戶。

在導(dǎo)航欄對(duì)用戶進(jìn)行提示是一個(gè)不錯(cuò)的選擇，但是我看了很多應(yīng)用，都沒(méi)有將提示內(nèi)容放到導(dǎo)航欄，為什么？因?yàn)榇蟛糠謶?yīng)用的導(dǎo)航欄，不是被各種搜索框占用，就是各種選項(xiàng)卡占用，根本就沒(méi)有空間用來(lái)放提示內(nèi)容。

在控件自身提示這種方式也比較好，可以讓用戶知道他的操作針對(duì)的是哪一個(gè)對(duì)象，這種提示方式一般適用于有具體的操作對(duì)象的加載過(guò)程，如果我要是想刷新，顯然就不能用這種方式了，因?yàn)樗⑿虏](méi)有一個(gè)具體的對(duì)象。

第一個(gè)圖是在下拉刷新時(shí)的提示，第二個(gè)圖是在進(jìn)入新頁(yè)面的時(shí)候在頁(yè)面中央提示的，有些同學(xué)可能要問(wèn)了，第二幅圖都白屏了，難道不算打斷用戶操作的類型嗎？

其實(shí)這種情況下，我們依然可以點(diǎn)擊底部菜單欄和導(dǎo)航欄中的 tab 欄，所以并不能算作打斷了用戶的操作。頁(yè)面局部區(qū)域提示可以說(shuō)是應(yīng)用中最廣泛的一種提示方式了，幾乎每個(gè)應(yīng)用中，都存在這樣的提示方式，這種方式設(shè)計(jì)起來(lái)最簡(jiǎn)單，也是最成熟的設(shè)計(jì)方式。

提示內(nèi)容

提示內(nèi)容包括文字和圖片。

如果是使用文字的話，文字應(yīng)該盡量準(zhǔn)確的告訴用戶，應(yīng)用正在加載什么，不要讓用戶去猜。比如之前我放的關(guān)于登錄的截圖，圖中使用的是正在加載，這里如果能改成登錄中就更好了。關(guān)于這個(gè)提示內(nèi)容，大家可以去觀察一下微信的提示文字怎么寫(xiě)的，收取中……，連接中……等等，相信用戶更愿意看到這樣的提示內(nèi)容，而不是干巴巴的正在加載。

其實(shí)大部分情況下提示內(nèi)容都是使用文字，使用圖片的機(jī)會(huì)比較少，這里說(shuō)的是那種圖片式的，有些還會(huì)有動(dòng)畫(huà)效果，而不是那種轉(zhuǎn)圈圈的小圖標(biāo)，為什么圖片使用的少呢？因?yàn)閳D片占用的空間大，一般來(lái)說(shuō)只有在進(jìn)入新頁(yè)面的時(shí)候有些應(yīng)用會(huì)使用一些可愛(ài)的圖片來(lái)分散用戶的注意力，但是我相信就算用戶第一次，第二次，第三次對(duì)你的圖片感興趣，時(shí)間長(zhǎng)了，再好看的圖片也會(huì)讓用戶覺(jué)得沒(méi)什么意思。

小結(jié)

第二個(gè)辦法是給用戶提示，這里還有一點(diǎn)要補(bǔ)充的，不管是什么形式的提示，如果能給出進(jìn)度條，最好采用進(jìn)度條的方式，但是能給出進(jìn)度條的加載場(chǎng)景也不是很多，因?yàn)槲覀兇蟛糠值募虞d場(chǎng)景和網(wǎng)絡(luò)有關(guān)，如果網(wǎng)絡(luò)不好的話，誰(shuí)知道加載到什么時(shí)候呢？一般來(lái)說(shuō)下載，上傳這類場(chǎng)景都可以給出進(jìn)度條。

 

總結(jié)

寫(xiě)了這么多其實(shí)設(shè)計(jì)加載場(chǎng)景的本質(zhì)思想并不復(fù)雜，首先找出應(yīng)用中加載時(shí)間比較慢的操作，只要是慢的地方都算進(jìn)來(lái)。然后根據(jù)加載場(chǎng)景來(lái)看，如果能用得到加載策略就用加載策略，如果用不了的話就合理的提示用戶，當(dāng)然不是說(shuō)用了加載策略就不用提示用戶，如果用了加載策略還會(huì)有點(diǎn)慢，我們一樣要提示用戶。最后，其實(shí)大部分的加載場(chǎng)景都有成熟的解決方案，我們只要梳理出我們應(yīng)用中的加載場(chǎng)景，然后再到別人的應(yīng)用里找點(diǎn)靈感就好了。