Some experience on prototyping using axure RP

The Axure RP (Axure Rapid prototyping) is a quick-to-implement, accurate expression, interactive, and easy-to-start prototype design tool.

I have been involved in a system needs analysis began to contact Axure RP, initially mastered a certain development basis, the successful production of a prototype system requirements, the need to analyze the work has a positive effect. On the basis of this experience, the follow-up has been successfully applied in other projects and achieved good results.

In terms of personal experience, prototype development using Axure RP, once you have mastered some development skills, plus a good plan, then a lot of things can be handy. Good things need to be shared and benefited by more people, to bring benefits to practical work so that they can reflect their value. In this connection, I share some experience in prototyping with Axure RP, and I hope that more people can share their experience in using Axure Rp.

Axure RP on its own, in fact, is only a tool, most people can quickly learn and master it, but to make a good prototype, will use just one of the most basic requirements, the key is to have a good prototype development ideas, this set of development ideas in addition to the overall planning, but also need to fully practical business needs, Develop on the basis of understanding requirements.

Currently I use the Axure RP version of 6.5.0.3012, which can be obtained via the Internet. For Axure RP Installation and basic use, there are corresponding tutorials, such as: axure_rp_6.5_ basic tutorial,

Axure.rp.6.prototyping.essentials and so on, everyone through the careful study of these tutorials can naturally achieve a multiplier effect. Therefore, these basic content is no longer mentioned here, I would like to talk about in the previous several projects how to complete the rapid prototyping development.

First, understand the characteristics of prototype design and development.

First, we need to have a relatively deep understanding of prototype development tools, what the prototype tool can do and what it can't do. In fact, as long as the focus on parts, master, dynamic panels, and learn to use the component properties flexibly, then the prototype effect is basically out.

The second is to clarify what kind of prototype we need to do, is the Web version, the client version, or mobile phone version, and so on, because each type of prototype design requirements are not the same. If we are developing the Web version of the prototype, then we all know that the size of the Web page design and browser and operating system size is closely related, perhaps we need to know that the Windows XP taskbar height is 30px, and Windows 7 taskbar height of 40px We need to know some main browser interface parameters (status bar, menu bar, scrollbar height, etc.), we also need to know the impact of the system resolution design on the prototype (security resolution is 1024*768px, can be recommended large resolution of 1280*800px) We also need to know the width of the page and the height of the first screen and so on. If we are developing prototypes for mobile phones, maybe we need to know the design dimensions such as Android, iOS, etc.

Of course, for the systems we are currently involved in, generic prototyping is web-based, so we need to focus on this piece of design.

Second, do a good job of the overall planning of the prototype.

Before conducting a formal prototype development, it is important to make a prototype framework for the actual needs and similar systems that have been developed, including the overall style of the prototype, color, layout, presentation and so on. Personally think, at least to do and do the following aspects:

(1) prototype design and development should have a unified concept. This unification mainly refers to have a unified interface layout, for example, each sub-page style should be the same or similar, all kinds of components (such as text boxes, drop-down selection boxes, tables, message prompt boxes, etc.) should be consistent. For example, the reset button or the Close button's style, event, and so on all interfaces should be consistent.

(2) The development of prototype design should have symmetrical thinking. This is related to the layout of the prototype interface, such as the buttons at the bottom of the page should be overall centered and scattered on both sides. The text of an informational cue box should normally be centered, and so on.

(3) The development of prototype design should pay attention to the details. It's not hard to make a prototype, but it's relatively difficult to be a good prototype for a user experience. The difficulties here are not technically difficult, but with our willingness to do an interactive experience, willing to pay attention to every detail and so on. Good interface prototype, many times is not to say that it has more than fancy, but every detail is to achieve the ultimate, thin to each text how to describe, how to show the control, the height of each table and the head background color is consistent, etc. are done in place. In fact, this is really not difficult for us, it is difficult for us to take the time to deal with these details. Many times, the details of the issue of concern, the overall effect is out, customer satisfaction has increased. In addition, in the prototype development, if possible, must give each page, each master, each dynamic panel, each part of the appropriate naming, this for the development of complex prototypes, but also conducive to multi-person collaborative development. Of course it's a good habit, and good habits often help us get things done.

(4) prototype design and development should have product awareness. Prototyping may sometimes be just a sketch, but more often it is the desire to make a prototype that is close to the real system. After all, if it's just to make a sketch, it's not as easy as a piece of paper and a pen. Therefore, the design and development of prototype should always have product awareness, perhaps we can think that we are in the creation of products, and products are provided to customers, should be to reduce the product defects to the lowest possible. Therefore, in the case of time permitting, we should pursue excellence.

(5) prototype design development to keep up to date. There are two layers of meaning, one is that there will be changes in the development process of the situation, when the prototype involves changes should be updated, and the second is that the prototype developed should be consistent with the corresponding documents, especially in terms of data items.
For the prototype planning, concrete to the actual level, is to clear the entire prototype interface style, about how many functional modules, menu How to show, what needs to be made into a pop-up window, what needs to be made into a nested window, which needs to be developed in the form of a page, which needs to be displayed in dynamic panels, And what needs to be made into a master version.

Third, design and form the prototype part library.

A system, or a series of similar systems, should have a uniform standard for its prototype components. This set of standards includes forms, text boxes, drop-down selection boxes, check boxes, radio buttons, buttons, and so on. Then this set of standards in fact, the style should be highly unified. For example, the Internet industry has a very mature development framework, often involves a number of commonly used drop-down boxes, selection boxes and other basic elements, such as these basic elements can be made into parts, to facilitate subsequent reuse.

When designing components, we can refer to some excellent parts libraries, which can be found on the official website of Axure. Listed are some of the most commonly used parts libraries.

In fact, as long as we carefully, we can also make a set of very useful parts. For example, to make a normal button, you can use a rectangle to do it, you can adjust the shape of the rectangle, you can configure the hover style, mouse down style, select style, disable style, and some examples are as follows:

Four, the classification design prototype master version.

In order for prototype development to really achieve the goal of rapid construction, in the prototype development process as far as possible to extract and convert the public part of the master, then in the design and development of each prototype page in the form of Assembly will greatly provide development efficiency, but also conducive to the subsequent modification of some basic data.

In terms of personal experience, the master is divided into two major categories, one is the common components of the system, and the other is the system business master. Common components include: Buttons, text boxes, drop-down selection boxes, date selection boxes, tabs, dialog boxes, combo boxes, pagination controls, various types of tables, page title areas, areas at the bottom of the page, and so on. Each type of component can be designed in accordance with the actual business scenarios and the corresponding size requirements of multiple sets. For a table component, you can design a plain table with horizontal presentation, a normal table with vertical display, a horizontal table with an ordinal, a horizontal table with a check box, a horizontal table with a radio button, and so on. The headings, font size, background color, and line color of these tables should be configured according to the overall system style.

In addition, usually a system has the shadow of query statistics, so it is very feasible to use some common query conditions of the master version. According to personal experience, the query conditions of the column is generally two columns of four or three columns six column, so the overall layout will be relatively reasonable.

V. Flexible use of dynamic panels.

Dynamic panel is to display in the context of the page does not jump to achieve a variety of interactive state, through the dynamic panel can achieve advanced interactive functions, achieve high fidelity of the prototype. From another point of view, each state of a dynamic panel can actually be viewed as a page in which we can design the desired prototype effect. Achieve the interaction we need by hiding, displaying, or switching to different states on a dynamic panel.

In general, we know that the dynamic panel can be implemented such as tab switch effect, mouse trigger and click Trigger drop-down menu effect, mouse-triggered floating window effect, JS mouse click the layer effect and so on. And many times, in order to make the whole prototype more vivid, the whole system can be achieved through dynamic panels, especially for the production of mobile phone prototypes.

An application System prototype Web version and mobile phone version are all implemented by dynamic panel, the directory layout is as follows:

The advantage of using the entire dynamic panel to design a prototype is better interaction, smoother operation, and, of course, a better user experience.

In general, the development of the prototype should be necessary to accumulate, and in the development of the prototype should be under the conditions of a more rigorous, careful, friendly. In addition, the necessary accumulation should be in peacetime, you can learn some excellent design (such as http://huaban.com/nav8079206363, http://www.uisdc.com/, etc.), and then the actual business needs and practical application of the system, Design one or more sets of prototypes suitable for the project or even the industry, and in the follow-up of other similar projects in the development process as a basis for continuous optimization, continuous improvement, continuous improvement.

Some experience on prototyping using axure RP