墨刀MockingBot

墨刀MockingBot是一款免費的移動應用原型設計工具，這款墨刀產品可以快速構建移動應用原型與線框圖，云端保存，實時手機預覽，支持iOS和安卓，多種手勢及頁面切換特效支持。還有多種主題選擇，是產品經理與交互設計師的貼身小幫手。

軟件介紹：

MockingBot是一個在線移動應用原型工具，旨在幫助產品經理及UI/UX設計師快速構建移動應用產品原型，并及時與團隊內其他成員分享和討論。作為一款專注移動應用的原型工具，除了云端保存，實時手機預覽，MockingBot還有多種手勢，頁面切換特效及主題可供選擇。

基本操作：

鏈接、手勢及定時器

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

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

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

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

接下來就是頁面切換動畫選擇，共有15種特效可供選擇，如果您不確定需要那種效果，可以在選中之后，將鼠標移到上面的預覽框，對效果進行預覽。

最后是定時器，可以設定這個鏈接的自動跳轉時間，到達時間后，即使用戶沒有任何操作，應用也會自動跳轉到目標頁面，適合制作輪播動畫等等。

如何制作滾屏效果

如果頁面內容超過了當前屏幕的默認高度，只需要對屏幕高度進行擴展，就可以在預覽模式下通過滾屏來查看超出屏幕部分的內容了，擴展屏幕高度非常簡單，只需要點擊屏幕底部的“擴展屏幕高度”按鈕就可以了，見下圖：

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

如何制作側滑/抽屜菜單

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

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

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

同理，連接另一個全局手勢到右側菜單，相應的選擇“右滑動”手勢以及“右菜單”交互，然后點擊運行，菜單效果就做好了：