在畫好 Wireframe、定版後，就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法，我當它是視覺稿，所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種，最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧，其實指的就是製作 Mockup 的能力，字體設計、按鈕樣式、扁平化、擬物風等等。

我自己是 Photoshop 派的，因為它的外掛多、功能多、網路上的資源教學也最多，和影像有關的設計幾乎全包了、還可以畫畫 CG 圖。另外還有 Fireworks 、Sketch 、Xara 等等，不一定要用 PS 設計，挑自己最順手的就好。（不推薦使用 Illustrator 製作任何螢幕使用的 Mockup，AI 是印刷用的設計軟體。）

例子

舉個例子：亂撇版的 Wireframe 長這樣，有 Navigation Bar、大圖、大標語、幾個功能欄、很多字的Footer…（這是我亂撇的！千萬不要拿這種水準的塗鴉給主管或客戶看。）

.

.

.
（把亂撇的 Wireframe 乖乖用Axure 或 Balsamiq 畫精緻一點。）

.

.

之後你的 Mockup 就有可能會長成這樣。（這次用的 Mockup 是 PS 外掛產生的，用不到 3 分鐘就做好了。WebZap - Photoshop panel plugin for web developers ，神器推薦。）

圖是假圖、字也是假字，圖片和文字的來源有可能是接程式資料庫、也有可能還要跟客戶/企劃追討。但最後上線的網站長相就應該是這個樣子。很多客戶對 Wireframe 一點意見都沒有，看到 Mockup 完成後什麼保家救國愛地球之類的意見都會出爐。他們看不懂 Wireframe，直到視覺設計他們才會「稍微」知道畫面會是什麼樣子。有些甚至要做成 Prototype 才有辦法理解畫面的動線和操作。這類客戶通常在談合作、準備要簽約的時候把設計師捧上天，等到視覺稿出來就把設計師當名片 600 含印刷的美工踐踏。

Navigation Bar

網頁的 Navigation Bar 一定會有 LOGO和選單文字，有些網站為了突顯區塊會加上底色或底圖。

形象傳遞

這個區塊是使用者進入網站目光最先停留的位置，通常會放張大圖營造網站氛圍。可能放置滿版大圖、大字標語、動畫、左右滑動特效、廣告等等。

細部說明

像是某個 APP 有什麼樣的功能、網站能提供什麼樣的資訊或服務等等，更細節的介紹會放在大圖的下方。再更深入的內容會用 Link 的方式將使用者引導至內頁。

Footer

不管中間大圖、說明介紹區塊版面多長，Footer 一定在網站最底下、並寫明版權宣告、開發者訊息。像這個網站的 Footer 寫的就是 Copyright © 2013 - Akane - Powered by Logdown and Octopress 。當網站架構較龐大、有可能會在 Footer 增加網站地圖之類的快速連結，也有的網站放置更多作者介紹。

Mockup 之後的階段可能接 Prototype，或是直接切圖輸出。Mockup 和 Prototype 最大的差別就是一個會動、一個不能動。只要是會動的，無論是 Wireframe 或是 Mockup 等等都可稱之為 Prototype。不會動的視覺稿就是 Mockup。雖然翻譯上都可能稱之為「原型」，但實際上是不同的兩件事。

關於 Mockup 的製作技巧有個很棒的教學網站可以自修：Interface - Tuts+ Design & Illustration Category 。

製作 Mockup 有很多需要注意的魔鬼（細節），Web、iOS、Android…等等都不一樣，有興趣想先知道哪個部份的可以留言或寫信提醒我一下，不然一句以後有機會再來寫篇文…八成遇坑不補。