20款優秀的移動產品原型和線框圖設計工具

　　線框圖(Wireframe)是app、軟體或者網站設計過程中非常重要的一個環節，它可以合理地組織並簡化內容和元素。線框圖除了可以幫助開發者節省時間外，更可以加深開發者對產品的認知，給開發者一個清晰的產品構架，避免了開發者陷入層次不清、功能不明的產品設計和開發混亂狀態。

　　1、Proto.io

　　Proto.io是一個專用的手機原型開發平臺——可以構建和部署全互動式的移動程式的原型，並且可以模擬出相似的成品。它可以執行在大多數的瀏覽器中，並提供了3個重要的介面：dashboard、編輯器以及播放器。

　　dashboard可以用來管理專案。編輯器是構建原型的環境，由一組設計和開發原型的工具組成，另外還可以構建互動。播放器用來觀看原型，並與原型進行互動，並提供了相關工具來標註和保留反饋資訊。你可以直接在真實的移動裝置上對原型進行測試。並且可以使用iOS或Android上的瀏覽器以全屏模式執行原型。

　　2、Moqups

　　是一個非常好的、免費的HTML5應用，通過它可以建立可愛樸素的線框圖、實體模型和UI概念。該程式使用起來非常簡單，並且有內建的模板可以直接使用（模板包括單選按鈕、連結、影像佔位符、文字框以及滑塊等）。

　　它還提供了iPhone和iPad模板，以及iOS相關的按鈕、提示框、picker、選單、開關以及鍵盤等。你可以設定網格的尺寸，並預覽和分享你的線框圖。Moqups提供了一個很有用的功能就是對齊網格，可以使物件精準對齊。

　　3、UXPin

　　UXPin是DeSmart團隊開發的一個簡易快速的實體模型和線上可點選原型創作工具。它基於優秀的使用者體驗設計原則，在構建原型中，它提供了一個完整的工具包（該工具包具有良好的使用者設計模式和元素）來從頭構建一個出色的原型。

　　UXPin具有響應式的斷點功能，建立的響應式原型和線框圖可以執行在不同的裝置和解析度上。另外該軟體還提供了版本控制和迭代功能，可以輕鬆的共享預覽，直觀的註解和實時的協同編輯和聊天。該軟體擁有大量具有吸引力的使用者介面元素風格（包括web，iOS，Android等），並且具有快速、靈敏的響應拖放介面。

　　4、Balsamiq Mockups 

　　Balsamiq Mockups是一款非常使用起來非常方便、非常高效的原型設計軟體。

　　Balsamiq Mockups目前包括75個介面控制元件和187個漂亮的icon，基本上自帶了常用的小控制元件，UI控制元件支援自動拖拽，並且可以實現自動對齊。還有不少隨即可用的元素，簡單拖拽就能形成效果圖。 Mockups To Go library中還有適合Android、Blackberry以及iOS開發者的模版，Windows、Mac OS、Linux下都可以使用。可使用XML語言儲存元素，也可以匯出PNG圖片，可以插入到任何專案。

　　Balsamiq Mockups再現在白板上繪製草圖的體驗，共享原型進行測試有助於合作與反饋。整體採用了手繪風格，Balsamiq Mockups還提供了一個將圖片轉換成手繪風格的選項，保持了整體風格的一致。

　　5、JustinMind

　　JustinMind是由西班牙JustinMind公司出品的原型製作工具，可以輸出Html頁面。與目前主流的互動設計工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更為專屬於設計移動終端上app應用。

　　JustinMind可以幫助開發者設計更豐富、更具互動新的移動產品線框圖，包含了iPhone、Android 以及iPad常用手勢，滑動、縮放、旋轉，甚至捕捉裝置方向等，從而創造出更具互動性的原型。另外，它可以匯出原型資訊到Microsoft Word，生成規範的文件。

　　此外，你還可以自定義小元件，建立自定義元件庫，並進行分類，不管物件是iPhone、iPad、黑莓、Android還是其他。

　　6、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的資源。如果你覺得庫存資源不能滿足你的需求，你也可以自行新增。

　　7、Axure

　　不多說了，很多人都在用這個互動原型設計軟體。網上也有很多這方面的教程和文件。

　　8、Mockflow

　　Mockflow是一款可以為網站和移動app快速高效製作線框圖的工具，友好而強大，類似於Axure。內建了許多經常用到的控制元件和圖示，比如按鈕、圖片、下拉式選單、進度條以及文字皮膚等等，能夠有效幫助使用者提高對傳統軟體以及富網際網路應用軟體的快速設計和互動式使用者介面實體模型的規劃程式。

　　Mockflow附帶有大量跟線框圖部件有關的資源庫，提供了四個可選模版(iPhone app、Android app、iPad app以及Windows Phone) ，你也可以選擇自己的佈局和設計。你還可以通過MockStore下載更多元素和模版。

　　Mockflow支援協作和聊天功能，每個人可以在不同的頁面看到專案的實時進展和變更。專案也可以以各種不同的形式輸出，你也可以在移動裝置或者臺式電腦上檢視和測試app的功能。

　　9、Protoshare

　　ProtoShare：線上網站開發協同製作工具是一個十分便捷的線上原型製作工具，側重於團隊協作。團隊成員可以通過這個工具對工作進行審查，並及時提供反饋，對線框圖或內容進行建議。

　　作為一個強大的線框圖和原型平臺，Protoshare提供了大量移動工具集（有來自中心資源庫的大量移動模版和大量2D、3D動畫過渡）。通過“拖放”介面，你可以快速建立互動式的線框圖和移動原型，然後傳送至iPhone、iPad或者Android裝置進行測試，體驗app的功能實現情況。

　　另外，Protoshare還支援分享和反饋功能，專案成員可以標記和跟蹤的反饋資訊來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋建立移動產品線框圖，進而演變為高保真的原型。

　　10、 Wireframe

　　Wireframe是一款具有“點選-拖-放”介面且超簡單的線框圖創作工具。雙擊實現編輯功能，有限的介面意味著你會把精力集中於你的想法上。還給每個線框圖分配了特有的URL，便於標記和分享。

　　Wireframe有瀏覽器視窗和移動手機兩個模版選項，移動版有縱向和橫向兩個選擇。線框圖的每個元素都可以編輯和轉換。

　　11、WireframeSketcher

　　WireframeSketcher是一款強大的、靈活的線框圖和原型快速創作工具，適用於桌面app和移動app開發者。WireframeSketcher可以作為單獨的app，也可作為一個Eclipse 外掛。

　　WireframeSketcher還是一款簡單的帶有手繪風格的創作工具，這樣你就不會被一些細節所打擾。它包含大量UI控制元件，可以進行靈活的自定義設定。經過優化的介面、多個快捷方式、格點捕捉以及智慧化引導都讓WireframeSketcher成為快、高效的選擇。Mockups Gallery 還儲存了大量可供下載的外掛、模版以及icon等。

　　12、Omnigraffle  

　　OmniGraffle是由The Omni Group製作的一款帶有大量模版可以用來快速繪製線框圖、圖表、流程圖、組織結構圖以及插圖等型別圖的app，也可以用來組織頭腦中思考的資訊，曾獲得2002年的蘋果設計獎。

　　它採用拖放的所見即所得介面，你可以用鋼筆工具繪製自定義的模版或者圖形，此外還自帶Graffletopia提供的多個iPhone、iPad以及Android模版。

　　13、Pidoco

　　Pidoco 是一款基於Web的原型設計軟體，用於快速建立可點選的線框圖。也可以用於製作網站專案、移動專案、企業應用程式的使用者介面原型。擁有智慧的共享和協同工作功能以及便捷的可用性測試模組，更易於使用。

　　通過簡單的拖放介面，你可以使用軟體自帶的移動UI元素來快速建立移動app原型，或者使用移動頁面模版來節省更多時間。你可以選擇"plain" 或者"sketched" 模式來展示你的線框圖。 

　　14、FlairBuilder

　　FlairBuilder是一款可以用來建立互動性線框圖的快速原型工具，可以幫你把低保真度的草圖升級為高保真度的線框圖。FlairBuilder內建數量超過70個的小部件或小元件，還帶有大量模版。你可以簡單快速地預覽你的專案，並且輸出功能齊備的HTML原型。線框圖以樹狀結構出現，FlairBuilder可以讀取你的線框圖，併產生一個易於檢視的層級式網站地圖。

　　FlairBuilder帶有iOS和Android模版，你可以以HTML形式輸出原型，這樣也易於在真機上進行測試。

　　15、iPhone Mockup

　　iPhone Mockup最大的特點是簡單，可繪製簡單線框圖（illustration）和手繪風格線框圖（pencil）兩種風格的線上原型工具，你可以在兩種風格之間自由切換。

　　iPhone Mockup支援協同創作和同步資料/操作，每個人都可以知道專案做了那些更改，只要他們有專案的URL，每個人都可以線上編輯。iPhone Mockup支援Firefox、Safari、Chrome以及Internet Explorer 8 瀏覽器。

　　缺點是沒有密碼保護，且元件有限，但卻是一個最基本且最簡單的工具，可以上傳圖片和更改文字標籤。

　　16、HotGloo

　　HotGloo是一款為傳統軟體以及富網際網路應用軟體製作產品原型的線上工具，友好而強大。內建了許許多多會經常使用到的控制元件和UI元素，滑鼠拖拽至畫布，再組織繪製即可。能夠有效的幫助使用者提高對傳統軟體以及富網際網路應用軟體的快速設計和互動式使用者介面實體模型的規劃程式。

　　最近，該軟體新增了iPad和iPhone專用的模板套件，包括基本的介面元件，比如標籤、icon、地圖、按鈕以及大量表檢視。

　　HotGloo輕量級但卻非常強大的模版系統給人深刻印象，雙擊可編輯模版元件，還有助於強調app中響應式的互動設計。協作功能可以讓團隊多人蔘與到線框圖製作過程中，你也可以邀請別人來參看或者給你一些反饋和意見。內建的聊天功能可以讓成員實時討論線框圖的繪製情況。

　　17、InVision

　　InVision是一個便捷的產品原型生成工具，使用者製作一個線上原型只需要四部：建立一個工程、上傳視覺設計稿、新增連結以及生成線上原型。

　　確切說，InVision提供的不是準確的線框圖，而是一個快速原型的環境，可以把你的UX/UI草圖快速連線起來。數字型的線框圖和高保真的設計可以幫你測試app的工作情況，同時該工具還支援協作和分享功能，生成的線上原型可以支援任何人在產品原型的任何地方評論，便於準確的交流。

　　針對iOS 開發，InVision還增添了其他功能，比如自定義主螢幕icon和自定義載入頁面。

　　18、Mokk.me 

　　Mokk.me是一個簡單快速的原型工具，通過介面上簡單的拖放操作，不用瞭解單線程式設計就能創作一個可以分享、測試以及多平臺的app。目前，Mokk.me正在測試中，但它是一個簡單的基本的工具，任何人可以用它來建立app的佈局。你可拖、放或者編輯小工具，可以搭建和連線頁面，還可以選擇過渡動畫。它的特點還在於頁面和按鈕、圖片小工具、文字輸入以及核取方塊形式。

　　另外，你可以藉助HTML、CSS以及JavaScript完成app其他一些功能，一旦你建立了原型，你還可以進行分享，在iOS 和Android上進行測試。

　　19、iPlotz 

　　iPlotz 是一款可以用來建立可點選、可導航的原型和線框圖工具，適合網站開發者和移動app開發者。你可以在一個可調整的頁面拖放元件，然後連線起來，增加其他螢幕或者頁面的熱點連結。你可以選擇使用iPhone/iPad模版或者Android模版，任何模版都有獨一無二的元件設定。

　　iPlotz介面明白易懂，支援協同工作、可分享的編輯許可權、任務管理以及評價系統。另外，專案可以以IPML、JPG、PNG、PDF以及HTML形式輸出。

　　20、Pencil Project 

　　Pencil是一款開源的可以用來製作圖表和GUI原型的工具，可以作為一個獨立的app，也可以作為Firefox外掛。內建模版可以幫你繪製桌面和移動介面中用到的各種各樣的使用者介面，包括流程圖、UI和一般的通用圖形。

　　通過它內建的模板，你可以建立可連結的文件，並輸出成為HTML檔案、PNG、OpenOffice文件、Word文件、PDF。Pencil Project還包含大量移動app模版

　　編譯自：Mashable