Adobe XD 製圖版面尺寸
Adobe XD 製圖版面尺寸

粉絲團有學生跑來問:「老師~為什麼 Adobe XD 預設的手機尺寸和官方文件數值不一樣啊!?我要聽哪個的?」

呃…這和解析度有關…

iOS 11 關於 iPhoneX 的尺寸與版面
iOS 11 關於 iPhoneX 的尺寸與版面

每次 Apple 發表會結束,出現新版的 macOS 或 iOS 時,我都很想仰天大喊「殺~人~喔~」。這次 iOS 11 當然有改新東西,但變化最大的是 iPhoneX 。

發表會一結束就跑去看 Guidelines 是 UI 設計師必備行為。

UI 設計師看 Auto Layout

我買了 Simon Ng 寫的 iOS 9 App程式設計實力超進化實戰攻略 (Beginning iOS 9 Programming with Swift) ,學習怎麼用 Xcode 和 Swift 做 App。

這本書非常推薦設計師和完全不懂程式的初學者購買,前幾章都在講 Xcode 的 GUI 操作和實例,跟著範例自己做個會動的頁面出來很有成就感,能學到很多。

iOS 解析度製圖設定

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

iOS 支援向量切圖

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

iPhone 6 及 Plus 製圖建議

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

iOS、Android 字級單位

「這是靠我自己摸索出來的喔!是拿 App 截圖進 Photoshop 辛辛苦苦比對所量出來的尺寸。」這位 UI 先生/小姐,你知道世界上有 Guideline 這種文件嗎?「比起問別人,自己摸索出來的才記得深刻嘛!」你知道世界上有工程師這號人物嗎?浪費一堆時間在 PS 量半天為了什麼?文件上寫得一清二楚。字級要用是 pt 或是 px 轉頭問問 RD 立刻就有答案了。

RainFont 開發流程


雖然我和老公合作過多個上架 App,這款字級表倒是我們第一次在沒有客戶的干涉下完成的作品。來談談設計理念和製作過程吧。
官方網址:rainstep.co

iOS Guideline 怎麼看?(2)

iOS Human Interface Guidelines 第二章是設計策略 Design Strategies ,主要講畫面、使用者操作、反應等等的一致性與注意事項。在閱讀這個章節之前,建議把 十大易用性原則 先看過一遍、對易用性有粗淺概念後會更容易理解為什麼 Guideline 會這樣寫。

iOS Guideline 怎麼看?(1)


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

8px 後續,模糊

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

  1. 小圖放大會糊。< 這是廢話,BJ4。
  2. 大圖縮小會糊。< 一定有人想問為什麼。
  3. 就算是向量檔,只要像素沒有對齊一樣會糊。
  4. PX 非整數。< Pixel 沒有0.x 這種數值。
開發前的冷靜思考:你的App點子真的獨特嗎?

每次聽到有人興奮地說:「這點子太棒了,肯定大賣!」
我都想潑盆冷水。
在開發前,先冷靜評估市場與自身能力,別讓熱情蒙蔽了理智。