墨刀MockingBot

墨刀MockingBot是一款免費(fèi)的移動(dòng)應(yīng)用原型設(shè)計(jì)工具，這款墨刀產(chǎn)品可以快速構(gòu)建移動(dòng)應(yīng)用原型與線框圖，云端保存，實(shí)時(shí)手機(jī)預(yù)覽，支持iOS和安卓，多種手勢(shì)及頁(yè)面切換特效支持。還有多種主題選擇，是產(chǎn)品經(jīng)理與交互設(shè)計(jì)師的貼身小幫手。

軟件介紹：

MockingBot是一個(gè)在線移動(dòng)應(yīng)用原型工具，旨在幫助產(chǎn)品經(jīng)理及UI/UX設(shè)計(jì)師快速構(gòu)建移動(dòng)應(yīng)用產(chǎn)品原型，并及時(shí)與團(tuán)隊(duì)內(nèi)其他成員分享和討論。作為一款專注移動(dòng)應(yīng)用的原型工具，除了云端保存，實(shí)時(shí)手機(jī)預(yù)覽，MockingBot還有多種手勢(shì)，頁(yè)面切換特效及主題可供選擇。

基本操作：

鏈接、手勢(shì)及定時(shí)器

使用墨刀可以非常方便的創(chuàng)建頁(yè)面間鏈接，墨刀獨(dú)創(chuàng)的拖拽鏈接方式，讓頁(yè)面間的鏈接關(guān)系清晰呈現(xiàn)眼前，要?jiǎng)?chuàng)建頁(yè)面間鏈接，只需要選中要鏈接的組件，然后拖動(dòng)組件右側(cè)的小圓圈到目標(biāo)頁(yè)面就可以了，如下圖：

創(chuàng)建好鏈接之后，我們會(huì)看到鏈接選項(xiàng)面板：

可以看到，鏈接面板包含3個(gè)部分：手勢(shì)、切換動(dòng)畫(huà)以及定時(shí)器，下面我們來(lái)依次介紹這3個(gè)部分。

由于手勢(shì)需要較大的可點(diǎn)擊區(qū)域，所以并不是所有組件都支持手勢(shì)，目前支持手勢(shì)的組件包括：全局手勢(shì)，鏈接區(qū)域，圖片以及矩形，可選的手勢(shì)如圖所示，共有6種：點(diǎn)按，長(zhǎng)按以及上下左右滑動(dòng)。

接下來(lái)就是頁(yè)面切換動(dòng)畫(huà)選擇，共有15種特效可供選擇，如果您不確定需要那種效果，可以在選中之后，將鼠標(biāo)移到上面的預(yù)覽框，對(duì)效果進(jìn)行預(yù)覽。

最后是定時(shí)器，可以設(shè)定這個(gè)鏈接的自動(dòng)跳轉(zhuǎn)時(shí)間，到達(dá)時(shí)間后，即使用戶沒(méi)有任何操作，應(yīng)用也會(huì)自動(dòng)跳轉(zhuǎn)到目標(biāo)頁(yè)面，適合制作輪播動(dòng)畫(huà)等等。

如何制作滾屏效果

如果頁(yè)面內(nèi)容超過(guò)了當(dāng)前屏幕的默認(rèn)高度，只需要對(duì)屏幕高度進(jìn)行擴(kuò)展，就可以在預(yù)覽模式下通過(guò)滾屏來(lái)查看超出屏幕部分的內(nèi)容了，擴(kuò)展屏幕高度非常簡(jiǎn)單，只需要點(diǎn)擊屏幕底部的“擴(kuò)展屏幕高度”按鈕就可以了，見(jiàn)下圖：

如果需要對(duì)屏幕高度實(shí)現(xiàn)精確控制，也可以將鼠標(biāo)移到屏幕底部，待鼠標(biāo)變?yōu)橥蟿?dòng)圖標(biāo)后，直接拖動(dòng)屏幕底部來(lái)調(diào)整屏幕高度。

如何制作側(cè)滑/抽屜菜單

要建立側(cè)滑菜單（或者抽屜菜單）效果需要用到全局手勢(shì)組件，見(jiàn)下圖紅圈：

首先假設(shè)你已經(jīng)有了三個(gè)頁(yè)面，分別是居中的主頁(yè)面，左滑菜單以及右滑菜單，現(xiàn)在我們需要拖動(dòng)兩個(gè)全局手勢(shì)組件到居中的主頁(yè)面的任意位置，見(jiàn)下圖：

然后分別將兩個(gè)手勢(shì)組件與兩側(cè)的菜單相連，下面以左滑菜單為例，創(chuàng)建好連接之后，我們需要將手勢(shì)設(shè)定為左滑動(dòng)，然后選擇“左菜單”作為頁(yè)面切換效果，見(jiàn)下圖：

同理，連接另一個(gè)全局手勢(shì)到右側(cè)菜單，相應(yīng)的選擇“右滑動(dòng)”手勢(shì)以及“右菜單”交互，然后點(diǎn)擊運(yùn)行，菜單效果就做好了：