Sohu Designer: Talk about my common set of interactive design tools

First contact interaction design is often faced with their own ideas can not find the right way to output, so complete the basic work at the same time also actively looking for, learning and working environment to match their own tools. When working with team members, no one cares what tools you use, and members just want to see what the designer outputs. Finding the right tool for different task types and team sizes at this time allows the designer to quickly output the desired results output from the team.

With the rapid development of mobile Internet, a lot of tools for mobile end development, these tools of small, fast, targeted characteristics to a certain extent to the production and distribution design tools caused a certain impact.

The following describes your own common set of design tools and in conjunction with the use of projects in the process of experience:

　　Axure

It's rarely used now, but it's the first software to come into contact with the Internet as a souvenir. Functional all-inclusive, there are rich control can be called (online for Axure control resources a lot), through a simple logical relationship composed of rich animation (8.0 in the dynamic production has significantly improved). But it is precisely because of its all-inclusive to the mobile end of the design is not flexible, many functions and complex. The design of the software itself does not conform to the work habits of designers, when the elements of the drawing panel is very confusing, the output is inflexible. Of course axure can make a high-fidelity interface, but compared to sketch cost a lot, if not more to build the master, after two times three times the cost of modification is very high. Most product managers axure the artwork and generate HTML as a document to pass on to the team members on the next workflow.

Draw a high, low-fidelity Web page prototype, can be used as a product, interactive document output tool.

　　Sketch

Software that is designed entirely for the mobile end. The interface is clean and intuitive, the concept of layering conforms to the designer's working habits, and when the interface is complex, clear layers and groupings make the element control very convenient to manage. The use of artboard, symbol, and text style simplifies the work of repeating content calls and eases subsequent modifications, and document output management is better than axure. Third-party plug-in development and Control library resources to make the design more convenient, there are many other small functions, such as share (with other computers can watch the design progress in real time), they also use edge to find. Compared with Axure, the former is more suitable for web design and the latter is more inclined to move end products. Foreign sketch already have replaced PS, axure trend, domestic also began to popularize, some company team forcibly unify use sketch.

Draw a high, minimum real mobile end of the prototype map, draw the icon, visual design Draft, the output can be cut, can be used as interactive documents and visual design documentation of the output tool.

　　Omni Graffle

A flowchart tool. Flowchart is nothing more than diagram and line arrangement, oneself also useful ai, sketch painting flowchart. But when you want to change it will be very confusing, the line to repaint, layout to rearrange. While the graffle is designed for process logic, the line moves along with it, and the attributes of the line can be changed and typesetting is very convenient. Layers are designed to facilitate the management of interface elements, and it is clear what elements are tied and which are parent-child set relationships. The process of interaction, the structure of the function, the relationship of the organization, the design of the relational logic Graffle is the best use of the process design software.

Product Functional Requirements Logic diagram, product page interactive logic diagram.

　　Keynote

Generally used as a presentation of the software, in fact, can also use to output prototype demo video. In the process of development, designers often cannot communicate the interaction process clearly to the engineer through the still image, at this time need to make the animation prototype to show the solution. The animation needs to arrange the display logic, set a lot of dynamic parameters, and sometimes even involve the dynamic change curve, these complex logic parameters increase the production cost. Engineers just want to see a simple demo, and they don't care whether you have spring,delay a fraction seconds in this interactive feedback, and then you can use keynote to make the action video. First draw a sketch to display the order and time, list the display page on the keynote, and connect the page with the Magic Move and the control animation.

At the same time, its own graphic editing properties, pagination display properties, can be inserted into the prototype demo animation features so that keynote can be used as interactive documents and design specifications of the output tool.

Make a simple interactive video; compose interactive documents; Write design specifications.

▲ the error prompts the interaction

　　Pixate and Quartz Composer-origami

Both are interactive prototyping tools that can generate simulators or mirror to mobile phones, and more visually refine design interaction prototypes. The former has been bought for free by Google, the biggest feature is the use of the layer concept, interactive gestures, animation directly to the layer, and base on the page link. The latter is Facebook's plugin on Apple's native quartz composer animation design software, which greatly reduces the threshold for design use. Feature is modular, with programming logic to make animation. The different interactive gesture and the dynamic effect style have each module, uses the line to link the module, the software dynamic effect invocation basically originates from the FB pop animation library. Both the learning cost is very high, especially the latter, the page many, interactive production panel is very complex, but make the dynamic effect of accurate and beautiful. It can be applied to a few important and accurate interactive prototyping in individual pages.

Make accurate interactive and dynamic prototypes.

▲ Complex Scroll interactive effect (copy)

　　Principle

Just came out shortly after the prototyping software. The Operation interface and sketch are very similar, through different interactive gestures to connect the page, the most important feature is the high degree of visualization. Sketch in the production of high fidelity prototype can be dragged directly into the principle, for the picture itself and the picture to give interaction between, mirror to the phone, used to report their own production of the demo is very convenient. The animate and drivers can also produce a slightly complex animation with conditional statements, but it can not be compared with pixate and Qc-origami. With principle direct mobile phone to the projection on display demo, other mobile phone installed on principle can be opened by mail received the demo file, the review more intuitive, eliminating the reporting process in a lot of text description

Make a simple interactive prototype, make a global prototype demo.

▲ Simple interactive mirror on the page to the phone for scrutiny

　　Tools are just tools.

The above is a series of software that you often use from prototype diagram, interactive prototype to document output. The tool is simply to efficiently display our ideas in the most appropriate way, to make it easier for others to understand and archive. The tools themselves are not good or bad, depending on the right tools to choose from different scenarios and outputs. If you draw the object style interface, icon, sketch in front of PS and AI is powerless; in a large team, the document output is more formal than the output document with Axure, which is more useful for archiving and future viewing, forming the knowledge base of the company team.

I have always struggled with tools to do industrial design, and see other people's excellent works are often focused on "what is this rendering?" What software is built for this model? Ignoring the user's ideas and ideas. At that time also learned a lot of software (PS, Alias, Showcase, keyshot, etc.), now in retrospect left more is the idea of industrial design thinking. I hope you can clearly understand the meaning of tools, to find and master a set of their own handy tools, more important or to see the users come up with creative ideas, must not tangle in the tool.