超好用的網頁layout規畫工具:Balsamiq Mockups



Balsamiq Mockups 1 (by tenz1225)

前幾天老同事 Hector 介紹這個 Balsamiq Mockups 給我,一用之下驚為天人,用來畫網頁 layout 實在超級好用!

過去在規畫網頁 layout 時,用過不少方法:紙+筆、畫白板、用 PowerPoint 來畫,每次都弄得滿頭汗,特別是要做簡報或寫計畫書時,網頁還得畫得有模有樣,很多網頁元件得自己描出來;一個網頁的 layout 就要畫半天。有畫過網頁 layout 的人,相信都有類似的痛苦經驗。

Balsamiq Mockups 就直覺好用得多。內建75種常用的網頁元件,要用時拉到工作底稿上,調一下位置和大小,填一下內部文字就好了。很快就可以畫出一個有模有樣,清爽易讀的網頁 layout 草稿。

看看這段影片,就知道 Balsamiq Mockups 有多好用!

YouTube Preview Image

Balsamiq Mockups 還有一個頗實用的功能,可切換到全螢幕展示模式;進入全螢幕模式後,畫面上會出現一個超大的滑鼠指標,便於指向你要解說的部位,這樣連雷射筆都可以省下來了。

Balsamiq Mockups提供幾種不同的使用方法:線上使用或離線使用。線上版只要用瀏覽器進入這個網址就行,畫好的layout 可以另存成一個 xml 檔,也可以存成 png 圖片檔。離線版可以下載回電腦,無論連線與否都可以使用,不過需先安裝 Adobe Air 才能執行。也因為 Balsamiq Mockups 是 Adobe Air 的應用程式,所以可以跨平台,不論 Windows、Mac或 Linux 都可以跑,非常方便。離線版也可以用快速鍵進行剪貼簿操作,而線上版就無法用快速鍵了。

另外,如果覺得75種元件還不夠你用,還有個網站可以下載新的元件;也可以上傳自製的元件給別人用,嘉惠其他網友。

這麼好用的東西,可惜並不是免錢的。Balsamiq Mockups 的試用版,不論是離線還是線上版本,都會每五分鐘跑出一個小視窗提醒你註冊;註冊費用是 79 美元,其實也不算太貴。另外 Balsamiq Mockups 也提供一些免費取得註冊碼的方案,例如像我一樣是雜誌編輯或作者的話,可以跟他們要序號來寫測試文,部落格寫文介紹也可以去要序號。在15人以上的聚會介紹 Balsamiq Mockups 也行,總之方案很多,可以自己研究一下囉。

无觅相关文章插件,快速提升流量

馬上按讚,加入「西瓜的滋味」粉絲團!




喜歡請分享!

This entry was posted in internet, mac, PChome雜誌, 工作雜記, 推薦網站, 試用報告 and tagged , , , , . Bookmark the permalink.

10 Responses to 超好用的網頁layout規畫工具:Balsamiq Mockups

  1. Peggy says:

    這個網站不支援中文嗎?我輸入中文字都無法顯示

  2. tenz says:

    忘了講,要輸入中文時,要先勾選 View – Use System Fonts,這樣就能正常使用中文。

  3. converter says:

    的确很好用!
    可以放弃visio了!

  4. Pingback: Balsamiq Mockups,救我於網站Layout地獄之水深火熱 | Daisy's Digital Anthology

  5. 梅干扣肉 says:

    這個真有趣,
    手繪風感覺都活了起來~

  6. 網頁設計 says:

    哇~~超感謝~~對我來說超好用的~~

    觀迎參觀我們的網頁設計網站設計喔^^

  7. Pingback: hiroshi yui

  8. 網路開店 says:

    以前都用word畫
    這個真是太方便囉!

  9. Pingback: 還在用紙筆規劃layout嗎-Balsamiq Mockups | Core Dump

  10. Pingback: Balsamiq Mockups-手繪風格的wireframe繪製軟體 - 樂倍達數位科技

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>