Axure RP 6 Prototyping Essentials电子书

Axure RP 6 Prototyping Essentials

Table of Contents

Axure RP 6 Prototyping Essentials

Credits

Foreword

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Instant Updates on New Packt Books

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Prototyping Fundamentals

The art of UX prototyping

Prototyping interaction

The prototyping checklist

The project

Simple websites

Web applications and portals

Mobile apps

Heuristic evaluation

User validation

Deliverables: Prototype and specifications

Balancing act: What stakeholders have to say

Business stakeholders

Management

Business process architects

Project management

Visual design

Development stakeholders

The UX perspective

The UX practitioner

The UX team lead

The challenge

Team structure

Process

Extending the process

Axure: The Good

Axure: The Bad

Tips for using Axure on large design projects

Axure around the world

The Axure perspective

Summary

2. Axure Basics—the User Interface

Getting started

Working with multiple project files

The Axure workspace

Customizing the workspace

The Sitemap pane

Wireframe pages

Flow pages

The Page Properties pane

Page notes

Managing notes

Page interactions

Page formatting

Sketch effects

The Widgets pane

Wireframe Widgets

Flow widgets

Creating your own widget library

Third party widget libraries

The Widget Properties pane

Annotation tab

Annotation fields

Annotation views

Interactions tab

Interactions

Events

Cases

Actions

Formatting tab

Location and size

Font

Alignment + Padding

Style

Ordering

Fills, Lines, + Borders

The Wireframe pane

Grid and Guides

The Masters pane

Master behavior

Normal

Place in Background

Custom Widget

Usage Report

The Dynamic Panel Manager

The toolbar and menu bar

Axure file formats

The .RP file format (stand-alone)

The RPPRJ file format (shared project)

Summary

3. Prototype Construction Basics

Prototyping principles

Alexandria, the Digital Library Project

Getting started—productivity in 30 minutes

Initial requirements and use cases

Use case diagram page

Saving the project file

First wireframe pages

Task flow diagram page

Browse path flow diagram

Search path flow diagram

Link use cases to flow diagrams

Generating the HTML prototype

Getting started with masters and dynamic Panels

The first wireframe

The quick and dirty approach

The quick but structured approach

First masters: navigation systems

Global navigation bar

Secondary navigation system

The first dynamic panel

Adding states to a dynamic panel

Adding visual effects

Adding sketch effects

Updating task flow diagrams

Practitioner's corner—Axure prototyping for mobile devices

Mobile-friendly websites and mobile apps

Different device resolutions and aspect ratios

Using the Viewport Tag

Using a full screen browser

Landscape and portrait page versions

Event and gesture compatibility

Browser limitations

Using widget libraries

Loading prototypes onto the device

Summary

4. Interactivity 101

Interaction design—brief history

The 1950–60s

The 1970–80s

The 1990–2000s

The present, future, and Axure interactions

Axure interactions primer

Guided example

Step 1: Defining the interaction in simple words

Step 2: The Axure interface

Step 3: Translating this requirement into an Axure interaction

Step 4: Annotating the interaction (optional?)

Axure events

Events triggered on OnPageLoad

Guided example: Changing the default landing page

Simulating contextual navigation

OnPageLoad events and dynamic panels

OnPageLoad event in detail

User triggered events

Guided example: Sign-in

Construction strategy

Adding the interaction

Organizing actions

Widget, Events, and Context

Widget Events in detail

Axure cases

Guided example: Construction and interactions

Part 1: Construction tweaks

Part 2: Adding interactions

Axure actions

Links actions

Dynamic panel actions

Widgets and variables actions

Miscellaneous actions

Summary

5. Advanced Interactions

Conditions

If-Then-Else

Guided example—conditions and dynamic panels

Step 1: Defining the interaction

Step 2: Constructing Wireframe

Step 3: Setting the first condition

Step 4: Adding the first interaction

Step 5: Completing the interaction

The Condition Builder

Guided example—multiple conditions

Step 1: Defining the interaction

Step 2: Constructing Wireframe

Step 3: Interaction tweaks

Step 4: Evaluating multiple conditions

Satisfy all or any

Step 5: Final conditional touches

Troubleshooting conditions

Raised events

Guided example

Step 1: Creating a raised event on the master

Step 2: Applying interaction to raised events on a page

Nested masters: Amplifying the raised event

Variables

Guided example—creating context with variables

Step 1: Defining the interaction

Step 2: Construction considerations: Dynamic panel or pages?

Step 3: Adjusting existing conditions

Step 4: Variables and the order of actions

Step 5a: Setting variables (and possible snags)

Step 5b: Setting and initializing variables

Initializing, passing, and resetting variables

Step 6: Using variable values to determine appropriate cases

Variable types

Global variables

Axure's built-in variable

Create your own variables

Special variables

Usage examples

Local variables and functions

Naming variables

How variables can help in usability testing

Guided example—contextual usability testing

Pros and cons of using variables

Tips and techniques from the experts

Hiding and showing list elements, by Jeff Harrison

The approach

Step 1: Creating the row template

Step 2: Moving rows together

Step 3: Repeating as desired

Step 4: Adding controls

Keyboard Shortcuts by Loren Baxter

High-level Interaction

Detailed steps

Notes

Axure tricks by Fred Beecher

Trick 1: Debugging your Logic

Trick 2: Passing variable values between pages

Trick 3: Hidden link to clear variables

Trick 4: Text fields masquerading as text panels

Summary

6. Widget Libraries

Axure's built-in libraries

Axure and community libraries

Your own widget library

Guided example: Widget library to support prototype

Step 1: Create the library file

Step 2: Creating a custom widget (lorem ipsum)

Step 3: Refresh the library in the project file

Expanding the library—design patterns

Example 1: A confirmation/alert box widget

Step 1: Defining the pattern

Step 2: Construction

Example 2: An incremental search widget

Step 1: Defining the pattern

Step 2: Construction

Step 3: Interactions

Managing widget libraries

Local masters or external widget libraries?

Using RPLIB

Using masters in a PR or RPPRJ file

Practitioner's corner

Why widgets?

Pixel-perfect icons

Clear widget label and tool tips for extra help

Summary

7. Managing Prototype Change

From vision to reality

Aligning expectations

UX and software development models

Waterfall

Agile

Jargon

Agile flavors

Estimating Axure work

Calculating your time

Expectation alignment

Transitioning from concept to detailed design

From vision mode

From sketch mode

Foundations and scaffoldings

Determining the Wireframe width

Guides

Global guides

Page guides

The grid

Customizing the grid

Page templates

Page style editor

Home page template

Category page template

Detail page template

Widget style editor

Default widget styles

Style painter

Integrating with the project style guide and CSS

The style guide

To sync or not to sync?

Prototype with existing visual design

Summary

8. Functional Specifications

Collaboration with the development team

Aligning expectations

Capturing UI specifications

Global specifications

Generators and outputs: Specifications and prototypes

Customizing the Word specifications generator

Page notes

One note section versus many

Annotation fields

Annotation views

Generating specifications

The General section

The Pages section

The Masters section

The Page Properties section

The Screenshot section

The Widget Properties section

The Layout section

The Word Template section

Summary

9. Collaboration

Shared projects

The environment

Check out/in status

Setting up a shared repository

Loading from a shared repository

The Share menu

Creating and loading

Updating the entire file

Updating a single page or master

Manage Shared Project...

Browse Shared Project History...

Repoint to Moved Shared directory...

Clean Up Local Copy...

Best practices for UX Axure teamwork

Attributes of the UX team

Feedback from stakeholders—the Discussion tab

Discussions hosted on AxShare

Discussions not hosted on AxShare

Step 1: In AxShare.com

Step 2: In Axure

Step 3: In the browser

Summary

Index