一、 一定要做設計規範嗎?
內容詳細程度,可以分成三種類別:
- 最精簡 : UI Kit介面套件
- 內容適中:UI Pattern 設計模式
- 最詳細:Design System 設計規範
最精簡 : UI Kit介面套件
UI kit是彙整介面上面元件的檔案,通常不會有說明文字,只是單純的元件原始檔。能幫助設計師快速套用到下一個專案的設計上。
*常見內容:常用元件狀態、產品標準色、文字段落樣式、圖示
UI Pattern 設計模式
介於UI Kit 與 Design System 之間,會展示元件的實際運用範例以及使用情境等,更詳細的還會說明文字、程式碼。
*常見內容:使用情境、範例、說明文字
Design System 設計規範
設計規範是介面設計的技術要求與規則,包括目標、功能、元件、技術及限制條件等描述,是最詳盡的設計準則。
*一般小型專案基本不用做到設計規範。
切圖命名與格式
*Slice切圖:在介面設計上會需要用到許多圖片或是圖標等等的素材,設計師需要將這些素材提供給工程師開發,而不同裝置需要的格式也有所不同。
*檔案格式:
png:需要透明度的素材。
jpg:色彩較豐富的素材(檔案壓縮)。
svg:多尺寸縮放的素材(向量插圖、logo、不影響解析度)。
*切圖命名:
切圖命名沒有絕對的方式,但是能提供足夠的資訊去辨別這張切圖的用途,在命名前可先詢問開發人員習慣。
*圖片類型_分類_用途_狀態(btn_home_share_default.png)
切圖倍數:
現在的裝置解析度非常多元,在切圖時就需要另外匯出適應不同解析度素材,如此才能保持在每個裝置上看到的素材都會是清晰的。
*裝置需求:
- 網頁:@2x (兩倍圖檔)
- IOS:@2x、@3x
- Android:@2x 、@3x、@4x
Spec 設計標注檔
設計標注檔除了所有網頁的樣貌,應該要有介面所有元件的尺寸和樣式細節,要盡可能越詳細越好,開發人員才能精準地完成設計稿。
*設計標註檔元素:產品介面、網格系統、間距、產品標準色、字型樣式、元件尺寸與樣式