首先,一款優秀的移動APP界面原型設計工具應該具備:
①.支援移動端示範(随時随地示範給BOSS,廁所&食堂&電梯…以展現我是那麼的敬業)
②.元件庫(高效複用,誰用誰知道)
③.可以快速生成全局流程(程式猿看不懂拆解的,給TA看這個)
④.線上協作(多個PM狗一起用)
⑤.手勢操作、轉場動畫、互動特效…(這些都不需要,留給專業的互動、視覺,搞那麼虛的不如多想想産品流程邏輯做做減法、寫寫xxRD啥的)
這些年,産品狗們折騰過的原型工具:
1.輕巧型
低保真;無控件;iOS;少互動;免費。
POP(Prototyping on Paper)

算是移動App原型設計神器 ,很多公司在用:quora、sina、豆瓣、36氪、ifanr…
操作輕巧簡單:先用手機拍下草圖原型(存到POP app内);然後開始編輯圖檔的哪個區域(按鈕)連結到什麼頁面,添加跳轉連結熱區,就可以在iPhone上給小夥伴們示範了,并且POP内嵌的互動動作 如側滑、展開、消失等,即可滿足一般的動态示範需要。
方法:拍照--添加觸控區--轉場方式--選擇圖檔
平台:全手機操作
缺點:分享不便。動畫有如側滑、展開、消失,快現的搖一搖。操作隻可以單擊。沒有控件,所有東西都靠你的照片。
Pencil Project
Pencil是一款開源的可以用來制作圖表和GUI原型的工具,可以作為一個獨立的app,也可以作為Firefox插件。内置模版可以幫你繪制桌面和移動界面中用到的各種各樣的使用者界面,包括流程圖、UI和一般的通用圖形。
通過它内置的模闆,你可以建立可連結的文檔,并輸出成為HTML檔案、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動app模版。
2.專業型
高保真度;自帶控件;Mac+iOS;全互動;收費+免費
UIDesigner + UIDPlayer
騰訊出品的原型軟體,中文,操作簡單,符合國人習慣,容易上手。友善分享。
方法:windows電腦安裝UIDesigner,使用現成控件進行可視化搭建,調試後通過網盤等方式發到iOS裝置,用UIDPlayer打開即可。
平台:隻支援Win+ iOS。可能也是優點,僅有的專門支援Win平台的原型軟體。
Blueprint + viewer
方法:基本都一樣,就是在iPad上操作。觸控不那麼精确,但是操作體驗很好,完整版的自定義庫按鈕很多很豐富。
平台:iPad + iOS
缺點:最重要的就是隻能在iPad上編輯,我做了個大型的項目,打開還是稍慢點,但是穩定,操作多了有點累。分享需要對方裝軟體,而且生成的項目檔案會很大。
3.超大型
高保真度;可拓展控件;自定義庫;适配;少互動;收費。
Axure
老牌原型設計工具,互動制作功能強大,當然同時也帶來了較高的學習成本。設計區域是無限畫布,友善給設計稿添加文字注解。在互動效果層面,可以實作非常多條件判斷、巧妙運用可以實作更複雜的互動。不過同時也會帶來“效率不高”的問題,因為細節過于繁瑣,是以會加重産品經理或互動設計師在畫原型時的負擔。
此外,作為一款離線工具,Axure的原型預覽和分享方式并不十分友好。浏覽器預覽本地檔案需要安裝插件;支援上傳到Axshare分享,但在國内的速度也較慢。因為離線,Axure 文檔存檔會比較安心,不過如果涉及到多人協作,也會有“資訊更新不及時”的問題。
軟體官網: http://www.axure.com/default.aspx
新版特征
1. 優化了界面和操作,明顯提高繪制效率,可直接在控件上改變形狀,同時加入了幾個常用形狀;
2. 支援了投影和内陰影,可以用來畫簡單的元件;
3. 支援更多的觸發事件;
4. 普通形狀也能增加事件效果,例如要移動一個形狀,不需要轉化成動态面闆;
5. 事件用例感覺也有所變化,增加了一些參數,例如切換動态面闆狀态時有更多的參數可以選擇;
6. 增加了和Justinmind一樣的實時預覽功能,再也不用一遍又一遍地生成頁面了;
7. 内容自适應,例如動态面闆或文字塊能根據内容自動适應到合适大小;
8. 強化的表格功能Repeater,可以自動填充資料,對資料進行排序,過濾等操作;
9. 頁面級的參數Onreszie,這樣在手機測試時可以作為橫豎屏判斷;
10. 響應式布局,可以定義不同視窗大小下的布局結構。
Axure RP的使用者群體非常寬泛,包括商業分析師、資訊架構師、可用性專家、産品經理、IT咨詢師、使用者體驗設計師、互動設計師、界面設計師、架構師、程式開發工程師等相關從業者。
Omnigraffle
OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結構圖以及插圖等類型圖的app,也可以用來組織頭腦中思考的資訊,曾獲得2002年的蘋果設計獎。
它采用拖放的所見即所得界面,你可以用鋼筆工具繪制自定義的模版或者圖形,此外還自帶Graffletopia提供的多個iPhone、iPad以及Android模版。
平台:iPad + Mac OS X
JustinMind
JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以輸出Html頁面。與目前主流的互動設計工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更為專屬于設計移動終端上app應用。
JustinMind 可以幫助開發者設計更豐富、更具互動新的移動産品線框圖,包含了iPhone、Android 以及iPad常用手勢,滑動、縮放、旋轉,甚至捕捉裝置方向等,進而創造出更具互動性的原型。另外,它可以導出原型資訊到Microsoft Word,生成規範的文檔。
此外,你還可以自定義小元件,建立自定義元件庫,并進行分類,不管對象是iPhone、iPad、黑莓、Android還是其他。
軟體官網:https://modao.cc
1、JustinMind的可視化工作環境支援以滑鼠的方式建立帶有注釋的高保真原型;
2、提供多種觸屏的互動效果,例如滑動、縮放、旋轉,甚至捕捉裝置方向等,在需要産生效果的部件中選擇對應的手勢即可;
3、JustinMind為iPhone、iPad、黑莓、Android提供了多樣的元件,可以建立自定義元件庫;
4、比Axure,JustinMind更好的提供了屬性視窗,并且更好的支援捕獲PS等軟體的圖像屬性;
5、可以通過拖拽等方式來實作跳轉、定向等互動效果,無需像Axure一樣每一步都隻能通過點選來完成。
4.HTML型
中保真度;自帶控件;全平台;需聯網;少互動;收費+免費
Moqups
是一個非常好的、免費的HTML5應用,通過它可以建立可愛樸素的線框圖、實體模型和UI概念。該程式使用起來非常簡單,并且有内置的模闆可以直接使用(模闆包括單選按鈕、連結、圖像占位符、文本框以及滑塊等)。
它還提供了iPhone和iPad模闆,以及iOS相關的按鈕、提示框、picker、菜單、開關以及鍵盤等。你可以設定網格的尺寸,并預覽和分享你的線框圖。Moqups提供了一個很有用的功能就是對齊網格,可以使對象精準對齊。
UXPin
UXPin是DeSmart團隊開發的一個簡易快速的實體模型和線上可點選原型創作工具。它基于優秀的使用者體驗設計原則,在建構原型中,它提供了一個完整的工具包(該工具包具有良好的使用者設計模式和元素)來從頭建構一個出色的原型。
UXPin 具有響應式的斷點功能,建立的響應式原型和線框圖可以運作在不同的裝置和分辨率上。另外該軟體還提供了版本控制和疊代功能,可以輕松的共享預覽,直覺的注 解和實時的協同編輯和聊天。該軟體擁有大量具有吸引力的使用者界面元素風格(包括web,iOS,Android等),并且具有快速、靈敏的響應拖放接口。
Proto .io
Proto .io是國外一款輕便好用的線上原型設計工具,在大多數浏覽器中都能使用,支援導入Sketch和PS設計稿做互動。界面清爽,擁有較為豐富的UI元件。可以直接用連結分享原型,而且因為內建了移動錄屏工具lookback,适用于使用者測試場景:可以記錄使用者點選、滑動、點選區域;也可以記錄使用者的聲音和facecam視訊評論。
目前Proto .io 有協作功能,隻是比較受限;此外,互動設計較為複雜,細節效果隻能通過容器實作,上手成本較高。價格相對Invision較便宜,但相對國内産品來說仍然較高。
墨刀
作為國内目前廣受認可的一款線上原型設計和協同工具,墨刀有内置豐富的UI素材和模闆,清爽的界面,讓設計原型的過程順暢高效。墨刀同樣支援Sketch設計稿的導入,拖拽式建立互動連結,可以通過連結或者二維碼在電腦端或者移動端快捷預覽原型。此外,設計師也可以通過墨刀進行自動标注,開發者也可以用墨刀進行切圖。
而墨刀新出的版本更加強化了協同管理功能,滿足了更大規模團隊的需求。不僅多人團隊可以在墨刀協同編輯/實時讨論,共同管理素材庫,對于人員權限的管理也更加清晰分明。目前很多雇主在招聘産品經理時,已經會将墨刀列為和Axure并列的必備技能之一。
軟體官網:https://modao.cc
另外墨刀的APP原型可以支援下載下傳在手機裡,當然是單機版,但是你可以完全通過手機來打開你的原型,相應的Axure這一點就做的很不好,雖然有插件支援手機預覽,但是非常卡頓。中文版教程對很多人來說很 NICE。
Protoshare
ProtoShare:線上網站開發協同制作工具是一個十分便捷的線上原型制作工具,側重于團隊協作。團隊成員可以通過這個工具對工作進行審查,并及時提供回報,對線框圖或内容進行建議。
作為一個強大的線框圖和原型平台,Protoshare提供了大量移動工具集(有來自中心資源庫的大量移動模版和大量2D、3D動畫過渡)。通過“拖放”界 面,你可以快速建立互動式的線框圖和移動原型,然後發送至iPhone、iPad或者Android裝置進行測試,體驗app的功能實作情況。
另外,Protoshare還支援分享和回報功能,項目成員可以标記和跟蹤的回報資訊來做出決定。而大量的資源庫意味着你可以使用模版和獲得的回報建立移動産品線框圖,進而演變為高保真的原型。
以上給大家總結了 産品經理常用的原型協作工具,我個人用的比較多的是Axure、墨刀,了解這些工具,可以讓開發人員更好的與産品溝通,由其是在做外包項目的公司,這點很重要。
選擇适合自己的原型工具開始你的原型設計之路吧!