Skip to main content
Language繁體中文
基礎知識5 分鐘閱讀2026 年 10 月

載入狀態應該如何運作?

簡短回答

良好的加載狀態告訴人們正在發生一些事情,大致需要多長時間以及會出現什麼。對於非常短的等待,不顯示任何內容或細微的變化。在內容出現的地方附近使用骨架或旋轉器幾秒鐘。對於長期任務,顯示進度並讓人們繼續工作或取消。

核心要點

  • 將指示器與等待相匹配:無、微妙、旋轉或骨架,然後進行
  • 當即將到來的內容的佈局已知時,骨架效果最好
  • 顯示內容將出現的載入狀態,而不僅僅是出現在角落
  • 將啟動操作的按鈕保持在載入狀態以防止重複提交
  • 尊重簡化動作設定並保持載入動畫平靜

載入狀態的存在是為了回答使用者的一個問題:有什麼事情發生嗎?如果沒有答案,人們會再次點擊、重新載入頁面或離開。正確答案取決於他們等待的時間。

對於非常短的等待(大約十分之一秒),大多數人不會注意到延遲,因此指示器只會增加閃爍。常見的技術是在顯示旋轉器之前短暫等待,因此快速響應根本不會顯示旋轉器。

等待一秒鐘或幾秒鐘,在結果出現的地方顯示回饋。骨架螢幕,即即將出現的佈局的灰色輪廓,非常適合列表、卡片和配置文件,因為它顯示即將出現的內容並減少佈局變化。旋轉器適用於小區域或當結果具有不可預測的形狀時。

對於諸如上傳、匯出或人工智慧生成之類的長期任務,如果可以衡量的話,請展示真正的進展,解釋正在發生的事情,並讓人們取消或繼續其他工作。旋轉一分鐘而沒有其他資訊的旋轉器感覺像是失敗。

啟動動作的控制項也需要一個狀態。提交按鈕切換到載入狀態,且不能按兩次,可以防止重複的訂單和訊息。當載入結束時,明確地轉向成功或錯誤,而不是默默地回到預設值。

動畫在這裡很有幫助,但要保持平靜和簡短的循環,並尊重簡化的動作設定。我們製作的 ExodeUI 可讓您設計一個載入程式或按鈕,並在一個檔案中包含載入、成功和錯誤狀態,您的程式碼可以在該檔案之間進行切換。

常見問題

旋轉螢幕和骨架螢幕:哪個更好?

當您知道即將到來的內容(例如清單或卡片)的形狀時,骨架會更好。旋轉器更適合小區域或未知內容。

多久才會顯示載入指示器?

許多團隊會等待幾百毫秒,這樣快速反應就不會出現旋轉。用您的真實回應時間進行測試。

載入動畫應該永遠循環嗎?

僅當任務真正運行時。如果花費的時間比預期長得多,請顯示訊息、進度或取消方式。

如何在按鈕中顯示正在載入?

用小指示器替換或伴隨標籤,保持按鈕大小相同,以便佈局不會跳躍,並阻止重複按下,直到請求結束。

相關指南和範例

嘗試使用具有真實載入狀態的按鈕

開啟包含載入、成功和錯誤狀態的互動式範例,建構為可編輯的真實 ExodeUI 檔案。

打開範例
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →