定義
不要讓你的用戶坐在屏幕前怨绣，面對著一個靜止的畫面糕再，等待著你的產(chǎn)品執(zhí)行一個需要長時間加載的任務(wù)拱镐。請使用進度指示器讓用戶知道你的 app沒有崩潰，它只是在加載一個較大的數(shù)據(jù)持际，并且告知大概需要多長時間，以及給出一些消遣方法供用戶觀看或者交互哗咆。
進度指示器 之 活動指示器/圓形進度條
當(dāng)一個不可估計時間的任務(wù)執(zhí)行時蜘欲，活動指示器會不停的旋轉(zhuǎn)。例如正在加載或者同步復(fù)雜的數(shù)據(jù)晌柬。當(dāng)任務(wù)完成時會消失并給予完成提示姥份。活動指示器是不可交互的年碘。
如果可以請盡量使用進度條澈歉。如果活動是可以被預(yù)估時間的，請盡量使用進度條來代替活動指示器屿衅，以便用戶能夠更好的預(yù)估發(fā)生了什么以及多久能夠完成埃难。
保持活動指示器一直在轉(zhuǎn)動。持續(xù)不斷轉(zhuǎn)動的活動指示器可以告知用戶后臺正在工作涤久，而不是卡頓或崩潰涡尘。
如果可能的話請在用戶等待時提供一些有用的信息或交互。可以給予一些額外的信息响迂，避免使用諸如加載或身份驗證之類的模糊術(shù)語考抄，因為它們通常不會增加任何價值≌嵬可以增加一些關(guān)于產(chǎn)品內(nèi)功能的廣告川梅、產(chǎn)品的不為人知的攻略等等。
活動指示器出現(xiàn)的位置代表著不同位置的正在加載然遏。例如杖们，以屏幕為中心的活動指示器指示初始加載過程嫌佑；當(dāng)放置在現(xiàn)有內(nèi)容之上或之下時，他們會引起用戶對于新內(nèi)容的注意。
進度指示器 之 進度條
進度條包括一個細長的條镀钓，并從左至右填充顏色以展示一個任務(wù)的進度病毡。進度條不可交互，但是用戶可以通過「取消」按鈕來取消相應(yīng)的操作中狂。
請保證進度反饋精確凫碌。不要為了 讓你的產(chǎn)品看起來運行的很快而顯示不精確的進度信息。但通常情況下為了緩解用戶的焦慮胃榕，進度條的前半段會加載的稍快盛险，而在后半段映射主要的加載任務(wù)瞄摊。
將未加載的進度條部分隱藏在頁面中。在默認值中苦掘，進度條包括已加載和未加載兩部分换帜。將未加載的部分隱藏在頁面中不顯示，一方面可以使頁面精簡鹤啡，取出不必要的顏色惯驼；另一方面可以緩解人們的焦慮，引導(dǎo)用戶不去關(guān)注“還有多少未加載”递瑰。
可考慮將進度條的設(shè)計符合產(chǎn)品基調(diào)祟牲。
活動指示器的延展?- Skeleton Screen
用戶體驗一直是前端開發(fā)需要考慮的重要部分，在數(shù)據(jù)請求時常見到鎖屏的loading動畫抖部，而現(xiàn)在越來越多的產(chǎn)品傾向于使用Skeleton Screen Loading(骨架屏)替代说贝，以優(yōu)化用戶體驗。
Skeleton Screen(骨架屏)就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)慎颗，直到請求數(shù)據(jù)返回后再渲染頁面乡恕，補充進需要顯示的數(shù)據(jù)內(nèi)容。常用于文章列表俯萎、動態(tài)列表頁几颜。
無論是PC端還是移動端，只要有數(shù)據(jù)請求都會出現(xiàn)一定的延遲時間讯屈，之前對于這段等待時間的處理也是各不相同蛋哭。同步請求中頁面會卡住，直到請求完成涮母，用戶期間無法進行任何操作谆趾，有一種死機的感覺，體驗較差叛本。異步請求中大多數(shù)會以鎖屏的loading動畫過渡等待時間沪蓬，于是，也就出現(xiàn)了制作不同Loadng狀態(tài)的炫技来候。
小結(jié)
前端優(yōu)化仿佛是一種無止境的探索跷叉，尤其是現(xiàn)在產(chǎn)品對于用戶體驗的重視，任何一點體驗的改善與提升都會增加用戶的友好度营搅，最終使產(chǎn)品留下一個好印象云挟。
