nav 要包在 header 裡？
Html5 有很多新元素，最常用到的就是 nav、header、footer 這三個。不過對於 nav 該放在 header 裡、還是在 header 外，就我學習到、和老公教的是「看情況」。
設計和 F2E 的切圖與切版
收到讀者來信，這位讀者是 F2E，發現設計師的切圖和 F2E 的切版似乎不太一樣，所以寫信給我。另外問切圖有什麼樣的流程和注意事項…不知道要怎麼詳細說明，其實還滿想回他一句「多被RD罵幾次就會了啊」…orz
W Hotel / Siam Center@曼谷
這 3 年我去了幾個亞洲城市，包含曼谷、東京、香港、北京、新加坡、吉隆坡。除了 ACG 只能靠日本沒辦法之外，曼谷真是好吃好買的地方。論設計，曼谷的設計作品在這幾個城市裡讓我印象非常深刻，以鮮明風格來說還遠勝東京。東京我覺得做最好的是迪士尼樂園，但迪士尼樂園在千葉…（喂）
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 製作禮儀 。
工作清單：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上。
文章分類
