【優(yōu)漫動(dòng)游】如何用墨刀快速制作app首頁(yè)原型

時(shí)間：2023-07-03 17:54:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 17:54:01 來源：網(wǎng)站運(yùn)營(yíng)

【優(yōu)漫動(dòng)游】如何用墨刀快速制作app首頁(yè)原型： 墨刀是一個(gè)原型設(shè)計(jì)工具，可以快速構(gòu)建移動(dòng)應(yīng)用原型與線框圖，支持云端保存和實(shí)時(shí)手機(jī)預(yù)覽。是產(chǎn)品設(shè)計(jì)一體化在線協(xié)同辦公平臺(tái),集原型設(shè)計(jì),線上版sketch設(shè)計(jì)師工具、流程圖、思維導(dǎo)圖為一體，今天優(yōu)漫教育小編主要是做一個(gè)墨刀的基礎(chǔ)使用教程，就不重點(diǎn)介紹和對(duì)比各原型工具的優(yōu)缺點(diǎn)了。希望這篇教程可以幫助墨刀的初學(xué)者快速上手該軟件。

那我們現(xiàn)在開始表演創(chuàng)建應(yīng)用

首先打開墨刀軟件，新建一個(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è)面

然后我們開始簡(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)的功能，就是通過連線的方式進(jìn)行頁(yè)面之間的跳轉(zhuǎn)，在應(yīng)用中選擇任何一個(gè)控件，圖片或者文字都可以通過添加手勢(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ì)

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

以上就是優(yōu)漫教育小編為大家介紹的“【UI設(shè)計(jì)培訓(xùn)】：如何用墨刀快速制作app首頁(yè)原型”相關(guān)內(nèi)容，學(xué)習(xí)ui設(shè)計(jì)培訓(xùn)，可以參考優(yōu)漫教育提供的ui學(xué)習(xí)路線，該學(xué)習(xí)路線內(nèi)容包含ps軟件入門、AI與品牌設(shè)計(jì)、視覺表達(dá)技法、web視覺設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、產(chǎn)品交互、移動(dòng)端設(shè)計(jì)等，根據(jù)優(yōu)漫提供的ui學(xué)習(xí)路線圖，可以讓你對(duì)學(xué)好ui需要掌握的知識(shí)有個(gè)清晰的了解，并能快速掌握ui設(shè)計(jì)！

文章來自：http://www.umanedu.com/