3種狀態(tài)+5種模式，從UX角度分析加載設(shè)計(jì)

原標(biāo)題:3種狀態(tài)+5種模式，從UX角度分析和加載設(shè)計(jì)

編者按:大多數(shù)用戶(hù)在使用網(wǎng)頁(yè)或應(yīng)用程序時(shí)會(huì)遇到加載場(chǎng)景。在這些場(chǎng)景下，如何設(shè)計(jì)產(chǎn)品來(lái)減少用戶(hù)的焦慮？而在不同的加載場(chǎng)景下，應(yīng)該適配什么樣的加載呈現(xiàn)模式呢？在本文中，作者對(duì)加載設(shè)計(jì)進(jìn)行了系統(tǒng)的總結(jié)，讓我們一起來(lái)看看。

加載是對(duì)用戶(hù)的一種反饋，是用戶(hù)觸發(fā)和系統(tǒng)反應(yīng)的過(guò)程。一個(gè)產(chǎn)品可能涉及各種加載場(chǎng)景，比如入口加載、頁(yè)面之間的轉(zhuǎn)換加載和本地功能的加載。

面對(duì)如此多的加載場(chǎng)景，使用同樣的加載方式顯然是不合適的，所以需要針對(duì)不同的加載場(chǎng)景“對(duì)癥下藥”，***化體驗(yàn)。

例如，常見(jiàn)的加載組件包括進(jìn)度條和數(shù)字百分比。你有沒(méi)有考慮過(guò)哪些場(chǎng)景適合用進(jìn)度條加載，哪些場(chǎng)景適合用數(shù)字百分比加載？

一、三種裝載狀態(tài)

頁(yè)面加載過(guò)程會(huì)受到很多方面的影響，比如頁(yè)面中圖片和圖標(biāo)的數(shù)量，頁(yè)面中是否有3D場(chǎng)景或模型，是列表設(shè)計(jì)還是卡片設(shè)計(jì)...

1.逐個(gè)加載

對(duì)于可以同時(shí)加載多個(gè)任務(wù)的產(chǎn)品，更適合應(yīng)用逐個(gè)加載的形式，可以減少用戶(hù)的等待感知。一個(gè)個(gè)加載任務(wù)列表的過(guò)程，會(huì)給用戶(hù)帶來(lái)一種秩序感。

2.滿(mǎn)載

當(dāng)你進(jìn)入一個(gè)網(wǎng)站或App，很多頁(yè)面會(huì)一次性顯示所有內(nèi)容，用戶(hù)更熟悉。

同樣，完全加載的頁(yè)面會(huì)使用戶(hù)的操作和瀏覽過(guò)程更加流暢。

3.延遲裝載

延遲加載是用戶(hù)主動(dòng)觸發(fā)的操作，根據(jù)操作系統(tǒng)反饋相應(yīng)的結(jié)果。延遲加載包括三種形式。

1)無(wú)限滾動(dòng)

當(dāng)檢測(cè)到用戶(hù)即將到達(dá)列表或頁(yè)面的末尾時(shí)，使用無(wú)限滾動(dòng)作為觸發(fā)器來(lái)引導(dǎo)用戶(hù)獲取更多內(nèi)容。

2)加載更多

單擊“加載更多”按鈕獲取更多內(nèi)容。這個(gè)過(guò)程由用戶(hù)決定，是否點(diǎn)擊。

3)分頁(yè)加載

分頁(yè)是不同頁(yè)面上的延遲加載。這個(gè)過(guò)程也是用戶(hù)主動(dòng)選擇的，但不同于“加載更多”按鈕，分頁(yè)是頁(yè)面之間的切換，用戶(hù)可以清楚地看到具體的頁(yè)數(shù)。

兩種或五種裝載模式

需要根據(jù)場(chǎng)景考慮加載模式。比如一個(gè)可以1秒加載的頁(yè)面，一個(gè)需要5秒加載的頁(yè)面，我們需要考慮使用不同的加載模式來(lái)實(shí)現(xiàn)差異化設(shè)計(jì)。

我在這里做了一個(gè)表，里面綜合了頁(yè)面加載所需的時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）和對(duì)應(yīng)的加載模式。

1.0.1秒內(nèi)

如果加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）小于0.1秒，用戶(hù)不需要等待加載過(guò)程，內(nèi)容可以瞬間呈現(xiàn)，給人一種“先結(jié)束后開(kāi)始”的感覺(jué)。

0.1秒內(nèi)加載不需要給頁(yè)面添加任何加載狀態(tài)，但是一個(gè)場(chǎng)景需要特別注意。如果用戶(hù)剛剛完成一系列復(fù)雜的操作，可以考慮在點(diǎn)擊提交后為用戶(hù)提供一個(gè)撤銷(xiāo)機(jī)制。

▲使用Google Mail發(fā)送郵件時(shí)，郵件發(fā)送成功后會(huì)彈出取消提示，允許用戶(hù)在5s內(nèi)取消發(fā)送成功的郵件。

2.0.1-1秒

大多數(shù)產(chǎn)品的頁(yè)面加載速度都在這個(gè)范圍內(nèi)，用戶(hù)很難注意到這種加載延遲。因此，我們不需要額外增加動(dòng)態(tài)加載效果來(lái)填充這個(gè)加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考），否則可能會(huì)產(chǎn)生畫(huà)蛇添足的負(fù)面效果。

試想一下，如果在每個(gè)頁(yè)面的加載過(guò)程中加入加載效果，不僅會(huì)分散用戶(hù)的注意力，還會(huì)因?yàn)槠聊簧峡偸怯刑鴦?dòng)的內(nèi)容而讓人感到焦慮。

3.1-2秒

如果加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）超過(guò)1秒，用戶(hù)會(huì)感知到加載過(guò)程。這時(shí)候可以考慮適當(dāng)增加加載動(dòng)畫(huà)，緩解用戶(hù)等待的焦慮。

微加載:1-2秒的加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）對(duì)用戶(hù)來(lái)說(shuō)不長(zhǎng)也不短。***輕量級(jí)動(dòng)畫(huà)加載形式，為用戶(hù)提供進(jìn)步感。

▲在下載內(nèi)容的過(guò)程中，使用這種輕量級(jí)的循環(huán)動(dòng)畫(huà)顯示加載進(jìn)度簡(jiǎn)潔明了，還可以作為組件重用，可以大大提高工作效率。

骨架:用于加載整個(gè)頁(yè)面。這種裝載形式在產(chǎn)品中的使用越來(lái)越頻繁。該框架允許用戶(hù)在等待加載時(shí)首先了解頁(yè)面的體系結(jié)構(gòu)。

在骨架屏幕的基礎(chǔ)上，可以“隨意”添加一些好看的效果，增加加載頁(yè)面時(shí)的視覺(jué)體驗(yàn):

弱光效果:在骨架屏幕上加入弱光效果，光感的加入可以轉(zhuǎn)移用戶(hù)等待的注意力，有效降低等待感知。

脈沖效果:效果類(lèi)似于微光效果，不同的是脈沖效果用于單個(gè)任務(wù)或卡單。

4.2-10秒

這個(gè)加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）對(duì)于用戶(hù)來(lái)說(shuō)已經(jīng)很長(zhǎng)了，對(duì)于設(shè)計(jì)人員來(lái)說(shuō)，需要合理有效的設(shè)計(jì)這個(gè)加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）來(lái)提升用戶(hù)體驗(yàn)。

時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）:在開(kāi)發(fā)過(guò)程中，很難準(zhǔn)確估算出分分秒秒的加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）。

在加載過(guò)程中，如果想給用戶(hù)一個(gè)預(yù)期的時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）值，告訴用戶(hù)整個(gè)加載過(guò)程需要多長(zhǎng)時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考），我們可以使用“這可能需要幾秒鐘”的提示方式，既能顯示加載所需的時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考），又能給用戶(hù)一個(gè)時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）預(yù)期。

進(jìn)度條:最常用的加載表單。在加載過(guò)程中使用慢進(jìn)動(dòng)畫(huà)將使整個(gè)過(guò)程看起來(lái)更像加速。

循序漸進(jìn):如果加載過(guò)程太長(zhǎng)，可以將整個(gè)過(guò)程分為幾個(gè)不同的步驟，以幫助用戶(hù)估計(jì)操作完成所需的時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）。如果系統(tǒng)處理的是多個(gè)項(xiàng)目，分步提示設(shè)計(jì)可以讓用戶(hù)清楚地了解完成的操作。

5.超過(guò)10秒

百分比加載:雖然使用百分比加載不能告訴用戶(hù)加載需要多長(zhǎng)時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考），但可以提供一種過(guò)程感，讓用戶(hù)自己估算加載時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）。圓形進(jìn)度條+百分比是最常見(jiàn)的加載形式。

注意不要讓進(jìn)度條在負(fù)載99%的時(shí)候卡住，會(huì)讓用戶(hù)感到焦慮。

后臺(tái)加載:如果一個(gè)任務(wù)需要長(zhǎng)時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考）加載，我們不能讓用戶(hù)看進(jìn)度條，其他什么都不做。在這種情況下，我們可以考慮在后臺(tái)加載任務(wù)。

在Google Drive上傳大文件時(shí)，系統(tǒng)會(huì)立即給出反饋，將任務(wù)窗口縮放到屏幕右下角，我們可以通過(guò)這個(gè)小窗口查看上傳進(jìn)度和情況，不會(huì)耽誤頁(yè)面上其他功能的使用。

第三，***

將加載細(xì)分為這五種模式，可以覆蓋很多使用場(chǎng)景。這種處方既能保證用戶(hù)體驗(yàn)，又能豐富產(chǎn)品，起到錦上添花的作用。

在正確的時(shí)間預(yù)測(cè)（數(shù)據(jù)為往年僅供參考），在正確的場(chǎng)景做正確的事。這句話(huà)在任何地方都不能用太多，設(shè)計(jì)也是一樣。

#專(zhuān)欄作家#

作者:clipp，微信微信官方賬號(hào):剪輯設(shè)計(jì)剪輯。每周精選設(shè)計(jì)文章，重點(diǎn)分享關(guān)于產(chǎn)品、交互、UI視覺(jué)的設(shè)計(jì)思考。

圖片來(lái)自Unsplash，基于CC0協(xié)議?；厮押嗫纯?。

負(fù)責(zé)編輯:

文章標(biāo)題：3種狀態(tài)+5種模式，從UX角度分析加載設(shè)計(jì)

本文地址：http://balticsea-crewing.com/show-64679.html

本文由合作方發(fā)布，不代表中職學(xué)校招生網(wǎng)_55px.com.cn立場(chǎng)，轉(zhuǎn)載聯(lián)系作者并注明出處：中職學(xué)校招生網(wǎng)_55px.com.cn