Learn axure prototype design from scratch (Advanced article)

Axure not only can make static visual manuscript, page, but also can add interactive action, is one of the best software for prototyping design. After knowing the Axure interface and the parts library, we can use it to draw wireframes, but the static wireframes are not as intuitive as the interactive prototypes.

Axure in the advanced chapter will describe what is interactive, how to play the most frequently used dynamic panel parts in the Axure, and make the interactive effect of the wild drag cool. In addition, the use of masters (primarily trigger events) is introduced.

Interactive Basics

Before we start interacting with axure, let's take a look at axure, the concept of interaction.
The creation interaction consists of four modules:

• Interaction (interaction): 3w= when + Where + what
  For example: When the mouse hovers over the menu bar, the menu bar color becomes darker.
• Events: There are two main categories, page events, and part events. Interactions are triggered by events, and events are used to perform an action.
• Use case (cases): Create a different path for the same task. A use case consists of a series of actions,
• Actions: The response to an event defined by a use case. such as pop-up windows, open links, etc.

Tips:
Use cases can be reused, and when you want to move an action on a use case to another part, just right click on the use case and click Copy, then click Response Event to select Paste.

There are so many ways to interact with axure, as long as you understand the principles, and as you become familiar with the software, you can harness its use.

Deep understanding of dynamic panels

In the actual work, the dynamic panel is the most used parts, through which we can achieve the picture carousel, accordion menu, Lightbox effect, Label control and drag and so on effect. Combined with the function variable can also make user login prompt, progress bar effect and so on.

Dynamic Panel Events

• When the state changes:
  This event is often used to trigger a series of interactions on the panel state, such as the presence of picture 1 in the case of State 1, and the presence of picture 2 in the case of State 2 (making a picture carousel).
• When dragging:
  This event is triggered by the click, drag, and release of the panel. For example, swiping a picture to the right in the app's prototype moves to a preview of the next picture.
• When scrolling:
  This event is triggered by the scrolling of the dynamic panel scroll bar. To trigger a specific scrolling position interaction, you can add conditions such as: [[This]. SCROLLX]] and [[This]. The scrolly]],x\y represents the X and Y axes and controls the state of the dynamic panel by setting the distance.
• When size changes:
  This event is triggered by a change in the size of the panel.
• Loading events:
  This event is triggered when the dynamic panel is initially loaded by the page. The principle is the same as the page load event.
• Drag-and-drop events:
  • When you start dragging
  • When dragging
  • At the end of the drag
    You can add interactions at each stage of the drag event.
• To move a panel while dragging:
  This event is the movement of the panel while dragging a part.

Options for dragging events

• Conditions to use when dragging:
  • Cursor position when dragging: the position of the cursor at the time of the drag-dragging process.
  • Part range: The range of the parts being dragged and pulled.

Set up a dynamic panel

The actions available on the dynamic panel include setting the dynamic panel state and setting the dynamic panel size.

• Dynamic Panel Size:

  • When editing a dynamic panel, you'll notice a blue dashed outline, which means you can see only the contents of the blue dashed outline within the dynamic panel.
  • If you add a part that is larger than the dynamic Panel outline range, you may want to use the Add scroll bar or resize the dynamic panel to fit the content.

• Dynamic Panel Status:

  • By default, the dynamic panel state is empty, so you need to add content (widgets) to the dynamic panel.
  • To manage the status of the dynamic panel is used in the part manager, which displays each state of the dynamic panel, double-click the edit state to enter the state.

Dynamic Panel state Manager

Dynamic panel Real-case: Making home Page ad Carousel

The main idea is to create a dynamic panel with multiple layers of pictures, and control the displayed picture by buttons (Previous, Next), and by setting use case conditions so that the picture carousel can be automatically looped.

• Step 1:
  Drag the dynamic panel to the design area, or drag the picture widget to the design area and right-click into the dynamic panel. and add buttons to the left (the previous one) and the right (the next one).
  You can also set the carousel to control the playback of the picture, each small dot corresponding to a picture.

• Step 2:
  Add a click button to change the Panel status event.
  Select the right button to add a mouse click event, in the popup dialog box, select the Set panel state action, and in the configuration action of the right button, select the Dynamic panel state drop-down list as next. Also sets the loop and animation of the dynamic panel state and transitions.

Make Picture Carousel

The download and demonstration chain of the case is presented at the end.

Use of the master version

What is a master version? The master image can be likened to the template in ppt, that is, you create once, you can reuse, after you change the template, all the pages that use the template will change accordingly.

• New master: There are two methods, one is to click on the "new panel" in the master panel, the second is to select the parts that need to be converted to master in the design area (can be selected in bulk), right-click "Convert to Master".
• Drag-and-drop behavior for the master:
  • Any position: You can drag the master to any position;
  • Lock Master Location: The location of the fixed master at the time of creation;
  • Detach from Master: When you drag the master to the design area, the contained parts become editable individuals and no longer belong to the master.
• Trigger event:
  • A trigger event (also known as a custom event) is dedicated to the Axure master, and only it can trigger events.
  • Usage scenario: A trigger event on a master appears on the interaction behavior of each instance of the master, and if one instance of one master has a very different interaction with another instance, you can create a trigger event to implement.
• The name of the triggering event must be alphanumeric and contain no spaces, such as: Onmybuttonclick (when the mouse is clicked).
• Adding an event to the master can add a new use case, add a trigger event action in the use Case editor, and then drag the master to another page to see the action you have created. You can add new use cases to the actions you have created on the page.

Create a trigger event for the master

Drag to any page after creation to see the events created

Download the dynamic panel case:
Baidu Cloud Download link
Password: ZMPK
Case Show

Original: http://www.jianshu.com/p/330b82a50876

Learn axure prototype design from scratch (Advanced article)