墨刀MockingBot

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

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

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

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

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

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

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

如何制作滾屏效果

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

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

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

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

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

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

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