How to Create a responsive prototype with axure RP7

Since the application of responsive technologies began a few years ago, it has become a headache for many people to create responsive prototypes. Responsive design uses a very elegant way to handle applications that use HTML and CSS encoding for multiple device types, however, prototype tools provided to UX professionals do not have the same quality of functionality that can be tested or verified. However, with the release of the adaptive view feature in the latest axure RP 7, this situation began to change.

Adaptive view of axure RP 7

The adaptive view of axure RP 7 makes it possible to create a responsive prototype without coding. You can use this function to create a multi-view page in axure RP, which can be displayed on devices with a specified screen size.

This is undoubtedly the gospel of UX professionals and frees them from HTML. When you have to think about technical issues during the design process, you can easily ignore design thinking. In some cases, the technical feasibility and limitations are often considered as a necessary part of the design process when most projects are very early. However, in the initial prototype stage, you can freely consider how interfaces, information flows, and interactions can best solve user problems, which may be more helpful to designers, these exercises can even expose technical limitations you have not considered.

How an adaptive View works

Adaptive view is based on the "Basic View" created first in axure, which can expand other views, but is not required. In the mobile first design, your basic view should be the portrait screen interface of the smartphone. From this point on, you can create a view to adapt to a wider screen, for example, the screen, tablet, and desktop of a smartphone. I prefer this method when using adaptive views.

You can also use the desktop-first approach, from the wide screen design and then from top to bottom to handheld devices. The advantage of this is that you know whether all elements of the largest screen need to be removed or re-designed in a gradually smaller screen. The method to use depends on your project and the mode of use of known or expected devices.

Move first

We use a virtual bicycle shopping website as an example and adopt a mobile-first approach. We will design the homepage views of landscape and landscape screens on the mobile phone and panel respectively.

The first step is to create an axure document with only one blank page and name it "bike shop". In the mobile phone view, we take the iPhone 5 screen as the standard. In fact, it can be applied to any device, regardless of the screen size or operating system. I also like to add page guides to mark page boundaries and add margins. The guides on the screen are marked at the X axis at 320 pixels and the Y axis at 568 pixels.

We also add guides on the X axis at 10 pixels and 310 pixels to mark the margin, so that the page content will not stay close to the left and right sides of the screen. For IOS Retina display, the screen width used in this article is automatically scaled to a higher resolution. The smaller size makes the axure RP file smaller and easier to adjust during prototyping.

Create a single page, and use the page guides to mark the screen edge and the margins on both sides of the page.

Now we are ready to design the basic view page. The first thing we need to do is create a simple header and enter the name of the bicycle shop on the colored bar. After the header is created, right-click and select "convert to master" from the menu ". Once you name and save the header, it will be added to the master panel at the bottom of the Left bar of the workspace. In axure RP, the master can be designed in one place and reused to other pages in the prototype.

In the "convert to master" dialog box, you can name the master and set the actions of the master when you drag and drop the master on the page.

After adding more interface elements to the page, you have designed the basic page of the portrait screen of your mobile phone. Now we will use this function to create different views.

The basic view of our project has been completed.

Create a new view

Click the button on the left of the axure RP page label to open the "Adaptive View" dialog box to create a new view (marked with a red border below ).

Click the button to open the adaptive view dialog box.

Adaptive view is very simple:

1. Click the green "+" icon in the upper-left corner of the dialog box (as shown below) to add a new view.

2. Name the view-in this case, it is "phone landscape (mobile phone landscape )".

3. Select the display condition of the new view from the two options: "greater than or equal to" or "less than or equal to" a fixed width.

4. Enter the value of the screen width to generate a view.

Set the first sub-view.

After that, the view named "phone landscape (mobile phone landscape)" will trigger display when the screen is greater than or equal to 321 pixels. Because we use the iPhone 5 as the carrier of our mobile design, this view will appear when people tilt their mobile phones to the horizontal. Otherwise, the basic view is displayed (even if the actual width of the iPhone Retina screen is 640 pixels, the basic view is still displayed vertically ). The newly added view is also displayed on the tablet and desktop, unless a specific view is added.

By default, any new view inherits the previous content-in this case, the basic view is inherited. When we add more views to a page, we can inherit any other view we want to start.

The following screen shows our two views, basic and 321. Axure RP automatically sets the view name based on the width you specified during creation. 321 the label is blue, indicating the current editing status. The purple guides on the right represent the cut point at the X axis of 321 pixels.

 

The content and layout of the new view are the same as those of the basic view, but the design changes accordingly.

Inheritance

The concept of inheritance is the key to understanding how to effectively use adaptive views. Here are some key concepts to be aware:

• A New View is a complete copy of the parent, so that we do not need to re-create the same component in multiple views.
• If we want to change the text of the primary title of the basic view, this change will be updated in any direct or indirect Sub-screen at the same time.
• Inheritance only goes from the upper-level view to the lower-level view, but cannot be reversed. Therefore, the changes made in the subview are not passed back to the upper-level view.
• The component in the adaptive view inherits the position, size, and style of the component in the upper-level view. If we increase the font size in the subview, the upper view will not be affected. However, if we change the base view, the font size of the primary title is reduced, and the subview is not affected because the new text of the subview is overwritten by the previous changes.

Before you adjust the horizontal screen design, you need to set a new page guides to mark the screen edge. The guides of the horizontal screen are at 568 pixels on the X axis and 320 pixels on the Y axis.

Adaptive master

We will update the head master to start the design of the mobile phone landscape screen. In axure RP 7, the master and page are also adaptive and will automatically inherit the page cut points of the basic view.

As you can see below, we have added an Auxiliary Line and expanded the length of the header to 568 pixels.

Masters in different views inherit the width of the basic page.

Now we can update the design of the mobile phone landscape view. In the following section, we move a set of standard list lists located at the bottom of the page in the portrait View to the right of the page main chart. The title Font size is larger, and the text below it is also extended to the same width as the screen, more page content will appear on the screen (depending on whether the page is full screen browsing, or use chrome or the status bar of the iPhone ).

This page has been redesigned to make better use of the phone's horizontal screen.

Flat View

Now the two-Direction View on the mobile phone has been completed. Let's start designing the tablet view. We will use the parameters of the iPad, but review it. This technology applies to any screen size and operating system. The method for creating a tablet view is the same as that for a mobile phone horizontal screen view.

We will design the screen from the portrait of the panel, because it is a screen of the next width. We set this view to appear when the screen is over 569 pixels, which limits the view width of the mobile phone landscape to between 321 pixels and 568 pixels. As you can see below, we can choose to make the tablet view continue the mobile phone landscape view. Based on the Inheritance Mechanism, any changes in the basic view or the mobile phone landscape view will be synchronized to the flat view.

Create a dialog box for setting the portrait screen.

In addition, just like the mobile phone landscape view, the flat portrait view completely copies the content of the superior view. In the following section, I added page guides to the X axis, 768 pixels, and Y axis, 1024 pixels. This is a non-Retina screen iPad portrait size. The page label is labeled "569", indicating the size cut point of this view.

The initial content of the flat portrait view is exactly the same as that of the upper-level view.

In a larger area, we can completely change the layers and add new content elements.

You can add more content to the portrait screen view of the flat panel.

The last view we created is the horizontal panel view. Because this view will appear when the screen is over 769 pixels, it will be displayed on the desktop or notebook, unless other views are added. We will inherit this view from the portrait view of the flat panel, including the content added for this device.

This view will be applied on the horizontal panel and desktop, unless a new view is added.

In the final view, we have more space on the right side of the screen for design.

In the horizontal panel view, we can simply add elements or completely rethink the design based on the vertical screen, which depends on the needs of the project and the existing content.

After that, the project has different views in both the mobile phone and tablet status. If you have an iPhone or iPad, you can open your browser, navigate to our sample prototype (created by axshare), and rotate your device, to view different views designed for each device.

Limitations

Adaptive view has some limitations. First, the code generated through axure RP cannot be used for initial development, unless you use the template or framework of the generated website for portable HTML and CSS.

Due to this limitation, the adaptive view cannot be used to verify the front-end encoding scheme. But this is not the purpose of the axure RP or UX prototype design process, so it does not have so many restrictions, just pay attention to it.

Another limitation is that axure RP's team collaboration on shared projects will be affected. Because all views in this project are based on one page, when someone edits a page in a shared project, other designers cannot edit any view. This is different from the earlier versions of axure RP. The prototype of the mobile terminal and desktop can be created on a separate page. That is to say, a designer can design the version on the desktop, the other version can also be designed on a smartphone. This is only when different people design their mobile phones and desktops, rather than being executed by a single person.

Summary

If you are building a prototype to demonstrate or test the availability of the website to be accessed on a mobile phone or tablet, you will expect this prototype to be responsive. In the past, in order to generate such a prototype, we had to use HTML and CSS to control the display of different cut points.

Now, the adaptive view of axure RP 7 makes it easier for non-coding designers to create and test responsive designs. With this new feature, a user experience designer can create a multi-device prototype within several hours. To go further in an environment designed for multiple devices, axure RP's adaptive view is a powerful tool you deserve.

How to Create a responsive prototype with axure RP7