從 Yep! 中學習 Animation
又是看了某篇文章，然後有感而發寫了分析筆記。UI 和資訊業一樣瞬息萬變，眨眼就從擬物風進化到扁平＋動態特效，總覺得自己追的挺辛苦的。推薦設計師們都訂一下 Medium 的 RSS，常常有好文章可以讀，英文跟我一樣破爛可以靠 Google 的整頁翻譯（遮臉）。感謝優設網的 子木 常翻譯好文章（有時候我也會扔英文文章壓搾他）。
工作清單：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 這篇文。
初學者的 Mockup
在畫好 Wireframe、定版後，就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法，我當它是視覺稿，所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種，最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧，其實指的就是製作 Mockup 的能力，字體設計、按鈕樣式、扁平化、擬物風等等。
用 iPad 畫 Wireframe
用 iPad 畫 Wireframe最大好處是修改快速、製圖方便。紙本操作無法簡單實現「複製」、「復原」這兩個很常用的功能。若是想在 Wireframe 上加些色彩讓畫面分出區塊更易閱讀，紙本操作和使用 iPad 繪製的時間成本完全不是同個等級。畫 Wireframe 肯定會面臨多次修改的問題，使用紙本光是擦鉛筆線都累了，自從買了 iPad 後我就把創意發想階段轉移到 iPad 上執行。
Adobe Muse CC 心得
「Adobe Muse CC 是為了想要建立網站但不想撰寫程式碼的設計師而設計。」官網開章明義就直接寫了這句話。好吧如果是為了不會手寫Code的設計師、只需要產出一些不需要套用程式的網站的話，Muse 是滿有吸引力的。（先不提它產出的 Code 很噁心這件事…）
關於使用者經驗測試
我很喜歡有人問問題，這表示不用絞盡腦汁想 blog 文章主題，有問題就盡量問吧，不管是留言、Twitter、或是寫信都可以。
「關於使用者體驗與使用者介面的測試，怎麼測試這樣的設計對使用者來說是好的？」
便宜有便宜的作法、難有難的深入，我的領域不是跟數據打交道的那塊，加上時間成本 和偷懶 我大多便宜了事（這麼理直氣壯的說好嗎？）以下是個人觀點。
初學者常犯的錯誤：忽視 UI Flow 的重要性
還沒畫 UI Flow 就開始設計？
這就像還沒規劃路線就開車上路，迷路是必然的！
UI Flow 能幫助理清使用者動線，讓介面更直覺。
使用者經驗藏寶圖：設計師不可不知的開發流程
每次專案開發，總覺得像在尋寶。
但沒有地圖，怎麼找得到寶藏？使用者經驗藏寶圖，就是我們的指引，
帶領團隊從構想到設計，順利抵達終點。
測試：你對線框圖的了解有多深？
Wireframe 不是美感設計，而是 UI 的骨架。
還沒定好結構就談視覺？
就像地基沒打好，直接裝潢一樣危險！
三階段線框圖：提升UI設計精確度的關鍵
每次新專案，我至少畫三次 Wireframe。
重工？
不，這是避免設計踩雷的保險。想知道為什麼？
繼續看下去吧！
文章分類
