Axure

Axure Rapid Prototyping

2008 7 23
www.chenliangyong.com liangyongchen@hotmail.com

....................................................................................................................................... 3

Axure RP .............................................................................................. 3

............................................................................................ 5

................................................................................................ 9

Master .................................................................................. 14

HTML .................................................................................................. 15

.............................................................................................. 19

Flow Diagrams............................................................................ 21

.......................................................................................... 21

.......................................................................................... 25

Rich Interaction............................................................... 26

Dynamic Panel.................................................................... 26

.......................................................................... 30

.............................................................................................................. 31

.................................................................................................................... 3

Rich Function .......................................................................... 32

Conditional Logic ................................................................ 32

OnChange .......................................................................................... 35

OnKeyUp ............................................................................................ 35

OnFocus OnLostFocus ............................................................... 36

Variables ...................................................................................... 37

OnPageLoad ...................................................................................... 39

.................................................................................. 40

.......................................................................................... 40

Raised Events ......................................................... 42

...................................................................................... 44
Axure Shared Project......................................................... 44

..................................................................................................................................... 52

.................................................................................................. 52

......................................................................................................................... 52
......................................................................................................................... 52

Tab .................................................................................................. 56

..................................................................................................................................... 57

.............................................................................................. 57

.................................................................................................. 57

...................................................................................... 57

Microsoft Office ........................................................ 57

Radio Button Group....................................................................... 57

IE Active X .......................................................................... 57

.......................................................................... 58

...................................................................................... 58

 http://www.axure.com Axure

1 Axure RP
1. Axure RP
Axure Ack-sure
RP Rapid PrototypingAxure RP Pro
Axure Software Solution
UX
UI
BA
IAUEPM

Axure
Axure

Axure

2.
prototype
Prototype

M. A.
Rational /IBM
66%
123

Prototype

Rapid PrototypingUser-Centered
Design
1000 Axure RP

3. Axure
Axure
Axure HTML
Word Axure RP

1
6
2

5
3
7

1. Main Menu & Toolbar

2. Sitemap Pane

3. Widgets Pane

4. Masters Pane

5. Wireframe Pane

6. Interactions Pane

7. Annotations Pane

8. Pages Notes & Page Interactions Pane

2
1. Sitemap
(Wireframe)Flow

Add Child Page Delete Page

Rename Page

2. Widgets

(Ctrl+C)(Ctrl+V)

Object

3. Annotations

Annotations and Interactions

Label

Fields
Wireframe->Customize Annotation Fields and Views
Annotations Custommize Fields and Views
Custommize Fields and
Views

Footnotes

4. Page Notes

Page notes

Wireframe->Manage Page Notes

Page Notes - DefaultManage Page Notes

Page Notes Default

3
1.
RIA

Events
Cases
Actions

OnClickOnMouseEnter OnMouseOut

1
1
2

1
2
2

Axure RP 5

OnClick

OnMouseEnter

OnMouseOut

OnFocus

OnLostFocus

OnPageLoad

OnClickOnMouseEnter OnMouseOut

10

OnClick

OnFocus OnLostFocus

OnKeyUpOnFocusOnLostFocus

OnPageLoad

2.

1.
2. OnClickInteraction Case
Properties
3. Step 2Open Link in Current Window
4. Step 3Link Link Properties

Quick Link

Link Properties

3.
Axure

11

 Axure

12

Open Link in Current Window

Open Link in Popup Window

Open Link in Parent Window

Close Current Window

Open Link in Frame

Set Panel state(s) to State(s)

Show Panel(s)

Hide Panel(s)

Toggle Visibility for Panel(s)/

Move Panel(s)

Set Variable and Widget value(s) equal to Value(s)

Open Link in Parent Frame

Scroll to Image Map Region Image Map

Enable Widget(s)

Disable Widget(s)

Wait Time(s)(ms)

Other

4.

OnClick
(If Yes)(If No)

(If YesIf No)

5. : OnPageLoad
Axure OnPageLoad

OnPageLoad Interactions OnPageLoad

13

4 Master
1.
(Header)(Footer)
(Navigation)

PowerPoint Dreamveawer

2.

Add Master
Add Master

(Folder)

3.

Wireframe->Mask
Masters

14

BehaviorNormal

BehaviorPlace In BackgroundCustom Widget

Normal:

Place in Background:

Custom Widget:

5 HTML
1. HTML
Axure
Axure HTML JavaScript IE6+Mozilla
Firefox

2.
Generate->Prototype (F5) Prototype
Configure HTML Prototype

15

GeneralDestination Folder HTML Axure

HTML

Notes HTML

Annotations HTML

Interactions(case)

Distribution chm

Advanced Text Panel

Generate

3.
Axure HTML

16

Generate->Regenerate
Current Page to Prototype(CTRL+F5)
HTML

4. HTML
Axure HTML
:
:
:

17

5.
Axure HTMLJavascript IE6+Firefox
Axure
Prototype
1 web
HTML Web

2 ZIP
ZIP ZIP
ZIP HTML
3 CHM
CHM ZIP
CHM Microsoft HTML Help
Windows
CHM

CHM Configure HTML Prototype Distribute

Create HTML Help File(.chm) HTML Help Workshop
CHM HTML Help Workshop
hhc.exe Locate hhc.exe hhc.exe
CHM

18

6
1. Specification
Word (Specification)
Word 2007 (.docx ) Word 2007 .docx
Word2000
Word 2007 Microsoft Office Compatibility Pack
Office2000/XP/2003 2007
2007 Axure

Axure Word

Axure :

Axure RP Prototype -(Word 2000 ) 1.7 M bytes

Axure RP Prototype -(Word 2007 ) 700 k Bytes

http://userxper.com Axure

19

2.
Generate->Specification(F6)
Specification Configure Word 2007 Specification

Pages Masters
NotesScreenshot

Annotations
Widgets
Word Template (Word )
word
Word

Generate

20

 Flow Diagrams
1
1.

Axure

Diagram Type->Flow

21

2.
flow
Axure

Axure

1 rectangle
process
Axure

2 rounded rectangle

3 beveled rectangle

4 diamond
IfThenElse,
5 file

6 bracket

22

7 semicircle

8 triangle

9 trapezoid

10ellipse

use case
11hexagon

12parallelogram
Input

13actor
use case

14database

15image

3.

Connector Mode button (F11)

Pointer Mode button (F9)

23

Line Pattern Line Ends

4.

Edit Flow Shape

5.

Edit Flow Shape->Edit

Reference Page

24

2
1.

1
2
Generate Flow Diagram
Standard digram Right Hanging

25

Rich Interaction
1 Dynamic Panel
1.

states

2.
Dynamic Panel State Manager

26

Edit State

3.
Edit Dynamic
Panel->Set Hidden

4.
Interaction Case Properties

27

Set Panel state(s) to State(s)

Show Panel(s)

Hide Panel(s)

Toggle Visibility for Panel(s)

Move Panel(s)

Actions
descriptions

Label
labelUnlabeled

28

5.
Tab
Tab Tab 3 tab tab
3
tab
tab
tab

OnMouseEnter

OnPageLoad

29

2
1. OnMouseEnter OnMouseOut
OnMouseEnter OnMouseOut
OnMouseEnter OnMouseOut

OnMouseEnter OnMouseOut

2.
OnMouseEnter, OnMouseOut

image Edit Image->Import Rollover Image

Rectangle Edit Button Shape->Edit Rollover

Style
Set Rollover Style

30

3
1.

Vertical MenuHorizontal Menu

2.

Edit Menu Padding Menu Padding Editor

Add Menu Item Delete Menu Item

31

Add Submenu

3.
Edit Rollover Style
Set Rollover Style

Preview

Rich Function
1 Conditional Logic
1.
Case description

2.
case Interaction
Case Properties Step 1 Add Condition

32

 Condition Builder
If text on widget UsernameField equals 'axure' and text on widget
PasswordField equals '12345'

Condition Builder +
-
Satisfy all
And Satisfy any
or
6

33

Condition Builder Ok Interaction Case Properties

Case1If
OnClick

Else If
Else If True

True
Else IfIf
Change to IF

34

2 OnChange
1. OnChange
OnChange DroplistList BoxOnChange

2. OnChange
OnChange Interaction Case Properties
Step 1 Add Condition Condition Builder
OnChange selected option of
if selected option of droplist equals selected option of listbox

3 OnKeyUp
1. OnKeyUp
OnKeyUp Text Field Text Area
35

2. OnKeyUp
OnKeyUp

OnKeyUp 5

4 OnFocus OnLostFocus
1. OnFocus OnLostFocus
OnFocus OnLostFocus Text Field, Text Area, DropList, List Box,
Checkbox Radio Button OnFocus tab
OnLostFocus

2.
OnFocus OnLostFocus
OnLostFocus

36

5 Variables
1.
Axure
25

2.
Wireframe->Manage Variables
Manage Variables

OnLoadVariable
25

3.
Interactions Case Properties step2
Set Variable and Widget Value(s) equal to Value(s) step3
Variable and Widget value equal to Value Set
Variable and Widget Value
37


Set value of variable OnLoadVariable equal to
loggedin, OnLoadVariable loggedin

4.
Condition Builder if value of
variable OnLoadVariable equals loggedin

5.
Set Variable and Widget Value(s) equal to Value(s)

38

 Set Variable and Widget Values

[[ ]]
text panel Welcome, [[NameVariable]]

6 OnPageLoad
1. OnPageLoad
OnPageLoad OnPageLoad

OnPageLoad

OnPageLoad
OnPageLoad OnPageLoad
OnPageLoad Interactions OnPageLoad

2. OnPageLoad
OnPageLoad
OnPageLoad

text panel
Welcome, [[UsernameVariable]]

39


1
1.

header

2.
OnPageLoad

40

3.

OnPageLoad Set Variable and Widget value equal to

Value text panel text on widget

4.

41

2 Raised Events
1.

2.
Wireframe->Manage
Raised EventsMasters Only

Manage Raise Event

OnClick
Raised Event Interacton Case Properties
Raise Event

42

Event Manage Raised Events

43


1 Axure Shared Project
1.

Axure

Axure

checked out
checked in
SVN

2.
File->New Shared Project

44

[ProjectName].rpprj
[ProjectName].rpprj

.rpprj DO_NOT_EDIT
Axure .rpprj
DO_NOT_EDIT

SVN
SVN

45

3. RP
.rp .rp Share->Create
Shared Project from Current File

[ProjectName].rpprj
.rp

4.

Share->Get and Open Shared Project

46


[ProjectName].rpprj

Share->Get and Open Shared Project

5.
Axure Axure Sitemap
Masters

Check Out
Send
Changes
Check In

Get Changes

annotation fields, page

notes fields, variables, styles, and generatorschecked out
sitemap master

Check Out

47

Unsafe Check Out

Send Changes

Check In
File->Save

Get Changes

48


Get Changes

Share->Get All Changes from Shared DirectoryGet All Changes

,Share->Send All Changes to Shared

DirectoryShare-> Check In Everything
Share->Get All Changes from Shared Project

1 1
1
2 1
3 1 1

6. RP
File->Export Shared Project to File

RP RP RP

49

 RP
File->Import

7.

Share->Browse Shared Project

History

RP

8.
Share->Manage Shared Project

50

9.

Share->Repoint to Moved Shared Directory

Share->Get Shared Project

51

1.

2.
3.

1 Axure RP
2

52

Rectangle

Text Panel

logInfo

Text Panel

Text Panel

Text Field

userName

Text Field

passWord

Button

submitButton

1 onClick

53

4 Step 2 Set Variable and Widget value

equal to Value
Step 3

54

 Edit text

23 1
If else

1 Generate->Prototype(F5)

55

Tab

Scrollbars on Tables and Other Widgets Using the Dynamic Panel

There are a couple ways to represent scrollbars on tables or other sections in wireframes in
Axure RP. The first is to simply use an image of a scrollbar on the wireframe, but with this
method the scrollbars are static in the prototype.
The second way is to use the dynamic panel. This tutorial will go through the steps to put a
scrollbar on a table widget, but it can be used in general for any widget or collection of widgets
on a wireframe.
1. Drag a dynamic panel from the Widgets pane onto the wireframe.
2. Right-click on the dynamic panel and select Edit Dynamic Panel -> Show Scrollbars As
Needed. This will show scrollbars on the dynamic panel in the designer.
3. Double-click the dynamic panel to open the Dynamic Panel State Manager.
4. Double-click on State 1 in the Panel State list to design the wireframe for the panel state.
5. Drag a table from the Widgets pane onto the wireframe.
6. Specify the number of rows and columns. The width and/or height need to be wider or taller
than the dimensions of the dynamic panel for the scrollbars to appear in the prototype.
7. Design the table as desired and resize the dynamic panel as needed.
8. Generate the prototype (F5) and you will see scrollbars on the dynamic panel surrounding
the table (if the table is wider or taller than the panel).

56


1
Axure

focus Wireframe

3
1

4 Microsoft Office
PowerPoint, Excel, Visio, Photoshop
Illustrator Axure RP Wireframe
Axure

5 Radio Button Group

Radio ButtonEdit Radio Button->Assign
Radio Group Radio Button Radio Button
Prototype

6 IE Active X
IE HTML Active X
IE IE Active X
IE HTML

57

7
Word

8
Axure Pages Section Header
Pages Page Tree
Screenshot Section Header User Interface

58