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

我自己是 Photoshop 派的,因為它的外掛多、功能多、網路上的資源教學也最多,和影像有關的設計幾乎全包了、還可以畫畫 CG 圖。另外還有 FireworksSketchXara等等,不一定要用 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 一定會有 LOGO和選單文字,有些網站為了突顯區塊會加上底色或底圖。

形象傳遞


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

細部說明


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


不管中間大圖、說明介紹區塊版面多長,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…等等都不一樣,有興趣想先知道哪個部份的可以留言或寫信提醒我一下,不然一句以後有機會再來寫篇文…八成遇坑不補。

comments powered by Disqus