Best practices for interoperable prototypes in IOS

"Editor's note" reproduced in this article from Baidu Ued, the author is @yoyicue. Friendship hint, this classmate "hide" very deep.

It is easy to find a variety of iOS component libraries on the Internet to implement controls, so this article does not include how to implement the same interaction with iOS. But solving a puzzle, how to gracefully present prototypes on IOS devices?

Many UX and PM students are still accustomed to using the traditional Axure RP product prototype, the author felt that the Axure RP in the IOS prototype phase still has advantages, such as can be very convenient interactive mode of innovation and detail, do not rigidly adhere to native controls.

First of all roughly in the iOS central presentation has this several requirements:

1 fit IOS in Prototype setup (v6.5)

Mobile/device dialog box in Generate prototype

Tick Include Viewport Tag

Upload Home screen icon

Tick Hide Browser nav (when launched form IOS Home screen)

2 fit IOS in Prototype setup (v6.0)

If you're still using v6.0, you'll need to reinvent your prototype HTML file.

In which you append two lines of code to implement the basics of the app Full-screen and home screen icon support

If you use this code intact, please place icon.png in the prototype HTML sibling directory

3 The prototype of the page name as far as possible in English, to avoid errors in Chinese coding

4 when accessing the prototype, do not access the index.html, but directly access the specific page

We have summed up 2 practical programs to meet most of the needs, advantages and disadvantages of the comparison:

If you only support online viewing, Axure RP v6.5 native Web App prototype scenario. Of course, the v6.0 prototypes we have manually modified the code also support.

Simply say, because it's already set up.

Only need:

1 Safari Open website

2 Select Add to Main screen

3 Click on the main screen software on the desktop

Need help Click here to view the official instructions, meet special circumstances, such as mobile phone can not access the office network, you can upload the prototype to the virtual host or cloud.

Documents in App Way

If you want to use for customer research or private demo, you can use the Documents in APP's program, this model is convenient for users to study and customer interviews when the network environment thousand change.

Buy Atomic Web Browser software, price only $0.99 (RMB 6.00)

As shown in the following illustration, modify the settings of the Atomic Full-screen mode to avoid interference with the prototype.

Compress the prototype into a zip file and upload the zipped document into the Atomic in ITunes.

Unzip extract documents in Atomic and access HTML files on the main page

Enter Full-screen mode

At this point, you can implement a prototype demo on your iOS device (three fingers slide down to exit Full-screen mode)

Hopefully the above two approaches will help students who are bothered by how to implement interactive prototypes on the iOS platform.

Original link: Best practices for interactive prototyping in IOS