目錄
前言
MockingBot(墨刀)簡介
墨刀的功能特點
墨刀的使用
其他主流原型設計工具簡介
結語
前言
工欲善其事必先利其器。一款優秀的產品原型工具必不可少。以下整理了MockingBot(墨刀)的功能和使用方法,以及8款產品原型工具以供參考,並在學習曲線,性價比,功能優缺點等方面進行了簡單的介紹。
一、MockingBot(墨刀)簡介
墨刀是一款在線原型設計工具。借助於墨刀,創業者、產品經理及UI/UX設計師能夠快速構建移動應用產品原型,並向他人演示。目前墨刀支持創建移動端(iPhone、iPad、Android)、web端的項目。
1、墨刀的功能特點
(1)工作區
- 基礎操作
工作區上一些基礎的操作,比如保存、撤銷、橫豎屏、放大縮小、分享、運行等等,這些操作一看就知道是做什么的了,這里就不記錄,有興趣的可以去看操作教程。
- 控件區
包含基礎組件庫、平台組件庫、圖標庫、母版,無論是內置還是自定義組件都可以在控件區查找。
基礎組件庫,提供文本、矩形、直線之類的基礎組件元素,利用基礎組件可以創造出變幻無窮的原型。
平台組件庫,包括iOS組件庫、Material Design組件庫、自定義組件庫(自己進行多個組件的組合)。
- 母版
母版具有繼承屬性——即編輯母版,當前項目中的所有對應母版實例都會同步發生改變。
母版主要用於快速修改當前項目內某固定模塊的內容及布局。
(1)我們利用輪播圖的母版來制作自己原型圖中的輪播圖
(2)我們自己來創建一個母版,建一個文字可以上下滾動的母版
我們建一個320*300的文字展示母版,在實際使用中我們在上下方向調小母版就可以實現文字上下滑動的效果了。
- 自定義組件庫
對於一些平台組件庫中沒有的,或者項目中常用但是需要多個組件拼接的,我們都可以通過自定義組件來制作,方便其他項目直接使用,比如項目中常用的消息彈窗,我們就可以制成自定義組件。
- 頁面狀態
1、每個頁面下都可以新建若干個狀態頁面
2、所有狀態頁面內的組件數量是一致的
3、默認狀態是頁面的基本樣式
4、添加組件等數據時需在全局狀態
- 工作流
工作流是原型的頁面流程圖,在工作流中,可以根據已有的原型文件,創建頁面流程圖或交互圖,來更詳盡地展示產品邏輯、流程或結構。
通過已有頁面之間的關聯展示產品邏輯業務流程。
- 標注
標注展示相關控件的寬高、顏色、相對位置,便於開發。
(2)特點
- 墨刀對於APP的原型設計真的是體驗非常好,其控件的拖拉、大小的調整,都會自然的去匹配相應的母版大小。無需去擔心有多移動一點或多選擇一點
- 墨刀的系統控件都是基於APP,以及系統平台IOS和安卓,因此在里面可以首先選擇相應的設備布局,減少了不少工作環節
- 方便查找,內置組件也十分齊全,同時支持網頁在線設計,不需要專門下載軟件即可使用
二、墨刀的使用
下面演示如何制作一個簡單的APP原型:
以“safari瀏覽器”為例
Step1 : 新建空白項目
Step2:填寫相關信息
Step3:選擇自己設計好的或者下載好的圖標做啟動圖標、啟動頁
Step4:編輯主頁
Step5:素材庫搜索“搜索欄”
Step6:對搜索欄進行修改成自己想要的樣子
Step7:從左側拖出圖片框和文字,導入自己的素材並排版
Step8:選擇素材庫中的底欄拖到主頁底部並進行整改成safari的模樣
Step9:在素材庫選擇相應的圖標布置底欄,最終如下圖
Step10:最后,點擊右上角運行查看效果
二、其他主流原型設計工具簡介
1.Pop (Prototyping on Paper)
價格:免費試用30天 專業版 960 RMB/人/年
學習曲線:低
簡介: POP是一款設計界面的原型工具,適用於iOS和Android平台。借助POP,開發者或設計師只需在紙上簡單地描繪出創意或想法,拍下幾張草圖照片,並將照片按順序放置,利用鏈接點描摹出各張圖片之間的邏輯關系,就可輕松創建一個動態模型,點擊播放即可演示整個模型。
優點:與Balsamiq等同類應用相比,POP的優勢在於簡單易用,學習曲線短,生成快速且能被分享。
缺點:只支持低保真原型。對於被展示的客戶或者團隊成員,只知道產品的大概方向;交互效果復雜時不能很好地表達設計。
適用人群:追求手繪風格及快速原型的產品經理和設計師(對於短期內使用免費原型工具的人群來說,這也不失為一個好選擇)。
2.Mockplus
價格:基礎版(終身免費) 專業版 199/人/年
學習曲線:低
簡介:Mockplus是一款簡潔高效的免費產品原型工具。它為用戶提供豐富的組件和圖標資源,通過拖曳即可實現界面設計。支持一鍵導入項目頁面和模板,快速搭建基礎頁面。軟件還支持自定義組件庫,數據填充,Sketch導入,拖曳設置交互等特色功能實現快速設計。近期,該工具還推出了團隊協作功能,團隊成員之間可以查看、編輯、評論項目,幫助用戶更好地完成協作設計。
優點:學習曲線短,快速上手,交互簡單(只需拖曳),功能多樣,組件資源豐富,支持8種預覽方式和多種文件導出類型,支持團隊協作。
缺點:不支持手勢交互。
適用人群:各階段的產品經理及UI/UX設計師,追求中低保真,交互效果,快速原型,新手或專業人群皆適宜。
3.Axure
價格:免費試用30天 專業版 3480 RMB/人/年
學習曲線:高
簡介:Axure RP是美國Axure Software Solution公司旗艦產品,是一個專業的快速產品原型工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型工具,它能快速、高效的創建原型,同時支持多人協作設計和版本控制管理。
優點:變化多端的操作,自帶組件庫並支持強大的第三方組件庫,提供強大的交互支持,完整的教程及支持文檔,支持原型預覽。
缺點:學習曲線較高,性價比不高,專業需求度高。
適用人群:適用於追求強交互效果及細節產品經理及設計師,需要具有一定經驗或較強專業性。
4.Wireframe sketcher
價格:免費試用14天專業版663RMB/人/年
學習曲線:較低
簡介: WireframeSketcher是一款強操作靈活、功能強大的線框圖工具。可幫助設計人員,開發人員和產品經理快速創建用於桌面,Web和移動應用程序的線框和原型。值得一提的是Wireframe Sketcher還是一款帶有手繪風格的創作工具,這在一定程度上可以幫助用戶專注於設計。除此之外,這款產品原型工具還提供大量的UI控件,支持通過鏈接創建交互原型,靈活的Wiki形式,線框圖注釋,生成PDF文檔等。
優點:操作靈活,繪制頁面速度很快,功能強大,支持手繪風格,提供大量模板,可以進行原型導出。
缺點:僅支持低保真,交互效果較少。
適用人群:簡單表達設計或追求手繪風格的產品經理及設計師。
5.Proto.io
價格:免費試用15天 專業版(5個項目)1924 RMB/人/年
學習曲線:中
簡介:Proto.io是一個專門用於移動應用的產品原型工具——可以構建和部署全交互式的移動應用的原型,並且可以模擬出相似的成品。基於Web的在線環境,它可以讓你制作流行的 iPhone,iPad,Android 手機以及任何帶有屏幕界面的產品原型。並且它可以運行在大多數的瀏覽器中,並提供了3個重要的接口:dashboard、編輯器以及播放器。
優點:豐富的UI元素,且可以自定義;支持多屏互動和組件交互,可以從Dropbox上傳設計圖。
缺點:不支持實時預覽,交互動效較多時動畫不夠流暢,性價比不高。
適用人群:擅長於使用Web瀏覽器的產品經理或設計師。
6.Balsamiq Mockups
價格:免費試用30天專業版 600/人/年
學習曲線:較高
簡介:Balsamiq Mockups是一款軟件工程中快速產品原型工具,可以作為與用戶交互的一個界面草圖,一旦客戶認可也可以做為美工開發HTML的原型使用,特別是在web原型圖設計領域有不錯的影響力。使用Balsamiq Mockups畫出的原型圖都是手繪風格的圖像,看上去非常美觀、清爽。此外,這款工具支持幾乎所有的HTML控件原型圖,比如按鈕(基本按鈕、單選按鈕等)、文本框、下拉菜單、樹形菜單、進度條、多選項卡、顏色控件、表格、Windows窗體等。除此以外,還支持iPhone手機元素原型圖。
優點:雖然不是免費原型工具,但性價比也算不錯;工具內置大量模塊,能夠快速應用於原型設計,支持手繪風格。
缺點:原型沒有配色,沒有設計風格,不能進行交互展示。
適用人群:需要生成簡單原型(草圖)的產品經理或設計師。
7.Fluid UI
價格:免費版(1個項目) 個人版(5個項目)661RMB/人/年
學習曲線:中
簡介:Fluid UI是一款用於移動開發的Web原型工具,可以幫助設計師高效地完成產品原型設計。用戶可以選擇低保真的線框圖來加快開發,也可以選擇高保真的組件來模仿真實的操作系統。Fluid UI 內置超過2000款的線框圖和手機UI控件,並且還會經常進行更新,如果這些圖片尚不能滿足需求,還可以上傳自己的圖片。
優點:操作簡單,無設備限制,屏幕流功能,資源庫非常豐富,同時支持高低保真。
缺點:有時候看起來不夠直觀,性價比不是很高。
適用人群:適合習慣使用多平台的產品經理及設計師。
8.Justinmind
價格:免費試用30天 個人版 2472RMB/人/年
學習曲線:中高
簡介: JustinMind是一款來自西班牙的原型制作工具,主要致力於高保真原型。它提供的功能有繪圖工具,拖放位置,大小,格式和導出/導入的小部件。你還可以自定義小組件,創建自定義組件庫,並進行分類。此外,該產品原型工具還提供豐富的動畫支持及強大的交互效果(支持手勢交互),官網有豐富的組件及模板資源,用戶可以根據需要下載使用。
優點:支持高保真,支持動畫效果,便捷的自定義樣式,支持原型共享,支持手勢交互。
缺點:學習成本較高,程序啟動較慢。
適用人群:追求高保真原型的產品經理及設計師。
結語
優秀的產品源於優秀的原型工具,而一個優秀的原型往往源於優秀的產品原型工具,而且不局限於一種原型開發工具。關鍵是,你應該專注於你的設計而不是工具。你需要溝通什么、展示什么、測試什么?你需要建立怎樣的模塊?需要什么程度的保真?當你專注於原型所需要的目標時,你就知道你要采用何種工具了。