Application of Axure in prototype design

Turn:

Http://uedc.163.com/2248.html

Objective

What is a prototype?

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

First, the main page prototype

Before the main page prototyping, the interaction designer needs to:

• A major task flowchart (not a "business logic flowchart" here, but a "task flow" based on "business logic"). Task processes can be produced or interacted with, depending on the specific circumstances of each company or project. ）
• A list of key features (typically provided by the product manager)
• Website Information Architecture (information architecture in some companies requires interaction designers to complete)
• Understanding of previous research results

How to Do "primary page prototypes"

1. Define master at the beginning of the project

When the project starts, if you can grasp which blocks will be shared chunks in the future, then start building master, such as the Header/footer/navigation menu (Navigation) of the website, or the ad position, and so on. The earlier you use it, the more you can save the repetitive work of other page designs.

Definition of Master

2. Can apply some axure RP library

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

Library resources on the Internet

3. According to "task Flowchart", "Feature List" makes the main page prototype.

This can include some of the necessary interactive actions. Some details, such as error hints and other interactions can be used without consideration.

The main Page list

Use:

The main page prototypes can be used for early product discussions, testing, and product introductions.

Some points to note:

1. Do not add elements to the visual design. Focus on the big picture, don't dwell on the details

In the early stages of prototyping, put all your energy into the optimization and layout of your process, and don't waste your time on visual design, which is definitely not worth the candle.

Because our prototypes have not yet been finalized, it is certain that many iterations are needed to determine the solution, and 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 the eye, then there will be a leader to question whether your interface should be replaced by blue, the button is not more sophisticated such problems. No one will focus on your interaction design.

2. It is best to use paper and strokes for some paper prototypes before using the Axure tool to organize your ideas.

3. This process should be fast, iterative.

 

Second, the page flowchart

After determining the main page, we can begin to refine the page flow. Page flowchart is conducive to the presentation of their ideas, but also conducive to the arrangement of ideas. After all, axure above the interaction point is scattered, through the page flowchart, we can organize all the interactive behavior on the page, to avoid omission, in the show to others, you can also see at a glance how much of the required steps.

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

Page flowchart

Page Flowchart Features

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

• Name and number of the action step

• Start and end

• The name of the page
• Click on the location

• Operating instructions and arrows

• Step number

Use

can communicate with others process, organize ideas to refine the process.

Some points to be noted

1. 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.
2. In order to reduce the cost of communication, when drawing the page flowchart, it is advisable to have certain norms and standards.

Third, perfect the prototype

After the page's main page and page flow are determined, the prototype can be perfected. At this point you can call the Product Department colleagues to complete the prototype of the details of work.

How to perfect the prototype

1. Follow the interactive process considered in the page process, reflected 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 the action of the Timer action popup layer

2. Additional Instructions

With a control selected, you can add a description for this control in the right area.

Add description

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

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

modifying properties

However, the way the description is added can interfere with the entire page, making it easy for the browser to think of as a page element. You can also take an original method to add descriptive text to the control:

Textual Supplementary description

3. Numbering the page

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

Use

Test, product requirements Document writing reference, visual design reference, front-end design reference, etc.

Some points to be noted

1. Do not pursue technical performance too much

Prototypes have some interaction effects that can take time, and I suggest not to pursue technical performance too much, but to use some text to illustrate the effects of interactivity. Axure software is designed to be fast prototyping, and if the interaction designer spends a lot of time on some technical aspects, it's a bit forgotten how. 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 advisable to have certain norms and standards.

Summarize

Axure is really just an interactive tool, the most important thing in interactive design is the idea, the tool is just to help you express your ideas. You don't have to pursue technology too much, you don't have to be too visually expressive. While grasping the entire product direction, we should focus on the interaction process, in-page interaction, the layout structure of innovation and optimization.

Here are some of the axure skills I've documented in my work.

1. Move the page quickly

Do you feel that when the computer configuration is low, the page element is a lot of time, moving the page is a very painful thing, there is a good way to solve the problem:

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

2. Copy components in situ

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

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

3. Copy the action copy case

If you can copy the action, you do not have to set up so much trouble.

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

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

5. Radio Group (Radio Button Group)

You can select multiple Radio buttons at once, press the right mouse button, and choose Edit Radio button>>assign Radio Group to set the group relationship for the Radio Button. As a result, when these radio buttons are output to prototype, a true single-selection user interface is formed.

6. Add anchor Points

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

How do you use Axure to implement this function?

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

b) and then add the link to the clicked Place

For example, tick "Scroll to image Map region" and click "image map Region" below to open the dialog box:

For example, select the "Anchor location" option, select "Scroll vertically only" to scroll vertically, and then click OK.

Set it up and see how it works.

7. Conditions for the drop-down box (droplist) (condition)

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

The effect of this example is that the user toggles the drop-down 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 the music is selected, the text in the textbox is "Please enter a music name or a singer":

A) First add the following components to the page and add two options "book" and "Music" to the drop-down box:

b) Name the component

c) Add an action to the drop-down box

Select "OnChange"

A dialog box is displayed that selects the interactive behavior, such as. Select Add Condition:

In the Condition Selection dialog box, as set, click OK when you are finished:

Select this option when you return to the dialog that selects the interaction behavior:

Click "Variable and Widget value equal to value" in the text box to open the dialog box for setting variables, as set:

D) Repeat the above and add Case2 to the drop-down box, as follows:

Well, the production is finished, you can see the effect:

Conditions and variables this piece of functionality also requires a lot of exploration, and some features are relatively powerful. However, in the actual operation, most of the rich interactive effect is seldom used.

8. Restore file Recover files

The Recover files feature can help you find the file version several days ago.

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

Select recover to restore the document at that time.

9. Using the Axure Package Vision Standard

See a blog for a folding bear.

Interaction designers are generally the final product of the line block diagram, but often many products only need to use the ready-made visual standard to draw prototypes. In order to reduce the process and reduce the cost of communication, so I suggest that interaction designers in similar products can be directly used in the existing visual standards for prototyping, many interaction designers will use Photoshop to achieve visual prototyping, but efficiency and non-interactivity is still a lot of problems, So a complete package is required to execute the visual standard and produce an interactive, high-fidelity prototype.

For details, please see the original article: http://www.jojobox.cn/blog/article.asp?id=133

Application of Axure in prototype design