Mockups

Balsamiq Mockups 是一款用 AIR 寫的設計使用者介面的 mockup 軟體,不知道 mockup 是什麼的可以參考前陣子 HappyDesigner Meetup 4 hlb 的投影片,也有影片在 vimeo 上,我蠻早就有知道有這款軟體,而且一直都很喜歡它的手繪風格,不過那時沒什麼需求,所以沒深入研究。

後來發現到它有免費提供的幾個方法(包括寫篇 blog 介紹),剛好當時準備 HDM4 時有需要畫個幾張常見網頁 layout 的圖示,本來還想像男子漢用 HTML + CSS 來寫,後來就決定申請一個授權來畫這幾張圖片,使用的心得還可以拿來發一篇 blog,實在是一舉兩得啊~~。

手繪 Mockups

雖然還沒持續很久,不過現在我做網站的步驟大概是先用紙筆畫 mockup ,然後就進入實作階段,以前的話我是條硬漢,直接寫 HTML + CSS,不過現在我已經沒辦法這樣做了,會不知道要寫什麼,基本上是大腦把設計和 coding 兩種行為分比較開了。用紙筆畫 mockup 的好處就是任何你想像的到的東西都可以畫的出來,你隨時可以加些不同的記號,像我的 mockup 通常都還會有些互動介面的變化示意,那為什麼還會需要 Balsamiq Mockups 這種軟體呢,我覺得用 Mockups 有幾個優點:首先是快速,Mockups 內建很多常用的UI元件,還可以簡單的拖拉改位置、修改大小、內容,如果是用紙筆畫的,要做修改就會比較辛苦了。

Mockups 的基本介面、各種元件都放在上方工具列

另外一個好處是 Mockups 內建不少很有用的小圖示,還有一些畫起來比較麻煩的元素,可以讓成品更具說服力,但卻不會讓你設計的過程花太多時間在繪製這些東西上。

Mockups內建很多的小圖示

最後我覺得最棒的是它的手繪風格了,整個就是很有感覺,不過在我使用的過程中還有發現一些問題,首先就是它不支援自定字形,只能選擇程式內建的字形或是系統字形,而程式內建的字形理所當然的不支援中文,要顯示中文的話要改成使用系統字形,但是這樣就不是手繪風了。另外一個問題是一些元件的邊緣常常會看到白邊,這些白邊其實就是所謂 half pixel 的部分,這些線條邊緣的 pixel 不是半透明,而是白底,所以要是有改動背景顏色的時候就會出現瑕疵了。

如果能夠忍受這兩個小問題的話,Balsamiq Mockups 是非常值得一用的,使用簡單(基本上只要拖拖拉拉就可以了),產出的成品也不錯,有在畫 mockup 的人可以試用看看。