table of Contents
1. Basic operation (Axure RP9)
(1) Icon component library (Icons)
(2) Process component library (Flow)
(3) Default component library (Default)
Useful connection
- Axure RP 9 software official website download address: https://www.axure.com/download
- Axure RP 9 Chinese document download address: http://chanpinban.com/downloads/
- AI Research Club https://ai.yanxishe.com/
- The function of getting the prototype page size http://chanpinban.com/get_dp/
- Alibaba Vector Icon Library http://iconfont.cn/
1. Basic operation (Axure RP9)
Before drawing the wireframe sketch, let's first understand some basic operations.
(1) Canvas operation
Open the canvas : In the page module, double-click any page to open the corresponding canvas, and the corresponding label appears above the canvas area.
Close the canvas : Click the close button on the label, or click the right mouse button on the canvas label, and complete the operation by selecting the corresponding close option in the menu.
Canvas sorting : Sort by dragging the canvas tags with the mouse.
Restore the original position : Click the crosshair icon in the upper left corner of the canvas or the shortcut key <Ctrl+9> to return the canvas to its original position.
Move the canvas : use the scroll bar to move the canvas; or, press and hold the <Space> key, the mouse pointer in the canvas will change to the shape of a hand, and you can drag the canvas to move it; you can also move the canvas in the vertical direction through the mouse wheel , Hold down the <Shift> key and move the canvas horizontally with the mouse wheel.
Zoom Canvas : Zoom the canvas by changing the display ratio in the toolbar, or press and hold the <Ctrl> key and use the mouse wheel to change the canvas display ratio.
(Two) component operation
Use : If you want to use a component, we only need to drag it from the component library into the canvas and place it.
Alignment : By default, two rectangular components are placed side by side, and the middle border is the width of the two borders. If you want to maintain the width of one border, you need to set the [Component Alignment] in [Preferences] (see section Chapter One, Section Four).
Rotation : The rotation of the component can be realized by pulling any boundary point of the component while pressing the <Ctrl> key. After rotating, you can use the right-click menu [Transform Shape]-[Reset Text to 0°]
Rounded corners : The rounded corners of the rectangle element can be edited, and the size of the rounded corners can be changed by dragging the small triangle icon on the upper left of the rectangle with the mouse pointer.
Change shape : All shape components can be changed to other shapes by clicking the right button of the mouse and pressing [Select Shape] in the menu.
Changing the size of : dragging the boundary points can be arbitrarily changed by the mouse pointer element
size element ; may also hold the <Shift> hold, while dragging the mouse pointer to change the size of a geometric element boundary point element.
Copy components : Use the right-click menu [Copy] and [Paste], or use the general shortcut keys <Ctrl+C> and <Ctrl+V> to complete the copy and paste operation between canvases or software; in the same canvas, You can use the <Ctrl+D> key to copy; or, press and hold the <Ctrl> key, drag the component to a new position and release it to complete the copy and place operation.
Edit text : Some components can add text content. When the single-key shortcut function is not enabled, you can directly input to replace the current text content; when the single-key shortcut function is enabled, you need to double-click the component or click the enter key on the component to enter the text editing state.
Second, the component library
The software comes with three official component libraries, namely the default component library (Default), the flow component library (Flow) and the icon component library (Icons).
(1) Icon component library (Icons)
So, how can the icons here be used in Axure?
Move the mouse pointer into the icon, and three buttons will appear, which are add to library, favorites and download icons.
Click to download, the edit icon color and download links in different formats will appear.
We don't need to edit the color here, just click the [SVG Download] button to download the icon.
The downloaded SVG file can be dragged into the canvas of AxureRP9; or, first drag the image component from the default component library and double-click to import the SVG file.
Then, click the right mouse button on the icon, and select [Convert SVG Image to Shape] in the [Transform Image] option of the context menu.
The icon at this time becomes the same shape icon as in the Icons component library, you can freely change the color and shape editing
(2) Process component library (Flow)
The process component library contains some components for drawing flowcharts. We only need to drag these elements into the canvas and add connecting lines to draw the flowchart.
1. Connection operation
Click the "Connect" icon in the toolbar to enter the connection mode.
General components will have four "×" connection points. We press the left mouse button and drag on the connection point of the start component, and release it to the connection point of the end component to complete the connection operation.
2. Connection style
The segment color, type, line width and arrow style of the connecting line can be set in the toolbar.
In addition, there are also connection style settings in the style module.
3. The meaning of components
There are some components in the flowchart component library, and the meaning can be understood through the name.
(3) Default component library (Default)
This component library is the most commonly used component library and contains 4 categories. They are: basic element, form element, menu form element and mark element.
1. Basic components
The basic components include commonly used shapes, pictures, line segments, and text components. There are also some special-purpose components, including hot zones, inline frames, dynamic panels, and repeaters.
(1) Shape
The shape component contains multiple preset styles, rectangles, circles, placeholders and buttons, which can be converted to each other by changing the styles. We can also turn the rectangle into a circle or a placeholder by clicking the right mouse button on the component and using the [Select Shape] in the menu.
In addition, the shape element can also be converted into a picture element through [Convert to Picture] in the context menu [Transform Shape] option. In Axure RP 9, we can also add background images to shapes. Shape components are generally used for backgrounds, borders, buttons, dividing lines, etc. in the page.
(2) Picture
The picture element can be dragged into the canvas to represent a picture, or you can double-click the element to import local picture materials.
If you need to add pictures in batches, you can add them to the canvas of Axure RP 9 by selecting multiple picture material files in the local disk and dragging them in.
[Prompt] You can add text to the picture, you need to right click on the component and select [Edit Text] from the menu to enter the text editing state.
(3) Text
Text elements include text tags, text paragraphs, first-level headings, second-level headings, and third-level headings, which are used to represent some text content on the page.
In fact, the text element is also a shape element, adding a border to the text element becomes a rectangular element.
(4) Hot area
The hot zone component is a transparent component, and text cannot be edited. Its transparent feature allows us to cover it on other components to achieve some interactive requirements, and it can also be used for page scrolling positioning.
(5) Inline framework
The inline frame is used to embed content into the page, including: multimedia files (mp3, mp4, avi, pdf, etc.) that are supported by the external page browser pointed to by the URL
of other pages in the project .
(6) Dynamic panel
The dynamic panel is a container element that allows adding multiple states (layers).
The dynamic panel has only one state (layer) by default, and multiple states (layers) can be added as required.
Moreover, one or more components (including other dynamic panels) can be placed in each state (layer).
(7) Repeater
A repeater is a component that simulates a list, such as a product list, mailing list, user list, and tag list. In addition, the repeater can simulate the operation of adding, deleting, updating, sorting and filtering list items by adding interaction
2. Form components
Forms need to be filled out by users, so form components are all components used to obtain user input data.
(1) Text box
Used to enter a line of text content. A more common usage scenario is the input box of the user name and password in the user login function.
(2) Text field
A text field, also called a multi-line text box, is used to input a large number of text paragraphs.
(3) Drop-down list
For single selection of multiple options, there will often be multiple drop-down
lists combined selection.
(4) List box
The selection box that directly presents the options can support single or multiple selection.
Note: List box components and text field components look the same in the canvas, just like women's ladies. Although they look like women, they have different functions. The type of component will be displayed in the interactive function panel, pay attention to distinguish
(5) Radio button
Used for single selection of multiple options, sometimes you can use a drop-down list instead.
(6) Check box
Used for the selection of one or more options, and can be selected and unselected.
3. Menu table components
Menu and table components are components for drawing wireframes, which are convenient and easy to use. However, due to limited style editing, it is rarely used in high-fidelity prototypes. Many operations of these elements in the canvas are basically completed through the right-click menu, such as: adding, deleting, and moving rows, columns, nodes, and menu items.
4. Marking components
Snapshot components can set the reference page by double-clicking and present the image of the referenced page. It combines wiring and other markup components to be very suitable for project, page and module annotation
description. Marking components other than snapshot components are shape components with preset styles. [Prompt] The detailed introduction and examples of marking components are provided in the product prototype application part
.