Axure Tutorial: Introducing Axure RP Flow Diagram
1. Draw an sturcture diagram
In the planning of every website, it is necessary to draw a tree-like website architecture, and the architecture diagram can present the page level in a visual way. The website structure is defined in the Pages panel of Axure RP, and it can be converted into a tree structure diagram with one click. Open a blank page, right-click on the top-level page (index or home) in the Pages panel, and select "Generate Flow Diagram", a dialog box will appear, asking if you want to generate standard or right-Hanging diagram.
Next, Axure RP will draw the selected site structure into a tree structure on the page, and the webpage nodes in the tree structure diagram will automatically link to the corresponding pages.
The text / node color of the diagram output by Axure RP can be adjusted through the toolbar above. If the tree structure diagram is too large, you can also right click the branch page, select Generate Flow Diagram, and select the output option to hang on the right to gradually output the structure of each branch in turn, and then combine it into a complete tree structure diagram.
2. Flow chart
2.1 Flow chart
Flowcharts can be used to express a variety of processes, including use cases, business processes, and web page processes. In Axure RP, flowcharts are often used to illustrate the features or processes that can be achieved on the designed page. However, Axure RP is not a professional drawing tool like Visio. Axure RP only provides relatively simple features. Therefore, when you need to draw a more professional and standardized flowchart, you should not use Axure RP. After all, it is only used for auxiliary instructions.
Right-click on a page in the pages panel and select the Diagram Type—Flow, which can mark the page as a flow chart pattern, but this is not a necessary action to create a flow chart, and this action is not related to drawing a flow chart , just to identify the page where the flowchart or wireframe is placed.
2.2 Flowchart Components
Select Flow from library tab. You can find various flow chart components that can represent different flow steps. If you can't find a suitable shape, you can also use image instead. Generally, the graphs of different shapes in the flow chart represent specific meanings, but Axure RP does not restrict the use of these graphs. Generally speaking, the best rule is to understand them.
2.3 Draw a flow chart
Flowchart components can also be directly dragged from the component selection panel, and then edit styles and properties through the toolbar or shortcut menu. If you want to change the shape of the flow, you can right-click and select the item in the Change Shape submenus .
Connectors: The main difference between flowchart components and wireframe components is that flowchart components have connection points to which connectors can be attached. If you want to add a connecting line, first press the connecting line mode on the toolbar, then press the left mouse button and drag to draw a connecting line.
If you want to connect two flowchart components, press and hold the left mouse button on the connection point on one component, drag the connection line to the connection point on the other component and release the mouse, you can add a connection line; you can also attach the established connection line to the connection point of another flowchart component by dragging the connection point. The connecting line can also apply the line end (eg: arrow) and line style (eg: dashed line), just select the connecting line to be set first, and then use the line style and arrow style buttons on the toolbar.
2.4 Reference page
The flow component can be associated with any specified page. Once the reference web page is specified, the flow chart component will display the name of the web page, and on the prototype, a hyperlink will be automatically established between the flow chart component and the page. From the pages panel, drag and drop any webpage into the main canvas, and a flow chart component with this page as the reference page will also be created.
The reference page on a flow component can be edited or cleared by right-clicking on the component and selecting Reference Page.
2.5 Output flow chart
Flowcharts drawn in Axure RP can be output as images or web pages.
Export as image: Select File > Export Page X to Image, you can convert flow chart into an image separately. If you want to put the flowchart into a Powerpoint or Word file, you can directly select the entire Axure RP flowchart and paste it into the Powerpoint or Word file by copy/paste.
Output to prototype: The method of outputting a flow chart to a prototype is the same as outputting other web pages to a prototype. Press the tool menu of the main feature menu at the top of Axure RP and select Generate Prototype.
If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment