• UI 設計
  • 更新:2026-07-14
  • 初版:2014-09-15

iOS 支援向量切圖

起因是這一篇 iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? 1F 和 2F 的回答。我原本的作法是 1F 的方式:PS + Slicy。不過 2F 的回答很有意思:iOS 支援向量了喔!出 PDF 就好了。

爬了下文(也逼老公去查資料),看到 Stackoverflow 有一篇 Xcode 6 allows VECTOR image assets… any idea how to use them? ,文裡就有實測 .pdf 的效果。

看來以後切圖切的是 @1x .pdf,不用煩惱 @2x @3x 怎麼辦了。

想試試向量切圖嗎?請裝 Xcode6 ,目前 Appstore 上的 Xcode 還是 5,找有開發者帳號的 RD 測吧。

參考 iPhone 6 及 Plus 製圖建議 ,未來應該多是做 1x 的天下了。

(希望 Slicy 快點支援 .pdf 檔!在 Sketch 毛病特多的時候我完全不想去用它啊!)

20150410 補充

非常重要,請參考 Why I don’t use PDFs for iOS assets 一文。

iOS 即使是給它 .PDF 檔,仍然會產出各種尺寸的 .png 切圖給 App 用,這就產生一個問題:由 iOS 轉檔產出的 .png 到達可用等級了沒有?

Why I don’t use PDFs for iOS assets 的實測附圖看起來是 「沒有」!所以想用 .pdf 搞定 iOS 多尺寸切圖還要再等等。

PS.我拒絕回答 Android 可不可以用 .pdf 切圖這個問題。

更多文章

wave
iPhone 6 及 Plus 製圖建議

iPhone 6 和 Plus 新機一發表,群裡就有人跑來哀號說老闆叫他準備 iPhone6 的適配,可現在什麼文檔都沒有完整啊!在很多細節不明的情況下,我只能建議這種最保險安全的作法:做 @1x,放大給 @2x 和 @3x 用。以下情境預設為做一套 Mockup 要切出各種尺寸的圖。

px、pt、dp、sp 大混戰
px、pt、dp、sp 大混戰

dpi、ppi、px、pt、dp、sp 之類的名詞釋義網路文章已經有很多,但全部混在一起運用到 Mockup 上時該怎麼處理?

這個問題其實我也爬了滿久的文,沒翻到有比較完整的說法,所以自己整理了一篇。

iOS 解析度製圖設定

有人跟我提到:「iOS 在 psd 設計時解析度建議設為 144,這樣文字大小才會是正確的」。當年 iPhone4 剛出的某個晚上我和老公躺在床上聊 iOS 變 2x 了會遇到什麼狀況。聊著聊著兩人就槓上吵架了,也不管當時是凌晨兩點,通通爬起來開燈開電腦,一個翻出 Photoshop、一個翻出 Xcode,打字、設定字型字級、拿出 iPhone 設定一樣的字型字級。之後,我的製圖習慣一直使用 72 dpi

PSD 製作禮儀

在聊自己製作 PSD檔 的習慣之前,一定要先把 Photoshop Etiquette 拿出來講。這個網站在網路上流通多時並有簡體中文翻譯,開宗明義就說了是「Photoshop 禮儀」,且製造日期是 2012 年。雖然在此之前我就已養成某種程度的整理習慣,卻也仔細研讀這個站後才真正瞭解該怎麼做得更好。如果你的工作需要接觸 Photoshop,建議這個網站列舉出來的部份都要實作到PSD上。

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close