Interactive Demo design: Interactive design experience sharing

Article Description: Interactive Demo design, is the most basic skills of each interaction designer, which is a good way to comb the train of thought, but not the only situation, axure is not the only tool. It is worth trying as long as you can articulate the product ideas, interface UI, process logic, and interactive state of the tool.

For the convenience of product manager, designers, development and project-related personnel can see the intuitive effect of more effective communication, provide intuitive product ideas, explain how users will interact with the product, in the interactive design process will produce a variety of output, such as flowcharts, thinking map, paper on the draft, Even high Fidelity demo draft.

Here is a simple share of their own in the project Process interactive Demo design experience.

　　Axure

Interactive demo software has a lot of, personal more like and accustomed to is axure. Axure operation is simple and clear, for beginners, very easy to use; it also has a powerful interactive demo action, for advanced users, the production of Very High Fidelity demo demo, is also very successful.

　　Balsamiq

Provides a rich hand-drawn style of the web commonly used components, can create close to the paper hand-painted prototype, let people have a sense of the light, the individual suggested that the first draft plan can be considered to use this more attractive.

　　Mockups

Similar to the Balsamiq style, the mockups's biggest feature is the Web page version, which allows web-based storage to be opened online on any computer without downloading the installation.

There are some other tools that I would not introduce, as individuals have not used them, for example:

Microsoft Office Visio, Pencil sketch, Design Studio, Prototype Composer, Lucid Spec, irise Professional Edition, Adobe Reader ...

Each software has its own characteristics, there are pros and cons, but the software is just a tool, with all the same, as long as the habit of meeting their own good, the key is output.

　　Interactive demo with relative Middle Fidelity

Tool, is the design of the demo draft. In the ordinary project, I basically use the Axure tool, is also commonly used tool. and interactive demo also as long as the relative to the state of fidelity can, the so-called relative fidelity is the output deliverable that reflects what the user expects to see on each page, and the relative priority of the content on the page, and provides a description of the process and the way it operates and the state of the response.

Not rough draft scheme, also do not have a high-fidelity visual effect, quadrochromatic scheme, can be hand-painted or close to hand-painted effect of the tool (Balsamiq, mockups), not necessarily need to use axure; A high-fidelity prototype takes more effort and is inefficient, unless it is used to report presentation scenarios, or to produce high-fidelity prototypes for usability testing.

　　First, comply with the grid specification

Many new interaction designers are more likely to overlook this, the result is that the visual designer, in accordance with raster layouts, finds that the content that can be lined up in the interactive manuscript is not in line with the visual manuscript, so it has to return to change the interactive manuscript or redesign the layout.

So to develop habits, at the beginning of the design, must first be based on the grid layout, but also to ensure that the interactive draft font size, spacing as far as possible to meet the visual requirements (such as the minimum spacing of 10 pixels, etc.), so as not to cause unnecessary trouble to the visual.

　　Second, do not use screenshots and colors

Some product personnel or designers in order to be able to easily, pieced together a variety of competing items screenshots, composed of a page. This is not standardized, but also greatly reduced the grade of interactive manuscript, but also to visual designers have some interference, the individual is very disgusted.

In addition, the interactive phase of the output scheme, should be more focused on information layout, content levels, operating procedures. It is not recommended to use color (except text or special State) on the interactive manuscript to avoid unnecessary interference with the visual designer. If you really have some ideas, you can describe them in words, or tell the visual designer what kind of atmosphere you need to create and what you want to achieve.

Let the color, texture, specific situation to the visual designer, more space for visual designers to enjoy their play.

　　Third, do not indulge in complex interactive action effect

Axure provides a wealth of action scripting support that makes it possible to dynamically simulate real-world interface interactions, enabling state switching, time animation, and other amazing gadgets.

But sometimes we need to think about whether we need to spend so much energy and time in our daily work.

This may depend on what context we are designing for this prototype. If the prototype is used for early user testing, or for a high-fidelity demo of resources, it may be necessary for us to quickly produce an interactive effect that is close to the actual interface.

And if it's just for the interactions in the process, provided to visual designers or front-end engineers for development, then excessive design and effectiveness can only be a waste of energy.

　　Four, must have a set of their own control library

The commonly used control, function formation, icon, callout, etc. made into a common standard small unit, inserted into the part library (widgets), in the production of interactive demo, only need to pull out the required control, which can greatly improve your efficiency.

With regard to the prototype control, each prototype tool is available, and can be searched online or called down to share them. But personal advice, or according to DPL, make a set of own standard control library.

　　Use Master to improve efficiency

A large number of pages to make a unified update is also a very troublesome thing. In the production, the direct use of master to make a reusable module, to replace the copy sticky paste, in need of adjustment, only need to adjust the master file.

Master is a feature similar to custom components provided by Axure, which you can use in master design, and then refer to different pages, such as page-ends, menus, etc. on most pages of common content, ideal for master, and then drag in each interface to a specific location. So when these shared content needs to be modified, just modify the Mater.

　　Vi. version archiving is also important

Demo, like the actual product, is iterative and constantly modified, so be sure to remember to archive. Even if you make a change on the same prototype, make sure you keep track of it, which is important for a follow-up review.

Something: Interactive demo design, is the most basic skills of each interaction designer, which is a good way to comb the idea, but not the only situation, axure is not the only tool. It is worth trying as long as you can articulate the product ideas, interface UI, process logic, and interactive state of the tool.