Menu

幾款好用的原型設計工具 (prototype)

在程序、網頁被實現之前，一定需要把界面給「畫」出來，成為原型設計，就像動畫片要畫分鏡頭、手稿一樣。原型設計能起到有效溝通的作用， 漂亮，直觀的原型圖更是讓人賞心悅目。

 

1. Microsoft Visio

我最常用的原型設計工具，幾乎是Windows平台下惟一的「最佳」選擇。有很多的模板可以選擇，可以製作包括流程圖、平面佈置圖、工程繪圖、日程 圖、軟件界面、UML、靈感腦圖……

Visio的優點很明顯，上手很快，能比較快的畫出不同種類的圖，但缺點也非常明顯，由於要支持不同的「模板」，Visio的外觀功能不夠強大，而 且Visio2007和Visio2003相比，並沒有很大的改變，實在對Visio有些失望，不過在Windows下還有其他的選擇嗎？

 

2. Microsoft PowerPoint 2007

Office2007最值得稱道的是對顏色和形狀的快速樣式，PowerPoint同樣是，這個特點能夠幫助用戶很快的製作一套UI規範；同時，在 展示原型設計是PowerPoint的老本行。

但是畢竟PowerPoint不是專門的原型設計工具，所以一些配套的功能不夠，比如界面的文檔管理，界面的上下文標識等等。另外有人提供了一套PowerPoint的原型模板，還是不錯的。

 

3. Axure

可以說Axure是Windows上最出色的原型設計軟件，原因是：夠快，夠簡單，比Visio更加快，既然是原型設計，當然是低保真的。 Axure提供的幾個形狀能滿足基本的需求，但是形狀的定製功能太弱，比如大尺寸的圓角框，Axure就不能很好的處理，需要用4個形狀拼接起來。

Axure除了提供低保真的形狀外，還提供了註釋，界面上下文的實現，等等。其中界面上下文非常有用，如果要演 示一些界面效果的話，Axure提供的界面上下文是非常直觀的。

另外Axure能夠導出HTML和DOC的文件，能很方便的將其文檔化。

當然低保真的界面效果總有一天會成為高保真的界面效果圖，這個時候，你同樣能夠利用Axure來滿足：即擁有高保真界面，又擁有界 面上下文的功能。

Axure的模板功能很有特點，Axure擁有兩種模板的類型，一個是傳統意義上的模板，隨著模板的改變，應用 這個模板的頁面，也會得到改變；二是小部件（Widget）類型，當應用這種類型的模板的時候，這個模板中的所有控 件，都成為應用該模板的頁面的獨立控件，改變這種類型的模板後，其相關字頁面是不會發生變化的。簡單的說，就是Widget類型是一個控件包，你可以在新 的頁面中把這個包解開，把裡面的東西仍在新的頁面中，此後，這些東西就和Widget沒有關係了。

 

4. OmniGraffle

能畫出很漂亮的流程圖、原型設計，可以說是最好的原型設計軟件了，但只限在Mac OS上， 不能說是一種遺憾，在Windows上的用戶沒有辦法享受到這款軟件。自己也沒有用過，對於它的介紹也是從它的官方網站和心弦的博客中獲得的。

 

最後

溫伯格曾經在他的一本書中講到（具體哪一本實在想不起來）：「我工作只用筆和紙，力圖對複雜現象做出簡單的解釋。」有時候離開電腦屏 幕，你會發現你的思考力會上升。


也許你還會喜歡

 

常用原型圖設計工具

天天和產品打交道，不時要做一些頁面原型、離不開各種工具，工欲善其事必先利其器，好的工具軟件可以大大提高工作 效率，工具各有優劣，大家按需取之。原型設計工具我暫時把它分為兩類，Web應用原型設計工具及軟件應用原型設計工具、微軟的visio就不說了：

Web應用原型設計工具：先來看看這個幾個：Axure RP、Balsamiq Mockups和Pencil Project試用感覺：

 

 

第一個、Axure RP：

 

axure_5

來這裡看看視頻簡介：http://www.axure.com/tour.aspx

  • Axure的發音是」Ack-sure」，RP則是」Rapid Prototyping」快速原型的縮寫。Axure RP Pro是美國Axure Software Solution公司的精心傑作，可以說Axure是Windows上最出色的原型設計軟件，亦是web產品前期設計的首選，原因是：夠簡單、上手快，能 幫助網站需求設計者，快捷而簡便的創建 基於目錄組織的原型文檔、功能說明、交互界面以及帶註釋的wireframe網頁，並可自動生成用於演示的網頁文件和word文檔，以提供演示與開發；
  • Axure RP六合一功能：網站構架圖、示意圖、流程圖、交互設計、自動輸出網站原型、自動輸出word格式規格文件；
  • 國內都有很多教程了，看看這些：悠識網站的教程、iaxure網站
  • 客戶端下載地址：http://www.axure.com/downloads.aspx 現在是5.5的版本，支持圓角、SVN協調編輯等等。
 

 

第二個、Balsamiq Mockups：

 

mockups_fpa

Balsamiq Mockups 視頻簡介

  • Balsamiq Mokups是用Flex和Air實現的，在Mac OS, Linux和Windows下都能使用，有桌面版本、Confluence，JIRA，和XWiki中的版本；
  • 塗鴉風格、使用起來也很簡單、各模塊工具也很齊全，詳細說明可見官方博客 http://www.balsamiq.com/blog/?cat=14

iphonedemo

iphoneexamples

  • 有人提到不能輸入中文的問題，很簡單：在Mockups的菜單裡選擇 View -> Use System Font 就可以了；
  • 該軟件的桌面版售價78美刀。作者意大利人Peldi說這款軟件的設計就是用它自己來設計的，滿足自己的需求。而在經濟寒冷的2008年，從 1,322位付費用戶那獲得了162,302美元的收入（其中12月份就有39,000美元）;
  • windows版本下載地址 http://www.balsamiq.com/products/mockups/desktop#download


第三個、Pencil Project：

 

pencil_project

查看官網簡介：http://www.evolus.vn/Pencil/Screenshots.html


第四個、OmniGraffle

 

omnigraffle

 

 

軟件應用原型設計工具：

 

第一、UIDesigner http://qbar.qq.com/uidesigner/

  • UIDesigner由騰訊CDC出品；
  • 是如何設計軟件原型的呢？詳細介紹請見騰訊博客；