https://chihhung.github.io/Blog/tags/ux/Recent content in UX on Eric 個人部落格Hugo -- 0.151.0zh-TWMon, 18 May 2026 00:00:00 +0000https://chihhung.github.io/Blog/posts/%E6%95%99%E5%AD%B8/templates/design/ui_spec_template/Mon, 18 May 2026 00:00:00 +0000https://chihhung.github.io/Blog/posts/%E6%95%99%E5%AD%B8/templates/design/ui_spec_template/<h1 id="uxui-畫面設計規格範本ui-specification-template">UX/UI 畫面設計規格範本（UI Specification Template）</h1> <blockquote> <p><strong>適用標準</strong>：ISO 9241-210:2019（Human-centred Design）、WCAG 2.2（Web Content Accessibility Guidelines）<br> <strong>適用階段</strong>：系統設計階段（Design Phase）<br> <strong>負責角色</strong>：UX 設計師、UI 設計師、前端工程師</p></blockquote> <hr> <h2 id="-章節目錄">📑 章節目錄</h2> <ol> <li><a href="#1-%E6%96%87%E4%BB%B6%E8%B3%87%E8%A8%8A">文件資訊</a></li> <li><a href="#2-%E8%A8%AD%E8%A8%88%E5%8E%9F%E5%89%87%E8%88%87%E8%A6%8F%E7%AF%84">設計原則與規範</a></li> <li><a href="#3-%E8%B3%87%E8%A8%8A%E6%9E%B6%E6%A7%8Binformation-architecture">資訊架構（Information Architecture）</a></li> <li><a href="#4-%E7%95%AB%E9%9D%A2%E6%B5%81%E7%A8%8Bui-flow">畫面流程（UI Flow）</a></li> <li><a href="#5-%E7%95%AB%E9%9D%A2%E8%A6%8F%E6%A0%BCscreen-specification">畫面規格（Screen Specification）</a></li> <li><a href="#6-%E5%85%83%E4%BB%B6%E8%A6%8F%E6%A0%BCcomponent-specification">元件規格（Component Specification）</a></li> <li><a href="#7-%E9%9F%BF%E6%87%89%E5%BC%8F%E8%A8%AD%E8%A8%88%E8%A6%8F%E6%A0%BC">響應式設計規格</a></li> <li><a href="#8-%E7%84%A1%E9%9A%9C%E7%A4%99%E8%A8%AD%E8%A8%88accessibility">無障礙設計（Accessibility）</a></li> <li><a href="#9-%E4%BA%92%E5%8B%95%E8%A6%8F%E6%A0%BCinteraction-specification">互動規格（Interaction Specification）</a></li> </ol> <hr> <h2 id="-範本">📝 範本</h2> <hr> <h3 id="1-文件資訊">1. 文件資訊</h3> <table> <thead> <tr> <th>項目</th> <th>內容</th> </tr> </thead> <tbody> <tr> <td><strong>文件名稱</strong></td> <td>[系統名稱] UI 設計規格書</td> </tr> <tr> <td><strong>文件編號</strong></td> <td>[專案代碼]-UIS-[版本號]</td> </tr> <tr> <td><strong>版本</strong></td> <td>v[X.Y]</td> </tr> <tr> <td><strong>建立日期</strong></td> <td>[YYYY-MM-DD]</td> </tr> <tr> <td><strong>最後更新</strong></td> <td>[YYYY-MM-DD]</td> </tr> <tr> <td><strong>撰寫者</strong></td> <td>[UX/UI 設計師]</td> </tr> <tr> <td><strong>審核者</strong></td> <td>[Product Owner / Tech Lead]</td> </tr> </tbody> </table> <h4 id="設計工具與資源">設計工具與資源</h4> <table> <thead> <tr> <th>項目</th> <th>工具/位置</th> </tr> </thead> <tbody> <tr> <td>Design Tool</td> <td>[Figma / Sketch / Adobe XD]</td> </tr> <tr> <td>Design File URL</td> <td>[連結]</td> </tr> <tr> <td>Prototype URL</td> <td>[互動原型連結]</td> </tr> <tr> <td>Design System</td> <td>[設計系統/元件庫名稱與連結]</td> </tr> <tr> <td>Icon Library</td> <td>[圖標庫名稱]</td> </tr> </tbody> </table> <hr> <h3 id="2-設計原則與規範">2. 設計原則與規範</h3> <h4 id="21-設計原則">2.1 設計原則</h4> <table> <thead> <tr> <th>原則</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>[一致性]</td> <td>[描述此專案的一致性準則]</td> </tr> <tr> <td>[簡潔性]</td> <td>[描述簡潔設計方針]</td> </tr> <tr> <td>[可及性]</td> <td>[無障礙設計目標]</td> </tr> <tr> <td>[效率]</td> <td>[使用者操作效率目標]</td> </tr> </tbody> </table> <h4 id="22-design-token--設計變數">2.2 Design Token / 設計變數</h4> <table> <thead> <tr> <th>Token 名稱</th> <th>值</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td>color-primary</td> <td>[#XXXXXX]</td> <td>主要品牌色</td> </tr> <tr> <td>color-secondary</td> <td>[#XXXXXX]</td> <td>次要色</td> </tr> <tr> <td>color-error</td> <td>[#XXXXXX]</td> <td>錯誤提示</td> </tr> <tr> <td>color-success</td> <td>[#XXXXXX]</td> <td>成功提示</td> </tr> <tr> <td>font-family</td> <td>[字型名稱]</td> <td>主要字型</td> </tr> <tr> <td>font-size-base</td> <td>[N]px</td> <td>基準字級</td> </tr> <tr> <td>spacing-unit</td> <td>[N]px</td> <td>間距基準單位</td> </tr> <tr> <td>border-radius</td> <td>[N]px</td> <td>圓角</td> </tr> </tbody> </table> <h4 id="23-排版規範typography">2.3 排版規範（Typography）</h4> <table> <thead> <tr> <th>層級</th> <th>用途</th> <th>字級</th> <th>字重</th> <th>行高</th> </tr> </thead> <tbody> <tr> <td>H1</td> <td>頁面標題</td> <td>[N]px</td> <td>[Bold]</td> <td>[N]</td> </tr> <tr> <td>H2</td> <td>區塊標題</td> <td>[N]px</td> <td>[Semi-Bold]</td> <td>[N]</td> </tr> <tr> <td>H3</td> <td>子區塊標題</td> <td>[N]px</td> <td>[Medium]</td> <td>[N]</td> </tr> <tr> <td>Body</td> <td>內文</td> <td>[N]px</td> <td>[Regular]</td> <td>[N]</td> </tr> <tr> <td>Caption</td> <td>說明文字</td> <td>[N]px</td> <td>[Regular]</td> <td>[N]</td> </tr> </tbody> </table> <hr> <h3 id="3-資訊架構information-architecture">3. 資訊架構（Information Architecture）</h3> <h4 id="31-導航結構sitemap">3.1 導航結構（Sitemap）</h4> <div class="highlight"> <pre tabindex="0"><code class="language-" data-lang="">[系統名稱] ├── 首頁 Dashboard ├── 模組 A │ ├── 功能 A-1 │ ├── 功能 A-2 │ └── 功能 A-3 ├── 模組 B │ ├── 功能 B-1 │ └── 功能 B-2 ├── 系統設定 │ ├── 個人設定 │ └── 管理設定（Admin only） └── 說明 / Help</code></pre> </div> <h4 id="32-角色與功能對應">3.2 角色與功能對應</h4> <table> <thead> <tr> <th>角色</th> <th>可見模組</th> <th>可執行操作</th> </tr> </thead> <tbody> <tr> <td>[角色 A]</td> <td>[模組清單]</td> <td>[CRUD 權限]</td> </tr> <tr> <td>[角色 B]</td> <td>[模組清單]</td> <td>[CRUD 權限]</td> </tr> </tbody> </table> <hr> <h3 id="4-畫面流程ui-flow">4. 畫面流程（UI Flow）</h3> <pre class="mermaid">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</pre> <hr> <h3 id="5-畫面規格screen-specification">5. 畫面規格（Screen Specification）</h3> <h4 id="screen-nnn-畫面名稱">Screen-[NNN]: [畫面名稱]</h4> <table> <thead> <tr> <th>項目</th> <th>內容</th> </tr> </thead> <tbody> <tr> <td><strong>畫面 ID</strong></td> <td>SCR-[NNN]</td> </tr> <tr> <td><strong>畫面名稱</strong></td> <td>[中英文名稱]</td> </tr> <tr> <td><strong>URL Path</strong></td> <td>[/path/to/page]</td> </tr> <tr> <td><strong>對應 Use Case</strong></td> <td>UC-[NNN]</td> </tr> <tr> <td><strong>角色權限</strong></td> <td>[可存取的角色]</td> </tr> <tr> <td><strong>進入條件</strong></td> <td>[如何到達此頁面]</td> </tr> </tbody> </table> <p><strong>畫面佈局（Layout）：</strong></p>