Axure Tutorial: Adaptive Views
Introduction This article is a section of course Axure Full Course: Tutorial, Tips and Templates. Adaptive Views Now…
This article is a section of course Axure Full Course: Tutorial, Tips and Templates.
Now most websites use responsive view to adapt to different devices. It allows you to display different elements, sizes, and styles of elements in a page according to different screen sizes.
Create New Adaptive Views
There are two ways to create responsive views, one is to click Add Adaptive Views on the Style Panel on the right; the other is to click Add Adaptive Views on the Style Toolbar at the top.
Create New Adaptive View Set in Style Pane
Create New Adaptive View Set in Style Toolbar
Manage responsive views set
On the Responsive Views panel, you can create or delete responsive views.
Click the Add button to create a new view, which will automatically inherit the previous view. Click the Duplicate button to duplicate a new view, the new view is exactly the same as the original view; click the Delete button to delete the selected view.
Presets: System preset views
Name: the name of the view
Width: the width of the view
Height: the height of the view
Inherit from: which view to inherit from. Inherit the view of the previous level by default.
Select, Edit, and Remove an Adaptive View
Click Add Adaptive Views on the style panel on the right, and then select the created view set to apply it to the current page.
Click Edit Views or Remove Views to edit the current adaptive view set or remove the current adaptive view set.
Adaptive View Inheritance
Responsive views are inherited through an inheritance chain, with the view at the lower level inheriting the widgets and widgets properties of the upper levels.
As shown in the image below, the iPhone 11 Pro view inherits the Base view, and the iPad mini inherits the iPhone 11 pro and Base views.
So the inheritance chain relationship is as follows: Base > iPhone 11 Pro > iPad mini.
- Edits made to widgets in Base view will be reflected to iPhone 11 Pro and iPad mini;
- Edits made to widgets in iPad 11 Pro view will be reflected to iPad mini;
- Edits made to widgets in iPad mini view edits will only be reflected in the current view.
Switch and Edit the Contents of the Responsive View
Once you’ve created a responsive view set, you can click the tabs above the canvas to switch between different views.
The blue tab represents the current view, as shown in the image below, the widgets created in the Base, will be reflected in the lower level views.
Click the iPhone 11 Pro tab to switch to iPhone 11 Pro view, and changes made to widgets in this view will only be reflected in the iPad mini view. Unless we check Affect All Views, the changes made to widgets in this view will be reflected in all views.
Tips: If other views will be affected, the tab will turn light blue.
Widgets Properties that Can be Inherited, and Widgets Properties that Cannot be Inherited
Some widget properties can be inherited, and some cannot.
Widgets Properties that Can be Inherited
Widgets Properties that Cannot be Inherited
- Widget Text
- Interactions/interactive properties
- Options in a droplist widget
- Rows and columns in a table widget
- Nodes in a tree widget
Change the visibility of widgets by using Place in View and Unplace from View
If you want to change the display of some controls so that they do not follow the inheritance chain, you can right click the widget to select Unplace from View.
then this widget will disappear from this view and subordinate views. Then select Place in View in the subordinate view, the subordinate view will show the current widget, this view will not.
Right click widget to select Unplace from View
Red text indicates unplaced from view
Widgets that have been selected to Uplace from View will be represented by red text in the outline pane.
Place In view
Showcase Responsive Views on Prototype.
Click the responsive view’s tab in the top toolbar on the generated prototype to display the corresponding view. The first default option will display the corresponding view according to the screen size, and the other options will directly display the selected view.
Change the view through interaction
You can also control the display of the view through interaction, as shown in the mage below through a dropdown list to control the display of the view.
That’s all for today’s lesson. Next lesson we will learn how to add interactions to the page.
If you have any questions and suggestions, please leave a message.
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.