我使用的 3 種網站框線圖、原型工具比較

工具有好有壞，不過到一個地步後，比的常只是適用時機跟熟悉程度。抱持這個信念，我經常試用不同的網站框線圖（Wireframe）及原型（Prototype）工具，以下整理此時此刻還算熟悉的三種 – MS PowerPoint、Adobe Fireworks、Balsamiq Mockups，並從個人角度予以比較。其實我自己還用過 FlairBuilder、Axure RP，當然還有手打 HTML，不過這其實是篇躺在草稿匣裡超過一年的文章，且讓我先中斷拖搞吧。

要繼續看下去之前，有些背景資訊還是先聲明一下，這應該有助於讀者判斷我的論點有多少參考價值：

• 我曾經服務於知世安索帕，處理使用體驗事宜。個人負責的部分，會需要製作原型的時機，大多是為了要說明或實驗某種互動情形，而專為那些小範圍設計的互動原型。
• MozTW 的網頁，我大多都參與製作過程，也經常是類似於企劃的腳色，目前 Mozilla Taiwan 的網頁我也有參與。
• 本文寫作時，我還沒什麼機會為大網站製作原型，大致都是活動站或甚至單頁。偶而有時會製作小程式軟體的。後來有機會製作某大網站的框線圖與使用性測試用的原型，此時 Axure 那類有 Template 的工具會有點用，但為了其他人作業方便我還是用了 PowerPoint。
• 如果是自己要用的框線圖跟原型，我大多不在意顏色，偶爾會需要強調些什麼就是了。
• 我常切換於 Linux、Windows、Mac 之間，三邊都能用的軟體在我心目中會大加分。

那麼就開始吧：

Microsoft PowerPoint

PowerPoint 是我大學時期的好朋友，十分熟悉。組合動畫部分我小有心得，應該可以把「以具象動畫解釋抽象意涵」寫為專長，也以製作多媒體簡報為名做過幾個案子。PowerPoint 的優點是在微軟的努力荼毒之下，每個人多少都會用（精不精另當別論），也就是說這是個蠻適合多人輪流編修的工具。

• 本文撰寫時最新版：2010 （Windows）
• 價格：包含在 Microsoft Office 中，商用版定價約一萬元，不過你公司八成已經有買授權 :)

但也就是如此了。一般的狀況下蠻 ok，不過 PowerPoint （以及 Word）都為了「一頁看得完」的模式設計，對於經常一頁望不完的網頁來講是個阻礙思考的石頭。又，雖然有動畫功能，且結合多頁仍然可以做出還蠻不錯的互動效果幫助說明，不過它的本意畢竟不在此，除卻滑鼠點擊之外的行為都有點麻煩。由於兩邊不討好，還有其他選擇的情形下，無論是畫純框線圖，或者製作互動原型，PowerPoint 不是我的首選。

那為什麼之前會用呢？因為還要跟沒有其他選擇的人一起畫 XD 又，有時就是得把做出來的東西整理到投影片上，那麼這樣可以就地編修，也還算是個額外加分的優點。不過 2007 改介面之後畫圖變得有點麻煩，不知道能不能把繪圖物件單獨拉出來變成面板，這有點阻礙我的思考速度 :/

如果你也需要用 PowerPoint 來畫框線圖或簡單的原型，可以考慮下載這兩個元件範本來用：

• PowerPoint Wireframe Template for UI design，手繪風喔！
• PowerPoint Wireframe Stencils as Free Download，還提供了很多小圖示可以用

當然，作為自由軟體的支持者，不免要提一下 OpenOffice.org 這個免費、功能也不錯的辦公軟體。在繪製框線圖及簡單原型的部分，我覺得 OO.o 的 Impress 與 PowerPoint 大致是一樣可用，如果你是個體戶想省點錢，OO.o 夠了。不過 OO.o Impress 的動畫部分，雖然已經支援了 PowerPoint 2000 以後的所有特效，但編排介面說實在很差就是。

Adobe Fireworks

Macromedia 惠我良多，最愛的軟體是 Dreamweaver 與 Fireworks，也曾獲邀參加 Close Beta 測試。由於在 Fireworks 8 以前一直是愛用者，熟練度算也蠻不錯。

雖然我確實比較不喜歡換成 Adobe 品牌後的各項老 Macromedia 軟體，不過從 CS2 之後開始不用 Fireworks，卻不是因為情感上的理由，純粹因為當時我就轉用 Linux 了，而 Fireworks 8 用 Wine 跑得很順。事實上 gfx.tw 的 mockups 就是用 Fireworks 8+Wine+Linux 畫的。

• 本文填寫時最新版：Fireworks CS6
• 價格：大概台幣 14000 元，愈來愈貴了！

Fireworks 在我心中還是繪圖工具更多一些，不過產品策略上近期確實越來越轉往原型製作了。既然原本是網頁用的繪圖工具，超連結什麼的它當然有顧好，甚至也可以打簡單的 HTML 區塊進去。很早就有多頁概念的它，簡易的互動原型不成問題，而一直以來也有雄厚的擴充套件作為後援、讓你更方便地加上網頁相關的物件。

缺點是你會很容易往視覺的方向想，畢竟它本來是繪圖軟體嘛，東加一點西加一點，定力不足一下子就迷失了 XD 又，因為後來發現 Balsamiq Mockups 實在爆炸快，如果不是必然得要測試視覺的狀況，就不會用 Fireworks -- 連光碟都忘了丟哪裡去了…

據說近期 Fireworks 新增了很多方便製作原型的東西，如果你本來就需要用這套軟體修圖，可以考慮採用，我自己是沒在用了。

Balsamiq Mockups

掀起手繪風框線圖熱潮的 Balsamiq Mockups，一開始用只是覺得實在太可愛，後來倒是發現它很努力地往「讓你更方便快速地說明」這個方向前進。

• 本文填寫時最新版：去更新就對了，一次付錢終身更新。
• 價格：美金 $79，我的授權是用 OpenSource 社群參與的身分換來的

它的功能很簡單：框線圖。由於架構在 Adobe AIR 上，所以 Linux、Mac OS X 以及 Windows 都可以用，且檔案格式開放所以也有一些程式支援匯出入，例如 iPad 上的 iMockup、FlairBuilder 等等。

相較於其他這邊介紹的工具，它很貼心地在你滑鼠移到某物件上時，就自動在旁邊顯示相關的屬性面板。雖然其他工具多少會用工具列來讓你方便調整，但「在旁邊」和「在上面」是差很多的。另外，豐富的預設物件集，涵蓋網頁上的基本物件及一些常見的組合效果（例如分頁、地圖等），輔以可愛的手繪風，這些都讓 Balsamiq Mockups 在編輯上順暢又愉快。就我個人來講，畫框線圖用 Balsamiq Mockups 是最愉快的。

互動能力部分，基本上近乎零。你可以為物件設定點選的連結，不過就只能是這樣而已。如果要做互動原型，可以考慮搭配 Napkee 做後天調整，但 Napkee（我也有授權顆顆）不是很好用… 所以我僅拿來畫框線圖而已。

由於它採一個檔案就是一頁的方式，或許不適合頁面數量太多的網站 -- 管他的我也用不到 XD

使用這套軟體的朋友可以多逛逛 mockupstogo.net，上面有很多別人已經畫好的東西可以直接載來用。

---

之後有機會再來補上 FlairBuilder、Axure RP Pro 及手寫 HTML 的狀況，其實我真正還想討論多人共編時的狀況 (這會需要考慮團隊成員全體的軟體使用能力，以及元件重複使用的可能性)，但，以後再說吧。