What 是什么
簡(jiǎn)介:「加載提示」是用戶(hù)在提交操作之后,程序響應(yīng)結(jié)果前顯示的動(dòng)畫(huà)和指示。
加載提示通常是儀表或溫度計(jì)式的動(dòng)畫(huà),用于顯示某項(xiàng)耗時(shí)較長(zhǎng)的任務(wù)的關(guān)鍵數(shù)據(jù)。例如,上傳大型文件或圖像,或者在移動(dòng)設(shè)備上加載移動(dòng)應(yīng)用程序時(shí)的動(dòng)畫(huà),表示當(dāng)前的狀態(tài)以及完成任務(wù)剩余的時(shí)間。
例子: 使用 Ant Design 組件-加載中 搭建的kitchen頁(yè)面加載時(shí)的效果
Why 為什么
「加載提示」可以讓用戶(hù)通過(guò)一個(gè)指示器看到系統(tǒng)正在積極進(jìn)行響應(yīng),讓用戶(hù)感受到當(dāng)下的交互反饋是實(shí)時(shí)的,使用戶(hù)有耐心保持在等待的狀態(tài),不離開(kāi)當(dāng)前頁(yè)面。特別是當(dāng)一個(gè)頁(yè)面其他部分都不能操作的時(shí)候,更應(yīng)該加上加載提示,這樣用戶(hù)在等待的時(shí)候會(huì)更有耐心。
When 什么時(shí)候使用
當(dāng)一個(gè)耗時(shí)的操作會(huì)打斷用戶(hù)繼續(xù)操作,或需要在背后運(yùn)行,耗時(shí)超過(guò)一秒時(shí)就可以應(yīng)用此模式。
原因?yàn)椋?
- 不到十分之一秒時(shí),用戶(hù)會(huì)感覺(jué)他們?cè)谂c界面進(jìn)行“實(shí)時(shí)”交互,軟件的響應(yīng)讓用戶(hù)感覺(jué)是即時(shí)的,沒(méi)有感覺(jué)到延遲。
- 在十分之一秒到一秒之間,用戶(hù)會(huì)感受到略有延遲,但他們會(huì)等待并立即繼續(xù)。
- 超過(guò)一秒時(shí),用戶(hù)可能會(huì)認(rèn)為他的操作對(duì)任務(wù)推進(jìn)不起作用,導(dǎo)致其可能放棄當(dāng)前任務(wù)。此時(shí)若使用使用加載指示,用戶(hù)就能明確知道系統(tǒng)正在工作,他可以選擇繼續(xù)等待或者在此期間進(jìn)行其他活動(dòng)。
使用條件
- 當(dāng)前的操作系統(tǒng)需要一秒以上時(shí)間處理
- 為了讓用戶(hù)明確知道當(dāng)前系統(tǒng)正在運(yùn)行
- 想讓用戶(hù)留在當(dāng)前頁(yè)面等待
How 如何使用
在頁(yè)面中放置一個(gè)文字或者圖形的指示器,指示當(dāng)前已經(jīng)完成的進(jìn)度。告訴用戶(hù):
- 當(dāng)前正在做什么;
- 已經(jīng)完成了多少比例;
- 還需要多少時(shí)間才能完成;
- 如何停止這項(xiàng)任務(wù)。
有時(shí)加載提示的時(shí)間不一定十分精準(zhǔn),但是只需要保證出錯(cuò)時(shí)能很快回到準(zhǔn)確的時(shí)間就可以了。當(dāng)一個(gè)用戶(hù)界面無(wú)法推斷耗費(fèi)時(shí)長(zhǎng)時(shí),可以使用加載提示告訴用戶(hù)當(dāng)前系統(tǒng)的處理狀態(tài)。
Example 案例
案例一:Apple 音樂(lè) APP啟動(dòng)頁(yè)面
用戶(hù)需求:選擇在線(xiàn)音樂(lè)聽(tīng)歌
在用戶(hù)進(jìn)入APP時(shí)使用了加載提示動(dòng)畫(huà),通常應(yīng)用于輕微等待的場(chǎng)景下。目的是讓用戶(hù)知道“系統(tǒng)正在工作,請(qǐng)稍等”。
案例二:語(yǔ)雀和釘釘郵箱上傳附件
用戶(hù)需求:上傳文件
在上傳大文件時(shí),等待的時(shí)間可能比較久,此時(shí)的進(jìn)度條可以讓用戶(hù)知道當(dāng)前的上傳進(jìn)度,用戶(hù)能夠預(yù)估大概還需要多久才能傳完。
案例三:安卓端Google Play 商店
用戶(hù)需求:下載軟件
Google Play商店中將軟件下載到用戶(hù)的安卓設(shè)備上時(shí)會(huì)顯示加載指示條,將文件大小,進(jìn)度提示等信息都顯示在上面,可以讓用戶(hù)知道需要多長(zhǎng)時(shí)間,并可以等待、取消或做其他事情,稍后再回來(lái)。
案例四:Adobe Creative Cloud desktop manager
用戶(hù)需求:下載軟件
Adobe 在其macOS桌面的 Creative Cloud 應(yīng)用程序中使用了加載指示。 在頁(yè)面中放入了進(jìn)度條,讓用戶(hù)知道安裝進(jìn)度。
原文地址:Ant_Design(站酷)
作者: 六六
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》設(shè)計(jì)模式丨加載提示:如何讓用戶(hù)看到任務(wù)執(zhí)行進(jìn)度?
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)( m.paul-jarrel.com )是一家專(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ù)