I You–avatar Talk design sharing

With the gradual maturity of the mobile communication Internet, the communication applications of text, voice, picture, video communication (QQ, micro-letter, Whatsapp, line ...). Available。　　We are thinking, if there is a new form of instant communication to bring breakthroughs, will not achieve a unique app? We hope it is very interesting, novel, can bring new interaction between friends, solve the problems caused by embarrassing environment and bring new opportunities to make friends, but also need to meet the mobile equipment, energy saving and provincial traffic demand. So we started to design a fun video Im--avatar TALK.

Here is a brief chat with you about the whole process of designing avatar talk, and the problems and solutions encountered during the process.

Pre-research

What exactly is AVATAR talk?

It is a new type of video communication tool, which mainly uses face recognition technology to make real-time video call and interact with friends in virtual image. It includes the Avartar (role dress system) +talk (Video Call) function.

The App Store and GooglePlay have yet to discover the application of virtual interactive chat. So we try to use the virtual image and provide 3 kinds of avatar models for testing. Evaluate the visual effects, design costs, and performance efficiencies of various models (pictured below) and quickly finalize bitmap scenarios.

Interactive design

The entire software consists of three modules (AVATAR TALK, Contacts, conversations), naturally creating a powerful portal. In order to strengthen its intimacy with users, through a wide range of adjustment information ratio, so that users can be immediately attracted by the virtual image, but also to facilitate the later information expansion.

In the process, we encountered 2 big problems.

1. Personal homepage

How to design a personal homepage is one of the most difficult problems. On the basis of the initial proposed Quick mailing list (text-oriented homepage) and personal dynamic wall (showing the static virtual image and the home page of the floating message), the final optimization becomes the dynamic homepage. That is, the user can use face recognition, the operation of Virtual cartoon image, play with their own to increase product interest, improve the user experience (as shown below).

2. Chat interface

In the chat interface layout arrangement also produced a disagreement, once became the bottleneck of design.

The traditional Chat size window mode does not apply to Avatar Interactive video chat. When you have exaggerated interaction with your friends (such as punching him in the fist, throwing an egg, and flying a crow-like horse without a word), we also hope that the reactions of both parties can be perceived in time, thus creating the next step of interaction.

Because of the hardware constraints, a variety of mobile phone camera positions are different, shooting angle visual angle is limited, but also take into account the rational layout of the interface design factors, the two side in the same scene layout can not be achieved.

Environmental and technical constraints, coupled with Avatar is controlled by the expression, into the group of multiple rounds of brain violence, and finally agreed that the use of 1:1 split way to more fully display both facial expressions and interaction. (pictured below)

Animation development

Developing animations is a whole new endeavor for the team. In order to ensure the application of lightweight, maximize the flexibility of interactive animation, using the program to complete the whole animation method (as shown below).

Because interactive animation is irregular motion, the animation demo is first given by the interaction, and the animation rules of each part are reviewed and then exported. First use the temporary material to make a demo, when the final animation to complete the vision to optimize the corresponding components, improve efficiency.

Visual display

In the Android system, the program entry is split into 3 modules for Avatar talk to be lightweight. are: "AVATAR TALK", "Contacts" and "sessions."

The design of the entrance finally chooses the planar visual expression to fit the whole style. From the three-dimensional icon to optimize the light weight of the paper effect, better interface with the overall style.

Design experience

Design to promote the product, both the need for the designer's intuition, but also the product has a multidimensional degree of full consideration, in order to quickly and effectively focus. How to grasp the core of thinking becomes an important challenge.

In visual design, the prototype structural skeleton design (the body structure of the character, simply speaking, is the appearance of Avatar) has a great influence on the later stage of animation implementation. Only the joint of each activity can be properly split to match the production of good animation, showing the ideal dynamic effect, more seamless convergence of products at the later stage of the function; only fixed the range of activities of the skeleton, can make the prototype in any dress under the movement freely, accurate fit.

Conclusion

AVATAR talk like the movie Avatar in the same, with the new chat mode to let users feel "eyes meet, Heart connected" video communication experience!

I you!