基礎介面設計 Spec 標定

作為UI介面設計師,除了懂得畫出美好的幻想介面圖以外,標Spec也是很重要的基本功,更進一步(但其實也是基本能力)則是熟讀各大系統的介面設計Guideline,例如常見的手機系統:

  1. Android = Material Design Guideline
  2. iOS = iOS Human Interface Guidelines

畫 Spec 的幾種流派

最基礎也最土法煉鋼的方式,當然是設計完之後繼續在設計軟體內手動畫 Spec 圖,好處是非常隨心所欲,想怎麼畫就怎麼畫;壞處就是麻煩,非常麻煩,超級麻煩。而且人腦標定容易出錯、一不小心就會畫出難看又難用的 Spec。

土法煉鋼…. (頭條:首度公開!「Hey 元智」設計原稿)
已經終止維護好一陣子的 Assistor PS

再來是進階一點的方式:設計軟體 Spec 插件。例如 Photoshop 有 Markly, Assistor PS, SpecKing, etc。雖然我不是 Mac 使用者,Sketch (Mac) 也有自己的一套插件生態系。

這類工具可以歸類為「半自動」工具,通常要手動操作。有些插件雖然有全自動標定的功能,但通常因為各種技術因素並不可靠。

最後則是全自動的設計 - 開發協作服務,目前最入門的選擇應該是 Zeplin、Sympli,在一定限制下都提供免費使用。

這類服務一般來說一樣是與設計軟體如 PS、Sketch 結合,設計者完成設計後,使用對應的插件分析設計原始檔(例如 .psd),完成後再自動上傳到各家的雲端平台上,團隊成員可以同時瀏覽設計圖與動態產生的 Spec,針對特定細節留言,快速準確地交流。

在前述的分析上傳過程中,這類服務會完整地將整個檔案分析過一次,計算出各個設計元素的尺寸、彼此的間距等,在雲端平台上可以很方便地存取設計檔案中的素材、直接下載實際程式需要的圖片素材等。甚至例如 Sympli 提供與開發 IDE 結合的插件,可以直接在 IDE 內調用。

Sympli
Show your support

Clapping shows how much you appreciated BA’s story.