幾乎每個 SaaS 後台都長成「左 sidebar、上 topbar、中內容區」這三段。這章把這套骨架的定稿尺寸講清楚，讓你不用每次重新猜寬高。當你要開新頁、決定內容要多寬、或搞不定「為什麼捲動怪怪的」時，就翻這頁對一下規格。
這是什麼
SaaS 後台最常見的整體骨架：左側導覽、上方工具列、右側主內容區。品牌與選單在左，搜尋與帳號在上方，列表與表單在右側可捲動的內容區裡。
什麼時候用
需要長期駐留的導覽、跨頁一致的操作列時用這種三欄式。若產品是單一全螢幕流程（例如引導精靈、簡報式儀表板），可改全幅版面，不必硬套側欄。
這是什麼
給外部客戶或合作夥伴用的自助後台：沒有左側 sidebar，改在頂部用水平分頁切換「儀表板、預約、文件」等。視覺仍用同一套 token，但資訊架構比內部後台更精簡。
什麼時候用
B2B 客戶只需看自己公司的資料、不需內部營運的全局 nav 時。內部員工仍用 sidebar 版 Admin app，兩者 token 可共用、shell 不同。
這是什麼
同一個後台畫面裡，「哪一段可以上下捲、哪一段要固定」的划分：左側選單、右側頁首列與頁面標題通常固定，只有主內容變長時在內部捲動。
什麼時候用
導覽項目很多或內容很長時，左右分開捲動，避免整頁跟著瀏覽器一起捲、導覽被捲走。少數刻意做成「整頁一起捲」的儀表板才例外，且要確認導覽仍有其他進入方式。
100dvh 或 100vh），頁面本身不垂直捲動。overflow-y: auto（與主內容捲動分離）。overflow-y: auto。window scroll。本指南網站實作：
DocsShell= 左欄獨立 scroll + 右欄 topbar 固定 + 內容區 scroll。
這是什麼
依螢幕寬度切換版面：內容區變寬變窄、平板以下側欄改為抽屜等，讓同一套後台從手機到桌機都能操作。
什麼時候用
產品需要手機或窄視窗時必須定義斷點與側欄行為。若僅限桌機內網，可簡化規則，仍建議保留小螢幕時側欄改抽屜，避免版面擠壓或遮擋內容。
| 名稱 | min-width | 對應裝置 |
|---|---|---|
| xs | < 576 | 手機直 |
| sm | 576 | 手機橫 |
| md | 768 | 平板直 |
| lg | 992 | 平板橫 / 小筆電 |
| xl | 1200 | 桌機 |
| xxl | 1600 | 大桌機 |
這是什麼
元件與區塊之間統一的留白數字（4–64），讓列表、表單、區段標題在同一產品裡看起來整齊一致。
什麼時候用
新畫面或新元件優先從既有尺度挑選，不要隨手填像素。只有特殊情境（例如極緊湊的表格列）才在規範表內縮一級，並記錄原因以免之後各自發明間距。
這是什麼
下拉選單、側邊面板、對話框、提示訊息同時出現時，誰蓋在誰上面的順序規則，避免重要操作被擋住或提示永遠看不到。
什麼時候用
新增任何會浮在內容之上的元件時，對照階層表選用對應層級。不要為了「蓋過別的」隨意調高順序，以免蓋過對話框，或讓成功提示擋住使用者正在填的表單。