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

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

呃…這和解析度有關…

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

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

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

形色 - 会上瘾的识花神器
形色 - 会上瘾的识花神器

這篇是意外插隊。在網路上亂逛爬資料時無意發現這款 App,評價還很高。第一代 iPad 剛出的時候,我做過寶石、甲蟲的標本箱 App,也做過從外觀、聲音、棲地辨認鳥類的科學型 App,看到能辨識花朵的 App 覺得好親切啊~

Pokemon GO 搶先玩了一下午
Pokemon GO 搶先玩了一下午

雖然我沒有童年可言,但起碼還知道神奇寶貝是什麼,也覺得皮卡丘好可愛。聽說 Pokemon GO 在澳洲 iOS App Store 上架,想起當年為了 Plants vs. Zombies 2 跑去申請澳洲帳號,剛好派上用場。(才不會跟你說我忘記帳號密碼搞了很久。)(圖多慎入)

UI 設計師看 Auto Layout
UI 設計師看 Auto Layout

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

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

進化吧!Mockup 展示圖
進化吧!Mockup 展示圖

(裝了 Photoshop CC 2015 後一堆外掛都 GG 了,幸好最重要的幾個都活著。)

設計師 ALEX BENDER

在講步驟前先來介紹這位設計師 ALEX BENDER ,相信他的作品很多人都看過。單張 iPhone Mockup 效果圖的前景深效果做得很精緻。

黑色星期五的特價
黑色星期五的特價

國外在黑色星期五的時候通常會有一波大特價,App也不例外,這次終於被我等到了。(應該要忍住不手滑的,已經買過其中幾個了@@)這次我來分享很喜歡的 PS 外掛包,和 Artifex Mundi 的解謎遊戲。

iOS 解析度製圖設定
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 立刻就有答案了。

iOS Guideline 怎麼看?(2)
iOS Guideline 怎麼看?(2)

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