Use Axure RP prototype design practice 01, usage overview, axurerp

Use Axure RP prototype design practice 01, usage overview, axurerp

 

First, understand the default Interface layout of Axure RP Pro 7.0. The top is the toolbar area, the top left is the site map area (sitemap), the middle left is the component area (Widgets), and the bottom left is the template area (Masters ), the page area is at the top of the center, the page setting area is at the bottom of the middle, the part property area is at the top of the right, and the dynamic panel area is at the bottom of the right.

 

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

 

Click "Publish", "Preview Options...", or press ctrl + F5 to set the Preview.

 

 

You can select the browser to use and check whether Sitemap is required for preview.

 

Clicking "Publish" also includes some settings:

 

As mentioned above, "More Generators and Configurations" are built with custom Generators. "Generate HTML Files" is used to save all html pages and settings. "Regenerate Current Page to HTML" is used to save the Current html Page and settings.

 

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

 

On the create Page, click "Add Page" in the upper-left corner of the website map area.

 

Add a Folder and click "Add Folder" in the upper-left corner of the website map area.

 

Adjust the relationship between page nodes in the map area of the website. Select the page node and click the up or down arrow in the upper left corner.

 

Delete a node in the map area of a website. Select the node and click "delete" in the Upper Area.

 

Click "Search" in the upper-right corner of the website map area to search for nodes.

 

Double-click the node in the map area of the website to edit the page.

 

Widgets under Widgets can be dragged to the page area.

 

You can Select different parts from the Select Library drop-down box in the upper left corner and search for parts.

 

● Text Field: input box
● HTML Button: Button
● Image: place the Image. Double-click the Image source to cut the imported Image into several images that match the page layout.
● Droplist: drop-down box
● Rectangle: a rectangular part that can be filled with a background and used as a text link. It can also be deformed into different shapes.
● Placeholder: It is used when you need to reserve a region on the page but haven't figured out what to put.
● Table: Table
● Text Area: multi-line Text box
● List Box: multiple selection boxes
● Checkbox: check box
● Radio Button: single worker
● Button Shape: Make a Button like a tab, hover the mouse over the Button that changes the background color, and so on.
● Inline Frame: iframe. Another page is displayed on one page.
● Dynamic Panel: it can be seen as a super component with multiple states, and then select a certain State through the event. For example, you can create a dynamic Panel widget with 12 States, corresponding to 12 months respectively. If a status matches the current month, a background color is displayed. The first status is displayed on the dynamic panel by default. It can be understood as a part containing other parts.
● Classic Menu-Vertical: Creates a multi-level Vertical Menu.
● Classic Menu-Horizontal: Creates a multi-level Horizontal Menu
● Tree: Tree directory
● Components in the Flow group are used to create flowcharts.

......

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

 

Each component has some common attributes, including: name, coordinates, size, Font, font size, Font Style, font alignment, font color, border color, Border width, border style, fill color, placed before, placed after, locked parts, and so on.

 

There are some Reusable Modules under Masters, such as navigation, website header, website bottom, website logo, and frequently repeated modules.

 

The page area is the area where html is to be generated. The page scale is in pixels, and the upper left corner is the original coordinate of the page. Right-click the "Grid and Guides" option in the pop-up menu in the blank area of the page. This is about the Grid and Reference Line. Click "Grid Settings" to set the spacing between grids, the default value is 10 pixels. You can set a grid style. You can set the reference line (Guides), click and drag in the horizontal or vertical coordinate area to create a reference line. The reference line here is for the current page.

How to create a global reference line? Right-click Grid and Guides, and Create Guides. The following information is displayed:

 

 

The global reference line is created based on the column. The Preset attribute includes: the width of 960 pixels is divided into 12 Columns, the width of 960 pixels is divided into 16 Columns, the width of 1200 pixels is divided into 12 Columns, and the width of 1200 pixels is divided into 15 Columns. The Columns group is used to set Columns, # of Columsn indicates the total number of Columns, Column Width indicates the Column Width, Gutter Width indicates the distance between Columns, and left and right Margin is left white; Rows group is used to set Rows and set Columns group similar to Columns group. If you create a three-column table with a column width of 100 and a column spacing of 20 and the left and right sides are left blank with 10, you can set it as follows:

 

 

The effect is as follows:

 

 

Therefore, the layout width is 10*2 + 100*3 + 20*2 = 360 pixels.

 

In the Page settings area, "Page Notes" is used to enter text information, such as the information to describe the requirement. "Page Interactions" is used to set Page-level events; set the Page format in "Page Style", such as: background image, background color, alignment, Font, spacing, and so on.

 

In the Widget Interactions and Notes Panel of the component, Interations is used to set part events, such as focus events, such as loss of focus events, and Notes is used to add remarks.

 

On the Widget Properties and Style Panel of the component, set the Style of the component.

 

When you drag the "Dynamic Panel" component to the page, a set of States appears in the Widget Manager Panel. Each State is like a layer in Photoshop. You can view the status according to interaction requirements, hide other layers. You can also control the visibility of the status through the blue icons after each status.

 

Reference materials: Axure RP High Fidelity web prototype production, from Lu haoyue, Yang changtao