Product interaction prototype design tools sharing

An important task for interaction designers is to design product prototypes (Prototype). And the most basic work of product prototype design is to draw the general wireframe (frame chart) of the site and combine annotation, a lot of instructions and flowchart, and make the product prototype complete and accurate to the product, UI, refactoring/http://www.aliyun.com/zixun/ Aggregation/7433.html "> Development engineers and so on, and through the communication repeatedly modified prototype until the final confirmation, and then into the follow-up design development process."

To complete the above complex design and communication work, a good prototype design tool is needed. Here are some common and more popular tools to share:
Word (Product Manager is more commonly used)
Fireworks (promoted in an interactive group)
Balsamiq Mockups (Recent high exposure rate)
Auxre RP (widely circulated in industry circles)

Comparative advantages and Disadvantages

Second, the operating interface contrast
Word: The basic Drawing toolbar is the various wireframe to draw wireframe.

Fireworks: Draws wireframe from the common Library's Web prototype component library.

Balsamiq mockups: Operates similar to FW, through the top of the control to the work area to draw wireframe.

Auxre RP: Basic operations similar to Fw,mockups, 3 is the work area, from the 5 control library lira to the work area draw wireframe.

The control library contains a number of Widget objects that are frequently used, such as buttons, pictures (image), text panel, radio button (Radio button), check box (checkbox), Drop-down menu (droplist )。 You can even design dynamic interfaces, such as Pull-down menus, page signings, or even more advanced Ajax or RIA functions, with the function of the Dynamics panel.

Axure RP compared to other prototype tools, there are several characteristics of the following:

• Area 4 Sitemap (List of pages)
It is possible to quickly draw a tree-like web site map based on the list of pages, and to have each page node in the architecture diagram directly link to the corresponding page.

• Area 6 Masters common template function.
When designing wireframe, if you can make good use of the Masters Common template feature, you can save a lot of time to repeat changes, master can be often used in the widget collection, such as: The top of the page, the end of the page, or a login screen.

• Area 8 for advanced interactive operation areas
Most widgets in wireframe can produce actions on one or more events, including OnClick, onmouseover, and OnMouseLeave, and so forth. Simulate the lifelike interactive work, the very aspect carries on the demonstration and the explanation.

• Auto-output Web site prototype (HTML Prototype)
The Axure RP can export the wireframe you design to HTML prototype that is compatible with different browsers, such as Internet Explorer or Firefox.

That is, you do not need to install axure RP or any other software, you can directly e-mail the resulting prototype files to customers, or publish to a Web server for customers or users to view and manipulate, prototype including Sitemap, Page Notes, The interactive effect of annotations and functionality is a tool that effectively tests the proposed function and communicates the design clearly.

• Automatic output Word format specification file (functional specification)

Axure RP can output files in Microsoft Word format, not only easy to read, but also can show the specialty of the specification document, can effectively record, communicate and obtain the final confirmation of design.

The specification file contains a table of contents, a list of pages, a page and annotated master, a captured screen, Annotation, consortium, and widget-specific information, and an end file (for example, an appendix), and the content and format of the specification can be changed according to different reading objects.

Example Operation comparison

Here, we use the above tools, the actual operation, to create a simple prototype design examples to see the performance of each tool.
We will actually produce a tab view example.

Word:

Insufficient: not good for interactive expression, also not conducive to demonstration. (a basic page is divided into 3 pages, and one page can be seen to express the interactive effect);

FW: Page effect with Word.

Insufficient: not good for interactive expression, also not conducive to demonstration. (a basic page is divided into 3 pages, and one page can be seen to express the interactive effect); The extension and modification of the control is not convenient.

Balsamiq mockups:

Insufficient: not good for interactive expression, also not conducive to demonstration. (a basic page to be divided into 3 pages, and a page to see to express the interactive effect);

Axure RP: The basic appearance and word, FW difference is not.

But the most amazing thing is that he can generate a real page that demonstrates the effect of the tab switch, while generating an interactive documentation in Word format (the instance is not available for download).

Iv. Summary
Through the comparison of the above several aspects, 4 prototype tools are comparable in the basic operation of drawing wireframe, each has its own characteristics. But Axure RP is quick and easy to create catalog-organized prototype documents, feature descriptions, interactive interfaces, and annotated wireframe Web pages, and automatically generate Web pages and Word documents for presentation to provide a win-win presentation and development, and we give them a ★★★★★ evaluation, The product manager is worthy of basic prototype design and interaction Designer to do fast high-fidelity prototype of a sharp weapon.

Source: http://webteam.tencent.com/?p=1741