Top Banner

Click here to load reader

9
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Axure quickstart

311 Fourth Ave., Suite 414 San Diego, CA 92101 • www.axure.com • [email protected] • t| 800.895.0810 • f| 415.651.9527

Axure RP ProLearn by Doing: Quick Start

Introduction

In less than thirty minutes, this tutorial will guide you through creating a wireframe and generating an interactive prototype and specification using Axure RP. You will learn:

• How to use widgets• How to use masters• How to generate prototypes and specifications• How to create dynamic interfaces with dynamic panels• How to show conditional flow

To complete this tutorial, you will need Axure RP (www.axure.com/downloads.aspx) and the sample file QuickStart.rp (www.axure.com/Samples/QuickStart.rp).

To begin, start Axure RP and open the QuickStart.rp file using File -> Open. The Home page will be open in the Wireframe Pane.

Page 1

Above is a picture of the Axure RP environment with labels that will be used in this tutorial.

© 2002-2008 Axure Software Solutions, Inc

Page 2: Axure quickstart

1. Designing Wireframes

Page 2

ADDING PAGE NOTES

Page level notes can be added to each page in the Page Notes pane.

When you open the file, the Home page will open in the Wireframe pane. In the Page Notes pane, add the description, “This is the Home page where users can search for flights or login to their account.”

EDITING WIDGETS

Double clicking a widget allows you to edit the most common property on a widget.

Right-clicking on a widget will display a context menu with options to edit widget specific properties.

Double-click the Button Shape and type “Login” to edit the text.

Right-click on the Button Shape and select Edit Button Shape -> Rectangle.

ADDING WIDGETS

Design your wireframe by dragging and dropping widgets from the Widgets pane.

Find the Button Shape widget in the Widgets pane. Drag and drop a Button Shape widget to the Account Login section.

© 2002-2008 Axure Software Solutions, Inc

Page 3: Axure quickstart

Page 3

ADDING ANNOTATIONS

Annotations can be added to widgets by selecting a widget and entering values in the Annotations & Interactions pane. Annotation fields can be customized by clicking the Customize link.

Select the Button Shape widget and label it “Login Button” in the Label field. Add the description, “This button takes the user to the My Account page.” in the Description field.

ADDING BASIC LINKS

Basic links can be added using the Quick Link shortcut in the Interactions pane.

Select the Login Button and click Quick Link in the Interactions pane. Then, select the My Account page and click OK. Notice in the Interactions pane that a case has been added to the OnClick event.

FORMATTING WIDGETS

Format widget styles like font size, border color, fill color, and font color using the toolbars above the wireframe pane.

Format the Button Shape to have bold text, a gray fill, and a thicker white border using these buttons in the toolbar:

© 2002-2008 Axure Software Solutions, Inc

Page 4: Axure quickstart

Page 4

MORE ACTIONS

In addition to basic links, there are many more Actions available. One or more Actions can be added to each Case on an Event (OnClick). For example, you can make the click of a button open a new page in the current window and open a popup window at the same time.

Double-click on Case 1 under the OnClick event to see the other available Actions. Click Done.

2. Using Masters

ADDING MASTERS

Masters are collections of widgets that can be reused throughout your design. Some commonly created masters include headers, footers, and navigation. A change to a master is reflected everywhere the master is used.

Add a master by clicking on the Add Master button in the toolbar of the masters pane. Right-click on the master and select Rename, and name it “Footer”. Double-click on the Footer master to open it for design.

EDITING MASTERS

Masters are designed in the same way as pages.

Add a Horizontal Line widget and a Text Panel widget. Select the Text Panel widget in the wireframe and enter the text, “Copyright, 2008” .

© 2002-2008 Axure Software Solutions, Inc

Page 5: Axure quickstart

Page 5

NESTING MASTERS

Masters can be placed on other pages or masters by dragging and dropping from the Masters pane.

Add another master and name it “Template”. Double-click on Template to open it for design. Drag Header from the Masters pane and place it at the top of the Template master. Then, drag Footer and place it at the bottom of the Template master.

MASTER BEHAVIORS

By default, masters are set to Normal behavior, which allows the master to be placed anywhere on the wireframe. Masters set to Place in Background behavior will snap into the position they were created when added to a page. Masters set to Custom Widget behavior will lose their relationship to the master when added to a page and can be edited like other widgets.

Right-click on Template in the Masters pane and select Behavior -> Place in Background.

ADDING MASTERS TO PAGES

To add a master to a page, drag and drop the master from the Masters pane to the wireframe pane.

Add the Template master to the Home page by dragging it from the Masters pane and dropping it onto the Wireframe pane.

Open the My Account page by double-clicking it in the Sitemap pane, and add the Template master.

© 2002-2008 Axure Software Solutions, Inc

Page 6: Axure quickstart

Page 6

3. Generating Prototypes

MAKING GLOBAL CHANGES

A change made to a master is reflected everywhere that master is used.

Open the Header master and change the image by double-clicking and importing one from your computer, or replace the image widget with the Logo master. Then, open the Home and My Account pages and notice that the change has been applied.

GENERATING PROTOTYPES

When generating prototypes, there are a number of options including the destination folder and which page notes and annotations to include.

Press the F5 key or select Generate -> Prototype in the main menu. Click on the Generate button to generate the prototype. When asked if you would like to create the destination folder, click Yes.

VIEWING PROTOTYPES

Axure RP Prototypes are HTML, javascript, and image files, and can be viewed in popular web browsers.

The prototype will launch in your web browser*. You can navigate the pages using the Sitemap pane on the left. Page notes display in the bottom frame. Click on the yellow note icon next to the Login button to view the annotations. Click the Login button to link to the My Account page.* If you are using Internet Explorer and receive an Active X warning, click

the Allow button. To disable the ActiveX warning, go to Tools->Internet Options. In the Advanced tab, scroll down to the Security section and check the box next to “Allow active content to run files on My Computer”.

© 2002-2008 Axure Software Solutions, Inc

Page 7: Axure quickstart

Page 7

4. Generating Specifications

GENERATING SPECIFICATIONS

When generating specifications, there are a number of options including the destination file, which pages and masters to include, and which page notes and annotations to include. You can also customize the template, such as adding a title page and editing headers and footers.

Go back to Axure RP. Press F6 or Generate -> Specification in the main menu. Click the Generate button to generate the specification.

VIEWING WORD SPECIFICATIONS

Axure RP specifications are generated in Microsoft Word format complete with screenshots, annotations, and interactions.

A Microsoft Word 2007 (.docx) file will be created. The Office Compatibility Pack installed with Axure RP allows you to view and edit those files in earlier versions of Word.

Scroll through the document. Each page includes the page notes, a screenshot of the page, and a table that contains the annotations and interactions for the page.

© 2002-2008 Axure Software Solutions, Inc

Page 8: Axure quickstart

5. Creating Dynamic Interfaces and Conditional Flow

Page 8

USING DYNAMIC PANELS

The Dynamic Panel widget allows you to demonstrate dynamic functionality in the prototype. Dynamic Panels can contain one or more states. Actions are available to hide, show, and change the state of Dynamic Panels.

Go back to Axure RP. On the Home Page, drag and drop a Dynamic Panel widget above the Email field in the Account Login section. Double-click on the Dynamic Panel to open the Dynamic Panel State Manager. Label the panel “Error Panel” in the Dynamic Panel Label field and click the Edit All States button.

EDITING DYNAMIC PANELS

Once open, panel states can be designed like pages and masters by dragging and dropping widgets from the Widgets pane. A blue dashed outline on the wireframe indicates the boundaries of the dynamic panel.

Add a Text Panel widget and enter the text “Login failed. Please try again.”

HIDING DYNAMIC PANELS

Dynamic Panels can be set to hidden by default. This will hide the panel contents which can then be dynamically shown using interactions.

Go back to the Home page. Right-click on the Dynamic Panel and select Edit Dynamic Panel -> Set Hidden.

© 2002-2008 Axure Software Solutions, Inc

Page 9: Axure quickstart

Page 9

CREATING MULTIPLE CASES

Multiple cases can be added to an Event to communicate conditional flows.

Select the Login Button and double-click on Case 1 on the OnClick event in the Interactions pane. In Step 1: Description, add the description “If Login Succeeds” and click Done.

Then, add a second case by selecting the OnClick event and clicking Add Case. In Step 1: Description, add the description “If Login Fails”, and in Step 2: Select Actions, select “Show Panel(s)”. Click on the blue link for “panel” in Step 3 below, and select “Error Panel”.

Generate the prototype by pressing F5 and click the Generate button.

Click the Login button, and you will see in the browser the descriptions for the two cases. Clicking If Login Fails will show the error message, and clicking If Login Succeeds will link you to the My Account page.

Conditional logic can also be added to Cases to check the data entered in the Email and Password fields and respond without showing case descriptions. Visit www.axure.com/expert.aspx for more on conditional logic.

This concludes the Quick Start tutorial. Other features in Axure RP include conditional logic, storing data in variables, and shared projects for collaborating on files. Please visit the online training at www.axure.com/expert.aspx for articles and videos on these topics and more.

More Information

© 2002-2008 Axure Software Solutions, Inc