設定頁

設定項目一多,sidebar 兩層就放不下,所以 SaaS 通用做法是:點進 Settings 後,左欄 drill-down 成二級 nav 分群,右側用一張張 card section 顯示內容,危險操作集中放最底的 Danger zone。這章把分群慣例、儲存模式、危險區規格講清楚。當你要規劃設定頁結構、決定 autosave 還是 Save 按鈕、或猶豫 breadcrumb 要不要加時翻這頁。

標準結構

這是什麼

左側二層設定選單,右側以卡片區塊分組表單;頁面主標題對應目前選單項目。

什麼時候用

設定項目多且需分類(帳號、工作區、帳單)時,讓使用者清楚知道自己在哪一區。

預覽依本指南規則實作

Profile

Personal info

姓名、Email、頭像

Connected accounts

Google、GitHub 等

Google · ana@company.com

危險區(Danger Zone)

這是什麼

不可逆的危險操作集中在頁面最底部、紅色區塊;每項都需確認對話,重要刪除還要輸入名稱驗證。

什麼時候用

移轉擁有權、刪除工作區等無法復原的設定,必須與一般設定視覺上明確區隔。

預覽依本指南規則實作

Danger zone

移轉所有權

將此工作區移轉給其他成員

刪除此工作區

永久刪除工作區及所有資料,無法復原。

Claude Billing 設定區段

這是什麼

Claude:方案列、取消提醒橫幅、付款方式、發票表(日期/金額/狀態/操作)。

什麼時候用

訂閱與帳單設定頁;方案、付款、發票分區呈現,取消訂閱需明確提醒。

預覽依本指南規則實作

Layout 規格 · Claude · mobbin-claude-billing

欄位:Date · Total · Status · Actions

表單:Pro plan · Mastercard •••• 7649

Pro plan

Monthly

Your subscription will be canceled on May 6, 2026.

Payment

Mastercard •••• 7649

Invoices

DateTotalStatusActions
Apr 6, 2026SGD 30.00Paid

Resend Billing address 表單

這是什麼

Resend:姓名 → 國家 → 地址 → 城市/州/郵遞區號,單卡底部儲存。

什麼時候用

帳單地址等欄位順序固定的短表單;全部放在一張卡片內完成。

預覽依本指南規則實作

Layout 規格 · Resend · mobbin-billing-address-form

表單:Full name · Country or region · Address line 1 · Address line 2 · City · State · ZIP code

Billing address

規格速查

項目定稿值
左欄同一欄 drill-down 為二級 nav,分群放設定項目(非右側加欄)
分群Account / Workspace / Billing / Integrations / Developer / Security
右側一張張 card section(title H3 + 一句說明 + 內容 + 動作區)
何時用二級 nav設定 > 10 項時用二級 nav 分群
Danger zone頁面最底部,紅色 border/背景視覺隔離
危險動作一律 confirmation modal + type-to-confirm
Inline save大多設定頁:每張 card 自己的 Save 按鈕,按完跳 toast
Sticky save bar跨多 section 同改:底部浮現 [Discard] [Save changes]
階層表達由左欄 nav 表達,不在右側加 breadcrumb

常見做錯

做錯正確
設定頁右側再加一欄 nav用左欄同一欄 drill-down 為二級 nav,右側只放內容
加「設定 › 一般」breadcrumb階層由左欄表達,H1 = 當前 nav 項,不加 breadcrumb
Danger zone 混在一般設定中危險操作集中最底部,紅框視覺隔離
高風險欄位用 autosave高風險改動要有明確 Save 與 confirmation,別靜默存檔
card 全擠在一起沒間距每個 section 一張 card,卡片之間留間距

相關章節