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

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

呃…這和解析度有關…

試玩 Art Text 3 文字特效工具
試玩 Art Text 3 文字特效工具

Art Text 3 剛上 Mac Store 時我就注意到了,首頁 Banner 輪播很醒目。當時就在官網下載免費試用玩了下,覺得超酷炫,但暫時用不太到的樣子沒買。突然半夜朋友傳訊通知「喂、Art Text 3 降價囉!」,然後就手滑了…(遮臉)

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

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

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

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

設計師 ALEX BENDER

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

UI 設計師應該要會寫的文件

身為 UI 設計師,工作內容不是只有做 PSD 和切圖,只會這兩樣的叫美工。基本一位合格的UI設計師必須要具備撰寫文件的能力,文件最低限度需包含:企劃書、規格書、Wireframe、Mockup、切圖、標示文件、UI Kit、UI Pattern、Guideline。

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

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

iOS 解析度製圖設定
iOS 解析度製圖設定

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

工作清單:Mockup

以我自己的工作流程,會是:Functional Map > UI Flow > Wireframe > Mockup > 切圖 > 標示文件。當然在更前期會有 UX 研究、最後會接 HTML 等等,但就一位 UI Designer 來說應該是這些。

對 Mockup 而言…Wireframe 有什麼就畫什麼,不要亂改亂腦補!而且遵守 PSD 製作禮儀

iPhone 6 及 Plus 製圖建議

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

PSD 製作禮儀

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

設計風格資源筆記
設計風格資源筆記

這篇是我的筆記。訂 Guideline 本來就是件不好辦的事,尤其當無邏輯可言的時候更難整理出個什麼來。先從大量的參考資料開始,學習別人家是怎麼訂定的,再回過頭思考自己可以怎麼做。

Nest Pastiche 製作過程
Nest Pastiche 製作過程

這是模仿 Nest 煙霧警報器 做的 icon,打洞實在被難倒了沒辦法完全一樣,只能做個差不多相似的樣子出來。打洞排列怎麼做可以參考這篇:製作螺旋圓點花紋的方法 ,不怎麼好做就是了。