墨刀教程:如何快速制作一個(gè)App首頁(yè)原型?
墨刀是一個(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)載。
問(wèn)下大神,墨刀有沒(méi)有免費(fèi)替代品呀?
我一般用Axure,可以找下。
摹客我覺(jué)得跟好用:https://www.mockplus.cn/idoc?hmsr=renren
可以的
運(yùn)營(yíng)
贊
博主 做的很好多向你學(xué)習(xí),我記得墨刀也有個(gè)群是吧 210325628 進(jìn)去多交流學(xué)習(xí)一下 ??
我什么我下載的軟件用不了
墨刀工具欄怎么分類的?我這工具都在一塊,求告知啊
您好,請(qǐng)問(wèn)下磨刀可以做有動(dòng)畫的效果的交互么?比如:引導(dǎo)頁(yè)面一張圖貫穿三頁(yè),隨著滑動(dòng)界面轉(zhuǎn)換界面,圖片也跟著動(dòng)。
很不錯(cuò)的一個(gè)軟件,很適合初學(xué)開(kāi)發(fā)者使用,可惜功能還沒(méi)開(kāi)發(fā)的太完善要是功能強(qiáng)大之后,或許以后主流開(kāi)發(fā)軟件就會(huì)是這個(gè)了
找你做一個(gè)。。。。什么價(jià)格啊
要看下具體的產(chǎn)品深度。
嗨 ,,,你好,,,有聯(lián)系方式么
可以加微信 細(xì)聊 微信號(hào):fyc0612
找你做一個(gè) 什么價(jià)格啊
不錯(cuò)不錯(cuò)
感謝作者分享,非常不錯(cuò)的干貨
請(qǐng)問(wèn)墨刀做高保真方便么
方便啊 要是有做好的UI 直接拖上去 鏈下交互就行了。
墨刀根本不用下載,web端比客戶端功能還多,那個(gè)客戶端感覺(jué)就是把web封進(jìn)一個(gè)框里。。
墨刀是收費(fèi)的吧
恩,免費(fèi)版的只能做,不能導(dǎo)出。我這也是免費(fèi)版。
它和原生有什麼不一樣
沒(méi)太懂您的意思,原生的是指哪個(gè)?
請(qǐng)問(wèn)有mac版本嗎?
有的。
求地址~Help~
官網(wǎng)就有啊。https://modao.cc/downloads
辛苦了,這個(gè)軟件看起來(lái)比較容易上手。
是的,這個(gè)特好上手,自己試一遍自己基本就能做東西了。
ps:錄屏軟件叫做“LICEcap”可以直接導(dǎo)出GIF格式,是免費(fèi)軟件,挺好用的,推薦給大家。
??