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