瞭解原型設計工具:墨刀web
墨刀,一款在線的移動應用原型與線框圖工具。藉助於墨刀,創業者、產品經理及UI/UX設計師可以快速構建移動應用產品原型,並向他人演示。目前墨刀支持建立移動端(iPhone、iPad、Android)、web端的項目。小程序
目前墨刀分爲網頁版和客戶端,網頁版能夠直接使用,客戶端在網頁版的功能的基礎上增長了諸如能夠隨時提取頁面中某一顏色而後應用於對應控件等小功能。不一樣於Axure必定要下載才能使用,墨刀能夠直接在網頁上打開進行創做,給這個設計點贊!微信小程序
1、微信
完成註冊以後就能夠建立項目了工具
點擊右下的「視頻教程」,裏面有較爲詳盡的圖文教程,教你怎麼使用墨刀的各類功能。佈局
讓我沒想到的是這個軟件竟然有模板庫!還能夠從已有模板中建立項目!動畫
這簡直是太幸福了,我彷彿已經站在了巨人的肩膀上!spa
我選擇了我使用較爲頻繁的「網易雲音樂」模板進行預覽。設計
打開就看到了製做很是精良的頁面(左)3d
(右邊是我手機上打開網易雲音樂的頁面)
雖然由於版本不一樣頁面佈局有些差別,可是大致上的類似度是極高的。
如下是部分頁面的截圖:
(1)視頻主頁: (2)個人音樂:
(3)歌單: (4)歌曲播放:
(5)歌曲評論頁: (6)搜索:
左側有各頁面的具體名稱,點擊可直接跳轉到該頁面(顯示方式有列表和小圖兩種):
還有頁面搜索功能:
點擊「標註」,鼠標移動到各圖層會顯示改圖層的詳細信息。(右側各屬性可經過點擊複製)
注:標註展現相關控件的寬高、顏色、相對位置,便於開發。
至此,基本預覽完成!
接下來,
點擊使用模板進入「網易雲音樂」模板界面
點擊「編輯項目」,進入工做區編輯。點擊文本框,文本框與其相對應的界面有直線相連,線上圖標表示「點擊「操做可切換到該界面。
若是要進行頁面之間的跳轉,能夠點擊組件,而後拉動組件旁邊的超連接的樣式圖標到相應頁面便可執行進行頁面跳轉功能。
右側工具欄還能夠切換其餘操做
點擊動態頁面,出現全部動態頁面選項。
注:點擊右上角的「?」,會跳轉到教學頁面,教你如何實現交互動畫。
點擊「素材庫」,選擇「內置素材」裏面除了基本組件,有許多實用的素材如:iOS的各種圖標,便於設計時使用。
自定義組件庫:
對於一些平臺組件庫中沒有的,或者項目中經常使用可是須要多個組件拼接的,咱們均可以經過自定義組件來製做,方便其餘項目直接使用,好比項目中經常使用的消息彈窗,咱們就能夠製成自定義組件。
點擊「笑臉」進入圖標庫,圖標的種類很是豐富,還能夠更換圖標顏色,基本知足各類設計需求。
墨刀對於APP的原型設計體驗很是好,其控件的拖拉、大小的調整,都會天然的去匹配相應的母版大小。無需去擔憂有多移動一點或多選擇一點。而且墨刀的系統控件都是基於APP,以及系統平臺IOS和安卓,所以在裏面能夠首先選擇相應的設備佈局,減小了很多工做環節。
2、
接下來我本身嘗試創建了一個項目
選擇建立空白項目
填寫項目名稱,選擇完機型、型號和系統後點擊「建立」。
進入工做區
點擊「主頁」進入編輯界面。
嘗試着作了一個簡單的登陸與註冊界面。
點擊「登陸」頁面的「點擊註冊」可跳轉到註冊頁面。
3、
使用感覺:我以前使用過Axure因此對原型設計的工具備那麼一丟丟的瞭解。墨刀首先給個人第一印象就很好,網頁版墨刀省去了下載安裝的麻煩。墨刀的教程算是比較完善的了。官網上就有詳細的圖文教程和視頻,新手也能夠很快上手。
由於Axure是沒有元件庫的,我使用的時候也是在網上找到元件庫素材導入去作設計,這個對於不瞭解元件庫的人或者第一次接觸原型設計的人來講很不友好。墨刀不只有元件庫,還有模板庫,這是讓我很是驚奇的一點。各類已經作好的模板,不管是微信小程序仍是各種應用界面,只須要小部分的修改,就能在最短的時間作出本身想要的模板,十分便捷。墨刀使快速設計原型變成了可能。然,墨刀的在交互效果上、控件組合上,操做面板的選擇上都不如AXURE 靈活,而且效果切換由於是採用連線的方式,連線過多看起來會很混亂。目前原型的交互效果系統自帶的還比較少,但基本知足平常全部原型的使用。另外須要充費纔可以使用更強大的共享建立功能。但整體來講,墨刀仍是一款很不錯的原型設計軟件,值得一用!