什麼是風格指南？為何不可或缺？

風格指南是「如何講述品牌故事」的規範文檔：文案語氣、排版規則、視覺元素、交互模式……源自印刷業（如《衛報》風格指南），在 Web 領域同樣關鍵。最終目標：讓內容以清晰、一致的視覺語言呈現。 BBC GEL（全球體驗語言）是教科書級範例。

風格指南的三大核心價值

1. 系統自傳：沉澱專案設計決策與經驗，讓新成員快速上手、舊成員長期維護。
2. 跨職能溝通橋樑：設計師無法包辦所有細節（商業、內容、技術、QA、部署），指南讓各角色在正確節點獲取正確信息。
3. 一致性守門員：Nathan Borror 語：「良好的界面一致性不會被用戶注意到。」——它創造無感的愉悅體驗。

實戰方法：界面協調性畫布 + 層疊化文檔結構

界面協調性畫布

將所有典型元素（按鈕、表單、導航、卡片、提示……）及其狀態（默認、懸停、聚焦、禁用、載入）同時呈現於單一畫布，附帶代碼片段。優勢：

• 一眼檢視整體視覺協調性
• 前端直接複製代碼片段，消除還原偏差
• 沉澱可復用設計模式庫

層疊化文檔結構（借鑒 CSS 級聯原理）

從宏觀全局 → 逐層細化，而非事無巨細列清單。

10 步建立專業風格指南

1. 概述：專案目標、解決方案、品牌氣質、內容策略。
2. 佈局與柵格：網格系統、頁面模板、留白規則、線框原型。
3. 品牌識別：配色方案、Logo 用法、品牌圖片約束。
4. 字體排印：字體族、層級、行高、字重、上下文示例。
5. 導航系統：主/次導航、下拉、麵包屑、搜尋、各狀態樣式。
6. HTML 元素規範：標題、列表、按鈕、表單、表格、語義化標籤用法。
7. 媒體資源：圖片/影音尺寸、比例、壓縮、緩存策略。
8. 其他資源：高度定制化模組、邊界情況、錯誤狀態、廣告規則。
9. 界面協調性畫布：匯總上述所有元素的單頁面（建議 HTML 形式，可載入實際 CSS/JS）。
10. UX 文檔：用戶旅程、交互流程、無障礙標準、效能預算。

關鍵執行建議

• 不要等到後期才寫：設計過程中同步沉澱，思考一致性與標準化。
• 以溝通為目的：文檔服務於人，而非考核文檔產出量。
• 工具鏈整合：Figma/Sketch 元件庫 ↔ Storybook ↔ 設計令牌 → 自動同步文檔站點。
• 版本化管理：SemVer 版本號，變更日誌，避免團隊使用舊版規範。

風格指南不是束縛創意的枷鎖，而是讓創意在規模化協作中可持續、可擴展的基礎設施。好的指南，讓團隊「不思考也能做對事」。