Tencent QQ default expression optimization behind the design story

QQ This version of the new style of expression came out, the discussion about it has not stopped. Today, let Tencent's Master of the LAN to the students to uncover, for what reason to do optimization, in the optimization of what to consider. Seemingly simple expression design, in fact, condensed a lot of thinking, strongly recommended!

　　From simple emotions to expressions

To help convey the mood more accurately, witty engineer Falman (Scott Fahlman) created emoticons. This efficient and straightforward way of communicating information has been used so far.

　　Simple and complicated expression meaning

After the change of the information age and the pluralistic development of the network culture, the meaning of the expression symbol has also undergone many subtle changes. In the QQ expression, we are familiar with the "Smile", from friendly greetings, to almost completely opposite the irony of the meaning; Goodbye "became" I want to be quiet/friends to do ", but also with the original set far apart.

More examples in the QQ expression list, such a situation so that we have to re-examine: Now the user's demand for facial expression, whether still can be satisfied with the default expression? The current network most popular expression two main elements: "Meng" and "cheap", whether also need to some extent into the QQ default expression, Let it be changed in a timely manner.

　　profiling data, finding problems

The default expression optimization involves the details of each expression's appearance, emotional expression, and scene requirements. The heavier the workload, the more you need to quickly sort out the main points of the design. We choose the most concise way to cut into: find the problem, determine the solution, and then solve the problem.

In order to ensure the credibility and effectiveness of the study. We get the overall data of the expression, and we find that there is a huge difference in the number of individual expressions sent. The high heat of expression is naturally more full of the scene value, then the low heat of the expression is because of what reason people forget?

With such a query, we found some typical QQ mainstream users, through the card classification and user interviews and other methods, summed up the expression of the main problem:

Partial lack of expressiveness

Partial use scenario Blur

Lack of network popular elements

visual style of obsolescence

After the problem is identified, the key points of the optimization design become clear:

Enhance emotion and practicality of expression

Introduce popular elements and create new expressions

Adjust expression style, pay attention to younger

　　Emotional and practical, starting with the details

　　The linkage of facial features

The facial expression of a person is not only determined by the movement of one part, but by the whole joint action. For example, a sincere smile is often accompanied by the corners of the mouth and eyebrow. A sad cry is not only tears, but also should have a tangle of corners of the mouth. The entire facial muscles are completely associated, although the expression in the interface of the volume is very small, but a slight change, can make the expression more vitality. In order to enhance the emotion of expression, we have the facial features linkage optimization for most of the expression dynamics.

Here are some of the more typical examples:

"Twitched" increases the dynamic effect of the mouth and eye, with the floating of the eyebrows will have a more overall sense.

"Color" increases the eyebrows and mouth floating up and down, with the enlargement of the eye to reduce the overall drive.

"Stunned" in the nasal drop at the same time the entire facial features also followed by the movement.

"Proud" is added to the reflective effect of sunglasses, open mouth at the same time because the mouth will lift up the eyebrow and the position will have a slight affect.

There are many expressions based on the classical continuation of the consideration did not make too obvious adjustments, but also based on the principle of linkage to fine-tune. Interested students can also look for subtle changes in the 0v0~

　　The perfect degree of action

Whether the expression is correct means a trade-off between the full and efficient transmission of the action. Part of the expression was also reconsidered and adjusted for these two points.

"Hush" and "Shut up", itself has a certain similarity, the prelude is also longer. Therefore, the dynamic effect of the emphasis on the distinction between the strengthening of their respective characteristics. Hush more emphasis on the other side to silence, and shut up to emphasize that they can not make a sound. With this kind of adjustment to make the semantics more concise, improve the expression of reading efficiency.

"Vomiting" also eliminates too long prelude action, directly into the subject of vomiting, strengthen spit itself.

The following expressions are perfect for the action itself:

The emphasis of the "beat" is the strength of the blow. Adding a slight strain to the head at the instant of the strike also makes the percussion more forceful. At the same time the hammer changed to a wooden mallet, the volume became larger, the material was softer, more friendly banter. The curve of the percussion effect line is replaced by the star effect, more in line with the mainstream comic expression, easy to accept young people.

The dynamic of "show Love" complements the Kissing action "mua!" Of the middle State, so that the whole movement is more complete and easy to understand.

"Broken Heart" in the process of landing, due to the weight of the heart flap, there will be a slight rebound effect, such a supplement also makes the heart broken more forceful feeling, strengthen the mood itself.

　　Dynamic re-system, derivative new expression

We also have a large number of changes in the expression, making it more exaggerated, meaning more clear. Even consciously change the meaning to become a new expression in a sense.

This part of the changes selected the use of low and with other expressions of high repetition. This allows some unpopular expressions to be reused, or even to dig out more usage scenarios and semantics. From the perspective of risk, this kind of expression after the change, in the original context is also easier to find alternatives to avoid the blank scene.

"Sleepy" added to the nasal vesicles, more close to the comic narrative expression, easy to understand.

"Anger" shortened the prelude, changed the expression of facial features, more impatient.

"Panic" strengthens the eye range and the overall sense of linkage, add eyebrows to strengthen the sense of panic.

"Hunger" as a whole, to shorten the sense of distance, and add a blow to the mouth of the little gestures, strengthen the meaning of greed.

"Naughty" let the tongue sway around, strengthen the sense of base, more naughty.

"Curse" changes the expression of the mouth, weakening the sense of seriousness, strengthen the sense of madness, more easy to use for acquaintances.

"Cold Sweat" and embarrassing, sweating, etc. very close, so increase their emotional specificity, adjust the eyebrows to strengthen the entanglement.

The "surprise" static figure is not much changed, but the dynamic adjustment from "Wow!" Become "Woo Oh ~ ~ ~ ~ ~ ~" Enhanced irony and a sense of base. Make the expression more applicable to many contexts.

"Scare" on the dynamic and surprised made a more obvious distinction, reduce the repetition of expression meaning. and add a sense of convulsions and green face enhancement "scare!" The feeling.

There are a lot of expressions also focus on the semantic enhancement, this is not a list of ~

　　The style of light texture, the younger route

　　Divergent thinking

For the overall optimization of the style, we initially tried various possibilities, such as adding the body to the expression, such as removing the contour of the face to make the facial features more prominent, or breaking the size limit to enhance the overall expressiveness. Hope to make the emotional expression more clear and clear.

However, the QQ default expression has its particularity, it needs to small size, but also to ensure a clear emotional expression, and can be hosted in the graphic mixed row of bubbles. Therefore, with the outer contour line, omitting the body's small round face, is still the most appropriate way to behave. The details of the expression can be on the original basis, to join the younger generation of more receptive comic-style techniques.

　　Combine the use of scenes to extend brand sense

In the process of formal design, it is necessary to consider the online use of expression in more detail. such as the default expression and the need for text interspersed typesetting, as well as the actual volume of the expression of the impact of visual expression. There are also a variety of bubble color matching.

In addition, in order to ensure the continuity of brand sense, we continue the basic tones of the old version, and combined with the trend of flat light texture to readjust the color and expression texture.

In the end we chose to use contrasting lines and brighter and softer colors in order to ensure that the content of the expression was clear in a variety of background colors.

　　The design idea of the component-simplified

The expression of the design is very heavy and huge, more than 100 dynamic expression, to ensure the efficiency and unity of the design is extremely important.

In the expression design, we choose the component of the idea to design. For a variety of facial elements, summed up and sorted:

Different types of eyes, rearrange the overall consistency of the eye spacing

Different kinds of eyebrow, adjust the consistency of the thickness

Consistency of the mouth, inside and outside, teeth, tooth lines, tongue expression

Facial expression elements, such as cheeks, shy lines, hand style, black line, water droplets, green face, have been integrated

The component makes the design details of the whole expression more sense and consistency, and also improves the efficiency of mass design. At the same time, in many of the expression optimization process, you can also use the replacement component to try more possibilities to find the best solution.

　　Set up general specification and perfect expression of articles

Remove the yellow face part of the expression optimization. As the old version of expression lacks integrity and systematic design norms, with the historical replacement and precipitation, inevitably produced in the article expression of some inconsistent style of detail. Therefore, in the optimization design process, also need to be a new style of unification.

We will all the items to adjust the expression of a micro-overlooking perspective, standardize the rules of line thickness, and continue the small yellow face part of the color tone to ensure the consistency of the whole expression.

　　Written in the last

Seemingly simple design, often have more to dig the connotation. The default expression not only needs to pay attention to the visual style of beauty and fashion, but also need to understand the context of each expression and the connotation of the times. If only used as a way of thinking to optimize the expression, it is easy to disengage from the emotions and scenes of the expression itself. And the default expression contrast to the mall expression, it needs more people and scenes of universality, to avoid excessive exaggeration and personalization.

In order to find a balance in a variety of factors, we have done many times in the design process of different scope and target user group market research, which is the default expression design is very important.

Facial expression optimization has laid a follow-up function of the style foundation, we will continue to improve the new version of the expression of the experience and play, welcome you to continue to pay attention to our design optimization, put forward valuable advice 0v0~