隨著不一樣的公司,不一樣的人,會有不一樣的合作流程,就會有不一樣的工具需求。雛型(prototype)工具在目前公司需求分析這個步驟扮演非常重要的角色,一直以來是使用 Axure,但 Axure 在移動應用上的支援較弱,於是開始搜尋新的工具,Justinmind 評估後與 Axure 類型較近,若對評估過程有興趣,可以參考我的評估條件1、目標2與評估過的工具3。 接下來直接進入 Axure vs. Justinmind 的世界,版本說明:Axure 7.0,Justinmind 6.5.2。

  • 進入後的畫面
    axure進入畫面

Axure 直接給你一個畫布,讓你任意揮灑。

justinmind進入畫面 Justinmind 會問你要做啥?WEB?iPhone?而且也要先定義尺寸。從這裡可以以感受到雙方定位的微妙差異,如果還在需求發想階段,前者顯然較方便,後者就是隨便選一個了。相對的,後者比較貼近真實的設計。

  • 簡單畫首頁
    axure 簡單畫首頁

Axure 像小畫家,把元件(widget)拖拉拖拉到頁面上。

justinmind 簡單畫首頁

Justinmind 注意右下角預設一個元件(widget)就是一個大綱(outline),好像 photoshop 的圖層!

  • 使用者互動事件(User event)
    axure user event

Axure 右上角 onclick、onmove,最基本的事件,詳細說明可參考 Axure官網 interactions

justinmind user event

Justinmind 清楚的分類圖示與豪華的手勢支援,詳細說明可參考 Justinmind官網 events

  • 事件觸發動作(Action)
    axure user event

Axure 如圖所示,選清單上選動作,再選出對應的元件,詳細說明可參考 Axure官網 interactions

justinmind action

Justinmind 對照 Axure,兩方的動作沒有差異太大,但重點是直接出現畫面給你選要對應的元件,非常方便,詳細說明可參考 Justinmind官網 events

  • 動作觸發限制式(Condition)
    axure condition

Axure 始終如一,利用下拉式清單設定條件,詳細說明可參考 Axure官網 conditions

justinmind condition

Justinmind 花招可多了!直接用拖拉元件與條件限制式,我第一次用時有驚豔到,詳細說明可參考 justinmind官網 conditions

  • 操作動態面板(Dynamic panel)的差異
    axure dynamic panel

Axure 右下角這個位置就是專門留給動態面板使用的,從這裡點選進不同的面板設計。

justinmind dynamic panel

Justinmind 右下角的大綱只是把屬於動態面版的元件收納在一起,要換面版必須從畫面上的下拉式清單選擇不同的面板開始設計。

  • 實現自適應網頁設計(RWD)的差異
    axure rwd

Axure 是 7.0 版後加入的功能,點選紅框的圖示,就會出現各種螢幕尺寸供你選擇

justinmind rwd

Justinmind 就比較呆了,基本上是利用上面說到的事件觸發動作來達到變換的效果。要先建立一個新頁面,然後新增一個事件:當螢幕尺寸小於多少時轉頁到新頁面。所以!無論如何放大縮小螢幕尺寸,Axure 會自動依目前尺寸顯示你所定義的畫面,而 Justinmind 得自定義二個動作,放大到多少時的轉頁、縮小到多少時的轉頁,才能達到與 Axure 一樣的效果。

好,到這裡以上的種種,我覺得都只是操作手法上的差異,習慣就好,接下來要說 Justinmind 非常實用的功能。

  • 情節(Scenario)或頁面流程(page flow)
    justinmind scenario

話說,畫出個可以點點按按就可以跑非常擬真的產品雛型,使用者很開心,工程師通常不太領情。居然要工程師每次寫程式都要來點一下雛型看看流程怎麼跑,絕對會翻白眼給你看。所以繪制使用者情節(Scenario)與頁面流程(page flow)非常重要,也比較容易闡述各種情況,Justinmind 會將所有的畫面放在左下角,方便的拖拉、加上箭號、註解。Axure 可以利用一些手法達到相同的效果,但是每一個頁面是一個方格,不容易理解,不像 Justinmind 是頁面縮圖示意。

  • 留言(Comment)
    justinmind comment
    justinmind comment

這是個超級迷人的功能,將雛型的網址分享給使用者,利用網址使用都就可以直接在雛型上留下註解,而且註解可以更新回工作環境,以利掌握情況。

  • 互動提示(Highlight)
    justinmind highlight

打開後,會加強提醒(一閃一閃或出現手勢)可以觸發動作的元件,畢竟雛型有時只有幾條線,使用者不容易意會那裡可以點、那裡可以滑。

  • 文件(Requirement)
    justinmind requirement

可以針對元件寫需求,話說 Axure 也有地方寫啦,但 Justinmind 整合的好多了,容易看容易寫。

結論

Justinmind 目前發現,有時輸入嘸蝦米會當掉……另外,中文排版不太正常,轉出文件時中文無法出現,而且當元件多時,Justinmind 反應明顯變慢,中文正常、工具要操作順暢乃最基本需求,所以目前還是繼續用 Axure。當需要花麗的手勢支援,例:提案,才用圖片的方式在 Justinmind 實作手勢特效,但隨著目標不同,若只是需要手勢特效,那有太多其他的工具了,用不著 Justinmind ,真心希望有中文、速度正常版的 Justinmind。重申,沒有最好的工具只有最適合的工具,請先定出自己的評估條件1與目標2


  1. 這一次的評估條件:
    – 有豐富的基本元件,元件可以自製、做出更複雜的元件。
    – 有樣板頁面(Master Page)的設計,可以分出通用的需求與單獨的需求
    – 可以產生雛型,並且可以測試
    – 可以多人協作運作對雛型提出意見
    – 可以產生 PDF 文件,技術文件
    – 產生多螢幕的設計 
  2. 組織目標:
    – 企劃人員使用來跟客戶溝通
    – 跟開發人員溝通
    – 累積過去元件資產,降低雛型製作的成本 
  3. 評估過的工具,每項評估時數約 1~2 小時,可能不盡完善。但一直玩物會喪志啊,我沒有要做工具專家,所以也就不細細往下追究了。
    Uxpin:大致符合需求,每月一個使用者 $15,若要有比較好的元件庫並可以自動產出文件則需要 $25,少了寫需求文件的功能,線上作業(Web-Based)不適用實際工作情況,比較偏好本機作業的工具。
    Pidoco:也是線上作業(Web-Based),大致符合需求,唯缺了使用者評論功能,以一個帳號下的雛型數量數計費,一個月二個雛型 $12 ,計費方式和線上作業都不太適用。
    Hotgloo:多屏幕支援弱,以專案數量、共同協作者數量計費,線上作業,計費方式都不適合。
    Antetype:沒有多人協作,而且只供 OS X。
    FlairBuilder:多螢幕支援弱,類似 Axure。
    Moqups:多螢幕支援弱,元件不多。
    Invision:不能做線框圖,主要上傳視覺稿,針對視覺稿做互動連結(含手勢),有點像POP,專案成員可以針對視覺稿提出意見,提供視覺稿版本控管
    Jumpchart:不能做線框圖,是專案管理工具,用來追蹤網站相關的工作項目