Do interaction should know the visual a few things

Occasionally I hear product managers and interactive design complaints, visual design and original planning is too different, I have encountered similar situation. The reason is that most of the problems in communication.

Effective communication, the equivalence of information is very important. This equivalence includes both making visual design understand product requirements as early as possible, acquiring information that is equivalent to other people, and communicating with each other in the field of knowledge and understanding each other's areas of content.

For the interaction designer, visual design is the most cooperative part, and the interactive prototype should be presented in visual form in the eyes of the users. Therefore, understanding some visual design, it is easier to pass the interactive solution to the user. At the same time, interactive design as a multi-disciplinary intersection of positions, understand some of the vision is their ability to improve. Zhuge Liang has a good saying, what knows a little bit, life will be more colorful.

To cut to the chase, to introduce you to some of the visual principles, in order to better understand, I give the example of Weibo.

Express product style by font

In visual design, the choice of font for the performance of the product style is obvious, the same paragraph of text, with different fonts to write, feeling really vary.

Microblogging the most commonly used in the release box, the top "What's new to tell you" using the Kang doll body, reflecting the microblogging release anytime, very easy product feeling. If the font to replace the "XXFarEastFont-Arial" and "Microsoft Ya Bold", not feel like the daily, is completely without style, experience is much worse.

Home Page This sensational text through the handwriting (FZJINGLEIS-R-GB), in the form of diary, to express the Medal of Life, record the growth of the product feel, if replaced by the general font, feeling is gone.

through color display product positioning

It is also a necessary method for designers to display product positioning by color matching. The early stage of visual design research, often through the emotional version of the target users to refine the color, forming a set of color scheme.

Purple, Keywords: elegant, noble, feminine, solemn, sacred, mature, depth, mystery, fashion. Micro-music as the starting platform for music positioning, purple more highlight the fashion charm.

Red, Key words: Art, enthusiastic, open, passionate, positive, energetic, festive, life, mature. Micro-live broadcast to reflect the pomp, passionate red is very suitable.

Blue, Key words: Reason, knowledge, justice, business, science and technology, strict, meticulous, rigorous, formulation. The fairness of the vote, as well as the rationality of the micro-data, rigorous, doomed products to the main color blue.

Orange, Key words: sunshine, brilliance, activity, warmth, memory, family, health, happiness. The participation of micro-activities, the glory of the list, of course, there is also the contrast of orange tone.

Green, key words: growth, simplicity, public welfare, life, security, freshness, peace, spring, nature. Micro-Boda is a grass-roots users of a product, they through the micro-blog behavior, a little bit into a field of grassroots stars, green color matching is very consistent with this feeling of growth, micro-public welfare will not say more, certainly green most suitable.

Create a unified brand image

Brand image is a big field, specific to a micro-Bo product brand sense, more or through the visual image to convey. This requires 10243.html "> visual designers to develop a system of visual systems that allow users to look at them and identify them clearly."

Micro-Group brand image is recognized by everyone, project planning, hope to show the relationship between people and groups, people, and group of sense of belonging. Visual designers use the planet, spacecraft and human visual elements, tells the "each group is a planet, everyone has a common interest" story. The whole site to dark blue as the main color, creating the feeling of the stars, when users see this color and elements, they know that they came to the micro-group page.

When the system was launched in Beta, the people aboard the spacecraft found the right planet and landed soon.

Novice guide, but also cleverly put this element into the image, and enhance the brand sense.

The rank of the group, with the trees on the planet to reflect, the higher the rank, the more lush trees.

Help pages, personal pages, publishing pages, and so on ... Will not be introduced, in short, we observe, we will find that the micro-group everywhere are reflected.

styling makes the product more impact

Visual design, exaggerated shape of the user's impact is very large, it is easy to grasp the user, this design often appears in the theme page and personalized skin.

"With micro Bo to travel" This topic, the designer in the head diagram design with a diagonal processing, even the part of the button is tilted, which and the following structured modules formed a contrast. Our interactive design of the prototype, the layout is often horizontal vertical, and sometimes visual performance to break this rule, will play an excellent effect.

"Weibo has Love" topic is also a good example, clasped hands and the title formed a inverted triangle, "Get Valentine's Day medal" placed in the triangular tip, the theme and the most important operation, pushed to the user's eyes.

"The Micro-Status medal" and "2012来" in the special topic, the feeling will be out of the screen models and ships, but also performance page impact is a good example.

important content to stay in the first screen

This is the visual and interactive designers have to pay attention to, sometimes often in the prototype in the first screen, visual design for some reason (plus module or heightening the head figure) and was squeezed below, this point in the visual audit and testing to pay special attention to.

We look at the picture below, the big screen is a negative example, the first screen incredibly put an ad, and micro Bo desktop to do much better.

Because most of the user display is still 1024x768 and 1280*800 resolution, remove the browser height, the important content or try to put in 600 high.

let the page have a level of focus

The interactive designer completes the page layout design, highlights the page focus, facilitates the user to browse the information, completes the task. Visual design stage, good design manuscript for the continuation of the early interaction concept, guide user operation is very helpful.

First look at the micro-blog example of the main station. Visual designers through the color block to the left of the page, the main content area and the right module area apart, users browsing micro-blog information, the line of sight will not be interfered by both sides. And the same layout of the Micro-blog album on a few, light gray left guide is not clear, the right and the main content area does not have a clear demarcation, users can hardly find the focus of browsing.

Then look at the micro-live home, the most important is the top of the page recommendation area, the designer with the extension of the Red module, and below the light gray to form a contrast, the focus is highlighted.

simulated real-world matching user mental model

The prototype design is often said that the mode of operation to meet the user's mental model, in fact, visual design is the same. Take some realistic elements, simulate the real world, will give users the feeling of immersive.

In the home of micro-radio, the scale on the bottom of the program simulates the FM design of the radio. And the Music Box design is more wonderful, the style of the record machine and rotation effect, let the user feel really in listen to the record.

illustrations make products more emotional

The illustrations are many in the microblog, and I'll just cite the example of the error page here. Everyone has feelings, the wrong experience is very bad, but the designer with a picture, let this frustration and anxiety of the feeling to the lowest. The embarrassment of the sweater needle broken, the activity balloon and the polling column, all humorous to dissolve the user's negative feelings, and the product is more flavor.

It is worth mentioning the design of the micro-group, as we said before, the micro-group brand elements are: the planet, spacecraft and people. In this brand positioning, a few error conditions are very good performance, I do not say, we see it.

with icon, the page is more exciting

Icon design is a very important part of visual design, a lot of obscure content, with icon graphical interpretation, it will be easier to understand. Conversely, if the design element of the icon is not appropriate, or if the icon will be used to clutter the background, it will interfere with user understanding.

Micro-broad screen home, the designer used 3 icon, with the copy to explain what is the big screen.

Each product help page, also often appear icon. The help page is similar to the product specification, and many of the contents are stacked inside, and the user can easily find the desired information by category by distinguishing between the icons.

Grid improves user experience and lowers development costs

Grid in visual design, more and more attention, the original, mainly is three: one can unify the layout of the page, enhance the user's browsing experience; the second is to standardize the size of the page module, reduce the cost of development and maintenance, finally, Grid is also the embodiment of web design professionalism.

In the design of the main station, the grid system is used, the grid width is 20px, the gap is 10px (the whole width of the page is 950px). Writing blog, I looked at the product of the following situation, mostly good, the best of which should be micro-public goods.

So far, the principle of visual design is finished.

Having said so much, and finally talking briefly about what we should do as an interactive designer. Before thinking about this issue, please review the above principles again:

1. Express Product Style by font

2. Through the color display product positioning

3. Create a unified brand image

4. Shape makes the product more impact

5. The important content stays in the first screen

6. Let the page have a level of focus

7. Analog real-world matching user mental model

8. Illustrations make the product more emotional

9. Use icon page more wonderful

10. Grid to enhance the user experience and reduce development costs

In general, we can classify these 10 elements into two categories: one is the field of visual designer, the other is communication, and the other is that interaction can be done in conjunction with visual design, and communication is focused on delivery.

The first category includes: Through the typeface expression product style, through the color display product localization, the creation unified brand image, the modelling lets the product have the impact, simulates the real world to match the user mental model.

Understand the content and understand what visual designers can do to improve their experience to communicate better. Let the visual designer understand the demand early, obtain the equal product information, can exert the power of the design better.

The second category includes: The important content stays in the first screen, lets the page have the level to have the focal point, the illustration lets the product have the emotion, the clever Use icon page is more splendid, the grid enhancement user experience and the development cost.

Such principles, in addition to effective communication with visual designers, are best reflected in their deliverables-prototypes and explanations. For example, the prototype through different grayscale color block performance design focus, focus on the various components of the grid, for the focus content set illustrations and icon placeholder and so on. Through this understanding of visual design, delivery forms, with visual designers to make more consistent with product requirements and user experience products.

Source: Weibo UDC