Six steps to decompose the product prototyping process

This tutorial will explain the steps of prototyping from two parts of the whole and local instances. Product prototype design is generally based on the form of documents expressed in the image of the design, want to make a product prototype design is not easy, want to make the prototype better than the document is not easy, here will be combined with some product prototyping methods and techniques to introduce the steps of the prototype design, hoping to help needy friends.

The design prototype is also the method step, one is to improve the rationality of the prototype design, to avoid the appearance of top-heavy fidelity degree of inconsistency, the second is to reduce the time spent in the prototype design, everyone's work time is very valuable, it is impossible to invest too much time in the prototype design, Therefore, it is quite necessary to master some methods and techniques of prototyping design. In the overall product development process, the demand analysis part of the end, it should form a clear product demand, and at this time to do, is needed to express these product requirements, from the expression effect, the prototype is better than the form of the document.

Product prototype design to achieve a general distinction between the overall and local, the overall more consideration of information architecture design, such as functional structure, navigation, menus, layout and other aspects of the local more consideration of functional interaction design, such as button click, feedback, page switching, the overall display of local modules. From the point of view of design implementation, the process of gradual refinement from the total to the point is more suitable. The following two parts of the whole and local examples explain the steps of the prototype design.

　　First, determine the overall structure of the product

No matter what kind of work, the process of gradual refinement from the total to the point is usually the best method, such as the foundation and frame structure of the house now, the whole structure determines the future room shape, and the house is stable. The structural design of the product determines the future function navigation structure of the product. Generally speaking, when we do the demand analysis, will be a number of major functional points to grasp out, these functions can be condensed to form a product of the initial functional structure. For example, to do a contract management function, the requirements of the implementation of contract information management, contract performance management, contract statistics and other functions, listed here is the core function point is the main structure. For example, we want to do a member management function, registration and login is an essential function point, then it can be listed as a member of the management of the two basic structure. In fact, each product finally identified in the first level navigation bar inside the various columns is the functional structure of the product.

　　second , to determine the layout of products and typesetting

After determining the overall structure of the product, the layout design of the page will be considered first, and then the composition of the elements for each product page is considered. Usually when we do product design, will follow some of the existing product summary of the layout structure, such as three rows and three columns layout, three rows and two columns layout, and so on, such as left navigation right content form, left content right navigation form, and so on, these are large layout structure, is the overall page layout.

Subdivision to the specific page content, it is necessary to each content block placement layout, such as corporate website home Page General content has picture news, notice, company news, product introduction, product display and so on, we need to these content block to design a certain layout, The layout structure here depends on the designer's grasp of the content arrangement, and the different layouts will have different effects. such as e-commerce site, the content block and ad block layout is very fastidious, because the different layout, the resulting user clicks and conversion rate is not the same. In this case, when the layout of a certain type of product is not good, you can refer to the content layout of the mature products, because they already have operational data in support.

　　Third, determine the functional module of the product

　　A function module is a collection of program elements, such as data descriptions, executable statements, and so on, which refers to a single named procedure, function, subroutine, or macro call that can be accessed by name. Functional modularity is to divide the program into a number of functional modules, each function module completed a sub-function, and then the software structure diagram of these functional modules together to form a whole. To meet the required functionality of the entire system. Functional modularity is based on the question that if a problem is combined with multiple problems, the complexity of the combinatorial problem will be greater than the complexity of considering the problem separately.

Determining the layout of the product is equivalent to determining the placement of a product's functional module, and then a piece of the prototype design content can be determined, so that it is close to the final product presentation style. This time will be used to prototype design examples, than the film news, we can use the slide effect to do, such as product display, we can use the effect of the marquee to do, the specific use of what interactive effect to achieve functional block requirements to display content, depending on the product designer's grasp, user needs and user experience, The user experience is a relatively large piece, take the slide effect, whether the need to design digital navigation keys, whether the need to automatically play, whether the need to design thumbnails and so on, these need to be carefully considered after the decision, this can be in the design of the product a lot of talk about communication, look at other people's design results. For example, e-commerce site home page banner Picture Carousel effect, is the slide effect, the major e-commerce website design is similar, it can be used for reference.

In accordance with the above three steps to sit down, in fact, the low-fidelity product prototype came out, a relatively simple product, you can directly take a low-fidelity prototype to do the demonstration and write PRD documents, although such a prototype without any interaction effect, but basically can say clearly the product function, combined with detailed documentation after the description. Then we are not usually faced with simple products, so at least to the degree of Fidelity prototype, combined with the effect of interaction to achieve our design purposes.

　　To refine such an interaction design, we need to further the prototype design of the Product function module, complete the prototype of each functional module, complement the interactive design and the basic content layout style, usually can be designed according to the following steps:

　　Iv. combining the characteristics of the prototype design tool to determine the principle of functional module implementation

In fact, the principle is to let you understand how this thing is done, how to do it. Because each instance prototype is a separate function module or interaction effect, when you pass a prototype design tool to achieve, there will be a corresponding implementation principle. If this is not understood, the back will not be possible. Therefore, before prototyping the prototype, the use of prototyping tools is very important, the tool must have a certain familiarity and understanding, or to a realization of the requirements, no idea, the brain is blank, so certainly can not do something. This requires a process to develop, look at other people to design the prototype, figure out how they do it, and then try to do it all over again, and finally think about whether there is a place to improve.

Practice is the only standard to test the truth, only hands-on practical operation is much more, can naturally feel, until you see some simple function requirements, just look at the needs, know how to use the tool to draw the prototype, basically almost, of course, for some complex functions, or to well clear the way of thinking. Therefore, before you do the prototype, be sure to figure out how to do it, and then start the work, select the appropriate components to build the framework.

　　A relatively detailed interactive design of each function module

To determine the principle of functional module implementation, we need to do a relatively detailed interactive design of each functional module. The basic preparation includes adding component elements, setting component layout layouts, setting component properties (name, size, orientation, color, text, and so on). After the basic work is done, you can begin to do interactive design.

From the user's point of view, interactive design is a kind of how to make the product easy to use, effective and enjoyable technology, it is committed to understanding the target users and their expectations, understand the user in the interaction with the product of each other's behavior, understand the "human" itself's psychological and behavioral characteristics, but also to understand the various effective ways of interaction, and to enhance and expand them. Interactive design also involves multiple disciplines, as well as communication with multi-disciplinary multi-background personnel.

The design here includes the variable effects of the component itself, such as mouse-over, move-out, hover, etc., interactive events such as mouse-click triggering events, mouse move-in and trigger events, and logical settings, including judgment logic, jump logic, feedback logic, etc. This part of your logical thinking ability has a relatively high requirements, especially to do more complex interactive effect, the idea must be clear, otherwise judging the conditions of a lot, it is easy to mess up. And in the interactive design process to use a lot of logic, and ultimately need to reflect your PRD documents, so whether it is pre-design analysis, or after the design of the summary, are very test logic ability, to be able to product function module from front to back in series, here recommend everyone in the design prototype before, The corresponding prototype module operation flow Chart first drawn out, to clarify the idea, of course, it must be practical under the actual user's operation scene to design, avoid blindly subjective take for granted. Otherwise, the work can be carried out in half because of the lack of inspiration and can not continue, and finally can only abandon the whole program, so that the time and energy are very big loss.

　　Six, the interactive effect of repeated debugging

To determine the principle of functional module implementation, as well as a relatively detailed interactive design of each function module, then we want to see the real interaction. Many interactive effects are not a one-time setup can be successful, especially the complex interactive effect, all need to do a number of effects, repeated changes to adjust, finally to achieve the final effect. This process must be patient, slow work out deliberately, the idea is right, the idea is also feasible, that will be able to make the effect, even if the final really does not make the effect, but also can think in turn, is their own characteristics of the tool does not understand the cause, or their own knowledge level limitations.

This part of the reason to adjust the interaction effect is correct, the main purpose is to reduce the communication cost during the prototype demonstration, a dynamic interaction effect, you need to use the document to describe the time may require a page of text, not sure all the participants can understand, but the prototype to describe it may only take 1 seconds, Everyone looks very intuitive and can understand what the effect is. Throughout the debugging process can let you learn a lot of things, so say to do more hands-on is to learn these processes. Here is a point, some need to repeat settings or similar settings, the first debugging a dot, this point debugging passed, you are very clear, the rest of the point design is very fast.

　　Conclusion:

The above is the product prototype design process six major steps, according to this step, then the product prototype design will be much simpler. For product personnel, do prototype should not become a burden, but to turn it into a handy communication tool, communication costs are immeasurable huge, how to reduce the communication cost is the product development cycle within the need to consider the problem, and product demand is the source, the source grasp, the latter will be unobstructed many, This is also the most important purpose of prototyping design. and learning prototype design the most core point is more hands-on, only to see is not learning, must be hands-on operation, more training will, coupled with product design ideas, the prototype of the product is so produced.

The prototype design of the product is not only the role of communication, but also reflect the effect. Through content and structure display, as well as rough layout, can explain how the user will interact with the product, reflect the idea of the developer and UI designer, reflect the content that the user expects to see, reflect the content relative priority and so on. Product prototyping is also a very good learning process for designers.

Six steps to decompose the product prototyping process