2019-11-24 ui設(shè)計分享達人
作為UI設(shè)計師,我相信大家都是專注于界面設(shè)計的好不好看,至于界面與界面之間如何交互,點擊之后如何反饋,是一個比較容易被忽略的重要環(huán)節(jié)。
那么我們怎么處理好界面交互中的加載設(shè)計,減少用戶因等待產(chǎn)生的焦慮情緒,保證整個體驗無縫銜接,今天這篇文章就來總結(jié)下APP中數(shù)據(jù)加載模式設(shè)計。
一、為什么要加載?
1、用戶在進行某些操作時,都要從后臺請求數(shù)據(jù),這個過程都需要時間,系統(tǒng)應(yīng)該始終在合理的時間內(nèi)做出適當(dāng)?shù)姆答?,讓用戶了解正在發(fā)生的事情,讓用戶知道此時的操作是有反應(yīng),減緩用戶因等待而產(chǎn)生的焦慮感。同時加載方式也可以做的有趣,吸引用戶注意力,增加沉浸式體驗,讓用戶輕松自在的享受等待;
2、體驗無縫銜接,減少用戶跳失,正常的等待加載時間是0.3秒以內(nèi),同時不同場景對應(yīng)有不同的加載方式。
二、常見的加載場景及方式
a.加載場景:
不同場景有不同的加載方式,常見的加載場景一般有以下幾種:下拉刷新、上拉加載、切換新頁面的數(shù)據(jù)加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實際工作中,要根據(jù)不同的場景搭配不同的加載樣式,才能更好的做到緩解用戶等待焦慮,降低用戶的跳失率。
b.加載方式:
1、全屏加載
主要出現(xiàn)在手機H5頁面,例如微信的文章詳情頁。一般會有進度條或有趣的動畫設(shè)計,減輕用戶等待時的焦慮感。加載失敗后,頁面通常為空白頁,且有重新刷新操作按鈕。
優(yōu)點:將整個頁面的內(nèi)容都加載出來才展現(xiàn)給用戶,能保證內(nèi)容的整體性,全部加載完才能夠系統(tǒng)化的閱讀。
缺點:一般等待的時間較長,容易產(chǎn)生焦躁情緒,尤其是遇到網(wǎng)絡(luò)不好的情況
2、下拉刷新加載
主要出現(xiàn)在頁面內(nèi)容為推薦類、或者信息更新頻次高的產(chǎn)品,通過刷新加載新數(shù)據(jù),加載的loading樣式可以結(jié)合產(chǎn)品logo或IP形象進行設(shè)計,增加趣味性,吸引用戶注意力。
3.占位圖加載
如果頁面布局樣式比較固定,可以采用占位圖加載機制,先加載頁面布局和占位圖,先給用戶展示頁面框架,后加載頁面圖片細(xì)節(jié)部分,這種加載方式相對于直接展示白屏來說,呈現(xiàn)給用戶無縫銜接的感覺,體驗更加流暢。
4.分布加載
當(dāng)頁面中有文字和圖片時,優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素,如先加載文字,后加載圖片,圖片加載完成前使用占位符顯示,保證用戶可以順暢閱讀,縮短用戶的等待時間,提高產(chǎn)品體驗。
優(yōu)點:可以幫助用戶快速閱讀內(nèi)容,了解信息。
這種加載形式更加適用于內(nèi)容閱讀型的APP或圖片、視頻類資源比較多的頁面。
5.自動加載(懶加載)
當(dāng)瀏覽信息時,不停的向上滑動,新的內(nèi)容會不停的從底部出現(xiàn),這種方式稱為自動加載。對于自動加載,要注意每次加載多少條內(nèi)容,或者多少屏的內(nèi)容。一般會在距下面內(nèi)容一定距離時開始加載,當(dāng)網(wǎng)速非??斓臅r候,用戶并不能感知懶加載的動作,這樣可以營造一種無極限瀏覽的錯覺,很容易的把用戶吸引住。
優(yōu)點:無需用戶操作,自動加載后續(xù)內(nèi)容,營造沉浸式體驗。
應(yīng)用:適合feed流、瀑布流、算法推薦類的內(nèi)容。
6.預(yù)加載
提前加載好頁面信息內(nèi)容,這樣當(dāng)網(wǎng)絡(luò)不好的時候,可直接從本地緩存中渲染,就不用再加載了。
比如用戶在看A頁面的時候,App在后臺加載完B頁,等用戶打開B頁的時候就不需要等待加載了,因為App已經(jīng)幫用戶提前加載好了,給用戶提供無縫鏈接的感覺,弊端就是服務(wù)器壓力很大,就是要預(yù)測用戶行為,加載其他數(shù)據(jù),這樣會消耗不少流量,所以建議在WiFi網(wǎng)絡(luò)環(huán)境下采取這種預(yù)加載機制,而在蜂窩網(wǎng)絡(luò)狀態(tài)下則不采用預(yù)加載機制。
7.漸進式加載
一般出現(xiàn)在圖片類產(chǎn)品,比如pinterest、unsplash等,當(dāng)瀏覽圖片的時候,經(jīng)常是先看到一張模糊圖或與圖片較為相似的色彩值圖片,然后再漸漸的變得清晰,這種效果就叫做漸進式加載。漸進式加載能夠大大的提升體驗感。
8.后臺加載(異步處理)
用戶在前端執(zhí)行操作后,客戶端立即給予操作成功反饋提示,然后把請求放到后臺與服務(wù)器交互,這一過程用戶是看不到的,也不需要等待,體驗是非常棒的。
例如在用微信發(fā)朋友圈時,會覺得特別流暢,即使在網(wǎng)絡(luò)不好的情況下,會看到你的動態(tài)立即展示在朋友圈列表,并不會提示你網(wǎng)絡(luò)不好,操作失敗,全部以操作成功來顯示,其實它只是將你發(fā)布的操作記錄了下來,等網(wǎng)絡(luò)一好就將動態(tài)上傳到服務(wù)器,從而完成發(fā)布行為,微信的點贊也是同樣的操作,你給好友點了贊,并不會提示你網(wǎng)絡(luò)不好,操作失敗,而是提示你點贊成功了,其實它只是將你點贊的操作記錄了下來,等網(wǎng)絡(luò)一好就將點贊的行為上傳到服務(wù)器,從而完成點贊行為會,給用戶帶來體驗流暢的感覺。
所以這種加載方式是需要根據(jù)具體使用場景來權(quán)衡使用的,對于一些重要的操作,建議還是使用模態(tài)的方式加載,對于一些小操作,如點贊、訂閱、關(guān)注,可采用后臺加載的方式。
9.模態(tài)加載
以上幾種方式都是采用非模態(tài)加載,不會對用戶造成干擾,用戶可以做別的事情,不需要等待加載完成,大大降低了等待的焦躁感。
模態(tài)加載對用戶干擾比較大,需要中斷用戶的其他操作,用戶只能等待加載結(jié)束,因為如果用戶執(zhí)行了其他操作就會打斷正在進行的加載過程,實現(xiàn)不了用戶的目標(biāo)。
應(yīng)用:用戶執(zhí)行的操作本身不能和其他操作同時進行,例如登錄,退出,應(yīng)用啟動,手機支付等場景。
三、具體實施方法小結(jié)
1、能用非模態(tài)加載的盡量不要去用模態(tài)加載,如果非得用模態(tài)加載,也盡量給一個能取消的按鈕,方便用戶在不愿意等待的情況下取消操作。
2、如果加載的時間比較長,最好能告知用戶加載進度,讓用戶心理有個預(yù)期,這樣用戶更愿意等待,不會因為等待產(chǎn)生焦慮感,分分鐘卸載你的產(chǎn)品??茖W(xué)的實驗證實,先慢后快的進度條是讓用戶心理感受上最快的設(shè)計,這是因為用戶最容易記住最后一瞬間的感覺,如果最后一瞬間,感知到了快,就覺得很順暢了。
3、數(shù)據(jù)加載本身就是很考驗用戶心態(tài)感受,所以盡量通過一些有趣的動畫來轉(zhuǎn)移用戶的注意力,營造沉浸式體驗,同時增加了趣味性,給予了產(chǎn)品人性化的設(shè)計。
總結(jié)
作為產(chǎn)品設(shè)計人員,盡量給用戶好的體驗,我們應(yīng)該讓產(chǎn)品自己去解決問題,而不是把問題拋給用戶。在考慮人與客戶端交互的同時也要把客戶端和服務(wù)端之間的數(shù)據(jù)傳輸考慮進來,站在用戶、客戶端和服務(wù)器閉環(huán)的角度去思考產(chǎn)品,才能設(shè)計出體驗更好的數(shù)據(jù)加載方案。
轉(zhuǎn)自-站酷
藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://m.820esy.cn