Introduction

axure rp

A professional rapid prototyping tool

Axure RP is a professional rapid prototyping tool. Axure (pronounced: Ack sure), representing Axure Corporation in the United States; RP is the abbreviation for Rapid Prototyping.

Axure RP is the flagship product of Axure Software Solution in the United States. It is a professional rapid prototyping tool that allows experts responsible for defining requirements and specifications, designing functions and interfaces to quickly create wireframes, flowcharts, prototypes, and specification documents for application software or web sites. As a professional prototype design tool, it can quickly and efficiently create prototypes, while supporting multi-person collaborative design and version control management .

The users of Axure RP mainly include business analysts, information architects, product managers, IT consultants, user experience designers, interaction designers, UI designers, etc. In addition, architects and programmers are also using Axure.

Interface functions

Navigation Panel

Before drawing a Wireframe or Flow diagram, one should first consider the interface framework and determine the content and hierarchy of the information。

After clarifying the interface framework, you can then use the page navigation panel to define the page you want to design. The page navigation panel is used to manage the pages designed by the Kwalliso. You can add, delete and reorganize the page hierarchy。

Adding, deleting, and renaming pages

Click the "Add Child Page" button on the panel toolbar to add a page, and click the "Delete Page" button to delete a page. Right click and select the "Rename Page" menu item to rename the page.

Page Organization Sorting

Page organization sorting is located in the page navigation panel. By dragging and dropping the page or clicking the sort button on the toolbar, you can move the position of the page up and down and reorganize the hierarchy of the page. Open the page for design in the page navigation panel. Double clicking on the page with the mouse will open the page in the wireframe panel for wireframe design.

Control

Controls are user interface elements used to design wireframes. There are commonly used controls in the control panel, such as buttons, images, text boxes, etc。

Add controls

Drag a control from the control panel to the wireframe panel to add a control. The control can be copied (Ctrl+C) from one wireframe and then pasted (Ctrl+V) into another wireframe.

Operation control

After adding a control, click on it in the wireframe, and then you can drag and move the control and change its size. You can also select, move, and change the size of multiple controls at once. In addition, controls can also be combined, sorted, aligned, assigned, and locked. These operations can be performed through the right-click menu of the control or through the buttons on the Object toolbar.

Edit Control Style and Properties

There are multiple ways to edit the style and properties of a control：

Double click with mouse：Double click a control with the mouse to edit its most commonly used properties. For example, double-click on an image control to import an image; Double click on a drop-down list or list box control to edit a list item。

Toolbar：Click the button on the toolbar to edit the text font, background color, border, etc. of the control。

右鍵菜單：Some specific properties of the control can be edited on the right-click menu of the control, and these properties also vary depending on the control。

Annotations: You can add annotations to the control to illustrate its functionality。

COMMENTS

Select a control in the wireframe and edit the values in the fields in the Annotations and Interactions panel to add annotations to the control. The Label field at the top of the panel adds an identifier to the control。

Custom Fields

You can add, delete, modify, and sort annotation fields through the main menu Wireframe - CustomizeAnnotation Fields and Views or by clicking on "CustomizeFields and Views" in the Annotations header on the panel, and then in the pop-up CustomizeFields and Views dialog box, you can add, delete, modify, and sort annotation fields。

Footnotes

After adding annotations to the control, a yellow square called a footnote will appear in the upper right corner of the control。

Page Notes

Page notes can describe and explain the page.

Add Page Notes

You can add page notes in the Page notes panel below the wireframe.

Management page notes

By customizing page notes, different notes can be provided to different people to meet different needs. For example, different categories of page notes such as "test cases" and "operation instructions" can be added.

InTeraction Design

Interaction of controls

The control interaction panel is used to define the behavior of controls in wireframes, including defining simple links and complex RIA behaviors. The defined interactions can be operated and executed in future generated prototypes.。

In the control interaction panel, the interaction of the control can be defined, consisting of interaction events, scenarios, and actions：

When the user operates the interface, events such as OnClick, OnMouseEnter, and OnMouseOut of the mouse are triggered；

Each event can contain multiple scenarios, which are the conditions that must be met after the event is triggered；

Each scene can perform multiple actions, such as opening links, displaying panels, hiding panels, and moving panels。

Define Link

The following steps explain how to define a link on a button control：

1.First, drag a button control onto the wireframe and select it；

2.Then, double-click the "OnClick" event in the control interaction panel, and the "Interaction Case Properties" dialog box will appear. In this dialog box, you can select the action to be executed；

3.In Step 2, check the 'Open Link in Current Window' action。

4.In "Step 3", click "Link" and in the pop-up Link Properties dialog box, you can select the page or other webpage address to link to 。

In addition to the above steps, the fastest way to add a link is to click on "QuickLink" at the top of the control interaction panel and select the page to link to in the pop-up Link Properties dialog box.

Multiple Scenarios

A triggering event can include multiple scenarios, executing processes or interactions based on conditions。

Event

Axure supports a page level trigger event: OnPageLoad, which is triggered when the prototype loads the page。

The page OnPageLoad event is defined in the Interactions sub panel of the page notes panel, and OnPageLoad adds scenes to the event in the same way as control events

Introduction to Features

The latest version of Axure is 10.0.0.3865. This version has many improvements compared to the previous version, as follows：

Mouse and keyboard interaction function

Support for more new features, including OnDoubleClick (double-click), OnContextMenu (right-click), OnMouseDown (mouse button pressed), OnMouseUp (mouse button released), OnMouseMove (mouse pointer movement), OnMouseHover (mouse pointer passing), OnLongClick (mouse long press), OnKeyDown (keyboard button pressed), OnKeyUp (keyboard button released)

Presentation Document

Support for new HTML5 features and better support for mobile presentation features.

New component style control

Axure7 has significant improvements in component decoration functions, including support for settings such as rounded corners, shadows, and stroke.

More refined component attributes

A richer set of component attributes, allowing for various shapes and styles to be set, which is also a surprise compared to the monotonous shape of Axure RP 6.5.

More interaction conditions

Including closing specified windows, setting anchors, and more flexible event triggering conditions, it is very helpful for the prototype design of mobile internet products。