使用者介面原型設計軟體介紹與應用 - Balsamiq Mockups

         最近負責公司的軟體工程組的架構師，主要負責規劃產品開發週期，在分別比較過UML為主和結構化為主的設計方式後，都發現一個問題，那就是如果在需求的階段就要設計畫面時，該如何進行，在這時坊間有許多的方法提供，有透過如Visio的軟體繪制，也有直接畫在白板上然後再拍照後輸入電腦中，但是這些方法都無法一氣喝成的接到後續的程式階段，而程式設計師還是需要重新繪製，當然也有些人是直接就裝了開發工具，然後就直接的拉畫面，這樣就可以SA拉完畫面後，就直接給程式設計師進行開發，但是問題又來了，一來開發工具的檔案非常的大，而SA只是要拉畫面就又需要授權付費，而拉畫面時，有時候會有一些元件與元件之間的規則，造成SA在使用上的困難，所以只好另尋他法。

 在需求上我希望找到一個輕量級、簡單使用、畫面元件夠多、擴充容易、可以匯出XML，最好可以支援多人同時編輯，我首先使用了非常有名的 Enterprise Architect，簡稱EA，在這套軟體中有支援UI的設計，但使用後深覺還是不適用，因為安裝檔案過大，畫面元件過少，而且無法進行匯出處理，經過不斷的搜尋後，終於找到了這個合適的軟體，名稱為 [Balsamiq Mockups]。

        基本上這是一套非常簡易使用的畫面設計的工具，上述我提到的需求都有符合，而且也可以直接進行線上的 Demo 展示(如下圖)，而文件有支援同時編輯的功能，所以試用了一陣子，感覺非常的合用，正努力推廣中，軟體本身有支援線上版與離線版，而線上版是免費使用，離線版可以免費試用7天，購買需要美金79元，但是如果你符合下列的條件時，就可以得到一個免費的授權碼。

符合條件：
1、非公益組織(例如: 慈善機構, 開放原始碼)
2、預計Demo給15個專業人士以上的人
3、專門寫技術、軟體介紹的部落客
4、如果你是一位易用性測試的專業人士(Usability Professional)

產品特色：

1、Low-Fi Sketch Wireframes
Sketchy, low-fidelity wireframes let you focus design conversations on functionality

2、UI Components & Icons
75 built-in user interface components and 187 icons, plus a whole lot of community-generated components.

3、Click-Through Prototypes
Linking lets you generate click-through prototypes for demos & usability testing

4、Export to PNG or PDF
Share or present mockups with embedded links using PDF export, or use a 3rd party tool to export to code.


5、Quick Add for Speed
Lets you build wireframes using your keyboard

6、Drag and Drop for Simplicity
Interfaces with drag and drop components–anyone can use it

7、Re-usable Symbol Libraries
Create templates, masters, and re-usable component libraries

8、Full Keyboard Support
CTRL+C, V, X, Z all you want!

9、Import and Export
Seamless integration with all versions of Mockups, for when you’re back online

10、Works Offline
Work on the plane or in a coffeeshop without an Internet connection

11、Mac, Windows, and Linux
Fully cross-platform

Download：
http://balsamiq.com/products/mockups

Samples：

http://mockupstogo.net/tag/samples

Demo：

http://builds.balsamiq.com/b/mockups-web-demo/

取得免費的授權碼的方式與介紹：
http://balsamiq.com/free


關鍵字：UI、User Interface、軟體工程、Balsamiq Mockups、線上編輯、繪圖