為什麼要寫設計規範？

專業設計師在項目啟動前就會建立設計指南。**優化工作流、保證設計一致性、指導開發正確落地**，是嚴謹設計師的職業素養，也是進階基石。你不能怪開發沒有「像素眼」，你得給他們標準。

三類核心文檔

1. 樣式指南 — 元素級規範
2. 組件文檔 — 模塊級規範
3. 頁面標註 — 頁面級規範

※ 兼任前端的設計師可進階：用代碼構建風格指南與組件庫平台（如 Bootstrap、Purecss）。

1. 樣式指南：開發者的「像素字典」

定義項目中**每個原子元素的樣式**：顏色、字體、表格、列表項、圖標用法、分隔線等。建立後即可拖拽複用。

小技巧： 為元素命名（如 `#Primary-#Secondary`），溝通時比顏色名高效。

2. 組件文檔：復用模塊的「說明書」

登錄框、輪播圖、導航欄、頁尾等**可復用模塊**的完整定義：結構、樣式、響應式表現、交互狀態。不同於樣式指南，它關注「組合後的行為」。

關鍵點： 響應式項目必須定義各斷點下的「表現」，開發通常不會主動關注。
**導出建議： 每個組件單獨導出 `.psb` 文件，改稿時只需更新對應文件，極大節省時間。

3. 頁面標註：落地執行的「施工圖」

引用組件，定義**外邊距（命名 + 間距）**。實戰拆解法（曾用於 Adidas 電商等大型項目）：

• 導出頁面用到的所有組件
• 導出完整頁面
• 兩種導出均用 3 套圖層合成：`Normal`（正常態）、`Naming`（命名標註）、`Spacing`（間距標註）

神級外掛：SpecKing

自動標註間距、標籤、顏色、字體、尺寸，解放人力。作者最愛用於間距與標籤標註。

總結

雖然繁瑣，但對交互設計師**至關重要**。規範不僅是文檔，更是**團隊共識的具象化**。善用工具，讓規範成為加速器而非負擔。