5-minute master of 8 common interaction components, easy advanced prototype design, advanced prototype

5-minute master of 8 common interaction components, easy advanced prototype design, advanced prototype

Prototype design is inseparable from components. If the prototype is a house, the components are cement and bricks. This article describes the eight most commonly used interaction components.MockplusTry it!

 

I. pop-up menu

 

The pop-up menu is the most commonly used component in prototype design. Many components are used in a similar way. The Skillful Use of the pop-up menu will bring you great help. Next, let's take a look at how to use the pop-up menu from the actual case.

 

1. Drag a component at will. Here we take the button component in Mockplus as an example.

 

 

2. Drag the pop-up menu component and connect the link point in the upper-right corner of the button to the menu component.

 

 

3. Double-click the pop-up menu to edit the menu position and content.

 

 

Ii. pop-up window

 

The operation steps of the pop-up window are basically the same as those of the pop-up panel. The difference is that you can set interaction actions for all the four menu items in the pop-up menu, the pop-up window has only the "yes" and "no" options for setting interaction actions. At the same time, the format of the pop-up window content is slightly different from that of the pop-up panel.

 

 

3. Drawer

 

A drawer is a commonly used container component that features highly encapsulated, highly adjustable, and highly accommodating. In other words, you do not need to design the details of the drawer by yourself, simply set a few times to a drawer that slides out in multiple ways and can load the vast majority of components.

 

 

After connecting the button's link point to the drawer, double-click the drawer icon to add the component.

 

 

Iv. Image carousel

 

The image carousel component allows you to easily display several images in disorder. Drag the image carousel component into the workspace and double-click it to add an image.

 

 

V. Panel

 

A panel is actually a container for placing components.

 

Drag the Enable panel to the desired location, resize it, double-click it to enter the editing mode, and drag the required components. Note that the widget is not displayed when it exceeds the Panel boundary. You will find that the Panel is bounded because it is a container, and the part of the child component that exceeds the boundary will be cut off ". In addition, it is interesting that, unlike the "Group", sub-components in the Panel can be used as interaction targets when interaction is set, but the "Group" cannot, the entire group can only be set as the interaction target, because the group is composed of several components and is considered as a whole after grouping.

 

 

6. Pop-up panel

 

The pop-up panel is the most flexible interaction component. Drag a pop-up panel and double-click it to open it. You will find that there is nothing in it, but with it, we can create many interactive components such as pop-up windows, message boxes, and prompt boxes by ourselves.

 

 

VII. Content panel

 

The content panel is mainly used for fast Content Switching. However, it is generally not used independently. You can use it to work with multiple components such as the menu bar, list, and tab to complete Content Switching.

 

First, set three layers in the content panel to connect to the three target pages respectively. Then, the links on the tab are connected to the three layers one by one, and the Content Switching is complete.

 

 

VIII. Rolling Area

 

When the screen size is insufficient for the content we want to display, we can use the scroll area component to display more content in a limited space.

 

Drag the scroll area component into the workspace, resize it, and double-click it to enter the editing mode. Drag the component to be added to the scroll area in editing mode, click "+" to expand the scroll area size, and click "-" to contract the scroll area size. If you press Ctrl at the same time, it can accelerate expansion or contraction.

 

 

Interaction is a very important part in prototype design. flexible use of the above eight interaction components is sufficient to meet your commonly used interaction design! In addition to interactive components, Mockplus also hasNearly two hundred encapsulated ComponentsNow, try it!