app設(shè)計(jì)：如何處理加載頁面

好的loading設(shè)計(jì)能減弱用戶的等待焦慮，不合理的loading設(shè)計(jì)會(huì)讓用戶罵爹罵娘了。

大多數(shù)App都要與服務(wù)器進(jìn)行數(shù)據(jù)的交換，App向服務(wù)器發(fā)出數(shù)據(jù)請(qǐng)求，服務(wù)器接收到請(qǐng)求之后向App傳輸相應(yīng)數(shù)據(jù)，App接收成功后顯示數(shù)據(jù)內(nèi)容，沒有接收成功則反饋數(shù)據(jù)接收失敗。在這個(gè)數(shù)據(jù)交換過程中，由于網(wǎng)絡(luò)原因，需要花費(fèi)一定時(shí)間，也就是說用戶要等待加載完成，這個(gè)時(shí)候就要用到loading加載機(jī)制，它告訴用戶，App正在努力為您加載數(shù)據(jù)，您稍安勿躁。好的loading設(shè)計(jì)能減弱用戶的等待焦慮，不合理的loading設(shè)計(jì)會(huì)讓用戶罵爹罵娘了。

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

作為用戶體驗(yàn)設(shè)計(jì)師，不管是產(chǎn)品、交互還是UI，都習(xí)慣于站在人機(jī)交互的角度去思考產(chǎn)品設(shè)計(jì)問題，在這個(gè)過程中往往會(huì)忽略了一個(gè)重要過程：客戶端和服務(wù)器之間的數(shù)據(jù)請(qǐng)求和傳輸。先看下面這張圖。

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

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

舉例來說，你去京東購物，點(diǎn)擊搜索欄，輸入完關(guān)鍵詞“風(fēng)衣”，點(diǎn)擊搜索(觸發(fā)了操作)，京東APP會(huì)將該操作發(fā)送給服務(wù)器，服務(wù)器將所有有關(guān)風(fēng)衣的信息傳給京東APP，并通過列表的形式呈現(xiàn)。

既然數(shù)據(jù)傳輸是開發(fā)人員考慮的問題，身為設(shè)計(jì)師是不是就不用考慮了?當(dāng)然不是，原因很簡(jiǎn)單：數(shù)據(jù)傳輸?shù)那闆r會(huì)影響到人機(jī)交互。例如，如果數(shù)據(jù)傳輸遇到網(wǎng)絡(luò)不穩(wěn)定或者服務(wù)器異常，就要在人機(jī)界面體現(xiàn)出來，不然用戶會(huì)不知所措，產(chǎn)生焦慮，影響用戶體驗(yàn)，這就是UED要考慮網(wǎng)絡(luò)和服務(wù)器異常時(shí)的交互設(shè)計(jì)的原因。再比如，一個(gè)頁面包含很多信息，即使網(wǎng)絡(luò)穩(wěn)定，也要加載不少時(shí)間，那怎樣通過交互設(shè)計(jì)來緩解用戶的焦慮。

二. 數(shù)據(jù)加載的幾種形式及對(duì)應(yīng)的交互設(shè)計(jì)

1. 標(biāo)題loading

微信&釘釘

微信、釘釘?shù)榷疾捎昧诉@種形式。聊天列表頁的聊天記錄是儲(chǔ)存在本地的，所以頁面內(nèi)容不為空。這個(gè)時(shí)候加載無需獲取用戶的視覺焦點(diǎn)，只要告知用戶頁面正在請(qǐng)求新數(shù)據(jù)，所以選擇在標(biāo)題欄展示App正在加載是個(gè)不錯(cuò)的選擇，加載成功則標(biāo)題欄loading消失，若因?yàn)榫W(wǎng)絡(luò)錯(cuò)誤未連接服務(wù)器，則在標(biāo)題欄顯示未連接狀態(tài)。

2. 白屏loading

當(dāng)頁面內(nèi)容比較單一，直接一次性加載完再顯示數(shù)據(jù)。多出現(xiàn)在H5頁面，例如微信的文章詳情頁。內(nèi)容加載完成之前界面都會(huì)停留在loading界面。很多產(chǎn)品都會(huì)采用無限循環(huán)的小菊花，但進(jìn)度條和有趣的動(dòng)畫設(shè)計(jì)，更能減輕用戶等待時(shí)的焦慮感。

微信&美團(tuán)

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

左側(cè)的開眼APP，將自己的logo進(jìn)行變換，仿佛一個(gè)眼睛在轉(zhuǎn)啊轉(zhuǎn);右側(cè)的好奇心日?qǐng)?bào)APP，用鉛筆和橡皮擦，將自己的品牌字母Q，進(jìn)行手寫和擦除。這種形式不僅增加了loading的趣味性和設(shè)計(jì)感，同時(shí)還達(dá)到了強(qiáng)化品牌的效果，大家可以借鑒使用。

開眼&好奇心日?qǐng)?bào)

3. 優(yōu)先加載

當(dāng)有文字和圖片時(shí)，圖片會(huì)比文字加載的慢，這個(gè)時(shí)候往往文字先加載，圖片在加載過程中使用占位符，直到圖片加載成功。當(dāng)加載的頁面內(nèi)容有固定的框架時(shí)，可以先加載框架，再加載框架內(nèi)的內(nèi)容。

通過先加載頁面框架，設(shè)計(jì)占位符等形式可以減少用戶的心理等待時(shí)長，提高產(chǎn)品體驗(yàn)。

微博&微信

微博采用了灰色塊作為圖片的占位符，而微信公眾號(hào)，則在灰色塊的基礎(chǔ)上增加了無限循環(huán)的loading，除此之外，還可以使用帶有產(chǎn)品logo或形象的圖片作為占位符。

3. Skeleton Screen

這種加載形式你可能沒聽過，但是一定見過。它是一種將未加載出來的內(nèi)容區(qū)域，用灰色的色塊填充的方式。所以整個(gè)頁面在加載過程中會(huì)給用戶很連貫的感覺。

國外的Facebook，國內(nèi)的簡(jiǎn)書、微博、豆瓣都采用了這種加載形式。

這種形式一般用于內(nèi)容框架固定的頁面，如果頁面可能會(huì)出現(xiàn)空數(shù)據(jù)的情況也不宜使用。像下圖的Facebook首頁，簡(jiǎn)書的首頁和發(fā)現(xiàn)頁，頁面結(jié)構(gòu)固定，且內(nèi)容不會(huì)為空(除非網(wǎng)絡(luò)異常導(dǎo)致加載失敗)，就很適合用Skeleton Screen的加載形式。配合前面講的優(yōu)先加載的方式，效果會(huì)更佳。

Facebook&簡(jiǎn)書

5. 下拉刷新加載

Twitter當(dāng)年提出下拉刷新，并被廣泛使用，讓用戶能夠手動(dòng)對(duì)當(dāng)前頁面進(jìn)行更新，加載的loading樣式可以做進(jìn)一步設(shè)計(jì)，例如QQ將loading動(dòng)畫和下拉手勢(shì)結(jié)合起來，增加了趣味性;豆瓣把loading做成了笑臉，給予了產(chǎn)品人性化的設(shè)計(jì)。

豆瓣&QQ

6. 分段加載

當(dāng)新頁面的內(nèi)容有好幾百條甚至更多時(shí)，如果一次性加載所有內(nèi)容，會(huì)增加設(shè)備的負(fù)擔(dān)，而且加載內(nèi)容過大，加載時(shí)間會(huì)過長，同時(shí)APP自身也可以因?yàn)檫\(yùn)算成本太高而崩潰。為了解決這個(gè)問題，產(chǎn)生了一種叫分段加載的形式。即：先加載最新的幾十條數(shù)據(jù)，當(dāng)用戶繼續(xù)向上滑動(dòng)想瀏覽更多時(shí)，再加載幾十條。

分段加載要在PRD或者交互設(shè)計(jì)文檔里明確注明，一次性加載多少條內(nèi)容，如果內(nèi)容以圖片為主，建議加載20到30條左右，如果內(nèi)容以文本為主，建議40到60條左右，這是本人的設(shè)計(jì)習(xí)慣，大家可以借鑒。我無聊的數(shù)了數(shù)今日頭條每次分段加載會(huì)加載60條新聞。

same&知乎

7. 智能加載

當(dāng)網(wǎng)絡(luò)狀態(tài)不好時(shí)，可以考慮加載低質(zhì)量的圖片，當(dāng)網(wǎng)絡(luò)良好時(shí)，則加載高質(zhì)量的圖片。

同理，當(dāng)檢測(cè)到用戶正在使用蜂窩數(shù)據(jù)時(shí)，則顯示占位符而不顯示圖片，當(dāng)使用WiFi時(shí)則直接加載出圖片。這些設(shè)計(jì)方案都是站在用戶的角度，替用戶著想，為用戶帶來價(jià)值，用戶才會(huì)真正喜歡上你的產(chǎn)品。

知乎

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

由于存在網(wǎng)速不快、網(wǎng)絡(luò)異常、服務(wù)器異常、bug等情況，讓用戶等待的情況是必不可少的。但是我們都知道，等待會(huì)產(chǎn)生焦慮感，分分鐘卸載你的產(chǎn)品，除了用上文介紹的其中l(wèi)oading，還有沒有其他方式來降低或緩解用戶的焦慮感?

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

這個(gè)需要開發(fā)人員的精益求精了。這個(gè)是從根本上解決了問題，因?yàn)橹苯訙p少了加載數(shù)據(jù)的時(shí)間，也就減少了用戶需要等待的時(shí)間。

2. 采用預(yù)加載和智能加載的方式

拿閱讀App打比方，當(dāng)用戶在看第一頁的時(shí)候，App在后臺(tái)加載完后面的幾頁，等用戶翻到第二頁的時(shí)候就不需要等待加載了，因?yàn)锳pp已經(jīng)幫用戶提前加載好了。

這種加載機(jī)制對(duì)用戶體驗(yàn)特別好，但是存在一個(gè)問題，就是要預(yù)測(cè)用戶行為，加載其他數(shù)據(jù)，這樣會(huì)消耗不少流量，所以建議在WiFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機(jī)制，而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不采用預(yù)加載機(jī)制。這個(gè)要和開發(fā)人員討論溝通，確保預(yù)加載機(jī)制好運(yùn)行。

3. 異步處理

這一點(diǎn)做得好的App莫過于Instagram，不知道你有沒有發(fā)現(xiàn)，用Instagram的時(shí)候會(huì)覺得特別流暢，即使在網(wǎng)絡(luò)不好的情況下。這是為什么?因?yàn)樵诰W(wǎng)絡(luò)不好的情況下，你給好友點(diǎn)了贊，Instagram并不會(huì)提示你網(wǎng)絡(luò)不好，操作失敗，而是提示你點(diǎn)贊成功了，其實(shí)它只是將你點(diǎn)贊的操作記錄了下來，等網(wǎng)絡(luò)一好就將點(diǎn)贊的行為上傳到服務(wù)器，從而完成點(diǎn)贊行為。這就是讓產(chǎn)品自己去解決問題，而不是把問題拋給用戶。

微信也采用了異步處理，發(fā)布朋友圈時(shí)，你不用等所有文字和照片都上傳完畢，點(diǎn)擊上傳后，就可以進(jìn)行其他操作，微信會(huì)在后臺(tái)自行將文字圖片上傳到服務(wù)器，不用用戶等待切不打擾用戶。

4. 設(shè)計(jì)有趣的loading動(dòng)畫

如上文介紹的美團(tuán)APP奔跑的小人，這是提升產(chǎn)品情感的重要手段。如果能和自身品牌元素結(jié)合起來，同時(shí)能反映出產(chǎn)品的調(diào)性，那就再好不過了，如上文提到的開眼和好奇心日?qǐng)?bào)APP。

回到文章的開頭，作為產(chǎn)品設(shè)計(jì)人員，不應(yīng)該把視野局限在人與客戶端之間的交互，也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進(jìn)來，站在用戶、客戶端和服務(wù)器閉環(huán)的角度去思考產(chǎn)品，只有這樣，才能設(shè)計(jì)出體驗(yàn)更好的數(shù)據(jù)加載方案，而不會(huì)有失偏頗。

當(dāng)前文章：app設(shè)計(jì)：如何處理加載頁面
轉(zhuǎn)載來于：http://www.muchs.cn/news/160627.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有App設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)