Application of Axure in prototype design

Preface

What is a prototype?

Product prototype is simply the product design before the formation of a simple framework, for the site, is the page module, the elements of extensive typesetting and layout, in-depth, but also add some interactive elements to make it more specific, image and vivid. As far as I am concerned, the most frequently used, most effective and interactive prototyping tool is axure. Today I would introduce some of my experience in working with Axure. This is mainly explained by the three main steps involved in the interaction design:

Main Page prototype

Before you design the main page prototypes, the interaction designer needs to:

a major task flow chart (or use case, usually provided by Product manager) a list of major functions (generally provided by product managers) the information architecture of the website (information architecture in some companies requires interaction designers to complete) how to make the "Main Page prototype" for understanding the results of previous studies

1. Start defining master at the beginning of the project

As soon as the project starts, if you can get a bit of knowledge of which blocks will be shared chunks in the future, start building master, such as the Header/footer/navigation menu (navigation) of the site, or the advertising version. The sooner you use it, the more you can save the duplication of other page designs.

Master's definition

2. Some axure RP library can be applied

There are many resources on the internet, such as: http://ucdchina.com/post/6285. You can also make your own library for the product.

Library resources on the Internet

3. According to "Task flow chart", "function list" will make the main page prototype.

This can include some of the necessary interaction actions. Some details, such as error prompts and other interactions can not be considered.

Main Page List

use:

The main page prototypes can be used for seminars, tests, and product introductions at the beginning of the product.

should pay attention to several points:

1. Do not add elements of visual design. Focus on the big picture, don't tangle up the details

At the beginning of the prototype, please put all your energy into the process optimization and layout design, do not waste time on visual design, which is definitely not worth the candle.

Because our prototype program has not yet passed, it is certainly through multiple iterations to determine the scheme, too much visual design is a waste of time;

Moreover, if the prototype is very realistic, in the product discussion, the visual elements will quickly catch everyone's eyes, then there will be leaders to question your interface should be replaced by blue, the button is more refined some of these problems. No one will focus on your interactive design.

2. It is best to use the Axure tool before using paper and strokes some paper prototypes, sorting out the ideas.

3. This process should be fast and iterative.

Two, page flowchart

After determining the main page, we can begin to refine the page flow. Page flow chart is helpful to show you their ideas, but also conducive to the collation of ideas. After all, axure above the interaction point is scattered, through the page flow chart, we can organize all the interactive behavior on the page, to avoid omission, in the show to others, you can clearly see the need for the operation of how many steps.

I tend to list the main tasks and then draw a page flowchart of all the tasks.

Page flowchart

Page Flowchart Elements

Because there are no slashes in the axure, there are some limitations in the performance process. I will show the following points in the flowchart:

the name and number of the action step

Start and End

the name of the page click on the location

operation instructions and arrows

Step Sequence Number

Use

Can communicate with other people flow, sorting ideas to refine the process.

Some points should be noticed in

if the project time is limited, the page flow can be drawn on paper. However, it is recommended that you keep this step in the interactive design. In order to reduce the cost of communication, when drawing a page flowchart, it is best to have certain specifications and standards. Iii. Perfecting the prototype

After the main page and page flow of the page are determined, you can refine the prototype. At this point, you can call a colleague of the product department to complete the details of your prototype.

How to perfect the prototype

1. Follow the interactive process considered in the page process, which is embodied in the prototype. Errors, hints and other interactive details should also be reflected. At this point you may use advanced axure techniques such as variables and layers.

Click on the operation of the pop-up layer at timed operation

2. Additional Notes

Select a control, and in the right area you can add a description for the control.

Add description

After adding the description of the foreground page, click on the yellow icon to display the hint layer

If you are dissatisfied with the properties of the description area, you can modify the properties:

modifying properties

However, this increase in the description of the way may interfere with the entire page, it is easy to let the viewer think is a page element. You can also take an original approach to adding descriptive text to the control:

Text Add note

3. Numbering pages

When the prototype no longer needs to be modified, we need to number the prototype page, which facilitates communication with the visual designer and front-end.

Use

Testing, product requirements document preparation Reference, visual design reference, front-end design reference.

Some

of

should be paid attention to

1. Do not overly pursue technical performance

The prototype has some interaction effects that will take time, and I recommend that you do not overly pursue technical performance, and you can use some text to illustrate the interactive effect. Axure software is designed to be a rapid prototyping, if in some technical aspects of interactive designers spend a lot of time, it is a bit of a lost. Or give the real effect to the front end to achieve it.

2. In order to reduce the cost of communication, in the improvement of the prototype, it is best to have certain norms and standards.

Summary

Axure is just an interactive tool, the most important thing is the idea of interaction design, tools just to help you express your ideas. Do not need to pursue technology too much, do not need too much pursuit of visual performance. We grasp the entire product direction at the same time, should focus on the interactive process, page interaction, the layout of the structure of innovation and optimization.

Here are some axure tips I've recorded in my work.

1. Quick Move Page

Have you ever felt that when the computer configuration is low, the page element is many, the mobile page is an extremely painful matter, has a good method to solve this problem:

In the non-input state, hold down the keyboard "space" button, the interface of the mouse "arrow" will become a "hand", so you can easily drag the page.

2. Replicate components in situ

In Axure "CTRL + C" "Ctrl + V" copy and paste, the dislocation copies a component. How to solve this problem:

Use the shortcut key "Ctrl" to copy a component in situ.

3. Copy the action copy case

The following figure can copy the action, you do not have to set so much trouble.

4. Convert the material or control directly to dynamic Panel (layer)

Very practical, especially in the production process to find some things or put in the layer to show better time, before you have to create a new layer, and then copy them in, now only need to right key needs to convert the material or control Convert>>convert to Dynamic Panel:

5. Radio Group (Radio Button Group)

You can select more than one Radio button at a time, press the right mouse button, and select Edit Radio button>>assign Radio Group to set the group relationship for the Radio Button. As a result, when these radio button outputs to prototype, a true radio user interface is formed.

6. Add Anchor Point

Similar to NetEase garage positioning function, click on a letter, the page will be located in the same letter area:

How to use axure to achieve this function?

A first use "image map region" to locate an anchor point on the page and name it "anchored anchor point location":

b) and then click on the place to add a link

As shown above, check "Scroll to image Map region" and click "image map Region" below to open the dialog box:

As shown above, select "Locate Anchor point", select "Scroll vertically only" vertical scrolling, and finally click OK.

Set the finish and see the effect.

7. Condition of the Drop-down box (droplist) (condition)

Here's a simple example of "condition." By editing the criteria, you can show some more advanced interaction effects.

The effect of this example is that the user toggles the dropdown box option on the left and the prompt text on the right will change. When a book is selected, the text in the textbox is "Please enter a book name or author"; When you select music, text in the text box is "Please enter a music name or a singer":

A first add the following components to the page and add two options to the Drop-down box, "Books" and "Music":

b) Naming components

C To add actions for the Drop-down box

Select "OnChange"

The dialog box that selects interactive behavior pops up, as shown below. Select Add Condition:

In the Conditional Selection dialog box, set the following figure and click OK when you are done:

Go back to the dialog box where you select the interactive behavior, and then select the following image:

Click "Variable and Widget value equal to value" in the text box above to open the dialog box for setting the variable, as shown in the following figure:

D Repeat the above operation, add Case2 for the dropdown box, the effect is as follows:

Well, the production is complete, we can see the effect:

Condition and variable this piece of function still need to explore more, some function is still more powerful. However, in the actual operation, most of the rich interaction effect is rarely used.

8. Recover file Recover Files

The Recover files feature will help you find a file version a few days ago.

Click File>>recover file, open the dialog box, you can view the most recent documents:

Select recover to restore the document at that time.

9. Using Axure package visual standard

See a blog of the folding bear.

Interactive designers are generally the final product block diagram, but often many products only need to use ready-made visual standards to draw the prototype. In order to reduce the flow, reduce the cost of communication, so I suggest that interactive designers in the production of similar products can directly use the existing visual standards for prototyping, the general many interaction designers will use Photoshop to achieve visual prototyping, but there are many problems of efficiency and interoperability, So there needs to be a complete set of packages to perform visual standards and produce interactive high-fidelity prototypes.

Please see the original article: http://www.jojobox.cn/blog/article.asp?id=133