UX/UI 畫面設計規格範本（UI Specification Template）

適用標準：ISO 9241-210:2019（Human-centred Design）、WCAG 2.2（Web Content Accessibility Guidelines）
適用階段：系統設計階段（Design Phase）
負責角色：UX 設計師、UI 設計師、前端工程師

📑 章節目錄

1. 文件資訊
2. 設計原則與規範
3. 資訊架構（Information Architecture）
4. 畫面流程（UI Flow）
5. 畫面規格（Screen Specification）
6. 元件規格（Component Specification）
7. 響應式設計規格
8. 無障礙設計（Accessibility）
9. 互動規格（Interaction Specification）

📝 範本

1. 文件資訊

設計工具與資源

2. 設計原則與規範

2.1 設計原則

2.2 Design Token / 設計變數

2.3 排版規範（Typography）

3. 資訊架構（Information Architecture）

3.1 導航結構（Sitemap）

[系統名稱]
├── 首頁 Dashboard
├── 模組 A
│   ├── 功能 A-1
│   ├── 功能 A-2
│   └── 功能 A-3
├── 模組 B
│   ├── 功能 B-1
│   └── 功能 B-2
├── 系統設定
│   ├── 個人設定
│   └── 管理設定（Admin only）
└── 說明 / Help

3.2 角色與功能對應

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]: [畫面名稱]

畫面佈局（Layout）：

┌─────────────────────────────────────────┐
│ [Header / Navigation Bar]                │
├───────────┬─────────────────────────────┤
│           │                             │
│ [Sidebar] │  [Main Content Area]        │
│           │                             │
│           │  ┌─────────────────────┐    │
│           │  │ [Component A]       │    │
│           │  └─────────────────────┘    │
│           │                             │
│           │  ┌─────────────────────┐    │
│           │  │ [Component B]       │    │
│           │  └─────────────────────┘    │
│           │                             │
├───────────┴─────────────────────────────┤
│ [Footer]                                 │
└─────────────────────────────────────────┘

元素清單：

狀態變化：

6. 元件規格（Component Specification）

Component: [元件名稱]

Props / 屬性：

狀態（States）：

7. 響應式設計規格

7.1 斷點定義（Breakpoints）

7.2 各斷點佈局差異

8. 無障礙設計（Accessibility）

8.1 WCAG 合規等級

8.2 無障礙檢核清單

9. 互動規格（Interaction Specification）

📖 使用說明

各章節填寫指引

💡 範例（以 HRMS 人力資源管理系統為例）

範例：請假申請畫面規格

Screen-005: 請假申請表單

元素清單：

狀態變化：

📌 審閱重點

• 每個畫面是否有明確的 Use Case 對應？
• 表單驗證規則是否完整（前端+後端一致）？
• 所有狀態（loading/empty/error）是否都有設計？
• 響應式斷點佈局是否有方案？
• 無障礙合規是否達標？