Axure and iPhone application prototype creation (2)

This article is a self-translated axure tutorial. For more information ~~~

In the previous article, the blogger introduced how to use the iPhone application page template inAxure, a prototype design toolCreate an iPhone prototype (View Details ). In this article, the blogger will show you how to view your app prototype on the iPhone. Before viewing the prototype, you need to set your mobile phone.

Mobile settings

Browser settings

Select generate> prototype> mobile/device to configure the iPhone browser. The settings shown below are typical settings for browsing the iPhone application on your mobile phone.

Windows labels affect the size or size of the original model on mobile devices. If your program is designed to be 320 pixels wide, you do not have to edit the default window label settings. When you enter a website link, "hide the address bar" will remove the ribbon link address on the browser; "Prevent Vertical Page scrolling" will prevent your application from pulling from the edge of the screen. Finally, when the prototype starts from the main screen, "Hide browser navigation" removes the browser button.

Click the check box below to view the effect on the browser.

Home screen icon

The main screen icon is a PNG Image of 114px × 114px, which is displayed on your iPhone home screen as a real application. This icon can be set through "generate> prototype> mobile/device settings. The following tutorial demonstrates how to add an icon to your iPhone home screen.

Note: When you design a logo, remember that the transparent area will be a black background when browsing on your mobile phone.

Startup Screen

When the prototype is started from the main screen icon, the startup screen is displayed when you are waiting to load the prototype. The startup image is a 320px x pxpng image, which can be imported through "generate> prototype> mobile/device settings.

If your boot screen needs to be presented as a landscape or horizontal view, flip the image in the graphic tool before importing it.

View application prototype on iPhone

Step 1: generate to axshare or network server

Click the axshare button in the toolbar to upload your prototype to axshare, or click Generate> Publish to axshare in the main menu (Press F4 ". If you do not have an axshare account, click "create account" or enter pai.axure.com to create a free account. Click "publish" to upload your RP file. You can also publish it to your web server.

Step 2: click "Show links and options"

Next, open your prototype in the browser and obtain the start page url without a website map, click "Show links and options" and navigate to the app homepage or any page that contains the beginning of your application. Copy the URL.

Step 3: Open the URL in the iPhone Browser

Open the URL in your iPhone browser and send it to yourself by email. This is a good way to get the link.

Now you can interact with your prototype, but the browser navigation is still visible.

Step 4: add to the home screen

Click "options" in the middle of the bottom navigation bar and select "add to home screen ".

The system will prompt you to preview the home screen icon and ask you to select a name. Click "add" to start your prototype from the main screen. The launch screen is displayed and the browser is started without the bottom navigation.

Tip:

When you view the prototype on the iPhone 5, you may encounter a situation where the screen is truncated at the top and bottom. The adjustment method is to clear the "width" in the window area to make it blank.