資源檢視

同一批資源常常需要好幾種看法:表格比對、Grid 掃封面、Kanban 推進度。這章講 view switcher 怎麼放、切換時要記住哪些東西,以及各 view 的卡片該裝多少資訊。重點是「換的是呈現,不是整套工具列」——search、filter、primary CTA、bulk bar 在所有 view 共用一套,不要每個 view 各做一份。

View Switcher 與六種檢視

這是什麼

View Switcher:Segmented 切換六種檢視;toolbar 搜尋與篩選各 view 共用。

什麼時候用

資源列表需表格以外檢視時;切換應持久化 URL ?view=(見 agent 規則)。

預覽依本指南規則實作
狀態:Active
狀態負責人
行銷 Q2ActiveAna
官網改版DraftBen
CRM 匯入PausedChen
內部工具ActiveDana
  • Switcher 放 toolbar 右側;Table 為後台預設(03-data-table)。
  • 切 view 保留 search/filter query;各 view 專用 skeleton/empty。
  • Grid 卡樣式見 30-cards 媒體卡。

規格速查

項目定稿值
View 選項Table · Grid · Kanban · List · Calendar · Gantt(順序一致,不必全做)
Switcher 位置toolbar 右側(display settings 左邊),segmented control 樣式
Toolbar 共用search、filter chips、primary CTA、bulk bar 所有 view 共用
記住偏好當前 view 寫入 URL ?view=grid;上次選擇存 localStorage
Grid 卡媒體卡:縮圖 + title + 1–2 meta + status badge
Kanban 卡精簡卡:title、assignee、due、tag,可拖曳跨欄
Kanban 欄直欄=狀態/階段,欄寬 280–320px,欄頭顯示筆數
選取grid/list 多選 checkbox;kanban 拖曳 ≠ 多選,分開
Empty/載入各 view 專用 skeleton;first-use 與 no-results 分開

常見做錯

做錯正確
每個 view 各做一套 toolbarsearch/filter/primary/bulk 共用一套,只換內容呈現
切換 view 後不記住使用者選擇view 寫入 URL,並以 localStorage 記住上次檢視
Kanban 卡塞滿欄位變小型表格Kanban 卡只放精簡關鍵資訊,詳情點進去看
Grid 卡沒有縮圖純文字Grid 用媒體卡,靠封面圖快速視覺掃描

相關章節