Learn axure prototype design from scratch (introductory article)

If sketch is the most beautiful and concise design software, then Axure is the most powerful prototyping software. Axure not only can make static visual manuscript, page, but also can add interactive action, is one of the best software for prototyping design. Although the learning curve of axure is steep, we can quickly realize the user experience in our mind after mastering it.

I self-taught axure have more than half a year of time. At the beginning of contact with Axure, visited countless forums, Axure's website, but also browse a lot of Daniel recorded axure video lessons. These tutorials and materials provide a complete overview of what this software can do, how the software interfaces, how to use parts, how to create interactions, and so on. However, in the process of self-study, how to master the order of learning to achieve the best learning effect this aspect I go a lot of detours.

Writing this article is to summarize the lessons of the journey, and to share with you how to quickly master the use of the Axure software, and how to implement their own ideas through the software, so as to build their own use of the software method. Hope to be of help to everyone.

In the introductory article, we mainly explain the Axure interface layout and the use of the part library.

Quick Start Axure interface

• Toolbars: Similar to Office software, you can modify the font size, background padding, the width of the graphic, and the location (X\y axis) in the workspace.

• Workspace: Draw the operating area of the product prototype, all the components used are dragged directly into the inside.

• Page navigation: You can use the mouse to adjust the page order and the relationship between pages, double-click can be renamed.

• Part library: Also called a component library or a library of components, all of the software's own components and the loaded library of components are here, where you can create, load, delete the Axure library of the operation, you can also display all components or a component library components according to demand. You can click on the magnifying glass icon to search for the parts you need.

• Master: Here you can create elements that re-come back to each page, so you don't have to repeat them when you're making them. Usually used for the production of page headers, menu bars, etc.

• Page Interaction: Here you can set the style of the current page, add comments about the page, and set the event onpageload triggered when the page loads.

• Part interaction: Here you can set the label, style, add a comment about the symbol, and set the event that is triggered when the page loads. Small icons for lightning patterns represent interactive events.

Composition of the part library

To understand the use of part libraries is the basis of axure, let's comb the common parts in axure:

Axure Parts Library

Easy-to-use parts using error points

With regard to the use of part libraries, novice users are particularly prone to errors with the following points:

• Picture: When dragging a picture into the canvas, if you select Compress picture size, the GIF file will become a static picture form.
• Photo Hot zone: The image hot zone can be used to create a click area on a custom button. For example, in an area where there are both picture parts and text parts, we just need to overlay a picture hot zone on these parts and add an event, without adding events on each part. Conversely, if you want to add more than one interaction to a picture, you can also cover some areas of the image with a hot zone.
• Dynamic Panel scroll bar: Use the scroll bar to add scrollable content to your dynamic panel, select in the Dynamic Panel Properties panel, scroll bar drop-down menu and select the display of the scroll bar, in order for the scroll bar to display properly, the content of the dynamic panel state must be larger than the boundary contour of the dynamic panel. And you cannot tick resize to fit the content.
• Internal frame: You can add axure built-in preview images to the internal frame's Properties options box, such as videos, maps, or custom preview images. Note: The preview image is displayed in the design area, but not in the generated prototype.
• List selection Box: When you read or set multiple options at the same time in an interactive event, the list selection box widget only allows you to read or set an option, even if you check the multi-select feature.
• Submit button: The Submit button cannot set the interactive style, such as: check/hover/mouse down. The fill color, border color, and most other style formatting for the submit button are disabled. Instead, it will use the built-in style after the prototype is generated in the browser. If you want to customize your button style, use the shape button.
• Menu Widget: Cannot click to expand Sub-menu. The menu widget is the default mouse hover display submenu.

In particular, it is important to make sure that you have a habit of naming your parts when you create them, because you need to specify the name of the part either to create an interactive event or to make a variable call. The naming method I'm using now is "page name + part features".

Download Axure now and play the parts yourself! After we know the parts library and interface, we can draw a wireframe with axure.

Original: HTTP://WWW.JIANSHU.COM/P/9EA3D25513BF

Learn axure prototype design from scratch (introductory article)