在上一篇文章中，我們談了設計系統的重要性：它是一套團隊共同語言，讓設計與開發可以對齊、確保介面一致性。這一篇則更往下聊 設計規範 和 介面元件，告訴你設計系統如何被實際運用到畫面中。

設計規範 vs 設計系統

很多人會混淆這兩個概念，其實它們是上下關係：

• 設計系統：偏向「架構化、可重用的元件庫與規則集合」，包括顏色、字體、圖示、元件、互動規範等，是系統化管理介面的基礎。
• 設計規範：則是針對特定專案、平台或產品，明確定義元件應用方式、樣式與互動細節。可以想像成設計系統提供「素材」，設計規範告訴你「怎麼用」。

舉例來說，Material Design 是一套設計系統，而你專案中可能會制定規範：按鈕要用 Primary、標題字體只能用 Noto Sans TC、表單欄位的錯誤提示要以紅色呈現…。

設計規範重要嗎 ?

• 保持一致性：同一個元件在不同頁面有相同表現，減少使用者認知成本。
• 加快設計效率：不用每次重畫元件，直接套用已經設定好的元件庫即可。
• 減少開發摩擦：設計規範清楚，工程師能直接照著落實，避免反覆討論。
• 支援團隊協作：新加入的設計師或工程師可以快速了解產品設計語言，降低訓練成本。

設計規範的範疇

設計規範可以分成幾個層面：

1. 視覺：顏色、字體、間距、排版、icon 尺寸 …。
2. 元件：按鈕、輸入欄、卡片、表單等元件的外觀、狀態（hover、disabled、focus）、排列方式。
3. 互動：點擊反饋、動畫效果、頁面切換方式、loading 提示、錯誤訊息呈現。
4. 可用性：表單驗證方式、按鈕位置、流程導引，甚至無障礙要求，例如文字對比、鍵盤操作支援。

元件規範

以 按鈕 為例，設計規範會先定義基礎元素：

• 尺寸（ 高度、寬度 ）
• 顏色（ 主色背景、白色文字 ）
• 圓角、內距（ padding ）、間距（ gap）
• 文字樣式（ 字體、字重、大小、行高、字距 ）
• icon 尺寸

在這個基礎上，會建立 狀態變化，像是：

• enabled（ 正常可點擊 ）
• hover（ 滑鼠移入時加深顏色 ）
• focused（ 調亮顏色或加上外框 ）
• disabled（ 降低透明度或灰階處理 ）
  

再來針對介面上的需求衍生出 不同種類的按鈕，同樣依照前面的方式逐漸建立出一套屬於專案的按鈕設計規範：

• Filled Button（ 主要操作 ）
• Outlined Button（ 次要操作 ）
• Text Button（ 輔助或次要操作 ）
• Link Button（ 跳轉用，無邊框 ）
• Icon Button（ 僅有圖示，常用於工具列 ）
  ⁝
  

這些類型同樣會依循基礎規範建立各自的狀態變化。透過這樣的設計規範，專案能確保在不同頁面、不同模組中，所有按鈕都有一致的外觀與互動邏輯，不會出現「每個地方的按鈕長得都不一樣」的混亂情況。

規範不是做完就收工 👷‍♂️

很多人會以為設計規範做完就能一勞永逸，但實際上它比較像「植物」而不是「雕像」——需要澆水、修剪，才能保持健康☘️。

舉例來說，有時候客戶突然換了品牌色，或公司想跟上深色模式的趨勢，這時候就得把所有元件翻一次，重新檢查顏色、字體、間距是不是還合適。或是專案後續因應新功能而增加的元件，這些都需要回頭把設計規範補齊。

📌 總結

設計規範跟設計系統其實就像一對好搭檔：設計系統提供素材跟基本規則，而設計規範則是教你怎麼正確運用它們。把這兩個結合起來，不只讓產品看起來一致又美觀，還能讓使用體驗更好，甚至幫團隊省下不少開發成本。

另外，設計規範也需要持續更新，如果開發用的還是舊按鈕，設計師畫的新畫面卻多了不同樣式，久而久之就會產生混亂😵。
所以我們需要把規範當成「動態文件」：需要的時候隨時補充，並且定期整理才是最實際的做法 !