APP開發(fā)規(guī)劃之loading加載頁(yè)面處理

      相信大家在運(yùn)用APP的時(shí)分都有過(guò)這樣的經(jīng)歷，等候加載頁(yè)面。絕大部分的APP都需求與服務(wù)器進(jìn)行數(shù)據(jù)交換，APP發(fā)出數(shù)據(jù)懇求，繼而服務(wù)器接納后傳輸相應(yīng)數(shù)據(jù)到APP，APP成功接納后，顯現(xiàn)數(shù)據(jù)內(nèi)容，而接納失利即無(wú)法顯現(xiàn)數(shù)據(jù)內(nèi)容。用戶在運(yùn)用APP的時(shí)分可能會(huì)由于網(wǎng)絡(luò)原因，需求等候必定的時(shí)刻進(jìn)行這個(gè)數(shù)據(jù)交換數(shù)據(jù)加載的進(jìn)程，而這個(gè)等候的時(shí)刻就需求APP開發(fā)中的loading加載機(jī)制，好的loading規(guī)劃能讓用戶耐心等候，而不合理的loading會(huì)讓用戶欠好的運(yùn)用體會(huì)。

一. 用戶、客戶端和服務(wù)器

       作為用戶體會(huì)規(guī)劃師，不管是APP開發(fā)產(chǎn)品、交互仍是UI，都習(xí)氣于站在人機(jī)交互的角度去考慮產(chǎn)品規(guī)劃問(wèn)題，在這個(gè)進(jìn)程中往往會(huì)疏忽了一個(gè)重要進(jìn)程：客戶端和服務(wù)器之間的數(shù)據(jù)懇求和傳輸。先看下面這張圖。

用戶、客戶端、服務(wù)器

      用戶與客戶端進(jìn)行人機(jī)交互，觸發(fā)某個(gè)操作，客戶端會(huì)將用戶觸發(fā)的操作轉(zhuǎn)化為相應(yīng)指令，向服務(wù)器懇求數(shù)據(jù)，若網(wǎng)絡(luò)和服務(wù)器正常，服務(wù)器會(huì)回來(lái)數(shù)據(jù)到客戶端，用戶便能看到自己操作所引發(fā)的成果。整個(gè)進(jìn)程是用戶、客戶端、服務(wù)器一起完成的，人與客戶端之間是人機(jī)交互研究的領(lǐng)域，而客戶端和服務(wù)器之間的數(shù)據(jù)傳輸更多的是開發(fā)人員所考慮的。

      已然數(shù)據(jù)傳輸是開發(fā)人員考慮的問(wèn)題，身為規(guī)劃師是不是就不必考慮了?當(dāng)然不是，原因很簡(jiǎn)單：數(shù)據(jù)傳輸?shù)臓顩r會(huì)影響到人機(jī)交互。例如，假如數(shù)據(jù)傳輸遇到網(wǎng)絡(luò)不穩(wěn)定或許服務(wù)器反常，就要在人機(jī)界面體現(xiàn)出來(lái)，不然用戶會(huì)手足無(wú)措，發(fā)生焦慮，影響用戶體會(huì)，這便是UED要考慮網(wǎng)絡(luò)和服務(wù)器反常時(shí)的交互規(guī)劃的原因。再比如，一個(gè)頁(yè)面包含許多信息，即便網(wǎng)絡(luò)穩(wěn)定，也要加載不少時(shí)刻，那怎樣經(jīng)過(guò)交互規(guī)劃來(lái)緩解用戶的焦慮。

二. 數(shù)據(jù)加載的幾種方法及對(duì)應(yīng)的交互規(guī)劃

1. 標(biāo)題loading

      聊天列表頁(yè)的聊天記錄是儲(chǔ)存在本地的，所以頁(yè)面內(nèi)容不為空。這個(gè)時(shí)分加載無(wú)需獲取用戶的視覺(jué)焦點(diǎn)，只要奉告用戶頁(yè)面正在懇求新數(shù)據(jù)，所以挑選在標(biāo)題欄展現(xiàn)App正在加載是個(gè)不錯(cuò)的挑選，加載成功則標(biāo)題欄loading消失，若由于網(wǎng)絡(luò)錯(cuò)誤未銜接服務(wù)器，則在標(biāo)題欄顯現(xiàn)未銜接狀態(tài)。

2. 白屏loading

當(dāng)頁(yè)面內(nèi)容比較單一，直接一次性加載完再顯現(xiàn)數(shù)據(jù)。多出現(xiàn)在H5 頁(yè)面。內(nèi)容加載完成之前界面都會(huì)停留在loading界面。許多產(chǎn)品都會(huì)選用無(wú)限循環(huán)的小菊花，但進(jìn)度條和有趣的動(dòng)畫規(guī)劃，更能減輕用戶等候時(shí)的焦慮感。

      除了進(jìn)度條+卡通動(dòng)畫+案牘的方法，還有種更為高級(jí)的白屏loading款式。

3. 優(yōu)先加載

      當(dāng)有文字和圖片時(shí)，圖片會(huì)比文字加載的慢，這個(gè)時(shí)分往往文字先加載，圖片在加載進(jìn)程中運(yùn)用占位符，直到圖片加載成功。當(dāng)加載的頁(yè)面內(nèi)容有固定的結(jié)構(gòu)時(shí)，能夠先加載結(jié)構(gòu)，再加載結(jié)構(gòu)內(nèi)的內(nèi)容。經(jīng)過(guò)先加載頁(yè)面結(jié)構(gòu)，規(guī)劃占位符等方法能夠削減用戶的心思等候時(shí)長(zhǎng)，進(jìn)步產(chǎn)品體會(huì)。

3. Skeleton Screen

      這種加載方法你可能沒(méi)聽過(guò)，可是必定見過(guò)。它是一種將未加載出來(lái)的內(nèi)容區(qū)域，用灰色的色塊填充的方法。所以整個(gè)頁(yè)面在加載進(jìn)程中會(huì)給用戶很連接的感覺(jué)。這種方法一般用于內(nèi)容結(jié)構(gòu)固定的頁(yè)面，假如頁(yè)面可能會(huì)出現(xiàn)空數(shù)據(jù)的狀況也不宜運(yùn)用。合作前面講的優(yōu)先加載的方法，作用會(huì)更佳。

5. 下拉改寫加載

6. 分段加載

      當(dāng)新頁(yè)面的內(nèi)容有好幾百條乃至更多時(shí)，假如一次性加載一切內(nèi)容，會(huì)添加設(shè)備的擔(dān)負(fù)，而且加載內(nèi)容過(guò)大，加載時(shí)刻會(huì)過(guò)長(zhǎng)，一起APP自身也能夠由于運(yùn)算本錢太高而崩潰。為了處理這個(gè)問(wèn)題，發(fā)生了一種叫分段加載的方法。即：先加載最新的幾十條數(shù)據(jù)，當(dāng)用戶繼續(xù)向上滑動(dòng)想閱讀更多時(shí)，再加載幾十條。

      分段加載要在PRD或許交互規(guī)劃文檔里清晰注明，一次性加載多少條內(nèi)容，假如內(nèi)容以圖片為主，主張加載 20 到 30 條左右，假如內(nèi)容以文本為主，主張 40 到 60 條左右。

7. 智能加載

      當(dāng)網(wǎng)絡(luò)狀態(tài)欠好時(shí)，能夠考慮加載低質(zhì)量的圖片，當(dāng)網(wǎng)絡(luò)杰出時(shí)，則加載高質(zhì)量的圖片。同理，當(dāng)檢測(cè)到用戶正在運(yùn)用蜂窩數(shù)據(jù)時(shí)，則顯現(xiàn)占位符而不顯現(xiàn)圖片，當(dāng)運(yùn)用WiFi時(shí)則直接加載出圖片。這些規(guī)劃計(jì)劃都是站在用戶的角度，替用戶著想，為用戶帶來(lái)價(jià)值，用戶才會(huì)真實(shí)喜愛(ài)上你的產(chǎn)品。

三. 關(guān)于加載的更多考慮

      由于存在網(wǎng)速不快、網(wǎng)絡(luò)反常、服務(wù)器反常、bug等狀況，讓用戶等候的狀況是必不可少的�？墒俏覀兌贾�道，等候會(huì)發(fā)生焦慮感，分分鐘卸載你的產(chǎn)品，除了用上文介紹的其間loading，還有沒(méi)有其他方法來(lái)下降或緩解用戶的焦慮感?

1. 優(yōu)化App的加載算法，使得App與服務(wù)器數(shù)據(jù)傳輸?shù)臅r(shí)刻減短

      這個(gè)需求開發(fā)人員的精益求精了。這個(gè)是從根本上處理了問(wèn)題，由于直接削減了加載數(shù)據(jù)的時(shí)刻，也就削減了用戶需求等候的時(shí)刻。

2. 選用預(yù)加載和智能加載的方法

      拿閱讀App打比方，當(dāng)用戶在看第一頁(yè)的時(shí)分，App在后臺(tái)加載完后面的幾頁(yè)，等用戶翻到第二頁(yè)的時(shí)分就不需求等候加載了，由于App現(xiàn)已幫用戶提早加載好了。這種加載機(jī)制對(duì)用戶體會(huì)特別好，可是存在一個(gè)問(wèn)題，便是要預(yù)測(cè)用戶行為，加載其他數(shù)據(jù)，這樣會(huì)耗費(fèi)不少流量，所以主張?jiān)赪iFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機(jī)制，而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不選用預(yù)加載機(jī)制。這個(gè)要和開發(fā)人員評(píng)論交流，確保預(yù)加載機(jī)制完美運(yùn)轉(zhuǎn)。

3. 異步處理

4. 規(guī)劃有趣的loading動(dòng)畫

      假如能和自身品牌元素結(jié)合起來(lái)，一起能反映出產(chǎn)品的調(diào)性，那就再好不過(guò)了。

      回到文章的開頭，APP的開發(fā)也好，微信定制開發(fā)也好，企業(yè)網(wǎng)站建造也好，等等都產(chǎn)品開發(fā)人員都不應(yīng)該把視野限制在人與客戶端之間的交互，也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進(jìn)來(lái)，站在用戶、客戶端和服務(wù)器閉環(huán)的角度去考慮產(chǎn)品，只有這樣，才能規(guī)劃出體會(huì)更好的數(shù)據(jù)加載計(jì)劃，而不會(huì)有失偏頗。