sketchapp
zeplin
如何輸出適用於 iOS 與 Android行動裝置的圖示？
2018/08/26 13:49:33
0
14732
如何輸出適用於 iOS 與 Android行動裝置的圖示？
| 簡介 |
使用目前主流的繪製UI軟體 - Sketch App 搭配 Zeplin 製作行動裝置 Android, iOS的UI圖示 |
| 作者 |
陳宜萍 |
以目前主流的繪製UI軟體 - Sketch App，製作行動裝置 Android, iOS的UI時，再出圖至Zeplin的小訣竅：
首先要先提到 iOS 及 Android 所定義的解析度倍率
- iOS
- @1x：163 ppi
- @2x：326 ppi，1x的2倍大
- @3x：401 ppi，1x的2.4倍大，蘋果定義成3倍，是避免倍率的辨識混淆，但在系統建構時會自動縮小至2.4倍。
- Android
- mdpi：160 dpi、1倍
- hdpi：240 dpi、1.5倍
- xhdpi：320 dpi、2倍
- xxhdpi：480 dpi、3倍
- xxxhdpi:：640 dpi、4倍
上方定義中的解析度＠1及mdpi，能讓1pt=1px=1dp的尺寸，製作UI設計可以使用@1x / mdpi，以便後續進行切圖時，更為省事。
在Sketch上如何利用倍率進行切圖並做 Zeplin輸出，讓使用Zeplin的工程師，可以直接從該軟體存取多種尺寸的圖示呢？
- Step 1: 在Sketch製作時，針對iOS或Android，使用@1x 或 mdpi 尺寸繪製UI
- Step 2: 將需要的元件做切圖的動作，尋找工具列中的Plugins > Zeplin > Export selected
- Step 3: 輸出時，會自動開啟Zeplin，請自行新增專案
- Step 4: 匯入Zeplin時，請選擇輸出1x/ mdpi 格式
在這樣的設定下，往後存取從Zeplin的圖示就會有＠1x/ mdpi, hdpi, @2x/ xhdpi, @3x/ xxhdpi, xxxhdpi等等，標準的倍率尺寸。
相關文章
