墨刀是一個(gè)原型設(shè)計(jì)工具，可以快速構(gòu)建移動(dòng)應(yīng)用原型與線框圖，支持云端保存和實(shí)時(shí)手機(jī)預(yù)覽。今天主要是做一個(gè)墨刀的基礎(chǔ)使用教程，就不重點(diǎn)介紹和對(duì)比各原型工具的優(yōu)缺點(diǎn)了（有空的話我會(huì)單獨(dú)做一篇原型工具的對(duì)比分析）。希望這篇教程可以幫助墨刀的初學(xué)者快速上手該軟件。

那我們現(xiàn)在開(kāi)始表演

創(chuàng)建應(yīng)用

首先打開(kāi)墨刀軟件，新建一個(gè)應(yīng)用，選擇應(yīng)用類型（這里我選擇了iPhone設(shè)備），輸入應(yīng)用名稱，設(shè)備類型和應(yīng)用尺寸，點(diǎn)擊創(chuàng)建按鈕，完成應(yīng)用創(chuàng)建。

制作底部導(dǎo)航欄

新建應(yīng)用的標(biāo)題欄會(huì)自動(dòng)顯示應(yīng)用的名稱（人人都是產(chǎn)品經(jīng)理），標(biāo)題欄文字可以自行修改。

制作里布導(dǎo)航欄，從左側(cè)“組件”欄目中找到底部組件，拖入應(yīng)用之中，大小和樣式可以自行修改。然后拖入三個(gè)導(dǎo)航標(biāo)簽，修改標(biāo)簽的位置和名稱。至此完成底部導(dǎo)航欄的制作。

制作原型頁(yè)面

然后我們開(kāi)始簡(jiǎn)單的制作下“產(chǎn)品經(jīng)理”的首頁(yè)原型，在左側(cè)的“組件”欄目中找到搜索組件，拖入App首頁(yè)中，在“母版”欄目中找到輪播圖模版，拖入應(yīng)用之中。墨刀中有一些已經(jīng)做好的組件或母版，可直接拖入使用，加快創(chuàng)建原型的時(shí)間。

然后回到“組件”欄目，為首頁(yè)插入圖片和文字。圖片調(diào)節(jié)在右邊的設(shè)置欄，這里推薦大家直接拖入圖片，然后用鼠標(biāo)調(diào)節(jié)大小這樣會(huì)比較方便。文字的調(diào)節(jié)在左邊的主題欄目，可調(diào)節(jié)文字的大小和樣式，然后用鼠標(biāo)擺至合適的位置。

創(chuàng)建頁(yè)面

在軟件右上角點(diǎn)擊“+新頁(yè)面”即可生成新的頁(yè)面，每一個(gè)頁(yè)面有復(fù)制、刪除、添加子頁(yè)面的功能。在新的頁(yè)面中添加標(biāo)題欄，復(fù)制首頁(yè)的底部導(dǎo)航，粘貼至新的頁(yè)面，注意粘貼時(shí)用于粘貼至“原位置”。按如此方式制作“發(fā)現(xiàn)”頁(yè)面和“我的”頁(yè)面。

頁(yè)面跳轉(zhuǎn)

這里介紹一個(gè)墨刀非常有特點(diǎn)的功能，就是通過(guò)連線的方式進(jìn)行頁(yè)面之間的跳轉(zhuǎn)，在應(yīng)用中選擇任何一個(gè)控件，圖片或者文字都可以通過(guò)添加手勢(shì)和頁(yè)面切換方式實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。優(yōu)點(diǎn)在于操作方便，且比較直觀。缺點(diǎn)是如果頁(yè)面復(fù)雜，跳轉(zhuǎn)比較多，會(huì)有非常多交叉在一起的線，容易連接出錯(cuò)。

利用連線的方式即可快速的實(shí)現(xiàn)底部導(dǎo)航的切換，設(shè)置完成后選擇右上角運(yùn)行按鈕，即可查看實(shí)際效果，效果如下：

添加全局手勢(shì)

最后說(shuō)一個(gè)在移動(dòng)端比較重要的功能，應(yīng)用全局手勢(shì)的添加，在左側(cè)“組件”欄目找到全局手勢(shì)組件，拖入至應(yīng)用的任意位置，然后選擇你要發(fā)動(dòng)手勢(shì)后跳轉(zhuǎn)的頁(yè)面，選擇手勢(shì)方式和動(dòng)畫效果即可。

利用全局手勢(shì)組件，在應(yīng)用添加滑動(dòng)的頁(yè)面切換效果。運(yùn)行測(cè)試，效果如下。

手機(jī)預(yù)覽

手機(jī)預(yù)覽功能，可以直接將原型導(dǎo)到手機(jī)上查看。只需要在運(yùn)行界面，點(diǎn)擊分享，用手機(jī)瀏覽器（墨刀app可以）掃描二維碼即可直接在手機(jī)上查看原型，更加方便的你為團(tuán)隊(duì)演示和講解自己的原型。

總結(jié)發(fā)言

“墨刀”總的來(lái)說(shuō)操作是非常方便的，如果有其他的原型工具基礎(chǔ)，用起來(lái)可能更好上手。本身支持手機(jī)預(yù)覽功能，更加方便于移動(dòng)產(chǎn)品的創(chuàng)建和展示。本人也推薦app的產(chǎn)品或設(shè)計(jì)師使用墨刀來(lái)快速創(chuàng)建原型，可以加快自己的制作和展現(xiàn)的時(shí)間。

作者：JiLegw，產(chǎn)品新人，交互設(shè)計(jì)師，剛開(kāi)始寫東西，歡迎各位大神提供寶貴建議。

本文由 @JiLegw 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。