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 back link/home link/external link

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.

Drag the link to the other two options to set home link and external link. (Note: When setting up an external link, you need to add a link address in the property panel on the right.)



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.


Right-click an interaction area, select Copy (or Crtl+C), and paste it on this page or other pages to quickly create the same interaction.


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: