iPhone 6 及 Plus 製圖建議

  • UI 設計
  • 更新:2025-01-26
  • 初版:2014-09-12

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

做小放大

之前做 @2x 的時候很多設計師在爭執做大縮小、還是做小放大的問題。原本在 @2x 的情況下只要保持數值都是雙數就可以了,但現在 @3x 出現,要保持所有的數值都要能是 3 的倍數…乖乖的做小放大最安全。當然也可以大縮小,但幾乎每一個元件都有4個數值:X、Y、Width、Height,還有字級。要保證這些數值都是3的倍數,我真的覺得做 @1x 比較快。

做小放大好處多喔!

  1. 不用擔心小圖放大細節會糊掉。
  2. 圖檔尺寸小,效能吃得少,電腦跑得順。
  3. 標示尺寸 1:1 ,方便快速。
  4. 完全不用煩惱數學問題除不盡算錯怎麼辦。

參考資料:iPhone 6 Screens Demystified

標示尺寸

你知道 RD 刻介面都是用 @1x 的數值嗎?即使設計師給的標示尺寸是 @2x ,RD 還是得除以 2 才能動工。現在有 @3x 的尺寸。設計師普遍數學不好,你確定自己做大縮小設計出來所有的切圖和標示尺寸都能被 3 整除嗎?萬一算錯被 RD 退件來回修改的時間是誰要吞下去?

明知自己算數學有危險就不要拿自己弱項硬上了吧…
補充:真的、數學不好不要硬上…(遮臉)

向量

向量的好處就是不管怎麼放大縮小都能保持圖檔銳利,真需要像素圖也有智慧型物件這樣的功能,做小放大絕對能保持頁面銳利。除非你做圖習慣不好到必需用更破爛的數學去補救,不然做小放大會遇到的意外遠遠少於做大縮小。

先求能做到正確無誤,再來考慮創意美觀。

就像寫考卷一樣,字再怎麼漂亮答案填錯還不是 0 分?團隊合作不是寫考卷,自己出包耍笨就算了,設計師背後還有 RD 要接手啊…

兵來將擋

某:「中午 RD 过来:iPhone 6 的适配你怎么看?」
我:「沒問題,大家把官方出的 HIG 研讀下,我們來好好討論。」
(關掉還沒放出完整文件的官網網頁,結束這個回合。)

某:「他刚刚又跑来跟我说审核要兼容 6 的尺寸。」
我:「說自己對 iOS 8 非常不熟,請他們提供完整 Guideline 避免再被退。然後 每4小時就去戳他一次 請問有Guideline了嗎?我在等著改版耶!」
(官方文件還在 Updated: 2014-09-08 ,發表會前的事。)

某:「策划又过来问了,天真的想用 pad 的尺寸来压缩直接用到手机…」
我:「跟他說,如果規範出來不能這樣搞,時程和人力成本的浪費是你自己要吞下去喔~~~」

某:「早上老板念叨了一句,6 的适配要考虑说了…」
某:「老大,你样机什么时候给我我什么时候弄。」
(GOOD JOB!)

以上是群裡對話…願賈伯斯在天之靈能保祐所有 UI 設計師(還有我的數學)。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
習慣用 Photoshop 畫 Mockup 的理由
習慣用 Photoshop 畫 Mockup 的理由

繪製 Mockup 的工具,目前戰最兇的應該就是 PS 和 Sketch 吧,在課堂上有學員問了這個問題。我自己是 Photoshop 派的,會推薦初學者學習的也絕對是 Photoshop。

iOS 解析度製圖設定

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

iOS Guideline 怎麼看?(1)


這是給 UI 看的教學。發現太多人不看Guideline…基礎問題問了又問,明明官方文件擺在那。就算英文看不懂,Google 打下去對岸有很多翻譯成簡中版的。最最少留意一下尺寸吧?(這次的 iOS7 官方文件省略很多沒寫到、建議回頭去看看 iOS6 的Guideline,兩份加起來比較紮實。)

8px 後續,模糊

8px那篇引起很多回應,我想這要從幾個角度來解釋。UI 口中的「糊」和 RD 眼裡的「糊」是有差的。圖片會糊的原因分成幾種:

  1. 小圖放大會糊。< 這是廢話,BJ4。
  2. 大圖縮小會糊。< 一定有人想問為什麼。
  3. 就算是向量檔,只要像素沒有對齊一樣會糊。
  4. PX 非整數。< Pixel 沒有0.x 這種數值。
Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close