首先非常感謝我的主管給予很大的自由度,在團隊初期塑形時讓我決定要使用哪些協作工具,幫助團隊在過產品規格內容時可以順利進行,當我還是新手產品經理時面臨到原型設計工具不曉得如何挑選?最終選擇 Figma 而我會放在全文最後一段說明,不過初期並非直接選擇 Figma 做為原型設計工具,而是歷經了多個產品比較、每個平台註冊試用後才做決定,重新回顧與分享我記錄在 Notion 上所做的對照筆記:
原型設計工具是用來負責溝通規格,一旦規格確定就大概會知道頁面需要哪些元素,後續交付視覺設計師進到 UI 設計
- 讓團隊清楚知道有哪些頁面
- 便於溝通開發流程
- 知道哪些頁面上有哪些元素與功能
下方提供我所評估過的工具們,選擇的前提為:
🟨 適用於 6 人以上團隊同時協作
🟨 可以長期使用、而非有試用期限
🟨 免費版本為優先
Draw IO
畫面直覺簡易,可連結 Google Drive;不過有些圖示看起來比較復古,雖然最後在製作 Wireframe 沒有使用它,不過在畫流程圖(Flowchart)時我經常使用!

Mockplus 摹客 RP
這款工具享有永久免費使用但有 3 款prototypes 及 10 頁限制,支援 10 人共同協作,也可依照實際應用需求購買付費方案。整體介面使用上很方便且內建元件豐富,如果需要直接使用模板亦可直接套用,建議大家可以註冊使用看看。
網站:https://www.mockplus.com/mockplus-rp

墨刀
中國上市公司萬興科技集團所開發的工具平台,墨刀免費版無法支援多人協作,優點為預設元件及平台視覺介面挺美的,與 Figma 介面非常相似

OmniGraffle
僅適用於 MAC OS 系統或是 iPad 且為下載離線使用,且限制免費版僅限 14 天試用期限;適用於流程圖(Flowchart)繪製
網站:https://www.omnigroup.com/omnigraffle

Gliffy
免費版限制 14 天試用;適用於流程圖(Flowchart)繪製

MockFlow
元件相當簡潔,對於快速產出線稿已具備基本功能,不過缺點為匯出時會有浮水印略為可惜

Balsamiq
Logo 是招牌的手繪笑臉:)目前分為 Web App 雲端版、Windows or Mac 桌機版及可與 Google Drive 對接版本;使用時意外進入某些分頁,導致關不掉畫面而造成困擾;手繪風格我還滿喜歡,可惜試用天數太短

Axure
Axure 是多數 PM 公司會採購的產品,該公司建立於 2002 年,是前輩級工具!免費版限制 30 天試用,目前版本號為 RP 10;介面相近於 Figma,同樣能多人協作及進行版本控制

Sketch
Sketch 也是很多公司會選用的工具,以一顆橘色大鑽石作為品牌識別,但僅適用於 mac OS 系統,曾經在 2012 年榮獲蘋果設計大獎;免費版限制 30 天試用,但考量目前我所屬團隊不是每個人都配有 Mac 電腦因此不適用

Cacoo
Cacoo 的介面是我最喜歡的,左側選單僅展示基本會需要使用的元件,讓主畫面能夠更聚焦圖表作業區;可惜仍有免費版限制 15 天試用,優點為免費版幾乎有全部製圖功能、也可以共同編輯

Figma
終於進入我的團隊目前選用的 Figma,初期使用的時空背景為免費版,經過 2 年後目前我們已升級為付費版本,我會另外寫一篇 Figma 的實作心得文,屆時再詳細說明付費版本使用上的注意事項及我是如何運用 Figma 從 0 到 1 畫出 Wireframe
基本上 Figma 完全符合我的需求,優點為支援多人即時協作且免費版就很好用、可以把畫面轉成程式碼,有時候像是顏色和尺寸程式人員就可以直接複製使用;缺點是使用久了累計的圖表區數量越龐大,Figma 讀取速度也會變慢或 Lag,這部分改採付費版也無法解決,回歸到電腦效能及如何再精簡圖表存放的位置,降低同一個專案中使用數量,這部分留待專門探討 Figma 的詳細文章我再說明

最終提醒同樣一份 Wireframe 面對不同利害關係人講述的重點會有說法上側重面向有所不同,舉例:
▪ 視覺設計師:溝通 Tone & Manner
▪ 工程師:前台與後台各自功能定義、前端互動設計的期望值
▪ 業務人員:預計會提供哪些功能、解決哪些商業問題
▪ 管理層:聚焦於產品結構與流程脈絡,不細講每一個畫面的互動功能
以上分享,歡迎與我交流囉!