介紹五款主流原型設計工具,分別是Axure、Balsamiq Mockups、墨刀、Justinmind和iClap。
Axure
Axure RP是美國Axure Software Solution公司旗艦產品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專門的原型設計工具,它比一般創建靜態原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。
功能:用於制作快速原型的軟件。也可以繪制中保真原型草圖。
應用人群:產品經理、交互設計師、UI設計師、網頁設計師。
原型分類:低保真(手繪草圖)、中保真(使用相關軟件繪制出來的)、高保真(包含效果圖及原型交互)
優點:
應用靈活,可拓展性強,擁有超級強大的交互制作能力。
高保真的原型設計工具,名聲大,專業性高。
缺點:
規范性較差。編輯能力着實強大,變相導致規范性差,管理不便。
難度稍大,入門較慢。鑒於其比較復雜,學習難度較大,新手勸退。
本地型軟件,可以下載html文檔預覽,手機預覽不方便。
制作原型的速度比較慢(交互操作太多),常常耽誤時間,而且修改較繁瑣。
基本使用方法:
1.元件的使用:在RP中使用軟件需要選擇后拖拽到工作區使用即可。
(以矩形為例)
拖拽矩形左上角的三角就可以進行圓角設置。
點擊右上角的圓可以更改它的形狀。左上角的三角形消失。
旋轉,繪制好元件后選擇它,按ctrl鍵,鍵直接拖拽定界框周圍即可。
2.圖片的使用:
直接雙擊當前圖片元件即可。也可以在選擇元件后的右側的屬性中導入即可。
可以直接復制粘貼到AX中進行使用,支持GIF格式。
3. 占位符的使用:直接在里面寫入內容,雙擊即可。
4. 放大與縮小:按CTRL鍵前后滾動。
5. 頁面對齊:頁面的內容在生成原型時在瀏覽器的左側或中間。一般情況下是在中間,但是一定要取消選擇后方可以更改頁面對齊方式。
6. 分割圖片:選擇圖片,在右側屬性中選擇裁切工具,點擊需要切除的部分。也可以在圖片上點擊右鍵分割圖片。選擇那部分就切除那一部分。
軟件官網: http://www.axure.com/default.aspx
Balsamiq Mockups
Balsamiq Mockups出自加利福尼亞州的Balsamiq工作室,創始人Peldi在 2008年6月推出了這款手繪風格的產品原型設計工具,並廣受好評。在Web產品設計中,Balsamiq Mockups是產品設計師繪制線框圖或產品原型界面的利器。在產品設計的需求階段,低保真的線框圖或者草圖設計介於產品流程設計與高保真DEMO設計之間,在Balsamiq Mockups出現之前,流程圖可以使用Visio,高保真DEMO可以使用Axure,但並沒有好用的草圖設計工具;在產品設計管理中,我們通常在產品的業務流程和數據流轉已經相當明確時才開始進一步考慮產品的結構層和框架層,雖然此時紙、筆、白板都是非常簡單方便的交流工具,但是他們的最大劣勢就是——很難將有價值的原型保存下來。Balsamiq Mockups的出現完美的解決了這個問題。
優點和特色:
易用:UI控件支持自動拖拽,並且可以實現自動對齊;
美觀:手繪風格,簡約清爽;
豐富:從按鈕到輸入框,從導航條到頁面、表格,甚至包括了最潮的Iphone元素;
方便:對元素的修改除了工具欄外,還可以使用隱藏編輯框,支持快捷鍵;
兼容:可使用XML語言保存元素,也可以導出PNG圖片,可以插入到任何項目;
跨平台:Windows、Mac OS、Linux下都可以使用,還有能集成在Confluence,JIRA,和XWiki中的版本,如果沒下載桌面版,還可以直接使用網頁版的Balsamiq Mockups。
應用范圍: Balsamiq Mockups最好用於商用web產品設計中的低保真線框圖或者草圖設計,相對於紙和筆,它不夠靈活;相對於Axure,它不夠精確。
基本使用方法:
窗口中間是畫布,上方是工具欄(支持拖拽和快捷搜索工具),左側是在不同的畫布間進行切換,右邊是顯示和調整選中控件的參數。
新建控件:在工具欄中找到“Browser”並將其拖拽到畫布中
單機畫布空白處顯示窗口效果
要想在瀏覽器窗口中顯示文字,我們需要“Title”和“Text”控件,在右上角快捷搜索工具中輸入名稱以找到該控件,並拖拽到瀏覽器中,雙擊控件即可編輯內容
鎖定/解鎖控件:右鍵點擊控件菜單中第一項可鎖定控件,右鍵點擊被鎖定控件菜單中第一項即可解鎖。
組合/取消組合:選中第一個控件,按住Ctrl選中第二個控件,再按Ctrl+G即可快速組合,再按Ctrl+Shift+G可取消組合。
保存/導出:
Ctrl+S可快速保存工程.bmpr文件,打開時仍然可以編輯
Ctrl+R可快速導出.png圖片, 不可編輯僅可查看
墨刀
墨刀是一款在線原型設計與協同工具,借助墨刀,產品經理、設計師、開發、銷售、運營及創業者等用戶群體,能夠搭建為產品原型,演示項目效果。
適用平台:瀏覽器注冊使用, Windows、Mac 桌面客戶端,同時支持 iOS、Android 端預覽;
適用范圍:墨刀為企業級用戶提供權限控制、項目管理及基礎項目數據統計等功能。
功能介紹:
操作簡單:簡單拖拽和設置,即可將想法、創意變成產品原型。
演示:真機設備邊框、沉浸感全屏、離線模式等多種演示模式,項目演示效果逼真。
團隊協作:與同事共同編輯原型,效率提升;一鍵分享發送給別人,分享便捷;還可在原型上打點、評論,收集反饋意見,高效協作。
交互簡單:簡單拖拽就可實現頁面跳轉,還可通過交互面板實現復雜交互,多種手勢和轉場效果,可以實現一個媲美真實產品體驗的原型。
自動標注及切圖:將 Sketch 設計稿墨刀插件上傳至墨刀,將項目鏈接分享給開發人員,無需登錄可直接獲取到每個元素寬高、間距、字體顏色等信息,支持一鍵下載多倍率切圖。
素材庫:內置豐富的行業素材庫,也可創建自己的素材庫、共享團隊組件庫,高頻素材直接復用。
優點:
非常容易做交互,操作簡單,效率極高,適合初學者。
界面優美整潔。簡潔的界面在一定程度上有助於提高開發人員的效率。
強大的演示能力。墨刀在輕量級的移動端原型制作更加迅速,展示更加方便。
分享方便。反饋及時。墨刀不僅上手快,還可以快速分享,快速查看應用在手機上的效果。反饋回復很及時,產品改進速度也很快。
缺點:
應用局限性。墨刀專注於app原型設計,在后台和網頁稍有乏力。
需要收費。墨刀本地下載功能需要注冊購買,無法直接分享給他人。
歸檔能力不足。墨刀更傾向於鏈接、二維碼形式輸出,不能以文檔輸出
基本使用方法:
空白項目:
模板項目:
創建模板項目有包含各應用組件的模板頁面,十分便於我們借鑒與修改;
空白項目的創建操作:在下方輸入項目名以及選擇原型的平台后,點擊創建,進入項目首頁,
中間的是項目的編輯頁面,中部的左側以及頂部邊框標注着的數字是像素,用來准對頁面的寬度與高度以及頁面內組件的位置;最左側一列素材工具欄——用於直接將素材拖入頁面中,頁面欄——用於編輯和切換各頁面:
右側工具欄包含組件及圖標等素材,最右側外觀欄——當選中某個組件時可在其中編輯外觀的各種參數:
上方工具欄最右側的運行按鍵可以模擬運行時的頁面操作:
軟件官網:https://modao.cc
Justinmind
Justinmind是由西班牙JustinMind公司出品的原型制作工具,可以輸出Html頁面。
JustinMind的一些特性:
使用JustinMind,你可以在幾分鍾內利用其廣泛的組件和交互繪制高保真原型。它提供了一些基本的形狀,如矩形和文本,還有特定的組件,如菜單,表單或數據列表。
關於手勢的交互效果:JustinMind提供了多種觸屏的交互效果,例如滑動、縮放、旋轉,甚至捕捉設備方向等等。在需要產生效果的部件中選擇對應的手勢即可。
可以創建自己的組件庫,JustinMind為iPhone ,iPad,黑莓,Android提供了多樣的組件。你可以創建自定義組件庫,方法是將排列好的單個組件放在一起,並將它們集體框選拖動到組件庫。
更為便捷的定義樣式:相比Axure,JustinMind更好的提供了屬性窗口,並且更好的支持捕獲PS等軟件的圖像屬性。
JustinMind可以導出原型的所有信息到Microsoft Word,能夠一鍵生成及其規范的文檔。
共享原型進行測試:JustinMind支持將原型上傳到服務器並提供給他人進行測試,為產品的改進做出了良好的貢獻。最為特別的是,基於usernote的服務允許你將原型放到移動設備上進行測試。
更友好的定義交互方式:在JustinMind中,你可以通過拖拽等方式來實現跳轉、定向等交互效果,無需像Axure一樣每一步都只能通過點擊來完成。並且顯示更為直觀,如進度條。
同時可以通過一些簡單的無代碼邏輯語句實現更為高級的交互效果。
全球范圍內的復用、數據共享。每一個模板都讓這一套組件有不同的視覺風格,變量允許將數據從一個屏幕遷移到另一個,甚至使用它們來檢查是否滿足條件。
基本使用方法:
事件與交互:事件是JustinMind的一個關鍵功能,Justinmind Prototyper的事件由兩個主要部分組成:一個是事件的觸發(或用戶事件),另一個是一組操作。每一個事件必須在屏幕上定義,一個特定的元素,這將作為事件的觸發源。
關於鏈接的設置
使用鏈接最簡單的操作就是,例如,點擊Button跳轉到Screen3,那么直接將Button拖拽到Screen3上面就可以了。
軟件官網:http://www.justinmind.com.cn
iClap
iClap是一個以產品為基礎,集成員工日常所需工具,打通項目工作流程,實現員工自我工作管理、項目管理和企業管理三個體系協同的管理規范系統。iCLap,以產品自身為出發點,通過不同職位的准數工具徹底串聯企業人員,再將工作產生的內容進行沉淀、處理、歸檔、共享,打造一個溝通與協作的閉環,以實現對產品,項目以及企業的規范化運營管理。
iClap的主要功能:
在線批注:APP運行中直接將批注生成任務,處理任務時將場景還原,直觀高效。
語音任務:將語音精確轉換為任務,自動識別任務緊急程度與對接人。
即點即用:多個APP項目同一客戶端管理,無需逐一下載。
簡單發布:版本升級只需后台上傳一次數據,客戶端自動更新。
Bug跟蹤:自動檢測APP漏洞並生成報告,讓bug無可遁形。
插件管理:多元化模塊插件管理,滿足企業多方面需求。
會議紀要:項目組進行實時、群組溝通,自動生成會議紀要。
人才培養:以DevStore為平台提供技能培養,智能匹配發送給各崗位人員,有效提高人員綜合素質。
基本使用方法:
1. 通過iClap SDK進行產品管理
下載iClap產品管理SDK:進入iClap官網頁面,點擊“下載”模塊,選擇對應的SDK下載。
將SDK嵌入你的APP:SDK下載成功之后,即可將iClap的產品管理SDK嵌入到你的APP內。SDK嵌入有詳情的說明文檔。 注:每個項目的APP都有唯一對應的appkey和secret,不可交互使用。
打開APP進行產品管理:SDK成功嵌入你的APP之后,在手機桌面打開你的APP,即可見iClap懸浮圖標,點擊可打開管理菜單,即可進行產品管理和項目協作操作了。
2.通過iClap客戶端進行產品管理
上傳APP安裝包:項目創建成功之后,進入項目頁面,點擊上傳新版本,上傳一個項目最新的安卓或者是IOS APP版本,也可以上傳效果或者原型圖,原型圖建議適配手機格式,效果更佳。
下載iClap客戶端:APP版本上傳成功后,在iClap官網掃描二維碼下載iClap客戶端
在iClap客戶端打開APP:打開iClap客戶端,進入“我的項目”,點擊APP icon,即可直接打開APP,點擊批注圖標,即可進行批注操作。
在iClap客戶端進行產品管理:批注完成后,可在iClap客戶端項目管理詳情內查看,並且進行包括任務、批注、項目、成員和文件等產品管理工作。
軟件官網:http://www.iclap.cn/function.html
感想:
通過查詢收集這些資料,了解到很多主流原型設計工具的特點和用法,在軟件開發時可以根據不同的需求選擇不同的原型設計工具,像Axure內容精確,使用率也很高;Balsamiq Mockups內容更加美觀和豐富;墨刀非常容易做交互、操作簡單、效率極高、適合初學者;JustinMind相比Axure更好的提供了屬性窗口,並且更好的支持捕獲PS等軟件的圖像屬性。iClap主要是用來軟件測試的,通過對這些工具的了解,知道了更多關於軟件開發的知識,明白了原型設計在軟件開發中的重要性,原型設計是軟件開發的初始階段,根據需求為軟件創建原型的過程,原型通常用於演示,測試,溝通等。原型通常只是表現了產品的一部分特性,但原型設計的投入在整個的軟件開發過程占比較小,且直接確定了之后的軟件開發方向,投入產出比非常高,所以這個過程非常重要。