載入與等待回饋

Loading Overlay|載入遮罩

只在一個暫時不能操作的工作區域上顯示處理中遮罩,範圍要明確,不能把整個網站都鎖住。

常見俗稱:載入遮罩、處理中遮罩、區塊載入層、Loading Overlay、局部遮罩

60 秒決策

先確認使用者要完成的事。

適合使用

  • 一個明確工作區暫時不能安全操作,例如重新計算一張權限矩陣。
  • 其他區域仍可繼續工作,因此遮罩範圍必須明確且局部。

不適合使用

  • 背景其實還能操作,或只是小型短等待;直接使用 Spinner 或不定進度列即可。
  • 沒有明確範圍的全頁等待;不要把整個產品都鎖住來掩蓋不清楚的處理責任。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

遮罩貼著被暫停的區域

覆蓋權限矩陣卡,而不是 Header、導覽與完全不相關的內容。

說明為何暫時不能動

「正在重新計算 6 個角色的權限」讓人知道遮罩是在保護哪一段工作。

結束時留下可確認的結果

移除遮罩後更新摘要,讓使用者不用猜剛剛是否真的成功。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

可編輯

設定卡的資料與更新入口可正常使用。

區塊處理中

只有設定卡出現遮罩與 Spinner;卡片標示忙碌,其他區域不受影響。

完成

遮罩收起,設定摘要更新,status 訊息回報重新計算完成。

無法完成

遮罩收起並顯示可理解的錯誤與重試入口,不能讓區塊永久鎖住。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 重新計算權限矩陣

    先觀察:遮罩是否只覆蓋設定卡,並說明正在處理的工作,而不是空白地凍結整頁。

    操作:點選「更新權限矩陣」。

    預期結果:設定卡出現局部遮罩與 Spinner;完成後遮罩收起,摘要更新為最新版本。

Loading Overlay Demo

只暫停不能安全操作的那一張設定卡
情境:LumenDesk 管理後台

權限矩陣

會員角色設定
管理員讀取、編輯、邀請編輯者讀取、編輯檢視者僅讀取

尚未開始這項載入示範。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的權限矩陣設定卡中,按下「更新權限矩陣」後只遮罩這一張設定卡。遮罩內顯示 Spinner 與「正在重新計算 6 個角色的權限」,設定卡使用忙碌狀態;Header、側欄與其他不相關區域仍可使用。不要做全頁 Loading Overlay,也不要讓遮罩搶走鍵盤焦點。完成後移除遮罩、更新設定摘要,並以 status 訊息回報結果。

驗收清單

不要只確認欄位能不能點。

  • 被遮罩的範圍是否與不能操作的範圍一致?
  • 是否避免全頁遮罩?
  • 遮罩內是否有具體處理文字?
  • 相關區域是否標示忙碌?
  • 遮罩是否不搶走鍵盤焦點?
  • 完成或失敗時是否一定會解除遮罩?