Axure-Basic interactions-prototyping tools axure learning-Section 1.3

Start linking with basic interactions

This topic describes the interaction between elements. You will learn how to create simple page links and multiple interactive instances. This is the first or second article about creating interactions.Article.
Video: Download MP4 format

 

Interactions Overview

In your wireframe, you can link from basic page links to dynamic "AJAX-J" behavior to conditional logic and mathematical functions.
The interaction between prototypes often depends on the user and intention. Sometimes, a quick click is a method. However, if you are performing a user test, you may want to spend more on the prototype near the final application. Before building a more complex interaction, consider whether it is necessary. Of course, sometimes it's just fun to make every job.
In axure RP, interactions consists of three parts: Event Events, Case cases, and actions.

Events

An event is used to trigger an integer. For example, click, move the cursor, drag, and scroll. Different widgets have different events.
The following are some available events in axure RP and widgets.

• Onclick: When a widget is clicked (all widgets except dynamic panel)
• Onmouseenter: When the cursor moves to a widget (images, text panel, hyperlinks, button shapes, image map regions)
• Onmouseout: When the cursor is removed from a widget (same as above)
• Onkeyup: When the keyboard is released from a clicked widget (text fields, text areas)
• Onfocus: When a form widget (from the click or tab key) obtains the focus (text fields, text areas, droplist, list boxes, checkboxes, radio button)
• Onlostfocus: When a form widget loses focus (same as above)
• Onchange: When a drop-down box droplist option or list table list box item is selected

There are also some special dynamic panel events: onmove, onshow, onhide, onpanelstatechange, ondragstart, ondrag, ondragdrop. For more information, click Advanced Dynamic panels.

Cases

Cases is a corresponding path for events. For example, clicking on a hyperlink may lead to a simple case for opening the page. Or, click the login button, there may be two cases. If the logon succeeds, a page is displayed. If the logon fails, an error message is displayed. In axure RP, the scenario can be used as a prototype option or the case can be automatically executed based on the value-defined conditional logic of the form.

Actions

Actions is a response to an event defined as a case. For example, click the hyperlink to open a page in the current window. This action is "Open a page in the current window ".

Actions available in the following list.

Link action:

• Open link in current window: open a page or external link on the current page
• Open link in new window/Tab: open a page or external link in a new window or tab.
• Open link in popup window: open a page or external link in a pop-up form. You can set the size and properties of the form.
• Open link in parent window: load a page of the parent form from the pop-up form
• Close current window: Close the current page
• Open Link (s) in frame (s): load the page of the inline framework with the widget of the inline framework
• Open link in parent frame: open a page in the parent frame. Load a page to the inline framework.

Dynamic panel action:

• Set panel State (s) to state (s): sets the current visual state of one or more dynamic panels.
• Show panel (s): displays the content of one or more dynamic panels.
• Hide panel (s): hides the content of one or more dynamic panels.
• Toggle visibility: displays or hides dynamic panels based on the current visual status.
• Move panel (s): Move the dynamic panel to a specific position or a specific distance.
• Bring panel (s) to front: Move a dynamic panel to the top layer

Widgets and variables actions:

• Set variable/widget value (s): set the value of one or more variables/widgets (for example, the text value on a widget)
• Scroll to image map region: scroll a page to the widget position in a graphic map area. Similar to an anchor or jump Link (I cannot understand it. The original Article is: scrolls a page to the location of an image map region widget. Similar to an anchor or jump link)
• Enable Widget (s): Set the widget to available, such as a drop-down box or text field.
• Disable widget (s): Set to unavailable
• Set widget (s) to selected state: Set the style of a widget to optional or set to the default Style
• Set focus on Widget: Set the cursor status of a widget to focus (for example, text field)
• Expand Tree node (s): opens the node of a widget tree.
• Collapse Tree node (s): collapse the node of a widget tree

Miscellaneous actions:

• Wait time (MS): delay a special time operation
• Other: displays a piece of special text for a widget, such as "send email to user"

Interactions case Editor

Add interactions

Select a widget in wireframe and display the available properties of a widget in the interactions tab of the properties Panel (widget properties pane.

Add a case: Select an event, click "add case", or double-click the event. Axure opens the "case Editor" dialog box. In the dialog box, you can select or set the operations you need.

At the top of the dialog box ("Step 1: Description"), You can edit the case description. The description is used to introduce the prototype. Especially when your prototype event has multiple cases and has no conditional logic.

In the list on the left of the dialog box ("Step 2: Add actions") Add one or more actions to the case.

The action you selected will appear in the list box in the middle. ("Step 3: organize actions") You can add an action multiple times. The action will respond in the displayed order. For example, you first add an "open link in current window" and then add a "set variable value" action. The browser connects to the next page before setting the variable.
You can drag to change the order of actions. You can also select the up or down option by clicking the arrow (or right-click action) next to it.

In step 3, select action to edit attributes in the right sidebar. ("Step 4: Configure actions")
After the settings are complete, click "OK". The case and action will appear on the widget properties Panel (widget properties pane ).

Defining multiple cases

There are different paths or scenarios for triggering an event. Adding a case repeatedly defines additional cases for an event. You can use case description to describe the script. For example, on The onclick event of a button, you can have two cases. The descriptions are "If login succeeds" and "If login fails ". Click a button in the prototype to display the description. You can select a description to trigger the operation.
A good case description can be used to communicate with the condition stream more effectively and facilitate maintenance and upgrade. When you need your prototype to be automatically executed, you can define the conditional Logic Based on the variable value or the value entered by the user in the case operation. Learn more about conditional logic.

Basic interaction tutorials (Instance)

Page links tutorial

This example shows how to add a page-to-page Link. Open the link in a new browser tab. The link will jump to the previous page and close the current browser tab/window.
Example: Go to page links tutorial

Multiple cases tutorial

This example shows how to use a user logon script in a different path. Add multiple cases in the event and edit the case description "case descriptions ".
Example: Go to page links tutorial

Anchor links tutoral

This example uses the "image map region" widget and "scroll to image map region" operation on a page to create a jump link.
Example: Go to page links tutorial

The round up

With connections and cases, things become more fun.
Still need help? Go to the forum or send an emailSupport@axure.com

Address: http://www.axure.com/basic-interactionsAxure official address: http://www.axure.com/PS: Translation aims to better understand articles and share them. It is generally in English. Please speak it up.The copyright is owned by the company at the original address.