Axure rp9 Introductory Graphic Tutorial - Basic Operations and Introduction (You can get started after reading it, everyone is a product manager)

Since I participated in the work of drawing prototype sketches these days, I was forced to learn Axure, so I sorted out the learning results of these few days and shared them with my classmates who worked hard (forced) like me.

Click here for the free version installation package (to avoid censorship, click here) ¹

Axure Chinese Learning Network: https://www.axure.com.cn/

Effect demonstration address: https://o61ppi.axshare.com/#id=hlrb0g&p=%E6%89%B9%E6%B3%A8

1. Interface Introduction

1. Toolbar: main operation functions.

2. Site map: Similar to the outline interface, it is convenient to clarify the prototype framework and logical relationship.

3. Component library: call the interface of the required components.

4. Canvas: Display the prototype part, which can be understood as a canvas for painting.

5. Component property page: an interface for doing some interactive effects and editing component styles.

Novices may not understand the function of these interfaces. For example, if the process of drawing a prototype is compared to building a house,
1工具栏it is a hammer, a shovel and other tools;
2站点地图it is a drawing, which is convenient to see the entire construction situation;
3元件库it is a brick for placing bricks and tiles. Brick warehouse, components are bricks and tiles, the basic materials used to build a house, you have to go to the brick and tile warehouse (component library) to get bricks and tiles (components); it is the
4画布area where the house is to be built, there is no space and no place for you It is definitely impossible to build a house;
5元件属性页面it is paint, which can paint your bricks and tiles from the original gray to blue, and make the bricks and tiles (components) look better by changing the appearance (style) of the bricks and tiles (components), so that the house you build better looking.

1. Copy, cut and paste fields

It’s easy to understand, the usage is the same as the shortcut keys of win computer, Ctrl X为剪切, Ctrl C为复制, Ctrl V为粘贴, in Axure, you can select an interaction to copy and paste. It’s worth noting that many friends can’t find the format brush of Axure RP 9, which is different from Axure 8 The editor has been looking for a format brush for a long time, and later found that select a component, press the copy button or shortcut key, and then select another component and press Ctrl Alt V to copy the format and public interaction part of the previous component and save it. Pasted on the latter element, this is Axure RP 9's mysterious format brush.

2. Select mode

Students who have used CAD software should easily understand this function. When many boxes are drawn on the interface, it is difficult to accurately select the components we want to select in batches. At this time, switching between different selection modes can quickly select components we want. The first, 一个小虚线框里边装着三个小框的模式是指当我们的鼠标范围选中元件的任意面积，即可选中当前元件; the second 一个小虚线框中间放着一个小方框的模式是指当我们鼠标选取完全覆盖当前元件的所有面积的时候，才能选中元件. The appearance of the icon is still very easy to understand. The box at the back refers to the connection line. Axure can be used to draw flow charts. When drawing flow charts, connection lines are essential.

3. Insert shape

After clicking the Insert button, you can select several tools as shown in the figure. The purpose of these tools can be easily identified from their names. It is worth noting here that when selecting a rectangle, ellipse or line tool, in 绘制的同时按住Shift键，可以绘制正方形、圆形、水平线或垂直线. In Axure RP 9, a shortcut key, , is set 如在英文模式下点击P键，会直接选取到钢笔工具（Pen）. The functions inserted into it are not very commonly used, so I won't explain too much.

4. Handles (editing handles)

This tool looks a bit abstract, but it is actually very simple. 选中元件，选择点，元件四周会出现菱形的小方块儿，拖动方块就可以任意改变元件的形状You can also achieve the same effect by right-clicking on the component and selecting the edit handle.

5. Top and Bottom

Top and Bottom are easy to understand, that is, to place the selected component on the bottom layer or the top layer, and here we only need to remind everyone of the shortcut keys, Ctrl Shift ] 是置顶，Ctrl ] 是上移一层；Ctrl Shift [ 是置底，Ctrl [ 是下移一层.

6. Group and ungroup

Grouping and ungrouping is a convenient way to manage a large number of components or pages. It is used in PS, PR, AE, PPT and other software. Select multiple components and click group to group components. Most of the software in the Windows system 打组的快捷键是Ctrl G，取消组合是Ctrl Shift G.

7. Resize

This operation is relatively tasteless. Under normal circumstances 按住Ctrl键，滑动鼠标滚轮就可以实现放大和缩小屏幕, the difference is that there are buttons under the button Fit All和Fit Selection, which represent the screen size is adjusted to fit all components and fit the selected component. You can experience the effect by yourself.

8. Alignment

Alignment operations are available in many softwares, which is a benefit for obsessive-compulsive patients like me or those who pursue more perfect results. Axure provides 8 alignment methods, namely 左对齐、居中对齐、右对齐、顶部对齐、居中、底部对齐、横向均与分布、垂直均匀分布. It should be noted here that each alignment method uses the same rules, select multiple components, use the first selected component as the reference component, and align the subsequent selected components with the first selected component.

9. Preview, Share

A preview is a preview of a prototype, and there are many options and settings in sharing. Easy preview and publish to HTML

10. Component styles

Selecting different styles has different effects, such as title, text, etc., no detailed introduction

11. Text Settings

Text setting is an essential function for most software, such as adjusting font, size, alignment, etc.

12. Component styles

Component styles include fill color, border color, border size, border linearity and component coordinates.

13. Left panel

The default ones in the left panel are Pages, Outline, Library and Master.

页面Just like the number of PPT sheets, there are several slides and several pages, which is easy to understand.

大纲It is used to display how many components there are in the current page, their names and attributes. In Axure8, the outline is by default in the lower right corner of the page, which belongs to the right panel.

库Refers to the component library, which contains the rectangular box, text box, drop-down list, multi-line text, repeater, dynamic panel, etc. that we use. Just drag the component into the page, even if the component is added to our work panel . At the same time, we can also add components to our library. The component library that comes with Axure can meet most of the needs.

母版It can be understood as a template. When we need to reuse a component component on multiple pages, we can select this component or component group, right-click to add it as a master, so that when we need to reuse it in the future, drag the items in the master Move to the page to bring the component to the new page.

14. Right side panel

The right panel includes interactions, styles, and annotations.

样式It is used to set the component, including the name, size, coordinates, frame, color, shadow, rounded corner and margin of the component, etc., which is very powerful.

交互It is one of the core places in Axure, where we add interaction to components or pages,

注释It's the comment. When we draw the prototype, we write our copy in the comment, so that the programmer or UI can view relevant information.

2. Basic operation

1. Canvas and component library operations

1) Canvas

create canvas

2) Components

Here we directly select a rectangle with the mouse and drag it to the canvas. The editing of the shape, size and position of the rectangle here is basically the same as in the ppt. Press and hold to drag
;

Click on these points around the rectangle to change the shape (make it bigger or smaller);

Press and hold on the four corners of the rectangle to change both the width and the height;

Hold shift and drag the four corners on the side of the rectangle to change the shape of the rectangle without changing the proportion;

Press and hold the small yellow triangle and drag left and right to change the rounded corners of the rectangle

figure 1

figure 2

figure 2

Here are some keyboard shortcuts:

鼠标点击=选择

按住空格+鼠标拖动=拖动页面

鼠标滚轮=放大缩小页面

ctrl+c=复制

ctrl+v=粘贴

ctrl+x=剪切

ctrl+z=撤回

backspace或delet=删除所选目标

鼠标选中拖动=移动目标

shift+鼠标选中拖动=只按一个方向移动目标（防手抖）

ctrl+鼠标选中拖动=复制选中目标

​​​​shift+点击选择=多选

选中目标+↑↓←→=微调元件位置

Double-click the rectangle and we can add text in the middle of the rectangle.

By now we have learned the basic operations of the canvas and component library.

2. Toolbar operation

On the basis of the rectangle, you can make more changes to the rectangle through the toolbar and the component property page

1) Selection mode: intersect selected and include selected

Here you can choose your operation mode. Intersect selection means that the box dragged by the mouse can be selected as long as it touches any part of the component. If it is included in the selection, all parts of the component must be selected before it can be selected. This is based on personal operating habits.

2) connect

Click connect to connect your two components

3) Handle and insert

Click "Insert" to insert shapes and pictures, etc. (similar to inserting in office), click "handle" to make a point on the shape and picture

4) Top and bottom layers

The order of component layers can be understood as the order of layers in ps. Click “顶层”to place the selected object on the top layer of the layer, and click “底层”to place the selected object on the bottom layer of the layer.

5) Ratio

Adjust page zoom size

Here is a small tip. When you zoom in and out and drag the page in a mess, click the "scale" box to select 60% or 100%, and then click the little thing in the upper left corner of the canvas (return to the origin 0 ,0) to reset the canvas

6) Combination

Grouping and ungrouping is a convenient way to manage a large number of components or pages. It is used in PS, PR, AE, PPT and other software. Select multiple components and click group to group components. Most of the software in the Windows system 打组的快捷键是Ctrl G，取消组合是Ctrl Shift G.

7) Arrange

Use multiple selection to select multiple target components, and then the functions of these tools are left alignment, center alignment, right alignment, top alignment, middle alignment, bottom alignment, horizontal equidistant arrangement, vertical equidistant arrangement

For example, center alignment:

8) Style

It's the border padding of fonts and shapes.

9) Position and size

x, y are the coordinates, indicating the position of the selected object on the canvas, w, h are the width and height, indicating the size of the selected object. The

small lock in the middle of the width and height means to lock the aspect ratio, and click to unlock
it. The aspect ratio is locked, and
the small eyes are to choose whether the selected target is visible or invisible

3. Component property interface and site map operation

1) style

Many of this part is repeated with the function bar, which is a supplement to the function bar. For example, the setting of proportion and size style, the setting of font and component style are as follows:

this series of functions are basically the same, and some small functions are added on the basis of the function bar, mainly including text shadow, visibility, and rounded corners Settings and Corner Visibility

Here we mainly introduce the use of visibility, a rectangle, click will appear

This means that the four sides of the rectangle can be selected to be invisible by clicking on one or several sides of the rectangle. For example, I choose the visibility of the rectangle as follows:

2) Notes

You can use the description to add a page overview, which means to paste a small note on your page to remind people who look at your prototype what to pay attention to

Selecting a component can also add a description to the component:

In this way, a small yellow dot will appear next to the prototype during preview. When showing it to others, click on this small yellow dot, and the text of the description will pop up, as follows:

3) Interaction and sitemap

Putting the two together, the links commonly used in interactive effects are links to different pages of the site map.

Let’s do this first, click on the site map 新增文件夹, name it “ 展示系统”, then add a subpage under the folder, name the subpage “ ”, right click on the page 展示界面“ ”, select , and reduce the page to two Level-level directory, this page is automatically recognized as a subdirectory of the previous folder or page, so the " " page here becomes a sub-page of the " " folder after being downgraded :展示界面“移动”—“降级”展示界面展示系统

Follow the above method to add the "Home" folder and "Home" page to the site map, and the "Home" page is a subpage of the "Home" folder.
Drag and drop components such as rectangles, first-level titles, text boxes, and main buttons in the component library to draw a simple login interface and a homepage: we

now use interaction to link these two pages together. We hope that when we click "Show When the "Login" button of "Page" is clicked, the page jumps to the "Homepage Interface".

At this time, we click the 'login' button, select the " " function on the component property page 交互, click 新建交互—单击时—打开链接, and the following interface pops up at this time:

When there are many pages for operation, you can design any button to jump to any page. Here we choose to click the "Login" button to make the page jump to the "Home" page, so we choose " Homepage” page, click OK, and you will find a small lightning bolt on your “Login” button, which indicates that this component has interactive effects:

At this time we can look at our interaction effect

Click "Preview" in the upper right corner, and a new tab page will pop up.

We can click the "Login" button in the tab page and find that the page will automatically jump to the "Home" page. In this way, you have completed an interactive effect with Axure

---

1. Explanation of footnote
   Direct use of green version without operation: 0 points to download
   axure rp9 installation tutorial directly, axurerp9 installation steps: free version installation package, please click here: https://blog.csdn.net/a18870525682/article/details/115768018 ↩︎