十大原型設計工具(附帶墨刀使用教程)


一、Axure

Axure RP是美國Axure Software Solution公司旗艦產品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專門的原型設計工具,它比一般創建靜態原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。

老牌原型設計工具,交互制作功能強大,當然同時也帶來了較高的學習成本。設計區域是無限畫布,方便給設計稿添加文字注解。在交互效果層面,可以實現非常多條件判斷、巧妙運用可以實現更復雜的交互。不過同時也會帶來“效率不高”的問題,因為細節過於繁瑣,所以會加重產品經理或交互設計師在畫原型時的負擔

Axure RP的用戶群體非常寬泛,包括商業分析師、信息架構師、可用性專家、產品經理、IT咨詢師、用戶體驗設計師、交互設計師、界面設計師、架構師、程序開發工程師等相關從業者。

二、Invision

作為目前國外非常知名的一款在線原型設計協作工具,Invision 的發展勢頭很強。雖然最一開始Invision 主要是做設計稿之后的交互原型和團隊協作管理,比如可以順暢銜接Sketch/PS設計稿,為設計稿做批注,以及Freehand功能可以實現團隊自由討論想法。

但后來發布的 Invison studio 具備從基礎開始的設計功能,可以完成相當精細的設計稿,較為強大的交互動效功能也可以滿足大多數設計者的動效需求。利用 InVision Studio,還可以將團隊的設計規范落地在設計工作中。

不過對於國內用戶來說,Invision 始終還有些不便利:比如全英文的界面;國內訪問速度一般;以及價格較貴。

三、Proto .io

Proto .io 也是國外一款輕便好用的在線原型設計工具,在大多數瀏覽器中都能使用,支持導入Sketch和PS設計稿做交互。界面清爽,擁有較為豐富的UI組件。可以直接用鏈接分享原型,而且因為集成了移動錄屏工具lookback,適用於用戶測試場景:可以記錄用戶點擊、滑動、點擊區域;也可以記錄用戶的聲音和facecam視頻評論。

目前Proto .io 有協作功能,只是比較受限;此外,交互設計較為復雜,細節效果只能通過容器實現,上手成本較高。價格相對Invision較便宜,但相對國內產品來說仍然較高。

四、藍湖

藍湖也是國產的一款原型協作平台,在其官網上,藍湖將自身定位為“簡單好用的團隊工作台”。

使用藍湖可以導入Sketch/Photoshop和Adobe XD的設計稿(通過插件),並在藍湖上做自動標注和交互原型。對於設計師來說,可在藍湖進行設計圖管理和自動標注。對於產品經理來說,可以在藍湖做頁面邏輯流程圖和匯集產品文檔。

不過藍湖本身沒有設計功能,必須依托於在Sketch/Photoshop/Adobe XD平台的設計。而交互效果的創建方式也相對較為隱晦,是目前體會到的稍微不足之處。

五、Fluid UI

一款用於移動開發的原型設計工具,它能夠幫助設計師快速高效地完成產品原型圖的設計。畢竟現在的移動開發越來越趨於小規模團隊協作,設計師需要在快速迭代過程中迅速制作出原型圖,他們需要一款直觀易用的工具來工作,從而和最終的產品相適應。Fluid UI主要幫助設計師畫出線框圖,它甚至能夠影響到后期的界面設計、產品功能設置以及上線前測試。同時,Fluid UI對於UX流程設計有很大幫助,能夠將不同的界面聯立起來,以便於看到產品不同界面之間的關系。

1、Fluid UI無設備限制,無平台限制(Windows、Mac以及Linux系統),支持Chrome和Safari瀏覽器(Chrome瀏覽器上的app也可離線使用)。用戶還可以使用Fluid Player來預覽自己的設計,收集意見和反饋。

2、使用方法及其簡單,采取拖拽的操作方式,不需要程序員來寫代碼,為用戶節省很多時間和費用。

3、獨特的屏幕流功能,幫助設計者更好得與團隊進行交流。

4、Fluid UI資源庫非常豐富,有很多針對iOS、Android以及Windows 8的資源。如果用戶覺得庫存資源不能滿足自己的需求,用戶也可以自行添加。

六、GUI Design Studio(GDS)

GUI Design Studio是面向應用軟件設計圖形用戶界面的專業工具,特別適合客戶端軟件設計。該軟件能夠快速將設計思路以可視化的方式來表現出來,並實現基本的交互,便於演示以及與客戶完成有效溝通交流。GUI Design Studio是不需要軟件開發和編碼的完整的設計工具,它支持所有基於微軟Windows 平台的軟件,提供的了大部分C/S、B/S組件的示意圖,可組合使用,是一款非常款適合界面原型設計者和界面原型開發員的軟件,能夠滿足一般軟件界面模型設計需要。

七、Justinmind

JustinMind可以輸出Html頁面,與目前主流的交互原型設計工具相比更為專屬於設計移動終端上app應用。Justinmind Prototyper的收費版本提供iPhone,android,ipad等交互組件,並有豐富的動態效果,但免費版就要簡單一些。Justinmind Prototyper同時提供winxp,win7和mac os的版本。

1、JustinMind的可視化工作環境支持以鼠標的方式創建帶有注釋的高保真原型;

2、提供多種觸屏的交互效果,例如滑動、縮放、旋轉,甚至捕捉設備方向等,在需要產生效果的部件中選擇對應的手勢即可;

3、JustinMind為iPhone、iPad、黑莓、Android提供了多樣的組件,可以創建自定義組件庫;

4、比Axure,JustinMind更好的提供了屬性窗口,並且更好的支持捕獲PS等軟件的圖像屬性;

5、可以通過拖拽等方式來實現跳轉、定向等交互效果,無需像Axure一樣每一步都只能通過點擊來完成。

 

八、iClap

iCLap,以產品自身為出發點,通過不同職位的准數工具徹底串聯企業人員,再將工作產生的內容進行沉淀、處理、歸檔、共享,打造一個溝通與協作的閉環,以實現對產品,項目以及企業的規范化運營管理。顛覆了互聯網企業傳統協作方式,使得協同場景化,更智能、直觀、高效,私有部署數據文件更安全;改變了種子用戶與企業的互動方式,核心用戶深度參與企業產品測試,增強用戶體驗度和粘性;機制構建完善,為企業提供人才培育、把控機制,基於DevStore平台全面高質量信息,智能分配信息,提高各職位人員職業技能與素養。

iClap的主要功能:

在線批注:APP運行中直接將批注生成任務,處理任務時將場景還原,直觀高效。

語音任務:將語音精確轉換為任務,自動識別任務緊急程度與對接人。

即點即用:多個APP項目同一客戶端管理,無需逐一下載。

簡單發布:版本升級只需后台上傳一次數據,客戶端自動更新。

Bug跟蹤:自動檢測APP漏洞並生成報告,讓bug無可遁形。

插件管理:多元化模塊插件管理,滿足企業多方面需求。

會議紀要:項目組進行實時、群組溝通,自動生成會議紀要。

人才培養:以DevStore為平台提供技能培養,智能匹配發送給各崗位人員,有效提高人員綜合素質。

 

九、Balsamiq Mockups

Balsamiq Mockups是一個很簡單的小軟件,功能不多。但是,在控件方面,它可是下足了功夫,不但內置了所有常用的控件,而且每個控件的屬性都經過精心的設計,既不復雜,又涵蓋了必要的功能,出來的效果也很精致。內置的圖標庫也很不錯。不需要到處搜集第三方控件庫,不需要安裝插件,絕對省心。當然,從另外的角度,這也是個缺點——當它的控件庫不能滿足我們的需要時,又不能自己定制,就只能干瞪眼了。

喜歡它的理由是:

- 快——它能讓我以最快的速度把界面原型畫出來。

- 手繪風格——用它畫出來的界面是不折不扣手繪風格,很酷。

- 都是現成的——它已經內置了常用的控件和圖標,基本夠用了。

十、墨刀

毫無疑問,墨刀對於APP的原型設計真的是體驗非常好,怎么說呢?就像有一個無形的人在幫助你,和你一起打造你的原型APP。(當然以后也適用微信小程序的設計),其控件的拖拉、大小的調整,都會自然的去匹配相應的母版大小。無需去擔心有多移動一點或多 選擇一點。並且墨刀的系統控件都是基於APP,以及系統平台IOS和安卓,因此在里面可以首先選擇相應的設備布局,減少了不少工作環節。

另外墨刀的APP原型可以支持下載在手機里,當然是單機版,但是你可以完全通過手機來打開你的原型,相應的Axure這一點就做的很不好,雖然有插件支持手機預覽,但是非常卡頓。中文版教程對很多人來說很 NICE。

 

墨刀使用方法

通過網上的案例親自實驗一把墨刀的使用方法,在這里羅列出我使用后總結下來的成果。

下面我們以網頁版墨刀為例來進行使用總結:

一、創建新的應用

       訪問墨刀官網,登錄之后,點擊右上方的創建應用,可以選擇不同的模板和設備類型,填寫應用名稱之后即可完成應用的創建,然后我們可以隨時編輯應用或者與他人共同編輯和分享應用。

 

 

 

二、編輯應用

       點擊我們創建的對應應用進行編輯,進去之后會看到下圖,其分為菜單欄、組件欄、編輯欄和預覽排列欄幾個部分。最左邊是組件欄,我們可以在這里選擇需要的組件,然后拖拽到中間編輯欄中進行設計;中間編輯欄里可以對選取的組件進行編輯;右邊是預覽排列,就是最終我們看到的頁面的基本排列。

 

 

 

1、組件使用

 

        如圖,我們把左邊組件欄中的一些組件拉到這個中間的編輯欄,通過雙擊對應的組件進行文字或者顏色的編輯:

 

 

 

2、頁面管理

       對於頁面的管理,我們可以在最右邊的頁面管理欄進行新建或者復制頁面,這樣我們的原型也可以在不同頁面之間跳轉,如下圖所示是一個原型部分頁面樹圖:

 

 

 

3、頁面跳轉

      如果要進行頁面之間的跳轉,可以點擊組件,然后拉動組件旁邊的超鏈接的樣式圖標到相應頁面即可執行進行頁面跳轉功能,如下圖所示:

 

 

 

三、導出下載圖片或者安裝包

點擊頁面上方的下載圖標,具體如下圖所示:

 

 

 

四、運行分享應用

      點擊頁面上方的運行圖標即可運行編輯的應用,而后在運行頁面右方通過分享圖標可以生成分享鏈接。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM