Axure-interactive prototypes-axure learning for prototyping tools-section 2.3

Bring your wireframes to life with interactive prototypes

Experience and share your design with the interaction prototype. In this section, learn how to customize, generate, and share an interactive prototype.
Video: Download MP4 format

Interactive prototypes Overview

The interaction prototype is a simple document that provides a powerful way to obtain user feedback, identify and determine requirements. After you design, annotate, and add interactions to your wireframe, you can create interactions in the basic prototype of the browser-no need to write a lineCode.
The axure RP prototype consists of HTML, JavaScript, CSS, and images. You can view the prototype in the most popular browsers. For example, Firefox, ie, Safari, or chrome. You do not need to install a parser, player or axure RP to watch the prototype. This makes it easier to share the prototype. Your client only needs axure RP to edit the design prototype.
The generated code does not mean that it can be used directly. However, we provide you with available APIs so that you can access axure RP data for programming. If you want to create custom content, you can learn "learn more about the API"

Configure and generate prototypes

There are several ways to customize the prototype. For example, select the included page and add a logo or title. Once you have configured your prototype, you only need to click a button to generate HTML and JavaScript.

* Configure prototypes

Click "generate-> prototypes" in the main menu or click "prototypes" in the editing toolbar to open the "generate prototype" dialog box.

• • General : select the target folder generated by the prototype and the default browser. The prototype has many files, so it is best to create a folder for saving the prototype. By default, the prototype is generated in /My Documents/My axure RP prototypes "(on PC) or "~ /Documents/My axure RP prototypes "(on Mac) folder.
  • click "use default" to reset the default destination storage path.
  • pages : select the page that contains the generated prototype. By default, all pages are included.
  • Notes : The select and sort pages show the order of remarks in the prototype.
  • annotation : select and sort annotation in the prototype display area. Of course, there are alternative note icons with widget labels.
  • interactions : select the case description that is always displayed, or the case description that is displayed when multiple CSE exist.
  • logo : import an image as a prototype.
  • mobile/device : select the inserted mobile View window label. The view label specifies the size and scale options that the device can use for prototype display.
  • distribution (for PC only): option settings for generating a CHM version of a simple file description for the prototype.
  • advanced : Set the text displayed in the image, the font size, and whether to use the sketch effect.
  • discuss (Beta): sets whether authorization can be discussed on axshare (pai.axure.com. This feature is only available in Beta versions.

* Generate prototypes

After the configuration is complete, click "generate" to create the original file in the target path and open the prototype in a special browser.
To find the file in which you generated the source file, open start.html. (For example, "My Documents/My axire RP prototypes/{file name }")
Tip: After the prototype is generated for the first time, you can select "generate-> regenerate current page" in the main menu to regenerate a single page. Refresh the browser to update the prototype page. This function saves time by editing pages in large files.

Using prototypes 

The prototype consists of the following two parts:

Sitemap, page notes, discuss (Left): There are three tabs on the left panel. Sitemap can directly open the page in main frame (the main frame on the right) by clicking the Page name. On the page notes tab, you can view the remarks added to the page. The Discuss tab can be used to add and comment on topics.
You can click the gray box in the upper right corner to hide the panel on the left. Of course, you can also re-call the panel on the gray icon in the upper left corner. You can also directly navigate to the HTML file of a page, so that you do not need to display all the files.

Main Frame (Right): Interactive wireframe ). The interaction behavior in the line chart is based on the behavior defined in your axure Rp. A note icon (note icon) appears near a widget with annotations ). Click the remarks icon to display a comment dialog box.

Tip: if you are using an Internet Explorer, you will see a warning about whether axtivex content can be displayed. On the main menu, choose tools> Internet Options. On the Advanced tab, scroll down to the Security Section, click "Allow active content to run files on my computer (Allow Active Content in my computer)" to turn off the warning.

Share and distribute prototypes

There are several ways to share and publish the prototype... and you don't need your readers to install axure RP and reading software.

* Send a zip

Right-click the folder containing the prototype and choose "send to-> compressed (zipped) folder (sent to-> compressed (zipped) file)" (for PC) from the menu ), "compress [Folder name]" (for Mac), compress the file into a zip file. After creating a zip file, you can email it to others.
When others receive your files, they can decompress the files and release the prototype to their computers. Right-click the ZIP file and select "extrct all files" or drag the prototype file from the ZIP file to the desktop to decompress the prototype.
Open "start.html", the file will be opened from the web browser, you can view the prototype. Remember, you cannot open the prototype directly in the ZIP file. You must decompress the prototype first.

* Publish to a shared server or Web Server

First generate a prototype locally and then move the file to the server. Of course, you can also generate a prototype directly on the server. To convert files into services, you can use FTP software, such as flash fxp, to upload the prototype folder to the server. If you are not sure whether your server is set up, your IT friends may be able to help you.
After the upload is complete, you can publish your address or connect to your prototype. If others have server permissions, they can access the prototype through a browser.

* Publish to axshare

Axshare is a website shared by our prototype, and it allows you to manage 10 dynamic prototypes on it. You need to pay for more services. You can upload an RP file, and axshare will provide you with a connection that can access the prototype. You can share your prototype with others. You can also set a secret for the prototype file you submitted to prevent access by others. These are free of charge.
You also found that in your prototype, there is a discuss tab near the site map sitemap (you can close the display ). You can view the axshare user's discussion above.
In http://share.axure.com/you may find more content.

* Send a CHM File (PC only)

CHM is an HTML Help file provided by Microsoft. The CHM player is installed on all Windows machines. Like zipe files, CHM allows you to publish a single file and the recipient can view the file without installing any software. It is advantageous that the recipient does not need to decompress the software to decompress the file.
When a prototype file is generated (F5), the "generate prototype" dialog box has a "distribution" option to select whether to generate a CHM File.
Button ). After the installation is complete, you need to install the “hhc.exe file. In "Distribute", click "locate hhc.exe" to open your hhc.exe file.

The round up

You have finally finished reading. You can generate and share your interaction prototype.

Still need help? Go to forum or send email to support@axure.com

Address: http://www.axure.com/interactive-prototypesAxure official address: http://www.axure.com/PS: translation is for a more thorough understanding Article And share. It is generally in English. Please speak it up.The copyright is owned by the company at the original address.