三種加載狀態(tài)
頁(yè)面加載進(jìn)程會(huì)受多方面的影響,例如頁(yè)面里圖片、圖標(biāo)的數(shù)量,頁(yè)面中是否有三維場(chǎng)景或模型,是列表式設(shè)計(jì)還是卡片式設(shè)計(jì)…
逐一加載
對(duì)于可以同時(shí)進(jìn)行多個(gè)加載任務(wù)的產(chǎn)品,更適合應(yīng)用逐一加載的形式,這樣做能減少用戶(hù)對(duì)于等待的感知程度。任務(wù)列表逐一加載的過(guò)程會(huì)給用戶(hù)帶來(lái)一種秩序感。
完全加載
進(jìn)入一個(gè)網(wǎng)站或App,很多頁(yè)面都會(huì)一下就顯示出來(lái)所有內(nèi)容,這種頁(yè)面完全加載的形式對(duì)用戶(hù)來(lái)說(shuō)更熟悉。
同樣,頁(yè)面完全加載的形式會(huì)讓用戶(hù)的操作和瀏覽過(guò)程更流暢。
延遲加載
延遲加載是用戶(hù)主動(dòng)觸發(fā)的操作,根據(jù)操作系統(tǒng)反饋對(duì)應(yīng)的結(jié)果。延遲加載包括三種形式:
- 無(wú)限滾動(dòng):當(dāng)檢測(cè)到用戶(hù)快要到達(dá)列表或頁(yè)面的末尾的時(shí)候,通過(guò)無(wú)限滾動(dòng)來(lái)作為觸發(fā)器,引導(dǎo)用戶(hù)獲取更多內(nèi)容。
- 加載更多:通過(guò)點(diǎn)擊“加載更多”按鈕來(lái)獲取更多內(nèi)容,這個(gè)過(guò)程由用戶(hù)主導(dǎo)決定,是否選擇點(diǎn)擊。
- 分頁(yè)加載:分頁(yè)是在不同頁(yè)面上進(jìn)行的延遲加載。這個(gè)過(guò)程也是由用戶(hù)主動(dòng)選擇,但和“加載更多”按鈕不同的地方在于,分頁(yè)是頁(yè)面間的切換,并且用戶(hù)能清楚地看到具體的頁(yè)面數(shù)量。
五種加載模式
加載模式需要依托場(chǎng)景去考慮。比如一個(gè)1秒就能加載的頁(yè)面和一個(gè)需要5秒才能加載出來(lái)的頁(yè)面,我們就需要考慮使用不同的加載模式設(shè)計(jì),這樣才能做到差異化設(shè)計(jì)。
這里我做了一個(gè)表格,將頁(yè)面加載需要的時(shí)間以及對(duì)應(yīng)的加載模式進(jìn)行了整合。
0.1秒以?xún)?nèi)
如果加載時(shí)長(zhǎng)低于0.1秒,用戶(hù)不需要等待加載過(guò)程,內(nèi)容就能即時(shí)呈現(xiàn)出來(lái),有一種“還沒(méi)開(kāi)始就已經(jīng)結(jié)束”的感覺(jué)。
0.1秒以?xún)?nèi)的加載不需要在頁(yè)面中添加任何加載狀態(tài),但要一個(gè)場(chǎng)景需要格外注意,如果用戶(hù)剛完成一系列復(fù)雜的操作,點(diǎn)擊提交之后,考慮為用戶(hù)提供撤消機(jī)制。
▲用谷歌郵箱發(fā)送郵件時(shí),發(fā)送成功之后會(huì)彈出一個(gè)撤銷(xiāo)提示,允許用戶(hù)在5s內(nèi)撤銷(xiāo)剛才發(fā)送成功的郵件。
0.1-1秒間
大多數(shù)產(chǎn)品的頁(yè)面加載速度都在這個(gè)區(qū)間,用戶(hù)幾乎不會(huì)注意到這種加載延遲。所以我們不需要增加額外的加載動(dòng)效來(lái)填充這段加載時(shí)間,不然可能會(huì)起到畫(huà)蛇添足的反面效果。
試想一下,如果在每個(gè)頁(yè)面加載的過(guò)程中都加上加載動(dòng)效,不僅會(huì)分散用戶(hù)的注意力,并且屏幕上總出現(xiàn)不斷跳動(dòng)的內(nèi)容,會(huì)讓人感到很焦躁。
1-2秒間
如果加載時(shí)間超過(guò)1秒,用戶(hù)就會(huì)感知到這個(gè)加載過(guò)程,這個(gè)時(shí)候我們就可以考慮適當(dāng)添加加載動(dòng)畫(huà),緩解用戶(hù)等待的焦急感。
- 微加載:1-2秒的加載時(shí)間對(duì)用戶(hù)來(lái)說(shuō),說(shuō)長(zhǎng)不長(zhǎng)說(shuō)短也不短,優(yōu)先推薦輕量級(jí)的動(dòng)畫(huà)加載形式,為用戶(hù)提供一種進(jìn)度感。
▲在下載內(nèi)容的過(guò)程中,使用這種輕量級(jí)的環(huán)形動(dòng)畫(huà)來(lái)顯示加載進(jìn)度,簡(jiǎn)潔清晰,而且還能作為組件來(lái)復(fù)用,能夠極大提升工作效率。
- 骨架屏:用于整頁(yè)加載,這種加載形式在產(chǎn)品中的應(yīng)用也越來(lái)越頻繁。骨架屏可以讓用戶(hù)在等待加載的過(guò)程中,先了解頁(yè)面的架構(gòu)。
在骨架屏基礎(chǔ)上,可以“選裝”一些好看的效果,增加頁(yè)面加載時(shí)的視覺(jué)體驗(yàn)觀(guān)感:
- 微光效果:在骨架屏基礎(chǔ)上添加微光效果,光感的加入能將用戶(hù)的注意力從等待中轉(zhuǎn)移開(kāi),有效地減少等待感知。
- 脈沖效果:效果和微光效果很像,差異的地方在于脈沖效果用于單個(gè)的任務(wù)或卡片列表。
2-10秒
這個(gè)加載時(shí)間對(duì)于用戶(hù)來(lái)說(shuō)已經(jīng)很長(zhǎng)了,對(duì)于設(shè)計(jì)師來(lái)說(shuō),需要對(duì)這段加載時(shí)間進(jìn)行合理有效地設(shè)計(jì),來(lái)提升用戶(hù)體驗(yàn)。
- 時(shí)間提示:在開(kāi)發(fā)中很難以分和秒為單位來(lái)精確地估計(jì)加載時(shí)間。
如果在加載的過(guò)程中,想給用戶(hù)一個(gè)期望的時(shí)間值,告訴用戶(hù)整個(gè)加載過(guò)程需要多長(zhǎng)時(shí)間,我們可以用“這可能需要幾秒鐘”這種提示方法,既能展示加載需要的時(shí)間,又能給用戶(hù)一個(gè)時(shí)間預(yù)期。
- 進(jìn)度條:最常使用的加載形式,加載過(guò)程中使用緩入動(dòng)畫(huà)會(huì)讓整個(gè)過(guò)程看起來(lái)更像在加速。
- 分步提示:如果加載過(guò)程過(guò)長(zhǎng),可以將整個(gè)過(guò)程分為幾個(gè)不同的步驟,幫助用戶(hù)預(yù)估操作完成需要的時(shí)間。如果系統(tǒng)正在處理多個(gè)項(xiàng)目,分步提示的設(shè)計(jì)能讓用戶(hù)明確了解已完成的操作。
10秒以上
- 百分比加載:使用百分比加載雖然不能告訴用戶(hù)加載完成需要多長(zhǎng)時(shí)間,但是能提供一種過(guò)程感,讓用戶(hù)自己來(lái)估計(jì)加載時(shí)間。圓形進(jìn)度條+百分比是最常見(jiàn)的加載形式。需要注意的是,不要在加載到99%的時(shí)候讓進(jìn)度條卡住不動(dòng),這樣會(huì)讓用戶(hù)感到焦急。
- 后臺(tái)加載:如果一項(xiàng)任務(wù)需要加載很長(zhǎng)時(shí)間,我們不能讓用戶(hù)看著進(jìn)度條干等,其他什么都做不了,這種情況我們可以考慮將任務(wù)放到后臺(tái)去加載。
最后
把加載細(xì)分成這五種模式,可以覆蓋很多使用場(chǎng)景,這樣的對(duì)癥下藥既能保證用戶(hù)體驗(yàn),還能讓產(chǎn)品豐富化,起到錦上添花的作用。
在對(duì)的時(shí)間和對(duì)的場(chǎng)景下做對(duì)的事,這句話(huà)用在什么地方都不為過(guò),設(shè)計(jì)也是一樣。
最后考慮到大家經(jīng)常使用卡片式UI排版,為大家整理了90+個(gè)iOS卡片模板,源文件已經(jīng)打包好,大家可后臺(tái)領(lǐng)取。
領(lǐng)取方式:關(guān)注公眾號(hào),后臺(tái)回復(fù)【小組件】獲取源文件。
慢慢來(lái)比較快,希望對(duì)你有幫助!
原文地址:Clip設(shè)計(jì)夾(公眾號(hào))
作者:Clippp
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》3種狀態(tài)+5種模式,從UX角度分析加載設(shè)計(jì)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)