Axure RP's Widgets toolbar is the tool we use to draw a wireframe wireframe, Flow diagram, or a part that makes up our final output chart. Like when we were kids to play with the building blocks, these tools is to assemble a block of small parts, what constitutes? How was the combination? Rely entirely on personal experience and wisdom. Therefore, be familiar with each tool's usage and use, can draw the graph in the mind freely.
Related article: Axure RP Interactive design software use Tutorial: Masters
Widgets toolbar, the next two types of tools:
Wireframe wireframe tool: Basically corresponds to a variety of graphics on a Web page. For the expression of interactive behavior in the page, Axure RP specifically adds several special tools such as image map region, dynamic Panel, menu (vertical/horizontal) Horizontal/Vertical menu.
Flow tool: The basic graphical framework required by the flowchart.
Let's talk about the wireframe wireframe tool first. Learning this part of the tool, if you have the HTML base beforehand, or the Web page elements have a more adequate understanding, it is easy to start. I'll explain this in sequence according to the code in the picture.
- 1, image Image: To wireframe insert a picture station, can also be placed directly into the real picture.
- 2, text panel text: insert text. The equivalent of inserting a < text > label. is text with no links. But you can also bring a link, in the interactions we will mention.
- 3, Hyperlink hyperlink: Insert the text with the link. It is equivalent to inserting a section of text with a < a > label. But in fact, there is no essential difference between axure and ordinary text except the form.
The reason for distinguishing between two types of text is to visually understand the link text and plain text in visual representations, which is also important for designers to understand, so it is recommended that you try to differentiate the link text from the normal text as much as possible when drawing.
- 4, Rectangle rectangle: Insert a rectangle. You can edit it in a graphical style. This graphic is used to express the boundary of the plate.
- 5, Placeholder placeholder: Inserts a placeholder. Placeholders are often used to express certain special areas of the page, such as complex situations, no modifications in the system upgrades, or insignificant areas, and so on. The author needs to combine the explanatory text to carry on the corresponding detailed expression.
- 6, button buttons: Insert a button, the equivalent of < button > label. Buttons are generally used in combination with forms, and of course they can also be used as an enhanced hint link.
- 7, teble table: Insert a table. Axure table is not very convenient to use, add rows, columns, modify rows, column width is inconvenient, is a failure. Expect to make better progress in the next version. As with standardized web pages, the use of tables should be clear when painting wireframe, and is used as a data listing display, not as a page layout control.
- 8, Text field text input box: combined with the form. Typically used as a form for submitting data. such as the search box, user login box, registration information fill out the box. Used as a field commit or single row data submission.
- 9, Text area text areas: combined with the form. Generally used as a large section of text editing, submission. such as article editing, message and other sections.
- 10, Droplist drop-down list box: combined with the form. Typically used as a drop-down menu or drop-down list option, such as in a search, you can locate the scope of the search category by using a Drop-down list box. Also some people use it to do friendship links, you can select directly through the Drop-down page jump.
- 11, ListBox list selection box: Combined with the form. With the text box list option, you usually choose from a list of multiple items, such as when you fill out a resume, select the industry you are interested in, and you will provide a listing selection box. However, the list selection box will be used in conjunction with a button.
- 12. CheckBox multiple options: Multiple selections are often used in forms to provide multiple selections. For example, in some cases registration requires the user to choose a hobby, will provide more than 10 options, because the options can be done in parallel, so the use of multiple options.
- 13, Raido button single choice: Select the appropriate option in a group of choices, the option relationship is either. For example, in the filling of sex when providing male and female choice, the user is not male or female, only one item. Of course, do not rule out more than provide a double choice, this is the third choice, but also is either an or a single choice.
- 14, 15, horizontal line horizontal, vertical lines vertical: To split the different plate areas in the page. Because there can only be vertical and horizontal lines in a Web page, the two lines are used separately for the system to generate HTML files for presentation.
- 16, Button shape shape buttons: the equivalent of graphic buttons, more for navigation, or multiple frame switch layout toggle button. Corner editing is available.
- 17, image Map region mapping area: It is used in the Web page to create an invisible area, is generally part of the picture area, equivalent to the hot area of the picture, so as to add a description and interaction. In a real-world web page, there is often a big picture where a region is a trigger button, and the image map area can be used to illustrate the function and interactive content of the area.
- 18. Inline Frame frame: Similar to HTML < iframe > object. Used to create a page frame in a page that embeds a different page in each frame. We often see the background system is divided into the left and right two columns, is generally used in the frame, the left load is the navigation page, the right-hand side is the Load Management page.
Axure's disadvantage is that the percentage is not supported for the moment, so the IFRAME is measured in pixels, and the actual page effect is still a gap.
- 19, dynamic Panel version: is axure in order to express the content of multiple frames of a tool. Its icon is a very vivid illustration of its structure. It is a dynamic region superimposed by a different state, showing one state by default, and when a user triggers a button, picture, or Drop-down list, you can switch to a different state by setting the corresponding dynamic version. Different state relationships, similar to the Photoshop layer, are similar to CSS attribute layer in HTML.
We can edit the state by right-clicking the dynamic panel and then editing it by opening the corresponding state, which is edited in the same way as the edit page.
- 20, 21, menu (vertical/horizontal) Horizontal/Vertical menu: For the production of horizontal or vertical menu, you can add floating submenu, add the method is very simple, is to select the menu items to add, Add submenu.
