UI

UX/UI 畫面設計規格範本（UI Specification Template） 適用標準：ISO 9241-210:2019（Human-centred Design）、WCAG 2.2（Web Content Accessibility Guidelines） 適用階段：系統設計階段（Design Phase） 負責角色：UX 設計師、UI 設計師、前端工程師 📑 章節目錄 文件資訊 設計原則與規範 資訊架構（Information Architecture） 畫面流程（UI Flow） 畫面規格（Screen Specification） 元件規格（Component Specification） 響應式設計規格 無障礙設計（Accessibility） 互動規格（Interaction Specification） 📝 範本 1. 文件資訊 項目 內容 文件名稱 [系統名稱] UI 設計規格書 文件編號 [專案代碼]-UIS-[版本號] 版本 v[X.Y] 建立日期 [YYYY-MM-DD] 最後更新 [YYYY-MM-DD] 撰寫者 [UX/UI 設計師] 審核者 [Product Owner / Tech Lead] 設計工具與資源 項目 工具/位置 Design Tool [Figma / Sketch / Adobe XD] Design File URL [連結] Prototype URL [互動原型連結] Design System [設計系統/元件庫名稱與連結] Icon Library [圖標庫名稱] 2. 設計原則與規範 2.1 設計原則 原則 說明 [一致性] [描述此專案的一致性準則] [簡潔性] [描述簡潔設計方針] [可及性] [無障礙設計目標] [效率] [使用者操作效率目標] 2.2 Design Token / 設計變數 Token 名稱 值 用途 color-primary [#XXXXXX] 主要品牌色 color-secondary [#XXXXXX] 次要色 color-error [#XXXXXX] 錯誤提示 color-success [#XXXXXX] 成功提示 font-family [字型名稱] 主要字型 font-size-base [N]px 基準字級 spacing-unit [N]px 間距基準單位 border-radius [N]px 圓角 2.3 排版規範（Typography） 層級 用途 字級 字重 行高 H1 頁面標題 [N]px [Bold] [N] H2 區塊標題 [N]px [Semi-Bold] [N] H3 子區塊標題 [N]px [Medium] [N] Body 內文 [N]px [Regular] [N] Caption 說明文字 [N]px [Regular] [N] 3. 資訊架構（Information Architecture） 3.1 導航結構（Sitemap） [系統名稱] ├── 首頁 Dashboard ├── 模組 A │ ├── 功能 A-1 │ ├── 功能 A-2 │ └── 功能 A-3 ├── 模組 B │ ├── 功能 B-1 │ └── 功能 B-2 ├── 系統設定 │ ├── 個人設定 │ └── 管理設定（Admin only） └── 說明 / Help 3.2 角色與功能對應 角色 可見模組 可執行操作 [角色 A] [模組清單] [CRUD 權限] [角色 B] [模組清單] [CRUD 權限] 4. 畫面流程（UI Flow） graph TD A[進入點/登入] --> B{角色判斷} B -->|角色A| C[Dashboard A] B -->|角色B| D[Dashboard B] C --> E[功能頁 1] E --> F[表單填寫] F --> G{驗證} G -->|成功| H[成功回饋] G -->|失敗| I[錯誤提示] --> F 5. 畫面規格（Screen Specification） Screen-[NNN]: [畫面名稱] 項目 內容 畫面 ID SCR-[NNN] 畫面名稱 [中英文名稱] URL Path [/path/to/page] 對應 Use Case UC-[NNN] 角色權限 [可存取的角色] 進入條件 [如何到達此頁面] 畫面佈局（Layout）： ...