摹客
產(chǎn)品
下載
“盡量不讓用戶等待”是交互設(shè)計(jì)的基本規(guī)則之一。
但事實(shí)是我們拼盡全力，有時(shí)仍無法對用戶的請求做出即時(shí)響應(yīng)。這時(shí)讓用戶耐心等待至關(guān)重要，而進(jìn)度指示器就能將問題迎刃而解。
對于任何耗時(shí)超過一秒的操作，都應(yīng)該使用進(jìn)度指示器，這樣能代表頁面本身不是卡死或者未響應(yīng)。
在本文中，小編將介紹 4 種常用的進(jìn)度指示器樣式，以及應(yīng)該何時(shí)使用它們。
加載微調(diào)器是最基本的加載指示器類型。
只是通過屏幕上的動畫讓用戶明白系統(tǒng)正在運(yùn)行。
其通常使用于等待時(shí)間相對較短的頁面（2-10 秒）的場景中。10 秒大約是讓用戶的注意力集中在特定位置上的極限，超過了建議使用線性進(jìn)度條。
與微調(diào)器一起向用戶提供額外的上下文信息。添加一條解釋用戶等待原因的消息。例如，您可能會顯示有關(guān)系統(tǒng)現(xiàn)在正在做什么的消息。它將減少用戶的不確定性。
加載帶有上下文信息的微調(diào)器。
加載網(wǎng)頁時(shí)盡量不要使用加載微調(diào)器，尤其是在等待需要十秒或更長時(shí)間的情況下。如果用戶看到加載微調(diào)器超過 10 秒沒有附加信息，他們可能會放棄您的網(wǎng)站。
使用創(chuàng)意加載指示器。當(dāng)應(yīng)用程序在等待時(shí)為用戶提供令人著迷的東西時(shí)，他們將不太關(guān)注等待本身。比如貓動畫。
線性進(jìn)度條是一個(gè)確定的進(jìn)度指示器，從 0% 填充到 100% 并且從不減少值。
線性進(jìn)度條的使用場景：
對于需要 10 秒或更長時(shí)間，建議使用線性進(jìn)度條。
如果一個(gè)操作需要幾分鐘（或幾小時(shí)），那么應(yīng)該給用戶一個(gè)預(yù)計(jì)完成時(shí)間，以便他們可以合理安排時(shí)間。大多數(shù)時(shí)候，這個(gè)時(shí)間不太精確，總之一個(gè)近似的數(shù)值就行。
Apple 在軟件更新對話框中顯示剩余時(shí)間。告訴用戶到目前為止已經(jīng)做了什么。例如，如果可以將整體進(jìn)度分解為一系列步驟，并告訴用戶已經(jīng)完成了多少步驟。
盡量避免進(jìn)度條靜止，任何意外引起的停止都會影響用戶滿意度。最糟糕的情況是進(jìn)度條上升到 99% 并停滯。當(dāng)用戶注意到這種行為時(shí)，他們可能會認(rèn)為應(yīng)用程序有問題。
進(jìn)度環(huán)是一種進(jìn)度指示器，也稱為環(huán)形進(jìn)度條，分為不確定的或確定的。不確定指示器顯示未指定的等待時(shí)間（即加載微調(diào)器），而確定指示器顯示操作將花費(fèi)多長時(shí)間（即進(jìn)度條）。
進(jìn)度環(huán)何時(shí)使用：
進(jìn)度環(huán)可用于短等待時(shí)間和長等待時(shí)間。在第一種情況下，進(jìn)度環(huán)不會有具體的進(jìn)度，而在第二種情況下，可以看到具體的進(jìn)度。
在具體制作中也可以將兩種進(jìn)度環(huán)同時(shí)使用。從不確定進(jìn)度環(huán)開始顯示，達(dá)到剩余具體的時(shí)間后，再將其轉(zhuǎn)換為確定的進(jìn)度環(huán)。
切記不要將進(jìn)度環(huán)和線性進(jìn)度條混合使用。在加載中將進(jìn)度環(huán)突然轉(zhuǎn)換為進(jìn)度條可能會降低用戶體驗(yàn)的滿意程度。
進(jìn)度環(huán)通常應(yīng)順時(shí)針方向移動。對于用戶來說，順時(shí)針方向比逆時(shí)針方向看起來更自然。
進(jìn)度環(huán)的使用場景比線性進(jìn)度條多，可以集成到按鈕或任何其他可操作交互的元素中。
骨架屏幕是頁面的一個(gè)框架類版本，僅僅是包含逐步加載信息的內(nèi)容容器。與其他類型進(jìn)度指示器將用戶注意力集中在等待時(shí)間不同，骨架屏幕可以提前顯示出內(nèi)容的大體框架和預(yù)期。
YouTube 使用的骨架屏幕。如下圖所示：
骨架屏幕最適合較短的等待時(shí)間。建議將其作為網(wǎng)速較好網(wǎng)站的進(jìn)度指標(biāo)解決方案，因?yàn)樵摼W(wǎng)頁應(yīng)在 3 秒內(nèi)加載，超過3秒將會引起用戶的煩躁感，增加跳出率。
提示：
不要一次加載所有內(nèi)容。在顯示內(nèi)容占位符后，無需一次性用實(shí)際內(nèi)容填充全部框架。加載更多內(nèi)容后，再逐步填充所有的框架。
下面是一個(gè)關(guān)于如何在摹客RP 中創(chuàng)建進(jìn)度指示器的快速流程。
簡化操作步驟：
1、打開摹客官網(wǎng)產(chǎn)品選擇摹客RP
2、創(chuàng)建項(xiàng)目并進(jìn)入
3、在項(xiàng)目頁面的左下角組件中有線性進(jìn)度條和進(jìn)度環(huán)，也可以根據(jù)自己需要用別的組件一起搭配
4、添加相關(guān)的交互
5、完成并發(fā)布，可以在預(yù)覽中觀察是否符合設(shè)計(jì)目的，不符合可以回到項(xiàng)目繼續(xù)修改直至完成
以上就是本文的全部內(nèi)容，感興趣小伙伴快去打開軟件動手試試吧！
摹客協(xié)作
摹客RP
摹客DT
摹客超級版