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

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

原始檔禮儀

這是 Mockup 最基本該做到的！
這是 Mockup 最基本該做到的！
這是 Mockup 最基本該做到的！

參考：PSD 製作禮儀

即使原始檔不需要給其他同事，同樣要照禮儀規定的方式製作。沒有人能保證自己就在這間公司待到老死這些原始檔不會有其他人碰，終有一天檔案會交接出去，請好好整理，這是禮貌。

各種狀態

Wireframe 有什麼就畫什麼，所有的狀態都要畫出來。善用智慧型物件（或類似的功能）可以節省修改時間。

規範文件

Mockup 和視覺規範、風格指南一類的文件息息相關。此類型文件不會一個月 3 個版本，同等於公司的 CIS。如果公司有這種文件就照作，沒有「這文件過時了好醜」所以無視這回事。你會嫌公司 logo 長太醜有事沒事就去改它嗎？

參考：Guideline 的重要性 、iOS Guideline 怎麼看？(1)

尺寸、Grid

Wireframe 是什麼、Mockup 就是什麼。Mockup 是什麼、最後產出就是什麼。（我一直覺得有了規範、尺寸、Grid 就喊侷限自由、扼殺創意的設計師都是搞不清楚狀況的那一群，反問他們侷限扼殺了什麼又回答不出來。）

文字

正常情況下，Mockup 是什麼、最後產出就是什麼，所以沒有 Mockup 和最終產品長不一樣這回事。各平台都有各自能使用的內建字體，能用內建文字盡量用內建。

App：用內建字體，中文字型檔都很肥一包，不要為了文字硬包字型檔進 App 裡讓使用者下載。

Web：網路上很多 Web Font 服務可自由使用，Mockup 用什麼字體最後產出就會用什麼字體。不要為了美觀 Mockup 用華康儷黑體結果最終的 Web 還是黑體繁。

參考：iOS、Android 字級單位

動態特效

有很多種作法，在製作前請先和 RD 討論清楚定義規格。

• .mov .gif
• 逐格
• 程式計算

.mov .gif

直接出影片動畫檔，基本按照圖檔的方式出檔案給 RD 就好了，製作前請先問過檔案格式和限制。

逐格

出很多張尺寸一樣的圖片，請 RD 1 秒播個 30 張之類，用靜態手法製作動畫或互動。

程式計算

給 RD 元件、時間、座標等資訊，由程式產出動態效果。如果是用內建效果或是套件包之類，設計師不會比 RD 熟悉寫 Code，問清楚需要提供什麼樣的圖檔後再動工，別瞎猜。

以上是不照做會和人結冤仇的部份，以下是做得爛頂多長得醜很難用的部份…

易用性、美學

• 圖學
• 色彩學
• 字學
• 排版
  .
  .
  .等等

從易用的角度來看以上都有一定程度的規則可依循，但從「美」的角度來看就會出現主觀意識。請以 「先求好用、再求漂亮」 的順序檢視 Mockup。

易用性參考：十大易用性原則
色彩學參考：色盲者使用的配色檢測法 、標示色碼的方法 、我的選色技巧

結論

基本上通通照著 Wireframe 畫就不會有問題（也只能照畫不要亂腦補，不然你畫 Wireframe 幹嘛？有缺有漏就要回到 Wireframe 修改完再開始做 Mockup）。多花點時間在 Functional Map 、 UI Flow 、 Wireframe 這三個階段，可以減少 Mockup 來回修改的時間。

（如果你不知道 Mockup 是什麼，請參考 初學者的 Mockup 。）

（同樣的東西一直重複出現、都不知道要寫什麼好了…）