Mobile settings dialog in Axure.

 

 

iPhone body containing iPhone App.

 

Features

Learn

Community

Company

Buy

Download

Axure Share

Forum

Manage Licenses

 

VIEWING AN APP PROTOTYPE ON YOUR IPHONE

MOBILE SETTINGS

Browser Settings

Upload your prototype to AxShare by clicking the AxShare button in the toolbar, or Generate > Publish to AxShare in the main menu (F4). If you don't have an account, create a free one by clicking "Create an account" or browse to share.axure.com. Click "Publish" to upload your file. You can also publish your generated prototype to your own web server.

Publishing to AxShare to view your iPhone app.

 

Step 1: Generate to AxShare or Web Server

Next, open the prototype in your browser and get the URL of the starting page without the sitemap. Click on the "Get Links" icon and navigate to the App Home page, or whichever page contains the start of your app design. Copy the URL from the field labeled "without sitemap".

Removing sitemap from generated prototype for iPhone viewing.

 

Step 2: Click

"Show Links & Options"

 

 

 

 

 

 

Options for configuring the iPhone browser are in the Mobile/Device section of the "Publish > Generate HTML Files > Mobile/Device" dialog. The settings seen below are the typical settings for viewing an iPhone app on your phone.

 

The Viewport tag affects the size or scale of the prototype on the device. If your app was designed to a 320px wide you should not need to edit the default viewport tag settings. "Hide browser nav" removes all navigation and address bar (may vary by device). "Prevent vertical page scrolling" keeps your app design from being pulled from the edges of the screen. Finally, "Hide browser nav" removes the browser buttons when the prototype is launched from the home screen.

Open that URL in your iPhone's browser. Emailing it to yourself is an easy way to get the link to your phone.

 

You'll be able to interact with your prototype now, but the browser's navigation is still visible.

Removing sitemap from generated prototype

 

Step 3: Open URL

in Your iPhone Browser

 

 

 

 

 

 

 

 

 

Press the Options button located in the center of the bottom navigation and select "Add to Home Screen".

 

You will be prompted with a preview of the home screen icon and asked to select a name. Click "Add" and now you can launch your app prototype from the home screen which should show the splash screen and launch the browser without the bottom navigation.

Step 4: Add to

Home Screen

 

 

Get a realistic app experience by viewing your iPhone app design directly on your phone. Before you start, set up a free account on AxShare share.axure.com to host your prototypes (or you can use your own web server). The tutorial below will use AxShare to host the prototype for viewing on the iPhone browser.

VIEWING ON YOUR IPHONE OVERVIEW

Removing sitemap from generated prototype

 

 

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

© 2002-2014 Axure Software Solutions, Inc. All rights reserved.

u158_start u158_end u158_line

 

 

 

 

Click the Checkboxes Below to See the Effect on the Browser

The home screen icon is a 114px by 114px PNG image that displays on your iPhone home screen just like a real app. The icon image can be added in the Generate > Prototype > Mobile/Device settings. The tutorial below shows how to to add the icon to your iPhone's home screen. 

 

When designing the icon, keep in mind that transparent areas will be given a black background when viewed on the phone.

Home Screen Icon screenshot.

 

Home Screen Icon

The splash screen is displayed while waiting for the prototype to load when launching the prototype from the home screen icon (just like an app). The splash screen image is a 320px by 480px PNG which can be imported in the Generate > Prototype > Mobile/Device settings.

 

If your splash screen needs to appear in landscape / horizontal view, rotate the image

in your graphics tool before importing.

Splash Screen

Splash screen screenshot.

 

Now your iPhone app design is on your phone's home screen and you're prototyping like it's your job.

You might find that viewing a prototype on the iPhone 5 causes the screen to be cut off at the top and bottom. The fix for this is to clear the viewport field for "width", so that it is blank. We include an iPhone 5 template in our download which includes this setting and the appropriate guides. Happy Prototyping!

VIEWING ON THE IPHONE 5

DOWNLOAD

 

u222_start u222_end u222_line
u224_start u224_end u224_line
u226_start u226_end u226_line
u228_start u228_end u228_line
u230_start u230_end u230_line
u232_start u232_end u232_line

Still need help? Check out the forum or drop us a line at support@axure.com.

THE ROUND UP

IPHONE APP TUTORIAL &

TRAINING ARTICLES

Viewing on your iPhone

u251_start u251_end u251_line

MORE IPHONE APP TUTORIALS & TRAINING ARTICLES ::

 

u263_start u263_end u263_line

 

u266_start u266_end u266_line

 

This zip contains the iPhone App Template and files to complete the iPhone app tutorials