福利!15款優(yōu)秀移動APP產(chǎn)品原型設計工具

2022-06-21    分類: 網(wǎng)站建設

1. POP(Prototyping on Paper)

  算是移動App原型設計神器 ,很多公司在用:quora、sina、豆瓣、36氪、ifanr…

  操 作輕巧簡單:先用手機拍下草圖原型(存到POP app內(nèi));然后開始編輯圖片的哪個區(qū)域(按鈕)鏈接到什么頁面,添加跳轉鏈接熱區(qū),就可以在iPhone上給小伙伴們演示了,并且POP內(nèi)嵌的交互動作 如側滑、展開、消失等,即可滿足一般的動態(tài)演示需要。不太明白?

  2、Pencil Project

  Pencil是一款開源的可以用來制作圖表和GUI原型的工具,可以作為一個獨立的app,也可以作為Firefox插件。內(nèi)置模版可以幫你繪制桌面和移動界面中用到的各種各樣的用戶界面,包括流程圖、UI和一般的通用圖形。

  通過它內(nèi)置的模板,你可以創(chuàng)建可鏈接的文檔,并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動app模版。

  3.Axure

  大 家都很熟悉了,這里主要說下移動端的演示,這樣才充分表達原型意圖。按F5生成原型的時候,在“Mobile/Device”選項中可以設置適配移動設備 的特殊原型(Axure 6.5以下版本),再用移動設備訪問你生成的原型鏈接即可(該頁面創(chuàng)建一個桌面快捷方式)。

  4、Proto.io

  Proto.io是一個專用的手機原型開發(fā)平臺——可以構建和部署全交互式的移動程序的原型,并且可以模擬出相似的成品。它可以運行在大多數(shù)的瀏覽器中,并提供了3個重要的接口:dashboard、編輯器以及播放器。

  dashboard 可以用來管理項目。編輯器是構建原型的環(huán)境,由一組設計和開發(fā)原型的工具組成,另外還可以構建交互。播放器用來觀看原型,并與原型進行交互,并提供了相關 工具來標注和保留反饋信息。你可以直接在真實的移動設備上對原型進行測試。并且可以使用iOS或Android上的瀏覽器以全屏模式運行原型。

  5、Moqups

  是一個非常好的、免費的HTML5應用,通過它可以創(chuàng)建可愛樸素的線框圖、實體模型和UI概念。該程序使用起來非常簡單,并且有內(nèi)置的模板可以直接使用(模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等)。

  它還提供了iPhone和iPad模板,以及iOS相關的按鈕、提示框、picker、菜單、開關以及鍵盤等。你可以設置網(wǎng)格的尺寸,并預覽和分享你的線框圖。Moqups提供了一個很有用的功能就是對齊網(wǎng)格,可以使對象精準對齊。

  6、UXPin

  UXPin是DeSmart團隊開發(fā)的一個簡易快速的實體模型和在線可點擊原型創(chuàng)作工具。它基于優(yōu)秀的用戶體驗設計原則,在構建原型中,它提供了一個完整的工具包(該工具包具有良好的用戶設計模式和元素)來從頭構建一個出色的原型。

  UXPin 具有響應式的斷點功能,創(chuàng)建的響應式原型和線框圖可以運行在不同的設備和分辨率上。另外該軟件還提供了版本控制和迭代功能,可以輕松的共享預覽,直觀的注 解和實時的協(xié)同編輯和聊天。該軟件擁有大量具有吸引力的用戶界面元素風格(包括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 可以幫助開發(fā)者設計更豐富、更具交互新的移動產(chǎn)品線框圖,包含了iPhone、Android 以及iPad常用手勢,滑動、縮放、旋轉,甚至捕捉設備方向等,從而創(chuàng)造出更具交互性的原型。另外,它可以導出原型信息到Microsoft Word,生成規(guī)范的文檔。

  此外,你還可以自定義小組件,創(chuàng)建自定義組件庫,并進行分類,不管對象是iPhone、iPad、黑莓、Android還是其他。

  9、FluidUI

  Fluid UI是一款用于移動開發(fā)的Web原型設計工具,可以幫助設計師高效地完成產(chǎn)品原型設計。Fluid UI 內(nèi)置超過1700款的線框圖和手機UI控件,并且還會經(jīng)常進行更新。

  Fluid UI無設備限制,無平臺限制(Windows、Mac以及Linux系統(tǒng)),支持Chrome和Safari瀏覽器(Chrome瀏覽器上的app也可離 線使用)。你可以使用Fluid Player來預覽你的設計,收集意見和反饋。還可以以PNG、PDF方式輸出。

  Fluid UI使用方法簡單,采取拖拽的操作方式,不需要程序員來寫代碼。另外,F(xiàn)luid UI資源庫非常豐富,有針對iOS、Android以及Windows 8的資源。如果你覺得庫存資源不能滿足你的需求,你也可以自行添加。

  10、Protoshare

  ProtoShare:在線網(wǎng)站開發(fā)協(xié)同制作工具是一個十分便捷的在線原型制作工具,側重于團隊協(xié)作。團隊成員可以通過這個工具對工作進行審查,并及時提供反饋,對線框圖或內(nèi)容進行建議。

  作 為一個強大的線框圖和原型平臺,Protoshare提供了大量移動工具集(有來自中心資源庫的大量移動模版和大量2D、3D動畫過渡)。通過“拖放”界 面,你可以快速創(chuàng)建交互式的線框圖和移動原型,然后發(fā)送至iPhone、iPad或者Android設備進行測試,體驗app的功能實現(xiàn)情況。

  另外,Protoshare還支持分享和反饋功能,項目成員可以標記和跟蹤的反饋信息來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋創(chuàng)建移動產(chǎn)品線框圖,進而演變?yōu)楦弑U娴脑汀?/p>

  11、 Wireframe

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

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

  12、InVision

  InVision是一個便捷的產(chǎn)品原型生成工具,用戶制作一個在線原型只需要四部:創(chuàng)建一個工程、上傳視覺設計稿、添加鏈接以及生成在線原型。

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

  針對iOS 開發(fā),InVision還增添了其他功能,比如自定義主屏幕icon和自定義加載頁面。

  13、Mokk.me

  Mokk.me 是一個簡單快速的原型工具,通過界面上簡單的拖放操作,不用了解單線編程就能創(chuàng)作一個可以分享、測試以及多平臺的app。目前,Mokk.me正在測試 中,但它是一個簡單的基本的工具,任何人可以用它來創(chuàng)建app的布局。你可拖、放或者編輯小工具,可以搭建和連接頁面,還可以選擇過渡動畫。它的特點還在 于頁面和按鈕、圖片小工具、文本輸入以及復選框形式。

  另外,你可以借助HTML、CSS以及JavaScript完成app其他一些功能,一旦你創(chuàng)建了原型,你還可以進行分享,在iOS 和Android上進行測試。

  14、iPlotz

  iPlotz 是一款可以用來創(chuàng)建可點擊、可導航的原型和線框圖工具,適合網(wǎng)站開發(fā)者和移動app開發(fā)者。你可以在一個可調(diào)整的頁面拖放元件,然后連接起來,增加其他屏 幕或者頁面的熱點鏈接。你可以選擇使用iPhone/iPad模版或者Android模版,任何模版都有獨一無二的元件設置。

  iPlotz界面明白易懂,支持協(xié)同工作、可分享的編輯權限、任務管理以及評價系統(tǒng)。另外,項目可以以IPML、JPG、PNG、PDF以及HTML形式輸出。

  15.Adobe Illustrator 俗稱AI

  這是adobe的一款矢量圖設計軟件,推薦給設計師轉型過來的PM(沒興趣的跳過),電商圈不推薦再去費力學習其他軟件,達到溝通的目的提高效率是王道。上圖是設計出來的原型成品,可以結合上面提到的POP去演示,so easy。

  寫在最后:蘿卜白菜各有所愛,沒有最好的工具,只有最順手的,最終的目的只有一個——溝通。

網(wǎng)站題目:福利!15款優(yōu)秀移動APP產(chǎn)品原型設計工具
URL標題:http://www.bm7419.com/news35/169985.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設計、網(wǎng)站設計公司、企業(yè)網(wǎng)站制作、域名注冊、靜態(tài)網(wǎng)站網(wǎng)站設計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化