二次元探索 | 卡噗3D角色设定

腾讯ISUX

发布于 2019-10-16 10:40:11

1K0

发布于 2019-10-16 10:40:11

文章被收录于专栏：腾讯社交用户体验设计腾讯社交用户体验设计

腾讯ISUX

isux.tencent.com

社交用户体验设计

随着3D角色成为一种趋势，QQ的厘米秀也从原来的2D升级为3D风格。为了设计出与众不同的3D角色，同时又能体现QQ用户的品味，我们经过了大量的调研和测试。在本文中，我们将详细介绍厘米秀设计的整个过程。

As app/game using 3D avatar became a trend, QQ’s avatar service CMshow(厘米秀) has been renovated from the existing 2D to 3D style. To design a new style of 3D avatar which can be different from the other 3D avatars and also applying the QQ users’ tastes, it has undergone a lot of investigation and test processes. In this article, we will introduce the whole process of CMshow design in detail.

STEP 1

风格研究

在开始设计之前，我们对市场上各种类型的3D角色进行了整体调查。虽然已经有各种各样的角色风格，但我们专注10-20岁QQ主要用户的品味，设定了一个方向。大的方向被确定为略微夸张和有特色的样式，而不是成熟的过于逼真的，从而使年轻用户获得可爱而友好的感觉。

Before we started the design progress, we conducted a survey on various types of 3D avatar styles in the market as a whole. Although there have already been a variety of avatar styles, we have set a direction to focus on the tastes of QQ's main users, which are 10-20s. The big direction was decided to a slightly exaggerated and characterized style rather than an overly realistic description that can give mature feeling so that young users can get cute and friendly feeling.

STEP 2

确定比例

首先，角色的身体比例设定为1:4.5。我们进行了几项测试，目的是找出一种比例，让脸型略大一些时，既不影响整体造型，又给人一种可爱的印象。为了使各种动作在小屏幕上清晰可见，手和脚被设计得很大，并且手臂和腿部被延长，以便可以应用各种姿势和动画。此外，男性和女性的关节厚度相同，所以不同的服装可以自由交换。

First, the avatar body ratio was set at 1:4.5. Several tests were conducted to find a ratio that did not hurt the overall style while giving a cute impression by making the face slightly big. In order to make the movement visible on a small screen, the hands and feet were designed to be large, and the arms and legs were extended so that various poses and animations could be applied. In addition, the thickness of the joints are identical between men and women so different costumes can be freely exchangeable.

STEP 3

设计脸型

1) 漫画式人脸

在设计对角色有重要影响的人脸上，项目早期我们做了许多实验。主要分为三大方向进行：令人想起迪士尼人物的西方风格，体现亚洲特色的东方风格，日漫常见的漫画风格。

西方风格和已经非常流行的3D角色 Zepeto很接近；参照了中国艺人和中国动画设计的东方风格缺乏新鲜感，似乎没有什么吸引力；最后的日漫风格给人可爱亲切之感，满足许多人的品味，同时也区别于其他3D角色的设计。

There were many experimental processes in the early stage to design the face which most greatly influenced the impression of the avatar. The test was conducted by dividing into three major directions: western style that can be thought of as reminiscent of Disney characters, oriental style reflecting asian characteristics, and comic style that can be seen frequently in Japanese comics.

Western styles gave a similar impression to Zepeto, a 3D avatar service that has already become very popular, and oriental styles designed with reference to Chinese entertainers and Chinese animations did not seem attractive as they look old. The last Japanese comic style that we reviewed gave a cute and friendly feeling, and also satisfy the taste of many people while differentiated from other 3D avatar designs.

2) 可修改的结构

在基本的人脸设计中我们应用了Blend系统，使用户能够优化自己的角色，该系统允许用户切换眼睛、鼻子、嘴巴、下巴线等形状。因为在系统上可以详细地调整形状，所以能够设计出各种类型的人脸。

In the basic face design, the blend system is applied to enable the users to optimize their avatars. The blend system allows the user to transform the shape of eyes, nose, mouth, jaw line, etc. It is possible to adjust the shapes in detail on the system, so various types of faces can be designed.

3) 各式妆容风格

除了脸型，我们还根据用户的品味提供了眉毛、眼影、唇膏、腮红、纹身等各种选项与效果。用户可以在角色上选用一些大胆的妆容，呈现他们在现实生活中难以尝试的个性。根据用户的自定义，不同风格的角色将会被创建。

In addition to face shape, various eyebrow style, eye shadows, lipstick, blushers, tattoos and other options were provided to apply various effects according to user's taste. Users can apply some bold makeup style on the avatars to express their the personality which they might feel difficult to try in real life. A different style of avatars will be created depending on how users customize it.

STEP 4

设计服装

服装款式的设计以主题为基础，主题根据分析现有厘米秀用户的品味数据而确定。新的3D设计不仅由流行的2D风格转变而来，还经过了重新的诠释。例如，如果主题是中世纪的斗士，我们会顺应潮流，以更现代的形式诠释他们，而非设计典型的服装。此外，还观察与系统其他服装兼容的可能性，避免过于复杂的形式，使其在系统中能以较小的尺寸实现。

The costume style design is based on the theme which is decided based on the data that analyzed the taste of the existing CMshow users. The new 3D style design is proposed through reinterpretation, not just changing the popular 2D design to 3D style. For example, if the theme is a medieval fighter, we reinterpret them in a more modern form to follow the trend instead of designing typical costume styles. In addition, the guide was observed for the possibility of compatibility with other costumes in the system, and the excessively complex form was avoided so that it could be implemented in the system as a small size.

STEP 5

使角色移动

角色设计完成后，必须进行优化以应用于系统。要应用于系统，必须调整多边形的数量。因此，有必要删除和简化不必要的部分。当角色被依次植入作为运动参考点的骨骼，以及决定运动范围的皮肤重量时，将拥有一个可以移动的基本结构。已经完成基本移动结构的角色可以应用于各种各样的动画之中。

After completing the avatar design, it must be optimized be applied to the system. To apply to the system, it is necessary to adjust the number of polygons. So it is necessary to erase and simplify unnecessary parts. When the avatars are sequentially performed to plant bones that will be the reference point of movement, and skin weight work that determines the range of movement, the avatars will have a basic structure to move. Avatars that have completed the moving-based work can be applied with various animations.

STEP 6

设计房间

角色的房间设计也使用了3D风格，这样用户可以使用物品来装饰。

The avatar room design was also proposed in a 3D style, so that users can decorate the room using items.

STEP 7

应用系统

设计好的角色和房间被应用于名为卡噗的个人APP和QQ之中。在卡噗，用户可以进行人脸和服装设置、房间装饰以及拍摄各种概念照片等。这些设置好的角色也可以在QQ上应用，因此，当用户在聊天时，可以使用emoji功能与朋友进行有趣的互动。

The designed avatar and room are applied to individual app called Kapu and also on QQ services. In Kapu, face and costume customization, room decorating, and taking various concept photographs can be done. Customized avatars are also applied to users’ QQ, so when talking on a messenger, users can have interesting interactions with friends using emoji functions.

后记 Epilogue

这是一个以厘米秀为概念，反映用户可以根据他们的喜好来装扮角色的视频。角色自由舞蹈的服装会随着流行音乐而改变表达了该项服务的特征。另外，在3D动画中添加适用舞蹈动作的2D效果，显现了卡噗品牌独有的卡通风格元素。

The viral video was created by reflecting the concept of 厘米秀 that users can decorate the avatar according to their preference. The costumes of the avatars dancing freestyle with the trendy music were changed to express the characteristics of the service. In addition, by adding a 2D effect which suitable with the dance movement on the 3D avatar animation, the unique cartoon style elements of Kapu brand were visualized.

3D厘米秀是一个反映QQ愿意根据用户模式、喜好和新趋势来改变现有服务的项目。在创建新IP，进一步发展QQ品牌形象，使其更年轻，更时尚上，也有着同样的意义。厘米秀和卡噗将继续开发可满足用户口味的时尚与交互设计。

CMshow 3D Avatar is a project that reflects QQ service's willingness to change existing services considering user patterns, tastes and new trends. It is also meaningful in that a new IP has been created that can further develop QQ's brand image younger and more trendy. CMshow and Kapu services will continue to develop trendy designs and interactions that applies users' tastes.