表格與大量資料操作

Table|表格

用列與欄呈現需要跨筆比較的靜態資料;欄標題與資料關係要清楚。

常見俗稱:Table、表格、資料表格、後台表格、大量資料

60 秒決策

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

適合使用

  • 用列與欄呈現需要跨筆比較的靜態資料;欄標題與資料關係要清楚。
  • 閱讀季度費用,不提供選取、排序或批次操作。

不適合使用

  • 資料筆數很少且每筆能獨立閱讀。
  • 需求沒有排序、選取或編輯,卻想一次加入所有企業級功能。

畫面要說清楚的事

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

欄位先服務比較

欄位名稱、對齊與資料格式要讓人由上往下比較,不把重要值藏進卡片。

功能出現要有理由

排序、篩選、選取與批次操作只在任務真的需要時加入。

手機版重新排優先順序

保留名稱、狀態與主要操作;其他欄位移到詳細頁或展開內容。

必要狀態與回應

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

載入

保留欄結構或適合的等待回饋,避免整頁跳動。

有資料

欄標題、排序狀態與列操作可理解。

選取與批次操作

選取數量、工具列與取消方式同步更新。

空白、錯誤與手機

零結果、請求失敗與窄螢幕各有自己的資料策略。

操作 Demo

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

操作前先知道

  1. Table 任務測試

    先觀察:先看欄位與操作是否對應真實管理任務。

    操作:切換費用排序。

    預期結果:選取數量、目前儲存格或排序結果同步,鍵盤焦點仍可追蹤。

table Demo

LumenDesk 實際操作情境
單一元件示範
季度費用
項目費用狀態
雲端服務NT$ 48,000進行中
設計工具NT$ 72,000待確認
郵件服務NT$ 36,000已完成

尚未操作此 Demo。

告訴 AI

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

在 LumenDesk 建立 Table(表格):閱讀季度費用,不提供選取、排序或批次操作。清楚定義欄位、排序或選取規則、Loading/Empty/Error,以及 360px 手機版保留哪些資訊。不要只因為畫面像表格就加入所有功能。

驗收清單

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

  • 資料是否真的需要列與欄比較?
  • 每個排序、篩選與選取功能是否有使用情境?
  • 欄標題與資料關係是否可被輔助科技理解?
  • 批次操作是否顯示選取數量與退出方式?
  • Loading、Empty、Error 是否不共用一張空表?
  • 360px 是否保留最重要資料與操作?