上亿人使用的QQ空间萌宠形象,是怎么设计出来的?

1 评论 5681 浏览 14 收藏 6 分钟

QQ空间在去年推出了全新“萌宠”玩法,上线以来,获得了不少用户的喜爱,同时也收到了大量忠实用户们对想要养小鸡小猪等的心声。为了给用户带来更好的体验,项目设计组决定新推出一大波各异形态的萌宠,让萌萌的宠物融化用户们的心〜

关键词

围绕着宠物的世界观,吸引更多用户参与新玩法,确定产品定位并且提升用户黏度,我们提炼出了一些关于“空间宠物”的关键词。

设计过程

1. 第一轮尝试

(1)设计理念

“可爱”这个元素是各个年龄段都会受用的,形象多用圆形或椭圆形的设计,再围着着“成长”,“多样性”,“地球”等关键词尝试。

(2)意见反馈

初步沟通反馈,希望以宠物的真实形象类别作为分类,确保每一个宠物的形象都有鲜明的性格。

2. 第二轮尝试

(1)设计理念

根据不同类型的宠物真实形象改变之前的拟人化的设计,符合宠物真实的形态,减少多余的细节,提取特征作抽象化。

(2)意见反馈

经过多次的沟通,确定了满意的方向,接下来进行了细节优化与调整。

3. 规范制定

在本次制作中需要短期内输出18个新的形象,留给单个形象设计及输出合格时间较短。从零开始重新创作形象的方案不太现实。所以,我们必须得先明确本次多宠物制作上形象设计的形象要求,制定相应形象规范,内部设计的同时在外部CP进行合作,以及寻找合适的现有形象进行二次创作。

(1)形象风格

  • 宠物的形象一般偏可爱风格,在无特殊情况下,线条保持圆滑自然尽可能采用形象原型本身的姿态;
  • 形象角度需偏左30度左右;
  • 形象设计统一使用扁平风格,无色彩渐变,无描边,色彩使用上不要使用过;
  • 高饱和度或者与白色过于相近的颜色(由于空间馈送底色是白色,如果宠物形象本身是白色,用偏白的灰色代替)。

(2)阶段分类

每个形象有3个阶段,分为:幼年,少年,成年阶段之间需区分明显,而且个头差异不能过于巨大。

(3)细节规范

为了制作脊椎动画,设计时需注意身体四肢运动的可能性对于身体和四肢同一颜色的情况,不要使用阴影来区分四肢和身体。

(4)输出规范

  • 提供宠物形象在自然状态下的,另需对形象的手,脚等活动部分进行调整;
  • 形象在自然状态下是为了方便身体活动,不一定与形象默认动作一致,确保自然状态下的身体能满足需要做的绝大部分动作。

(5)蒙皮规范

不同宠物有不同装扮,设计师需在理解装扮范围的原则上,进行适当的装扮设计并输出设计稿。

 形象输出

给予不同形象的人性化特点,以更有情感化的形式设计新形象。

结语

QQ空间萌宠全新改版升级,突出物种的多样性,全新定于了宠物的世界观以及新玩法从脑爆方向 – 风格尝试 – 落实设计 – 最终上线,需要感谢很多为此付出的同学,让空间的玩法更加丰富。也期待着“空间宠物”有更多更有趣的玩法以及创新。

 

作者:eu

来源:腾讯ISUX

题图来自 Pexels,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 可爱! 用心~

    来自北京 回复