In the “Prototype” module of Mockplus iDoc, you can add jumping interactions between pages and create high-fidelity interactive prototypes easily and quickly.

 

Set Page Jumping Links

1. custom interaction area

Hold your mouse to draw a rectangular hot zone, release it and drag the link point of the hot zone to the targeted page on the Project tree.  In this way, a page jumping link is built, which means that the targeted page will be jumped to by clicking the hot zone.

自定义交互区域-英

 

2. user a layer to create an interaction area

Double-click the layer you want to create an interaction to quickly generate an interaction area. You can set its interaction link by selecting the target page on the left project tree.

图层交互区域-英

When there is a change in the assets area uploaded from the plugin, the interaction created in the area is automatically synchronized to the changed area after the artboard is uploaded. When the assets area is deleted, the corresponding interaction area is also deleted.

 

 

Set Transition Animations

Set a transition animation for the added page jumping link. There are 15 types of transition animations designed for you. Without setting, a “None” option will be selected by default, which means there is no any transition animation added.

You can also modify the execution time of transition animations by using the drop-down box or entering a number directly at the same time.

设置交互动画-英

 

Gesture Interaction

In the prototype page, click the “Trigger” option in the property panel on the right, you can see a variety of interaction modes: OnLoad, Double Click, Press, Swipe left, Swipe right, Swipe up and Swipe down. After selecting one of the trigger modes, the corresponding gesture will be used in the prototype demo.

手势交互-英

 

Set as Backlink

Drag the link point of a hot zone to the appearing  button saying: “Drag here to set as backlink ” to create a backlink. A backlink means you will jump back to the original page no matter where you jump to the current page.

Note that you can not set an animation for the backlink since it is completely opposite from the animation of the original page.

设置返回链接-英

 

Auto Jumping

Drag the auto jumping icon in the left-upper corner of the page to the targeted page on the Project tree and set the delay time on the animation panel. In this way, the page will automatically jump to the targeted page in a delay while previewing.On the right animation panel, click the trash can icon 删除评论 to delete the automatic jump setting for the page.

延时时间

 

Drag to Set Fixed Area

Click an icon on the left ruler to set fixed areas for the current page. Then, a red line which can divide the page will be automatically generated. Drag it up/down to set a fixed header/footer area for the page.

In this way, only the body area of the page will be scrolled while previewing.

设置滚动区域-英

 

Clone Interactions

Select an interactive hot zone and hold “Alt + Left mouse button” ( “Option + Left mouse button” on Mac OS) together to clone it quickly. The cloned hot zone is exactly the same as the original one since they have the same size, target page and transition animation.

克隆交互

Select a comment, right click and select “Copy”(or Ctrl+C)  to copy the comment. Right click in the blank and select “Paste” (or Ctrl+V )to paste the comment.

交互复制

Interaction Notification

In the prototype page, the blue triangle on the left side of the project tree indicates that there is an interaction on it.

交互提示

 

Preview Settings

Click the setting icon in the lower right corner and choose options, such as  “Show control panel”, “Show tool bar”, “Always show link area” and “Show link area ”, to set your previewing.

Also set a default device frame there, such as iPhone X, iPhone, Android and Pad, etc.

演示设置

Preview Interactions

Click “Preview” in the upper corner to preview your created interactive prototypes.

Click “Share” on the toolbar to get a share link.

Click “Scan QR code” to generate a QR code. Scan the code and preview your project quickly with your mobile devices.

There are also many other useful options to facilitate your previewing process, such as “Show control panel”, “Home”, “Back”, “Forward”, “Zoom in” and “Zoom out”. Simply hover on them to see what they exactly mean.

演示按钮栏-英

 

 

See also:

 

Prototype