Using Axure RP Prototype design Practice 01, using overview

First recognize the default interface layout of the Axure RP Pro 7.0 software. The top is the toolbar area, the top left is the site map area (sitemap), the middle of the left is the part area (Widgets), the left side of the template area (Masters), the middle of the page area, the middle is the page Setup area, the upper right is the part property area, Below the right is the dynamic panel area.

Click "Publish", "Preview" or simply press the shortcut key F5 or press the preview button in the toolbar to preview the current item in the browser.

Click "Publish", "Preview Options ..." or press ctrl+f5 at the same time to set the preview.

Above, you can choose which browser to use, preview whether you need to bring a sitemap.

Clicking "Publish" also includes some settings:

Above, "more generators and configurations" is used to customize the generator. "Generate HTML Files" is used to save all HTML pages and settings. "Regenerate current page to HTML" is used to save the existing HTML page and the settings.

If you want to modify the node name in the site map on the left, right-click the node and click "Rename" to rename the node.

To create a new page, click the "Add page" button at the top left of the Sitemap area.

To add a folder, click the "Add Folder" button at the top left of the Sitemap area.

To adjust the position of the page node in the Site map area, select the page node, and then click the up or down arrow at the top left.

Delete a node in the Site map area, select it first, and then click the Delete button above.

Click the Search button at the top right of the site map area to search for nodes.

Double-click the node of the site map area to begin editing the page.

The parts under Widgets can be dragged to the page area.

You can also search for parts by selecting a different part from the Select Library drop-down box in the upper-left corner.

Text Field: Input Box
HTML button: Buttons
Image: Place a picture, double-click to select a picture source, and you can cut the imported picture into several pictures that match the layout of the page
Droplist: drop-down box
Rectangle: Rectangular part, can fill up the background, as a text link, can also be deformed into different shapes
Placeholder: When you need to reserve an area on the page but don't want to know exactly what to put
Table: Tables
Text area: Multiline text box
List Box: Multi Marquee
CheckBox: check box
Radio Button: Radio Box
Button Shape: Make tab-like buttons, hover over buttons to change background color, etc.
Inline Frame:iframe, showing another page in one page
Dynamic Panel: Can be thought of as a super part with multiple states, and then select a state through the event. For example, create a dynamic panel widget with 12 states that corresponds to 12 months, and if a status matches the current month, a background color is displayed. The dynamic panel displays the first state by default. Can be understood as a component that contains other parts
Classic menu-vertical: Creating a multi-level vertical Menu
Classic menu-horizontal: Create a multi-level horizontal menu
Tree: Table of Contents
Parts under Flow grouping to create a flowchart

......

You can also load or download third-party or official parts.

Each part has some common attributes, including: name, coordinate, size, font, font size, font style, font alignment, font color, border color, border weight, border style, fill color, front, post, lock part, and so on.

Masters to put some reusable modules, such as: Navigation, website head, site bottom, website logo, frequently recurring modules.

The page area is the area where the HTML is to be generated. The scale of the page is per pixel, and the upper-left corner is the original coordinates of the page. Right page blank area pop-up menu has "grid and Guides" This, this is about grids and guides, click "Grid Settings", you can set the spacing between grids, default is 10 pixels, you can set the grid style. You can set a guide (Guides) to create a reference line by tapping and dragging within the horizontal or middle ordinate area. The reference line here is for the current page.

How do I create a global reference floss? Right-click on the page, Grid and Guides,create Guides, see the following:

Global guides are created based on columns. Under the preset attribute includes: Width 960 pixels divided into 12 columns, width 960 pixels divided into 16 columns, width 1200 pixels divided into 12 columns, width 1200 pixels divided into 15 columns, columns group is used to set columns, # of COLUMSN represents total columns, column Width represents the column widths, gutter width represents the distance between columns, margin left white; Rows group is used to set rows, set similar columns groups. Suppose you create a 3 column, a column width of 100, a column spacing of 20, and left and right sides white 10, as follows:

The effect is as follows:

So, the width of the entire layout =10*2+100*3+20*2=360 pixels

In the page Setup area, "page Notes" is used to enter some textual information, such as information describing the requirements; "Page Interactions" to set up some pages-level events; "Page Style" to format pages such as: background picture, background color, alignment, fonts, spacing, and so on.

In the widget Interactions and notes panel for the widget, Interations is used to set up part events, such as focus events, such as loss of focus events, and notes to add some note descriptions.

In the widget Properties and style panel for the widget, set the various styles for the part.

When you drag the "Dynamic Panel" part to the page, a set of states appears in the Widget Manager panel, each state is like a layer in Photoshop, allowing one layer to appear and other layers to hide depending on the interaction needs. You can also control the visibility of a state by a small blue icon after each state.

Reference: Axure RP High-Fidelity Web page prototyping from Lu Hao, Yangchang

Using Axure RP Prototype design Practice 01, using overview