coastdigitalgroup/coastai-skills

設定介面系統

目的

設定介面系統提供了一套方法論，用於組織、設計和建構使用者偏好、帳戶配置、工作區設定與計費入口。設定介面經常被忽略，導致視覺結構破碎、導覽模型不連貫、響應式設計不佳以及嚴重的無障礙障礙。此系統建立了一套標準化的方法，涵蓋空間佈局、導覽架構、狀態持久化模型（例如自動儲存 vs. 批次手動儲存）以及視覺提示，以降低認知負擔並防止未儲存資料的遺失。

使用案例

• 使用者個人資料與帳戶： 設計用於更新個人詳細資訊、安全憑證與偏好的介面。
• SaaS 工作區管理： 組織多租戶或團隊設定、成員角色、整合與權限閘道。
• 通知配置中心： 建立精細的矩陣式切換面板，用於管理電子郵件、推送與應用程式內警示。
• 計費與訂閱中心： 設計清晰的定價層級、當前方案指標、付款方式與歷史發票清單概覽。
• 開發者設定： 組織複雜的技術選項，例如 API 金鑰輪換、Webhook 與環境開關。

何時不應使用

• 隱含同意與隱私列： 對於 Cookie 接受、Cookie 分類與合規覆蓋層，請使用 consent-and-preference-system。
• 一次性入職表單： 對於簡單的單欄註冊步驟或初始調查擷取，請使用 form-design-system。
• 低複雜度介面（設定總數 <5）： 對於極為簡單的設定，請勿建立嵌套的多頁系統；直接將這些選項整合到全域標頭個人資料下拉選單或側邊欄頁尾中。

輸入

1. 設定清單： 所有可配置屬性的完整目錄，並按邏輯分組。
2. 狀態持久化模型： 決定變更是立即套用（自動儲存）還是保留至確認（批次手動儲存）。
3. 使用者存取角色： 關於誰可以檢視/修改特定項目的資訊（例如管理員、計費編輯者、檢視者）。
4. 間距與排版符記： 來自 fluid-spacing-system 與 fluid-typography-system 的現有設計值。

輸出

1. 設定導覽模型： 根據區段密度選擇導覽佈局（側邊欄、子分頁或摺疊面板）。
2. 主從式佈局規格： 將側邊欄控制項對應至其對應作用中設定窗格的網格/flex 組合。
3. 狀態持久化與變更記錄 UX： 用於儲存確認、載入狀態與髒狀態橫幅的視覺與聽覺模式。
4. 可存取的欄位與權限標註： 鍵盤路徑、語義圖說標籤以及明確的停用/唯讀樣式規則。

工作流程

1. 分組與優先排序設定（分群）

對設定清單執行卡片分類或主題分組：

• 個人層級： 個人資料資訊、頭像、登入詳細資訊、個人安全（MFA）。
• 組織/工作區層級： 一般工作區名稱、成員邀請、角色、全域整合。
• 傳遞/系統層級： 通知規則、聲音警示、主題選項（深色/淺色模式）。
• 財務層級： 方案層級、信用卡、計費聯絡人、發票表格。
• 危險區域： 刪除帳戶、停用工作區或轉移所有權。

2. 選擇佈局與導覽架構

選擇空間導覽模式：

• 側邊欄驅動（主從式）： 建議用於 B2B SaaS 與密集設定。使用持續存在的左側導覽欄（主）與可捲動的右側內容窗格（細項）。
• 分頁驅動： 最適合輕量至中量的設定面板（<5 個檢視）。在主設定頁面標題下方使用水平次要分頁選單（使用 tab-ui-system 或 segmented-control-system）。
• 單頁捲動（摺疊面板）： 最適合簡單的行動應用程式或設定清單，其中子區段可以內聯展開/摺疊，以保持垂直高度易於管理。

3. 建立儲存與回饋模型

為每個設定卡片選擇明確的狀態持久化機制：

• 自動儲存模式：
  • 用於隔離、低風險的選項（切換深色模式、通知偏好）。
  • 回饋： 在切換開關旁呈現內聯旋轉載入器與明確的「已儲存」文字指示器。指示器必須在無活動 1-2 秒後淡出。
• 批次儲存模式（髒狀態）：
  • 用於高風險表單或高度相關的欄位（更新密碼、帳單地址）。
  • 回饋： 顯示浮動的固定位置標頭或頁尾橫幅，指示「您有未儲存的變更」。
  • 動作： 提供兩個顯著的按鈕：「儲存變更」（主要 CTA）與「捨棄」（次要樣式文字）。當髒狀態時停用側邊欄/分頁導覽，或在使用者嘗試點擊離開時觸發「遺失未儲存變更」確認彈窗。

4. 設計高密度設定矩陣

對於通知中心或精細權限表格：

• 使用矩陣網格： 將核取方塊或開關對齊到對應傳遞管道的欄位（例如電子郵件、應用程式內、SMS）以及對應事件的行位（例如「在留言中被提及」、「已指派任務」）。
• 欄標頭對齊： 在垂直捲動時保持標籤固定，以保留上下文。
• 鍵盤就緒行高亮： 使用 interactive-state-system 樣式，以便聚焦儲存格時會高亮其對應的行。

5. 建構「危險區域」卡片

不可逆、破壞性的動作需要專用的視覺處理：

• 視覺隔離： 將動作（停用工作區、刪除帳戶）分組到佈局最底部的單一卡片中。
• 高對比度危險警示： 使用紅色邊框、淺紅色警告背景以及詳細說明後果的粗體警告。
• 雙重確認彈窗： 不要立即觸發破壞性動作。點擊動作按鈕必須開啟一個彈窗（overlay-and-dialog-system），要求使用者明確輸入資源名稱（例如「delete workspace-name」）以確認。

6. 為行動裝置響應式設計

• 摺疊為線性主優先： 在寬度低於 768px 的視口中，將側邊欄清單與內容細項窗格摺疊為線性主清單。
• 子頁面導覽： 在行動裝置上點擊側邊欄選項會開啟一個全寬滑動面板，僅包含該細項區段，並附有一個固定的「返回設定」麵包屑標頭。
• 放大觸控目標： 將核取方塊、開關與關閉目標擴大至最小 44px x 44px，以適應以拇指驅動的行動互動。

決策規則

• 自動儲存 vs. 手動儲存： 當切換開關/輸入欄位作為即時使用者偏好（例如深色主題或警示音效）時，使用自動儲存。當欄位邏輯分組且依賴驗證（例如電子郵件/密碼變更、帳單資訊）時，使用手動批次儲存，以避免不完整或無效的資料庫更新。
• 側邊欄門檻： 對於包含5 個或以上不同區段的設定套件，使用持續存在的垂直側邊欄導覽。對於4 個或以下的區段，使用主標題下方的水平次要分頁列。
• 未儲存變更的處理： 如果使用者修改了手動儲存檢視中的輸入欄位，然後在未儲存的情況下點擊分頁/導覽項目，務必阻止導覽並觸發確認對話框：「捨棄未儲存的變更？」

限制條件

• 無障礙（語義結構）：
  • 使用 <fieldset> 與 <legend> 標籤將欄位分組，以確保輔助技術能讀取嵌套控制項的上下文。
  • 表單控制項必須使用程式關聯的標籤（<label for="...">）或 aria-labelledby。
  • 在內聯自動儲存指示器上使用 aria-live="polite"，以便螢幕閱讀器能在不中斷打字焦點的情況下得知背景儲存。
  • 作用中焦點指示器必須滿足至少 3:1 的對比度，且不得被固定標頭或未儲存變更橫幅遮蔽（WCAG 2.2 SC 2.4.11）。
• 響應式設計： 多欄網格表格必須在小視口中堆疊成整齊的行，或轉變為水平捲動表格。文字元素必須使用 word-break: break-word，以防止長 API 金鑰或 Webhook URL 溢出。
• 視覺層級： 將相關設定分組到視覺上隔離的「卡片」中，並使用標準邊距間距（--space-l），以減少與單一無限清單相比的認知負擔。

常見失敗模式

• 「無聲儲存失敗」： 當自動儲存的切換開關在背景中失敗但未顯示錯誤狀態時，使用者會誤以為其變更已記錄。
• 「意外遺失」： 從半填寫的設定頁面導覽離開，導致所有變更遺失，且未顯示確認彈窗或保留狀態。
• 「神祕設定網格」： 建立大型多維度矩陣（例如通知）時未使用固定的欄或列標題，迫使使用者用手指在螢幕上對齊項目。
• 危險區域彈窗中的焦點陷阱不佳： 讓鍵盤焦點從確認刪除的彈窗中逃逸到背景頁面，使用戶在嘗試輸入刪除確認時，不小心提交了背景設定。
• 佔位符標籤： 使用輸入欄位的佔位符文字代替真正的、持續存在的 <label> 標籤。一旦開始輸入，上下文就會遺失。

驗證標準

• 對於 5 個以上的設定檢視，使用持續存在的垂直側邊欄導覽，並在行動螢幕尺寸優雅地摺疊為滑動子檢視導覽。
• 低風險偏好切換使用自動儲存模式，並附有內聯的 aria-live 儲存狀態載入器。
• 關鍵的多欄位表單使用手動批次儲存模式，並附有持續存在的「未儲存變更」浮動/固定橫幅。
• 破壞性動作被分組到視覺上隔離的「危險區域」卡片中，並附有多步驟確認對話框。
• 所有輸入群組都使用語義 HTML（<fieldset>、<legend>、<label>）。
• 作用中焦點指示器滿足 WCAG 2.2 對比度規則，且不會被覆蓋層元素或浮動橫幅遮蔽。
• 所有文字的對比度滿足 WCAG AA（最低 4.5:1，大字型/圖示為 3:1）。
• 行動裝置上的觸控目標滿足主要輸入的 44px x 44px 目標尺寸。