2012/9/5

我使用的 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 的優點是在微軟的努力荼毒之下,每個人多少都會用(精不精另當別論),也就是說這是個蠻適合多人輪流編修的工具。

image

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

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

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

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

當然,作為自由軟體的支持者,不免要提一下 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 畫的。

Adobe Fireworks CS4 Beta

  • 本文填寫時最新版:Fireworks CS6
  • 價格:大概台幣 14000 元,愈來愈貴了!

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

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

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

Balsamiq Mockups

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

image

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

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

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

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

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


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

5 則留言:

  1. 我現在也最常用Balsamiq Mockups,但是有一個問題我覺得還蠻麻煩的,當mockup上的文字,要轉給開發者/設計師的時候,沒有什麼方法可以轉出來。

    另外,Adobe Air在Linux上只能用到2.x版,日後不知道會不會有升不上去的情況,另外中文輸入好像也有點問題(不過也有可能是我用的輸入法框架有問題)

    回覆刪除
  2. 最近剛好有這部分的需求,原本有找到一個based on firefox -> pencil
    http://pencil.evolus.vn/en-US/Home.aspx

    堪用而且新版ff也可以直接裝起來用
    不過好像沒在開發了...cry

    回覆刪除
  3. @Brecht 確實有點困擾... 你說的輸入法會不會是因為沒有開 System font?

    @Ferrari Pencil 到八月底還有推一個小改版耶,應該不至於是「沒在開發了」。香港的 Ben Lau 有在 Facebook 說他喜歡這套,不過我自己是一直不太習慣就是。

    回覆刪除
  4. Hi,
    I also use Balsamiq Mockups most often, but I have a problem that I think is quite troublesome.

    回覆刪除

歡迎留下您的意見