Axure Tutorial: Adaptive Views

Introduction

This article is a section 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.

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.

  1. Edits made to widgets in Base view will be reflected to iPhone 11 Pro and iPad mini;
  2. Edits made to widgets in iPad 11 Pro view will be reflected to iPad mini;
  3. Edits made to widgets in iPad mini view edits will only be reflected in the current view.

Widgets Properties that Can be Inherited, and Widgets Properties that Cannot be Inherited

Some widget properties can be inherited, and some cannot.

  1. Styling
  2. Position
  3. Size
  1. Widget Text
  2. Notes
  3. Interactions/interactive properties
  4. Options in a droplist widget
  5. Rows and columns in a table widget
  6. 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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store