【轉】15款優秀移動APP産品原型設計工具
原文網址：http://www.woshipm.com/rp/64741.html
一新來小盆友問：“移動産品原型設計都用啥工具？”
答：“@#￥……&%*”
又問：“能詳細說下各個工具嗎？我比較一下”
“……”
好吧，誰讓我那麼的愛分享而你又是小美女呢
———————正文開始————————
首先，一款優秀的移動APP産品原型設計工具應該具備：
①.支援移動端示範（随時随地示範給BOSS，廁所&食堂&電梯…以展現我是那麼的敬業——長點工資必備）
②.元件庫（高效複用，誰用誰知道）
③.可以快速生成全局流程（程式猿看不懂拆解的，給丫的看這個）
④.線上協作（多個PM狗一起用）
⑤.手勢操作、轉場動畫、互動特效…(這些都不需要，留給專業的互動、視覺，搞那麼虛的不如多想想産品流程邏輯做做減法、寫寫xxRD啥的)
這些年，産品狗們折騰過的原型工具：
1. POP（Prototyping on Paper）
算是移動App原型設計神器 ，很多公司在用：quora、sina、豆瓣、36氪、ifanr…
操 作輕巧簡單：先用手機拍下草圖原型(存到POP app内)；然後開始編輯圖檔的哪個區域（按鈕）連結到什麼頁面，添加跳轉連結熱區，就可以在iPhone上給小夥伴們示範了，并且POP内嵌的互動動作 如側滑、展開、消失等，即可滿足一般的動态示範需要。不太明白？
2、Pencil Project
Pencil是一款開源的可以用來制作圖表和GUI原型的工具，可以作為一個獨立的app，也可以作為Firefox插件。内置模版可以幫你繪制桌面和移動界面中用到的各種各樣的使用者界面，包括流程圖、UI和一般的通用圖形。
通過它内置的模闆，你可以建立可連結的文檔，并輸出成為HTML檔案、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動app模版。
3.Axure
大 家都很熟悉了，這裡主要說下移動端的示範，這樣才充分表達原型意圖。按F5生成原型的時候，在“Mobile/Device”選項中可以設定适配移動裝置 的特殊原型（Axure 6.5以下版本），再用移動裝置通路你生成的原型連結即可（該頁面建立一個桌面快捷方式）。
4、Proto.io
Proto.io是一個專用的手機原型開發平台——可以建構和部署全互動式的移動程式的原型，并且可以模拟出相似的成品。它可以運作在大多數的浏覽器中，并提供了3個重要的接口：dashboard、編輯器以及播放器。
dashboard 可以用來管理項目。編輯器是建構原型的環境，由一組設計和開發原型的工具組成，另外還可以建構互動。播放器用來觀看原型，并與原型進行互動，并提供了相關 工具來标注和保留回報資訊。你可以直接在真實的移動裝置上對原型進行測試。并且可以使用iOS或Android上的浏覽器以全屏模式運作原型。
5、Moqups
是一個非常好的、免費的HTML5應用，通過它可以建立可愛樸素的線框圖、實體模型和UI概念。該程式使用起來非常簡單，并且有内置的模闆可以直接使用（模闆包括單選按鈕、連結、圖像占位符、文本框以及滑塊等）。
它還提供了iPhone和iPad模闆，以及iOS相關的按鈕、提示框、picker、菜單、開關以及鍵盤等。你可以設定網格的尺寸，并預覽和分享你的線框圖。Moqups提供了一個很有用的功能就是對齊網格，可以使對象精準對齊。
6、UXPin
UXPin是DeSmart團隊開發的一個簡易快速的實體模型和線上可點選原型創作工具。它基于優秀的使用者體驗設計原則，在建構原型中，它提供了一個完整的工具包（該工具包具有良好的使用者設計模式和元素）來從頭建構一個出色的原型。
UXPin 具有響應式的斷點功能，建立的響應式原型和線框圖可以運作在不同的裝置和分辨率上。另外該軟體還提供了版本控制和疊代功能，可以輕松的共享預覽，直覺的注 解和實時的協同編輯和聊天。該軟體擁有大量具有吸引力的使用者界面元素風格（包括web，iOS，Android等），并且具有快速、靈敏的響應拖放接口。
7、Omnigraffle
OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結構圖以及插圖等類型圖的app，也可以用來組織頭腦中思考的資訊，曾獲得2002年的蘋果設計獎。
它采用拖放的所見即所得界面，你可以用鋼筆工具繪制自定義的模版或者圖形，此外還自帶Graffletopia提供的多個iPhone、iPad以及Android模版。
8、JustinMind
JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以輸出Html頁面。與目前主流的互動設計工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更為專屬于設計移動終端上app應用。
JustinMind 可以幫助開發者設計更豐富、更具互動新的移動産品線框圖，包含了iPhone、Android 以及iPad常用手勢，滑動、縮放、旋轉，甚至捕捉裝置方向等，進而創造出更具互動性的原型。另外，它可以導出原型資訊到Microsoft Word，生成規範的文檔。
此外，你還可以自定義小元件，建立自定義元件庫，并進行分類，不管對象是iPhone、iPad、黑莓、Android還是其他。
9、FluidUI
Fluid UI是一款用于移動開發的Web原型設計工具，可以幫助設計師高效地完成産品原型設計。Fluid UI 内置超過1700款的線框圖和手機UI控件，并且還會經常進行更新。
Fluid UI無裝置限制，無平台限制（Windows、Mac以及Linux系統），支援Chrome和Safari浏覽器（Chrome浏覽器上的app也可離 線使用）。你可以使用Fluid Player來預覽你的設計，收集意見和回報。還可以以PNG、PDF方式輸出。
Fluid UI使用方法簡單，采取拖拽的操作方式，不需要程式員來寫代碼。另外，Fluid UI資源庫非常豐富，有針對iOS、Android以及Windows 8的資源。如果你覺得庫存資源不能滿足你的需求，你也可以自行添加。
10、Protoshare
ProtoShare：線上網站開發協同制作工具是一個十分便捷的線上原型制作工具，側重于團隊協作。團隊成員可以通過這個工具對工作進行審查，并及時提供回報，對線框圖或内容進行建議。
作 為一個強大的線框圖和原型平台，Protoshare提供了大量移動工具集（有來自中心資源庫的大量移動模版和大量2D、3D動畫過渡）。通過“拖放”界 面，你可以快速建立互動式的線框圖和移動原型，然後發送至iPhone、iPad或者Android裝置進行測試，體驗app的功能實作情況。
另外，Protoshare還支援分享和回報功能，項目成員可以标記和跟蹤的回報資訊來做出決定。而大量的資源庫意味着你可以使用模版和獲得的回報建立移動産品線框圖，進而演變為高保真的原型。
11、 Wireframe
Wireframe是一款具有“點選-拖-放”界面且超簡單的線框圖創作工具。輕按兩下實作編輯功能，有限的界面意味着你會把精力集中于你的想法上。還給每個線框圖配置設定了特有的URL，便于标記和分享。
Wireframe有浏覽器視窗和移動手機兩個模版選項，移動版有縱向和橫向兩個選擇。線框圖的每個元素都可以編輯和轉換。
12、InVision
InVision是一個便捷的産品原型生成工具，使用者制作一個線上原型隻需要四部：建立一個工程、上傳視覺設計稿、添加連結以及生成線上原型。
确 切說，InVision提供的不是準确的線框圖，而是一個快速原型的環境，可以把你的UX/UI草圖快速連接配接起來。數字型的線框圖和高保真的設計可以幫你 測試app的工作情況，同時該工具還支援協作和分享功能，生成的線上原型可以支援任何人在産品原型的任何地方評論，便于準确的交流。
針對iOS 開發，InVision還增添了其他功能，比如自定義主螢幕icon和自定義加載頁面。
13、Mokk.me
Mokk.me 是一個簡單快速的原型工具，通過界面上簡單的拖放操作，不用了解單線程式設計就能創作一個可以分享、測試以及多平台的app。目前，Mokk.me正在測試 中，但它是一個簡單的基本的工具，任何人可以用它來建立app的布局。你可拖、放或者編輯小工具，可以搭建和連接配接頁面，還可以選擇過渡動畫。它的特點還在 于頁面和按鈕、圖檔小工具、文本輸入以及複選框形式。
另外，你可以借助HTML、CSS以及JavaScript完成app其他一些功能，一旦你建立了原型，你還可以進行分享，在iOS 和Android上進行測試。
14、iPlotz
iPlotz 是一款可以用來建立可點選、可導航的原型和線框圖工具，适合網站開發者和移動app開發者。你可以在一個可調整的頁面拖放元件，然後連接配接起來，增加其他屏 幕或者頁面的熱點連結。你可以選擇使用iPhone/iPad模版或者Android模版，任何模版都有獨一無二的元件設定。
iPlotz界面明白易懂，支援協同工作、可分享的編輯權限、任務管理以及評價系統。另外，項目可以以IPML、JPG、PNG、PDF以及HTML形式輸出。
15.Adobe Illustrator 俗稱AI
這是adobe的一款矢量圖設計軟體，推薦給設計師轉型過來的PM（沒興趣的跳過），電商圈不推薦再去費力學習其他軟體，達到溝通的目的提高效率是王道。上圖是設計出來的原型成品，可以結合上面提到的POP去示範，so easy。
寫在最後：蘿蔔白菜各有所愛，沒有最好的工具，隻有最順手的，最終的目的隻有一個——溝通。