看完西瓜的滋味介紹超好用的網頁layout規畫工具：Balsamiq Mockups後，除了重覆使用Tenz用過的「驚為天人」，或時常都在我blog出現的「神兵利器」以外，我真的沒有其他詞語可以形容我對Balsamiq Mockups拜服得五體投地的感覺。

Youtube的介紹片段
http://www.youtube.com/watch?v=aJTuFRaIi_g

我認為作為一個「非設計類」的網頁項目從業員，最大的問題往往出於如何把心目中想做到的版面設計呈現給網頁設計員及技術人員看。以往我會用SmartDraw、Visio甚至Photoshop去描畫網站構想圖，亦即是MockUp，可是除了費時失事四個字以外，我實在沒有辦法形容使用這些繪圖工具去畫MockUp的痛苦：打開Photoshop，畫一個準確Pixel的正方形，又要畫個合比列的Search Box放上去，然後就是旁邊的3個Tab……光是畫就經已夠麻煩，如果要改的話簡直是Oh My God！還未計要繪畫不同形狀的按鈕和圖表等，然而使用Balsamiq Mockups後，繪圖和修改都變得超簡單。預設的按鈕、間線、對話盒和圖表樣式像不像小朋友的手筆？我覺得蠻可愛的呢，就讓我示範如何弄一個版面吧。

所有圖片按圖可放大

下載Balsamiq Mockups Desktop版進行安裝後，你會在桌面看到這個可愛的icon，點擊icon就可以開始使用啦。由於Balsamiq Mockups使用Adobe Air研發，無論Win、Mac和Linux也可以運行自如，使用Linux的同事就沒有藉口說畫不到mockup給使用Mac的同事修改囉。

一大片空間任你發揮

需要寫字嗎？按Text，選取需要的文字格式，然後把它直接拖拉到一大片空間中就好囉，修改字型大小和樣式亦毫無難度，就像Word文件那樣方便。

先弄一個圖片簿，中間的圖片支援從網絡或Flickr中搜尋，如果你嫌棄彩色的圖片，Balsamiq Mockups還可以把它轉換為黑白Sketch。另外留意Video Box的Tab設定，可以把一排Tabs轉左轉右無難度之餘，亦可以為它加上Scrollbar。基本上所有擁有左右、上下屬性的組件都會提供這種貼心的佈局設定的。而且按Pos & Size後，還可以直接輸入該組件所需要顯示的實際Pixels大小和座標。當人家挑戰你的mockup不合比列的時候，你大可以說：我這個圖肯定是按照實際比列來畫的，不信你可以找個screenruler來量度一下哦！

Balsamiq Mockups亦備有iPhone組件，你看我這麼容易就做好一個iPhone Application的設計圖囉。

想和人家分享你的設計圖的話，可以把它儲存成副檔名bmml的檔案，也可以輸出XML和PNG。Balsamiq Mockups當然亦支援列印及複製技計圖等。以這個頁面為例，檔案大小只是9.69kb吧，相比起Visio和Photoshop的大牛龜檔案，你是否有鬆一口氣的感覺？

最緊要的一點就是Balsamiq Mockups可支援中文，你只需要在View設定為Use System Fonts即可輸入中文，再配合Markup的批改功能，把mockup給上司批改，再讓他交給他的上司，即上司的上司參看，整team人完全professional得無以復加啊！

想不到怎樣畫好自己的mockup嗎？可以到Mockups To Go「抄考」，我覺得如果你是公司搵真銀的話，這US$79「真係俾得值喎」。不過如果你想先試一下，也可以玩玩它的網上版本，又或者忍受「每五分鐘叫你、煩你一次」地使用Balsamiq Mockups的Desktop版本。另外搜尋Google大神也有許多介紹文，當然我不排除某些人只是為了取得免費授權而寫文章，卻也有不少有心人真心推介Balsamiq Mockups呢。請相信我去玩玩它吧，你一定不會後悔的。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.