Adaptive Views · Axure Course · Axure Promotion · Axure Tutorial · Elementary · Learn axure · Jul 02, 2022

Axure Tutorial: Adaptive Views

by WELLJOE

Introduction

This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

Adaptive Views

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

Styling
Position
Size

Widgets Properties that Cannot be Inherited

Widget Text
Notes
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 image below through a dropdown list to control the display of the view.