Axure RP Introduction

1. What is prototype design?
The most basic work of product prototyping (Prototype design) is the combination of annotations, a large number of instructions, and a flowchart diagram wireframe, which is a complete and accurate representation of your product prototypes to the UI, UE, program engineer, marketing staff, and through communication meetings, Revise the prototype repeatedly until final confirmation, and start putting into execution.
Simple is the product design before the formation of a simple framework, to the site, is the page module, the elements of the extensive layout and layouts, in-depth some, but also add some interactive elements, make it more specific, image and vivid.

2. General design Tools
What are some common tools that can be used for prototyping and analyzing their pros and cons?
Paper Pen: Simple and easy to get, the difficulty of getting started is zero. facilitates the generation and recording of instantaneous creativity, facilitates the immediate discussion and modification of documents. But Fidelity is not high, it is difficult to describe the page process, it is more difficult to describe the interaction information and program requirements details.
Word: Difficult to get started. Can draw wireframe, can draw the page flow, can use annotations and text description. But it's not good for interaction, and it's not conducive to presentation.
PPT: Difficult to get started. Easy to draw frame diagram, easy to annotate, also can express the interaction process, also good at presentation. However, it is not conducive to large-length document expression.
Visio: The function is relatively complex. Good at drawing flowchart, frame diagram. Not conducive to comments and large text description. The same is not conducive to interactive expression and presentation.
Photshop/fireworks: The operation is relatively difficult, easy to draw frame diagram, flowchart. Not conducive to the expression of interactive design, not good at text description and annotations.
Dreamweave: The operation is difficult and requires basic HTML knowledge. Easy to draw frame diagram, flowchart, expression interaction design. Not good at text descriptions and annotations.
Paper and pen, more suitable for use in the product creative stage, can quickly record lightning-like ideas and inspiration, can also be used in the instant discussion of communication, through the rapid expression of their own product ideas, timely drawing out, is a better way.
Word is suitable for the detailed expression of the product in the text, the details of the product to use, the picture combined with the text layout, is the work of word best.
PPT is naturally better when presenting. Visio can be applied to a variety of flowchart, diagram expressions, and can be used to draw the user needs.
PS/FW is the image processing tool, DW is the WYSIWYG web development software, these are designers of the housekeeping skills, need to spend too much energy to grasp.
In fact, every tool, every software, in the early days of creating it, software designers have given it a character, temperament. Because each tool is produced in order to meet the needs of a certain aspect of human beings.

These tools, often used, but fundamentally, these tools are not to do prototype design of the special weapon, the need for product development for different purposes, different stages of development, choose different tools to use, in order to achieve the purpose of expression and communication. There are many software tools for prototyping the market, and it is universally recognized that the most frequently used, the most efficient, the best interactive prototype tool is the Axure RP.

3. What is Axure RP?
Axure RP is a professional fast prototyping tool. Axure (pronunciation: ack-sure), representing the American Axure Company; the RP is the abbreviation for rapid prototyping (rapid prototyping).
Axure RP is the flagship product of the United States Axure software solution, a professional rapid prototyping tool that enables experts who define requirements and specifications, design features and interfaces to quickly create wireframes, flowcharts, prototypes, and specification documents for applications or Web sites. As a professional prototyping tool, it can create prototypes quickly and efficiently, while supporting multi-person collaboration design and versioning management.

Axure's visual working environment allows you to easily and quickly create a wireframe with annotations in the form of a mouse. Without programming, simple connections and advanced interactions can be defined on an inline block diagram. On the basis of the online block diagram, it is possible to automatically generate prototypes of HTML (one application under standard Universal Markup Language) and Word format specifications.

4.Axure RP Working environment

(1). Main Menu and toolbar
Perform common operations such as opening files, saving files, formatting controls, and automatically generating prototypes and datasheets.
(2). Site Map Panel
Add, delete, rename, and organize page hierarchies for the pages you design, including wireframes and flowcharts.
(3). Control Panel
The panel contains wireframes and flowchart controls, and you can also load an existing part library (*.rplib file) to create your own part library.
(4). Module Panel
A special page that can be reused, where modules can be added, deleted, renamed, and organized into hierarchical categories.
(5). wireframe Work Area
The wireframe workspace is also called the page workspace, and the Wireframe workspace is the main area where you can design your prototype, in which you have a wireframe, flowchart, custom part, and module.
(6). Page notes and interactive areas
Add and manage page-level comments and interactions.
(7). Control Interaction Panel
Defines the interaction of the control, such as: linking, ejecting, dynamic display and hiding, and so on.
(8). Control Comment Panel
Notes the functionality of the control.

5. Interface function
(1). Navigation Panel
Before you draw a wireframe (Wireframe) or flow chart (flow), you should consider the interface framework to determine the content and hierarchy of the information.
Once you have defined the interface framework, you can then use the page navigation panel to define the page you want to design. The page navigation panel is a page for managing the design, adding, deleting, and re-organizing the page hierarchy.
adding, deleting, and renaming pages
Click on 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 to select the "Rename page" menu item to rename the page.
Page organization Sort
In the page navigation panel, you can move the position of the page up and down and reorganize the hierarchy of pages by dragging the page or clicking the Sort button on the toolbar. Open the page for design in the page navigation panel, the mouse double-click page will open the page in the wireframe panel for wireframe design.
(2). Controls
Controls are user interface elements that are used to design wireframes. Contains commonly used controls, such as buttons, pictures, text boxes, and so on, in the Control Panel.
Adding Controls
You can add a control by dragging a control from the control Panel into the wireframe panel. The control can be copied (CTRL + C) from a wireframe and then pasted (Ctrl + V) into another wireframe.
Manipulating Controls
After adding the control, the inline block diagram selects the control, and you can drag and move the control and change the size of the control, and you can select, move, and resize multiple controls at once. In addition, you can combine, sort, align, assign, and lock controls. These actions can be done either through the control's right-click menu or by a button on the Object toolbar.
Edit Control Styles and properties
There are several ways to edit the style and properties of a control:
Double-click Mouse: Double-click a control to edit the most common properties of the control. For example, double-click a picture control to import a picture; Double-click a drop-down list or list box control to edit the list item.
Toolbars: Click the buttons on the toolbar to edit the control's text font, background color, border, and so on.
Right-click menu: Some specific properties of an editable control on the right-click menu of a control, and these properties are different for different controls.
(3). Notes
You can add a comment to the control to illustrate the functionality of the control.
Add Comment
Add a comment to the control by selecting the control in the inline diagram and editing the value in the field in the control comments and interactions (Annotations and Interactions) panel. The Label field at the top of the panel is to add an identifier to the control.
custom field (fields)
From the main Menu wireframe->customizeannotation fields and Views or click on the annotations head of the panel "Custommizefields and view" then in the popup Custommizefields and, the Views dialog box allows you to add, delete, modify, and sort comment fields.
footnote (footnotes)
When you add a comment to a control, a yellow square is displayed in the upper-right corner of the control, called a footnote.
(4). Page Notes
Page notes can be described and explained on the page.
Add page Notes
In the page notes panel below the online block diagram, you can add content to your pages ' notes.
Manage page Notes
By customizing the page notes, you can provide different comments for different people to meet different needs. For example, you can add "test case" "Operation Instructions" and other categories of page notes.

6. Interactive Design
(1). Interaction of Controls
The control interaction panel is used to define the behavior of the controls in the wireframe, including defining simple links and complex Ria behaviors, and the defined interactions can be performed in future prototypes of the build.
You can define the interaction of controls in the control interaction panel, which consists of interactive events (events), scenes (Cases), and actions (actions):
User interface will trigger events, such as the mouse OnClick, Onmouseenter and onmouseout;
Each event can contain multiple scenes, which is the condition to be satisfied after the event is triggered;
Each scene can perform multiple actions, such as opening links, displaying panels, hiding panels, and moving panels.
(2). Define Links
The following steps explain how to define a link on a button control:
1. First, drag a button control into the wireframe and select this button;
2. Then, in the control interaction panel, the mouse double-clicks the "OnClick" event, the "Interaction Case Properties" dialog will appear, in which you can select the action to perform;
3. In "Step 2", tick the "Open Link in Current window" action.
4. In "Step 3", click "link", in the pop-up Link Properties dialog box you can select the page or other Web address to link to.
In addition to the above steps, the quickest way to join a link is to click "QuickLink" at the top of the control's interaction panel and select the page to link in the Link Properties dialog box that pops up.
(3). Set Action
In addition to simple links, Axure provides a number of rich actions that can be performed in any scenario that triggers an event. The following are the actions supported by Axure:
Open Link in Current window: Opens a page
Open Link in Popup window: Opens a page in a popup
Open Link in parent window: Opens a page in the parent
Close Current window: Closed
Open Link in frame: Opens a page in the frame
Set panel state (s): Set the status to display for the dynamic panel
Show panel (s): Show dynamic Panel
Hide panel (s): Hide dynamic panels
Toggle Visibility for panel (s): Toggle the display status of the dynamic panel (Show/Hide)
Move panel (s): Move dynamic panels by absolute or relative coordinates
Set Variable and Widget value (s) equal to value (s): Set variable value or control value
Open Link in parent frame: Opens a page in the parent page's nested frame
Scroll to Image Map region: Scroll page to
Image Map Location
Enable Widget (s): Change the state of an object to a usable state
Disable Widget (s): Change the state of an object to an unusable state
Wait time (s): Wait a few milliseconds (ms) before doing this action
Other: Display a textual description of the action
(4). Multiple scenes
A trigger event can consist of multiple scenarios that perform processes or interactions based on conditions.
(5). 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 in the page Notes panel, Onpageload adds a scene to the event in the same way as the control event

Axure RP Introduction