iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 23
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 23

【Day 23】設計流程:與工程師協作的重要文件

本篇重點:

  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、設計標註檔

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

重要元素:

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

上一篇
【Day 22】原子設計:頁面 ( Pages、Mockup )
下一篇
【Day 24】設計流程:原型設計的種類與技巧
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言