EmptyState 空狀態

沒有資料時，畫面該說什麼。

在 Storybook 開啟 ↗

三種空是不一樣的

這是最常被偷懶的地方：全部塞同一句「查無資料」。但使用者面對的其實是三種完全不同的處境。

情境	使用者的問題	文案該回答
還沒有資料	我該做什麼？	引導建立第一筆
篩選後沒結果	我是不是篩錯了？	說出目前條件，引導放寬
沒有權限	是壞掉了嗎？	說明原因與找誰

三種空狀態

還沒有任何資料

建立第一筆後，這裡會顯示明細與合計。

查無符合的資料

目前篩選：單位＝宏昌實業、狀態＝已完成。試著放寬其中一項。

沒有檢視權限

此區資料僅限管理員檢視，請洽系統管理者。

✅ 這樣做

空狀態要有下一步。使用者到這裡是卡住了，不是來看插圖的。

🚫 不要這樣

不要只寫「無資料」。這句話沒有回答任何一種處境。

載入中不是空

「還在查」和「查完了沒有」是兩件事：載入中走骨架或就地變暗， 查完沒有才輪到空狀態。載入直接顯示空狀態，使用者會在資料到達前的那一秒 誤讀成「真的沒有」——然後資料突然出現，比慢更糟。

不要放大型插畫

後台系統的空狀態一天可能出現幾十次（每次篩選都會遇到）。 大型插畫第一次可愛，第五次就開始佔位子。圖示 ＋ 兩行字即可。

嵌在卡片或表格內的空狀態用 compact（垂直內距減半）——它出現的頻率比整頁空狀態高得多， 佔位子的代價也高得多。

取用

npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/empty-state.json