Website Design Analysis: Some suggestions on interactive demo design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

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 presentation.

Here is a simple share of the project in the process of 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 consider this more attractive.

Mockups

Similar to the Balsamiq style, the biggest feature of mockups is the Web page version, which can be opened online on any computer without a download installation.

Other tools are not introduced, 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 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 fidelity of the state can be, 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 too high fidelity visual effects. Draft plan, you can use hand-drawn or close hand-painted tools (Balsamiq, mockups), not necessarily need to use axure; A high-fidelity prototype takes more effort and is not efficient, unless it is used to report presentation scenarios or to produce high-fidelity prototypes for usability testing.

I. Compliance with GRID specifications

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 interactive manuscripts to avoid unnecessary interference with visual designers. 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 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 on our daily projects.

It also depends on what context the prototype is used for. If the prototype is used for early usability testing or for a high-fidelity demo of the resource, we may need to quickly produce an operational 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 to develop, 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, which can be searched on the web or invoked by others to share. But personal advice, or according to their own habits or product design specifications, the production of a set of standard control library for their own use.

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 paste, in need of adjustment, only need to adjust the master file.

Master is a feature similar to custom components provided by Axure, where you can design common interactions in master, and then use different page references, such as page-ends, menus, and so on on most pages of common content, which is 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 changes 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.

(Original link: http://heyuchan.com/?p=529)