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