速查表

這是整本 SaaS 後台設計指南的入口,不是規則的再次傾倒,而是教你怎麼導覽。全站 34 章分成三組:架構、元件、頁面。當你不確定該讀哪章時,用下方「你在做 X → 必讀章節」快速定位。若兩章規則看似衝突,看「規則衝突怎麼辦」的優先序。建議先用本頁定位,再進對應細章看完整規格。

一頁速覽

這是什麼

把後台最常碰到的四大塊——版面、表格、表單、回饋——濃縮在一頁,幫大家快速對齊該從哪裡下手。

什麼時候用

新專案開案、交接規範,或要先確認「這次改動該對照哪一章」時,先看這裡再往下讀細節。

預覽依本指南規則實作

版面

Sidebar + Topbar + 內容獨立 scroll

表格

Hover checkbox · Bulk bar

表單

Rich editor · Blur 驗證

回饋

Toast 3s · Undo 10s

標準後台骨架

這是什麼

左側導覽、頂部列與中間內容區的標準排版;內容區可獨立捲動,側欄寬度固定。

什麼時候用

任何後台新頁都應套這個骨架;需要更多橫向空間時,可點側欄「收合」只留圖示。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
指南速查表

速查示意

營收

NT$ 1.2M

+12%

活躍專案

24

+3

待辦

8

-2

趨勢(12 欄 grid)

怎麼查

先找到你正在做的情境,再循「必讀」進章;「選讀」是延伸補充。

你在做必讀選讀
新列表頁列表頁、資料表格、搜尋/篩選/排序批次操作、分頁、資源檢視
新增/編輯長表單新增/編輯頁、表單、Modal 與覆層按鈕、回饋
設定區設定頁範本、設定頁、導覽確認與破壞性操作、權限
刪除/危險操作確認與破壞性操作、回饋Modal 與覆層、按鈕
DashboardDashboard、資料表格圖表與資料視覺化、卡片
換主題/深色Design tokens、深色模式與 i18n響應式與無障礙

設定主題分工:導覽行為看「導覽」、內容與卡片看「設定頁」、完整版型看「設定頁範本」,三者勿混讀。

規則衝突怎麼辦

規則衝突時依此優先序裁決:各章的 MUST 優先於他章的 SHOULD;頁面章優先於元件章、元件章優先於架構章(例如列表頁的 primary 以「列表頁」為準,覆寫「資料表格」的 toolbar 寫法)。決策樹章(「Modal 與覆層」、「確認與破壞性操作」)與「Design tokens」是各自領域的單一真相。本速查表只做索引,不裁決衝突。

常見做錯

做錯正確
只讀速查表就動手,不查細章用速查定位後,進對應章看完整規格
列表頁在 toolbar 放 primaryprimary 只放 page header(見列表頁)
自己挑深色色碼用 Design tokens 定義的 token
把決策樹當摘要看就下判斷衝突回到對應決策樹章裁決

相關章節