Home 設計UI 不可不知!UI:與工程師協作的必要文件!課程紀錄、標示文件

不可不知!UI:與工程師協作的必要文件!課程紀錄、標示文件

by Yuki Lai

一、 一定要做設計規範嗎?

內容詳細程度,可以分成三種類別:

  • 最精簡 : UI Kit介面套件
  • 內容適中:UI Pattern 設計模式
  • 最詳細:Design System 設計規範

最精簡 : UI Kit介面套件

UI kit是彙整介面上面元件的檔案,通常不會有說明文字,只是單純的元件原始檔。能幫助設計師快速套用到下一個專案的設計上。

*常見內容:常用元件狀態、產品標準色、文字段落樣式、圖示

*Adobe 官方提供UIkit

UI Pattern 設計模式

介於UI Kit 與 Design System 之間,會展示元件的實際運用範例以及使用情境等,更詳細的還會說明文字、程式碼。

*常見內容:使用情境、範例、說明文字

*UI Pattern

Design System 設計規範

設計規範是介面設計的技術要求與規則,包括目標、功能、元件、技術及限制條件等描述,是最詳盡的設計準則。

*一般小型專案基本不用做到設計規範。

切圖命名與格式

*Slice切圖:在介面設計上會需要用到許多圖片或是圖標等等的素材,設計師需要將這些素材提供給工程師開發,而不同裝置需要的格式也有所不同。

*檔案格式:

png:需要透明度的素材。

jpg:色彩較豐富的素材(檔案壓縮)。

svg:多尺寸縮放的素材(向量插圖、logo、不影響解析度)。

*切圖命名:

切圖命名沒有絕對的方式,但是能提供足夠的資訊去辨別這張切圖的用途,在命名前可先詢問開發人員習慣。

*圖片類型_分類_用途_狀態(btn_home_share_default.png)

切圖倍數:

現在的裝置解析度非常多元,在切圖時就需要另外匯出適應不同解析度素材,如此才能保持在每個裝置上看到的素材都會是清晰的。

*裝置需求:

  • 網頁:@2x (兩倍圖檔)
  • IOS:@2x、@3x
  • Android:@2x 、@3x、@4x

Spec 設計標注檔

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

*設計標註檔元素:產品介面、網格系統、間距、產品標準色、字型樣式、元件尺寸與樣式

你可以參考以下其他文章

Leave a Comment