1. 程式人生 > >工具推薦 10款用過都說好的移動介面原型設計工具

工具推薦 10款用過都說好的移動介面原型設計工具

 首先,一款優秀的 移動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還支援分享和反饋功能,專案成員可以標記和跟蹤的反饋資訊來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋建立移動產品線框圖,進而演變為高保真的原型。