工作清單:切圖
切圖有很多種方法,但切出來的圖只會有兩種:1.可以用。2.被退件。圖切出來會交給 F2E 或 RD 接手,請給他們能夠使用的圖方便作業。有不懂、不確定的部份請在切圖之前就先問過他們要怎麼處理,他們肯定會回答你。(不回答就是他們有很大的機率拿到爛圖拖長自己工時,誰敢不理你啊?)
工作清單:Mockup
以我自己的工作流程,會是:Functional Map > UI Flow > Wireframe > Mockup > 切圖 > 標示文件。當然在更前期會有 UX 研究、最後會接 HTML 等等,但就一位 UI Designer 來說應該是這些。
對 Mockup 而言…Wireframe 有什麼就畫什麼,不要亂改亂腦補!而且遵守 PSD 製作禮儀 。
工作清單:Wireframe
既 Funational Map 和 UI Flow 後,終於到來回修改最多次的 Wireframe 階段了。比起 Funational Map 和 UI Flow,這應該是最多人會接觸到的「規劃」。同時也是最花時間、圖片說明量最大的部份。在這階段修修改改總比都在畫 Mockup 或套程式了才在修改來得輕鬆省力。
工作清單:UI Flow
繼 工作清單:Functional Map 後,繼續來寫 UI Flow 這部份。如果你不知道什麼是 UI Flow ,請參考 初學者的 UI Flow 這篇文。
工作清單:Functional Map
自從看過 Burn Your Portfolio: Stuff they don’t teach you in design school, but should 這本書後,就想整理個工作清單出來。工作流程這回事通常是公司訂的很難更改,但自己的工作領域內弄個 SOP 、整理出標準作業流程和待辦清單是被允許的。就從 Functional Map 開始吧。
iOS 支援向量切圖
起因是這一篇 iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? 1F 和 2F 的回答。我原本的作法是 1F 的方式:PS + Slicy。不過 2F 的回答很有意思:iOS 支援向量了喔!出 PDF 就好了。
iPhone 6 及 Plus 製圖建議
iPhone 6 和 Plus 新機一發表,群裡就有人跑來哀號說老闆叫他準備 iPhone6 的適配,可現在什麼文檔都沒有完整啊!在很多細節不明的情況下,我只能建議這種最保險安全的作法:做 @1x,放大給 @2x 和 @3x 用。以下情境預設為做一套 Mockup 要切出各種尺寸的圖。
PSD 製作禮儀
在聊自己製作 PSD檔 的習慣之前,一定要先把 Photoshop Etiquette 拿出來講。這個網站在網路上流通多時並有簡體中文翻譯,開宗明義就說了是「Photoshop 禮儀」,且製造日期是 2012 年。雖然在此之前我就已養成某種程度的整理習慣,卻也仔細研讀這個站後才真正瞭解該怎麼做得更好。如果你的工作需要接觸 Photoshop,建議這個網站列舉出來的部份都要實作到PSD上。
Fixed Grid System 詳解
我踩到一個沒把 Fixed Grid 學好的雷orz 特此拿出來筆記下。之前在 [Grid 的運用:PS外掛] (https://blog.akanelee.me/posts/194263-application-of-grid/
) 一文中有簡單提到 Grid 的運用,但講得不夠清楚,後來活用時遇到個問題:如果你的網頁有側邊欄的時候,要怎麼設計才符合 Grid?
設計風格資源筆記
這篇是我的筆記。訂 Guideline 本來就是件不好辦的事,尤其當無邏輯可言的時候更難整理出個什麼來。先從大量的參考資料開始,學習別人家是怎麼訂定的,再回過頭思考自己可以怎麼做。