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

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

工作清單:切圖

切圖有很多種方法,但切出來的圖只會有兩種:1.可以用。2.被退件。圖切出來會交給 F2E 或 RD 接手,請給他們能夠使用的圖方便作業。有不懂、不確定的部份請在切圖之前就先問過他們要怎麼處理,他們肯定會回答你。(不回答就是他們有很大的機率拿到爛圖拖長自己工時,誰敢不理你啊?)

工作清單:Mockup

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

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

找份正常的設計工作真難

谷歌開發者養成記!ANDROID設計師TAYLOR LING深度訪談 一文中,有一段寫道:

我有一個朋友是一名 UX 意見領袖, 他走遍了整個國家(譯註:馬來西亞)來宣傳 UX 的重要性。 他甚至去求職網站尋找所有和 UX 設計相關的工作, 然後他接受了各種面試 —— 出於研究的目的。他想要知道這些公司到底請不清楚他們想要招聘到什麼人。 也許在西方國家的情況會好一些, 但是在這個國家(譯註:馬來西亞), 他發現 95% 以上的公司都找錯了人。

這些公司在尋找一匹獨角獸:一個既能碼代碼, 又能做設計, 又能幹其他雜七雜八事情的人。 這個有趣的小實驗也告訴我們, 推進 UX 這件大業還需要很多的努力。 如果你想讓你的產品有良好的用戶體驗, 可不是隨便雇一個人就能自動讓你的產品變好並且讓用戶愛上這麼簡單的。

工作清單:Wireframe

Funational MapUI Flow 後,終於到來回修改最多次的 Wireframe 階段了。比起 Funational Map 和 UI Flow,這應該是最多人會接觸到的「規劃」。同時也是最花時間、圖片說明量最大的部份。在這階段修修改改總比都在畫 Mockup 或套程式了才在修改來得輕鬆省力。

工作清單:UI Flow

工作清單:Functional Map 後,繼續來寫 UI Flow 這部份。如果你不知道什麼是 UI Flow ,請參考 初學者的 UI Flow 這篇文。

業主的喜好
業主的喜好


通常我一天最多只想發一篇文,但剛看到 Dribbble 上的作品讓我差點跪下來哭。常用 Dribbble 的人應該都看過 Ramotion 這間公司的作品,他們專門製作「高品質」的 icon 和 介面設計,是世界級知名的設計公司。

工作清單:Functional Map

自從看過 Burn Your Portfolio: Stuff they don’t teach you in design school, but should 這本書後,就想整理個工作清單出來。工作流程這回事通常是公司訂的很難更改,但自己的工作領域內弄個 SOP 、整理出標準作業流程和待辦清單是被允許的。就從 Functional Map 開始吧。

好用的旅遊地圖工具:Jauntful
好用的旅遊地圖工具:Jauntful

Jauntful 是我自己私心要推廣,出門旅遊想找個能取代 Google Map 的免費地圖工具。能用電腦查好、插滿地標寫了筆記,然後手機存一份、最好可以印紙本隨身攜帶。Google Map 景點數量夠多但改版後超難用(我用不慣),且長得不夠漂亮,想找取代方案找很久了。如果你習慣用 Google Map 安排旅遊行程、或有使用旅遊手帳本的習慣,這個站肯定能討你歡心。

標示文件神器:specKing
標示文件神器:specKing

之前推薦過的 馬克鰻 絕對可以說是一個好用的標示工具,但它止步太久沒有更新的功能,而且也開始收月費了,於是我重新尋找好用的工具,目前推薦 2 套:specKingAssistor PS 都是付費的 PS 外掛。

iOS 支援向量切圖

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

iPhone 6 及 Plus 製圖建議

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