专栏首页腾讯社交用户体验设计二次元探索 | 卡噗3D角色设定

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

腾讯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.

扫码体验卡噗APP


PS:ISUX 开通粉丝QQ群啦!

欢迎各大设计师加入和我们一起聊设计~

添加QQ群:764345161

或长按以下二维码

以下ISUX文章,你可能也感兴趣

邂逅二次元爱豆 | 波洞星战设定

暗黑天使太空鹅设定

QQ极简与夜间模式设计

如何输出清晰有效的设计方案

从零到壹 | 打造全新的游戏次元空间


感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX版权所有,转载请注明出处,违者必究,谢谢您的合作。注明出处格式:

文章来自公众号:

腾讯ISUX 

 ( https://isux.tencent.com/articles/kapu)

↓点击前往 ISUX 官网

本文分享自微信公众号 - 腾讯ISUX(tencent_isux),作者:Kay Jin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2019-2020 设计趋势 · 用户体验篇

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? ? 在本文中,我们将分享ISUX设计趋势报告的最后一部分“用户体验趋势”。用户...

    腾讯ISUX
  • IP形象世界杯设定-WeFriends

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 在2018年俄罗斯世界杯到来之际,我们策划了一项品牌宣传活动。将SNG集团旗下的6...

    腾讯ISUX
  • 2019-2020 设计趋势 · Avatar角色篇

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? ? 在本文中,我们将分享对于最近又逐渐流行起来的角色服务的见解。随着IT世界成...

    腾讯ISUX
  • 【论文推荐】最新5篇语音识别(ASR)相关论文—音频对抗样本、对抗性语音识别系统、声学模型、序列到序列、口语可理解性矫正

    【导读】专知内容组整理了最近五篇语音识别(Automatic Speech Recognition, ASR)相关文章,为大家进行介绍,欢迎查看! 1. Aud...

    WZEARW
  • 开源自动驾驶线控套件 oscc文档

    The Open Source Car Control (OSCC) project was created to give everyone the oppo...

    用户1908973
  • 【论文推荐】最新6篇目标跟踪相关论文—动态记忆网络、相关滤波器、单次学习、相关、循环自回归网络、三维多目标

    【导读】专知内容组整理了最近六篇目标跟踪(Object Tracking)相关文章,为大家进行介绍,欢迎查看! 1.Learning Dynamic Memor...

    WZEARW
  • CVPR2020医学影像相关论文(摘要+代码+链接)

    本文是在上面文章的基础上,整理了CVPR2020医学影像相关的论文摘要、代码及文章下载地址。根据上面文章,CVPR2020医学影像处理相关论文可以分为如下几类:

    Minerva
  • [计算机视觉论文速递] 2018-03-11

    通知:这篇推文有10篇论文速递信息,涉及目标检测、行人重识别Re-ID、图像检索和Zero-Shot Learning等方向 这篇文章本来是在2018-03-1...

    Amusi
  • 利用动态深度学习预测金融时间序列基于Python

    Forecasting the evolution of events over time is essential to many applications,...

    量化投资与机器学习微信公众号
  • html导出pdf的四种方式

    将html页面导出为pdf文件并打印,可以直接在windows下使用Ctrl + P,苹果下⌘ + P。

    二十三年蝉

扫码关注云+社区

领取腾讯云代金券