本篇重點：

1. 設計規範製作
2. 切圖 ( Slice ) 的格式與命名
3. 設計標註檔

1、設計規範製作

依內容詳細程度，從精簡到完整分為三種類別：介面套件 ( UI Kit )、設計模式 ( UI Pattern ) 與最詳細的設計規範 ( Design System )

介面套件 ( UI Kit )

UI Kit 是彙整介面上所有元件的檔案，通常不會有說明文字，是僅有單純元件的原始檔。( 能幫助設計師快速套用在下一個專案 )
UI Kit 常見內容：

• 常用元件與狀態
• 產品標準色
• 文字段落樣式
• 圖示 等

設計模式 ( UI Pattern )

介於 UI Kit 與 Design System 之間，會展示元件的實際運用範例以及使用的情境等，更詳細的還會有說明文字或程式碼。
UI Pattern 常見內容：

• 使用情境
• 範例
• 說明文字

UI Pattern 參考網站

設計規範 ( Design System )

設計規範是介面設計的技術要求與規則，包括目標、功能、元件、限制條件等描述說明。EX. Material Design Guidline
依專案需求，決定是否要撰寫設計規範。

2、切圖 ( Slice ) 的命名與格式

在介面設計上會需要用到許多圖片或是圖標等素材，設計師需要將這些素材提供給工程師，而且不同裝置需要的格式也會不一樣。

檔案格式：

• PNG
• JPG
• SVG
• WEBP

切圖命名：

可以詢問開發人員的習慣，注意要能夠提供足夠的資訊讓鞋作者能辨別切圖的用途。
EX. 圖片類型_分類_用途_狀態 ( btn_home_share_default.jpg )

切圖倍數：

切圖時需要針對不同裝置，另外匯出能適應不同解析度的素材，才能保持視覺上的清晰度。
裝置需求：

• 網頁：@2x
• iOS：@2x、@3x
• Android：@2x、@3x、@4x

3、設計標註檔

標註檔除了有所有頁面的樣貌，也應該要有介面所有元件的尺寸與樣式細節。越詳細越好，開發人員才能精準地完成設計稿。

重要元素：

• 產品介面
• 網格系統
• 間距
• 產品標準色
• 字型樣式
• 元件尺寸與樣式