動態效果的通靈之路
課堂上我出了一項練習，在講完 Wireframe 怎麼畫、包含哪些元素、說明文字怎麼寫後，拿了 Dribbble 上漂亮的 Mockup 當範例，請學員畫出 Wireframe。在台上看得出學員們滿不在乎以為小菜一碟的表情，但當我要求下拉選單、特效之類所有「輸入、運作、輸出」等邏輯條件都要寫成說明文字後，台下表情從傻眼變成惶恐，一副大難臨頭死了要怎麼寫的臉。（從台上看大家的表情變化超有趣。）
現在很流行「動態效果」啊，好多教學教你用 AE 做動畫。是啦動效好炫好漂亮，弄個 Demo 影片交給 RD，完全沒想過 「輸入、運作、輸出」 等條件，是要 RD 看著影片照抄練滿通靈 Lv.99 嗎？
UX 不是 Wireframe
哪來有畫 Wireframe 就是有做 UX 的錯覺？UX 不是 Wireframe，使用者體驗為什麼會是線框稿？當然不是啊！很多人以為有畫 Wireframe 就等於有做 UX 了，那整天抱著數據統計寫文件的 UX 設計師在幹嘛？會把有畫 Wireframe 當成有做 UX 的人，合作的 RD 同事通靈技能大概 LV99 點滿了。
Flow Chart 和 UI Flow
快一個月沒有發文了，忙著寫企劃案、做 Prototype、跑實驗生報告。最近要整理大量的 UI Flow，越整理腦袋越像醬糊。就來聊聊 UI Flow 和 Flow Chart 吧。Flow 就是「流程」，UI Flow 是頁面流程，而 Flow Chart 是流程圖，兩者是完全不同的圖表。
手繪 Wireframe 小技巧
群裡有人問起手繪 Wireframe 的工具和方法，我分享下個人經驗。不過現在很少這樣做了，都是鉛筆稿等級就進 Axure 製圖、幾乎沒用到麥克筆。
UI 設計師應該要會寫的文件
身為 UI 設計師，工作內容不是只有做 PSD 和切圖，只會這兩樣的叫美工。基本一位合格的UI設計師必須要具備撰寫文件的能力，文件最低限度需包含：企劃書、規格書、Wireframe、Mockup、切圖、標示文件、UI Kit、UI Pattern、Guideline。
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 或套程式了才在修改來得輕鬆省力。
文章分類
