IOS development: Best practices for Interactive Prototype

IOS development: Best practices for Interactive Prototype

Many UX And PM users are still accustomed to using the traditional Axure RP to create product prototypes. The author thinks that Axure RP still has advantages in the iOS prototype phase, for example, it can facilitate innovation and details of the interactive mode, native controls are not restricted.

First, there are several requirements for the original model presentation in iOS:

Full Screen is required

Online or offline operation prototype based on scenarios

If it is imported into the App, use the native method of iTunes

No jailbreak required

1. Previous preparations

1) Adapt to iOS (v6.5) in prototype settings)

Mobile/device dialog box in Generate prototype

Select Include Viewport Tag

Upload Home screen icon

Check Hide browser nav (when launched form iOS home screen)

2) Adapt to iOS (v6.0) in prototype settings)

If you are still using v6.0, You can manually transform the HTML file of the prototype.

Append two lines of code to implement full screen and Home screen icon support for the basic app.

If you still use this code, place icon.png in the html directory of the prototype.

3) The prototype Page name should be in English as much as possible to avoid Chinese encoding errors.

In 4), you do not need to configure index.html for the original type, but directly access the specific page.

In our actual work, we have summarized two practical solutions to meet most of the requirements. Advantages and Disadvantages:

Web App Method

If you only support online viewing, you can use the Axure RP v6.5 native Web App prototype solution. Of course, we also support the v6.0 prototype that has manually modified the code.

To put it simply, it is set.

You only need:

1) Open a website in Safari

2) Select Add to Main Screen

3) Click the software on the home screen on the desktop.

Click here to view official instructions. In special cases, for example, if your mobile phone cannot access the office network, you can upload the prototype to a VM or cloud.

Statement in App

If you want to use it for customer research or private demonstration, you can use the Documents in App solution, which facilitates the user to study the network environment when interviewing with the customer.

Buy Atomic Web Browser software for $0.99 (RMB 6.00)

As shown in, modify the full screen mode of Atomic to avoid interference with the prototype.

Compress the prototype into a zip file, and upload the zip file to the Atomic file in iTunes.

Unzip the document in Atomic and access the html file on the home page.

Enter full screen mode

Now, you can implement a prototype demonstration on the iOS device (three fingers slide down to exit full screen mode)

I hope the above two methods will be helpful to those who are troubled by how to implement an Interactive Prototype on the iOS platform.