Axure Beginner's Introductory tutorial

First of all make a statement: This tutorial in order to quickly complete, borrowed some online has a tutorial of the text, not plagiarism, only the diagram is convenient. In addition, because the Chinese version may have a slightly different function name, please understand it yourself.

Noun Explanation:

Wireframe: generally refers to product prototypes, such as: the line block diagram as soon as possible to draw and the prototype as soon as possible is a meaning.

Axure components: Also known as axure components or axure parts, the system comes with a part of the most basic commonly used, the internet has a lot of others do well, the software used to a certain stage can consider their own production components, in order to improve the production speed of prototyping products.

Build prototype: Refers to the drawing of the prototype through the Axure RP generated static HTML page, check the prototype is correct, at the same time, easy to demonstrate. Recommended to build when you choose to open Google Browser (the first time there will be prompted to install the relevant plug-in), IE will always have security tips, not as easy as Google Chrome.

(i) interface of Axure RP

1-Main Menu toolbar: Most similar to Office software, do not explain in detail, the mouse moved to the button has a corresponding prompt.

2-Main operating interface: Draw the operating area of the product prototype, and all the used components are dragged to the area.

3-Sitemap: All the page files are stored in this location, you can add, delete, modify, view the page, you can also drag the mouse to adjust the page order and the relationship between pages.

4-axure Component library: Either the Axure component library, the Axure part library, all the software's own components and the loaded library of components are here, where you can create, load, delete axure Library of components, or you can display all components or components of a component library on demand.

5-Master Management: Here you can create, delete, like the page header, the navigation bar, which appears on each page of the element, can be drawn in the master, and then loaded into the page that needs to be displayed, so that in the production of the page will not repeat these operations.

6-page Properties: Here you can set the style of the current page, add comments about the page, and set the event onpageload triggered when the page loads.

7-Component Properties: Here you can set the label, style of the selected symbol, add comments related to the symbol, and set the event triggered when the page loads;

A-interactive event: symbol attribute area Lightning Pattern small icons represent interactive events;

B-Component Note: The icon on the left side of the interaction event is used to add component annotations, where we can add some component-qualified annotations, such as text boxes, to add comments indicating that the input character length cannot exceed 20.

C-Component style: The icon on the right side of the interaction event is used to set the component style, where you can change the font, size, rotation angle, etc. of the original, and of course, the alignment, composition, etc. of multiple components can be set.

8 Dynamic panel: This is a very important area, where you can add, delete the status of the dynamic panel, as well as the status of the order, you can also set the dynamic Panel label here, when the drawing prototype dynamic panel is overwritten, we can click to select the corresponding dynamic panel, you can also double-click the state to enter the editor.

Axure RP Interface is introduced here, each area of the interface is basically in the process of product prototyping, use is very frequent, so it is recommended not to close any area. If you accidentally close it, you can retrieve it from the Main Menu toolbar-view-Reset view.

(ii) Axure RP Line block diagram element

L Picture

After the picture element is dragged into the edit area, you can load the picture into the editing area by double-clicking the image on the local disk, Axure will automatically prompt to optimize the large picture to avoid the prototype file too large;

L Text

The name of the text in the Web page is lable, which is used to add descriptive text, text connections, or some dynamic hints to the page.

L Rectangle

Rectangle is widely used, such as the background of the page, buttons, and some of the elements of the cover, etc. the shape of the rectangle can be changed by right-clicking-Edit Options-Change the shape to become the shape we need, such as the tab when we need the top rounded rectangle, you can change the shape of the rectangle to achieve.

L Placeholder

When you make a prototype, you can use it instead of an area that is easier to describe without interacting or interacting, or as a close button. Placeholders are not very useful in product prototypes with higher fidelity.

L Rounded Rectangle

This person thinks that because the rounded rectangle is widely used, it is taken out separately as a component to the user, eliminating the setting of the rectangle.

L Dynamic Panel

Very important axure components, must learn to use the components, dynamic panel display, hidden, multi-state, etc., are very useful. Here is not too much to introduce, detailed introduction please refer to: Small building axure Graphic Tutorial (v) The use of dynamic panels.

L Horizontal Line

is a horizontal line, can be used as a representation of some areas of the page, such as the two different areas to add a line between the lines, to distinguish clearly. The horizontal line can be used by setting the angle rotº in the component properties into a slash.

L Vertical Line

Nothing to say, the same effect as a horizontal line.

L Picture Hot Zone

used when clicking on an area of an image to create an interactive event, the image hot zone is also a rectangle, which can be achieved by setting a rectangle without a border and a background color of 100% transparency.

L text box (single line)

A axure symbol for entering text for features such as login, title, Password box (right mouse button – Edit option – hide text).

L text box (multiple lines)

It is literally known for its functionality, the Axure component for more input into text content, for functions such as replying, commenting, and Weibo posting boxes.

L drop-down list (box)

Axure components that expand multiple options when clicked, are used primarily for category selection or multi-conditional query effects.

L list Box

A multi-option list with scroll bar effect, personally think ugly, not many applications, the application scenario can refer to the Word Custom Quick Access Toolbar to choose the effect of adding items.

L check box

Checkboxes are used for the same category of content that can be used at multiple times, such as the choice of personal interests when registering, and the ability to select multiple messages when deleting a message in bulk.

L radio Button

Multiple options can only be used at one time, such as gender selection. Multiple radio button linkage effects require simultaneous selection of multiple radio buttons-right-click-Edit Options-Specify radio button groups to be implemented. It can be done by setting the OnClick event for each radio button.

L Internal Frame

A axure component that is used to embed other pages in the page, you can set the size and double-click it to specify the page to embed. The framework can cancel the scroll bar with edit options, which are seen in the site background prototype and mobile Internet product prototypes.

L table

Tables are common, and there are few explanations, and each table can set individual events, but Axure does not support merging of cells.

L Menu Portrait

Mainly used for site navigation. Multi-use for site backstage.

L Menu Landscape

Mainly used for site navigation, more for the site front desk.

L-Tree

Mainly used for site navigation. Multi-use for site backstage.

Axure Beginner's Introductory tutorial