Adding Interactions to Widgets
Axure Tutorial: Action List - Axure Interactive Template
Introduction
Because most people have not systematically studied the interactions of Axure, and the information on the official website is too general, it often takes a lot of time to search in the design, and there is no complete interaction template about Axure RP.
Therefore, I organized all the basic interactions in Axure into a template. Novice can quickly master the interaction in Axure and lay a solid foundation by learning the template; Skilled people can also quickly query if they forget an interaction when drawing a prototype.
Preview the completed prototype for this tutorial
Let's quickly introduce all interactions and usage scenarios in Axure RP through text paragraph. It is divided into four parts: link, component, repeater and others, which is consistent with the interactive structure in Axure software.
1. Link actions
1.1 Open link
1.1.1 Current Page
· Link to a page of the current project - select a page in the prototype and open in Current Window.
· Link to external URL - enter the URL address, including the network address（ https://www.google.com ）And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.
· Reload current page - refresh the current page, which is suitable for data refresh.
· Back to previous page - common interaction, which is generally used when the sub page returns to the main page.
1.1.2 New Window/Tab
· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.
· Link to external URL - enter the URL address, including the network address（ https://www.google.com ）And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.
1.1.3 Popup Window
The difference between this interaction and the previous one is that this interaction will open a page in the form of a pop-up window. We can see the contents of two pages at the same time. The basic properties of the pop-up window (size, position) can be set. The common usage is to select organizations, employees and other page elements. It is not applicable to the drop-down list. Of course, it is also applicable to the jump of external advertisements and links.
· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.
· Link to external URL - enter the URL address, including the network address（ https://www.google.com ）And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.
1.1.4 Parent Window
The parent window corresponds to the source window of the popup window, that is, the page of the original window can be set in the pop-up window. This interaction is generally used together with Close Window. For example, if you click the advertisement in the popup window, you can first set the original page to jump to the product page, and then close the pop-up window.
· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.
· Link to external URL - enter the URL address, including the network address（ https://www.google.com ）And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.
1.2 Close Window
This is used to close the current window, but this interaction is rarely used because the browser is usually closed directly.
1.3 Open Link in Frame
1.3.1 Inline Framework
This is also a necessary action for each project. Generally, the project prototype will have a menu. Click the menu button to open a page in the inline frame.
· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.
· Link to external URL - enter the URL address, including the network address（ https://www.google.com ）And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.
1.3.1 Parent Framework
Parent Frame is the page containing an inline frame (this must be used from a page loaded in an inline frame). This interaction is rarely used in practice.
1.4 Scroll to Widget(Anchor link)
This interaction enables the page to scroll to the specified widget, which is common in long pages.
2. Widget Actions
2.1 Show/Hide
2.1.1 Show
This action is very common and is mainly used for content selection and notice of new panel. The Show action can add animation or select the Show motion effect.
Light Box Effect. After the light box effect is shown, if the mouse clicks other contents, the contents will be hidden, which is applicable to notice.
Pop up effect. After shown, if the mouse leaves the area, the content will be hidden. It is often used in the top menu or dropdown list
Push widgets. After shown, push the widgets on the right or below, which is suitable for showing contents according to different options.
2.1.2 Hide
Hide corresponds show. It is mainly used to hide after selection, notice, etc. Hide actions can also be animated. You can also pull/push widgets.
2.1.3 Toggle
Toggle is a combination of Show and Hide. If a widget is hidden, it can be shown. If a widget is shown, it can be hidden. It is often used in menus, cards, dropdown lists, etc.
2.2 Set Panel State
The dynamic panel is like a slide. You can only see one page at a time. Setting the panel state is equivalent to which page of the slide is shown. You can also set whether to start the animation and stop the animation, and whether to push or pull the widgets. There are many applications, such as image rotation, album, etc.
· Set to the specified state - you can use this action to set to the specified state, which can be set when there are few states.
· Previous - state back
· State forward - state forward
· Repeater Time - set the time of automatic state changing and whether to Wrap from last to first.
· Stop Repeating - Stop state changing
· Value- you can use functions to set the dynamic panel to the specified value. Using this action can reduce a lot of work when there are many states.
2.3 Set Text
The most common way to set text is to set the text of widget equals the text of text field, or set the style of rich text; In addition, some functions will be used, such as time, date, angle and so on.
· Set text as inputed value - this interaction is often used to save a value = inputed value.
· Set the text to rich text - change the capitalization, font, color and other styles of the text.
· Set the text to UTC time - this is what will be used at the top or bottom of the window.
· Set text as date - get the system date, which is often used to record the operation date after operation.
· Set text to time - get the system time, which is often used to record the maintenance time after maintenance.
· Set the number of decimal places reserved - common interaction in calculation, such as calculating percentage, etc.
· Set the text to a random number - randomly set a tree between 0-1. This is the basic feature.
2.4 Set Image
· Set the image as the repeater value - commonly used for the event when each item of the repeater is loaded, and set the icon as the image saved in the repeater
· Set the image as an external Image - it is applicable to directly set the image by entering the URL.
2.5 Set Selected/Checked
This interaction is often used for tabs, menus, radio groups.
· Selected - when selected, the selected style can be applied.
· Unselected
· Toggle - you can toggle the selected and unselected state, which is common in double selections, or whether the terms have been read.
· Set selection group - select one widget in the selection group, and other widget will be automatically unselected.
2.6 Set Selected List Option
This interaction is rarely used. First, the Droplist of the Axure is not easy to use and has no search feature. Generally speaking, the easy-to-use dropdown list is made with repeaters; The second is you can use the default option. Generally, you don't need to use this action list to control the selected option. In only one case, when the Droplist is in the repeater, each default selected item is different, you can use this event to set the selected item.
2.7 Enable/Disable
It is generally used for data editing. Some information cannot be modified or the person has no edition permission.
· Disable - disable a, and disable styles can also be set.
· Enable - enables a component
2.8 Move
It is generally used for games or sliding verification.
· Move - move widget to a specified position. You can animate the movement, absolute position and relative position. Absolute position refers to the coordinate to which the component moves; Relative position refers to how far you move.
· Drag - drag widgets with the mouse, you can add boundaries.
2.9 Rotation
It is generally used for game or image rotating verification.
· Direction of rotation - clockwise or counterclockwise.
· Rotation angle - 360 ° is one circle.
· Anchor point - to the center of rotation, generally select the center. If it is a pendulum type, select the top.
· Anchor offset - the distance from the center point.
· Animate -You can set the animation type and time.
2.10 Set Size
Using this interaction also requires the selection of anchor points and animation, which is generally used to zoom in/out to view products, images, etc.
· Set fixed size - sets the size of the widgets to a fixed value
· Enlarging - the Enlarged element is generally used with a function, for example, to enlarge the height of the target by 10%, and the function should be [[Target.height * 1.1]]
· Reduce - reduce the size, which is also used with the function. For example, reduce the height of the target by 10%, and the function should be [[Target.height * 0.9]]
2.11 Bring to Front/Back
These two actions are rarely used, because the show action can be directly set bring to top. This interaction may be required when multiple dynamic panels are fixed at the top level.
· To Front - sets the widget to the top.
· To Back - sets the widget to the bottom.
2.12 Set Opacity
This action is also rarely used because the opacity can be set when setting the widget color. This event is generally used to dynamically set opacity, such as drawing app, etc.
2.13 Focus
This interaction is generally applicable to returning the focus to the text field after error, which is convenient for customers to use. For example, after entering the phone number, click the submit button. When the system judges that the phone number format is wrong, the focus will return to the mobile phone number text field.
Get focus lets you choose whether to select the text of the component.
2.14 Expand/Collapse Tree Node
This action is aimed at the tree widget in Axure, but it is rarely used. Because the tree widget can be expanded or collapsed when clicked, this action is not needed. Secondly, the default tree widget of Axure is not easy to use, and there is no feature of adding, deleting, modifying and searching.
3. Repeater
Like Excel, repeaters can store table information (text, images, pages) and achieve the effect of dynamic addition, deletion, edition and search. Therefore, repeater actions are the most important action in high-fidelity prototype.
3.1 Add Sort
· Numeric - you can switch between ascending and descending sorting by a column of numbers in the repeater table.
· Alphabetical - you can switch between ascending and descending sorting by a column of text in the repeater table.
· Alphabetical(case sensitive) - you can switch between ascending and descending sorting by a column of text in the repeater table.
· Date - you can switch between ascending and descending sorting by a column date in the repeater table.
· Alphanumerical - you can switch between ascending and descending sorting by a column of text and numbers in the repeater table.
3.2 Remove Sort
You can remove a single sort or all sorts from the repeater.
3.3 Add Filter
· Classification filtering - classification filtering can be performed according to the user's selection, and the most common is commodity classification.
· Precise search - you can enter text to quickly search the data row corresponding to the repeater.
· Fuzzy search - you can input text and quickly search the data row containing the input text in the repeater list
3.4 Add Filter
You can remove a single filter or all filters from the repeater.
3.5 Set Current Page
If there are a lot of data in the repeater, it is generally shown in pages. This interaction is to set the content of the page shown by the repeater. It can be set to show the next page, the previous page, the last page, the first page or a specific page.
3.6 Set items per Page
If you need to change the items per page during interaction, you can use this setting.
3.7 Add Rows
You can add a new row to the repeater.
3.8 Mark rows
· Mark - it can be regarded as one or more rows of repeater are selected, and the contents of the marked row can be updated or unseleted later.
· Unmark - it can be regarded as unselecting a row.
3.9 Edit Row Data
· Edit specified row - Deletes the column data of the specified row.
· Edit marked row - you can mark the row to be edited first, and then edit them in batch.
· Rule - use the rule to edit the specified row.
3.10 Delete Rows
· Deletes specified row - delete the specified row.
· Deletes marked row - you can mark the rows first, then delete them.
· Rule - use the rule to delete the specified row.
4. Other
4.1 Set Variable Value
Global variables are generally used for high-fidelity prototype, which can be simply regard as the value of data transferred between pages. For example, after successfully logging in with Tom's account, all pages need to show Tom's information. At this time, you need to use global variables to pass this parameter.
4.2 Set Adaptive View
If a view with multiple resolutions is set, the action can select the view. This action is basically unnecessary, because the time of the demand phase is urgent, and there is little time to view several resolutions. In addition, it can also be controlled by browser zooming.
4.3 Wait
This action is generally used for interactions that need to be delayed. For example, when page loaded wait a few seconds before entering the corresponding page; Another example is that the notice information is automatically hidden after a period of time. This action can separate the time of the other two actions.
4.4 Other
This action can set the text shown in the pop-up window.
5.3 Fire Event
Fire Event is also a very common operation in high-fidelity prototypes. It can trigger other widget's event. Especially if there are multiple trigger buttons for the event of a widget, you don't need to write the actions again.
The above is the introduction of all the basic interaction actions in Axure. It is suggested that you can save them and search them quickly when you need them in the future.
0 comments