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

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.

1.gif

 

Set Transition Animations

Set a transition animation for the added page jumping link. There are 9 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.

2.gif

 

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.

3.gif

 

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.

4.gif

On the left animation panel, click the trash can icon to delete the automatic jump setting for the page.

5.png

 

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.

6.gif

 

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.

7.gif

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.

8.png

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.

9.gif

Note that the interaction demonstration is performed in a new tab. So, if you want to return to modify your interactive prototypes, simply close the new tab or directly switch to the interaction setting tab.

10.png

 

 

See also:

 

Prototype