路野

腾讯动漫目前平台的月活新用户数量较大,但是留存率不高,主要原因是无法精准的分发优质作品,并且海外用户并不喜欢暴露自己的性别隐私,去掉原有的性别选择页面,转而将现版的用户推荐进行视觉升级。

今天和大家分享一下最近做的海外新用户推荐动效的设计,大纲如下:

 

目录

  • 1.项目背景
  • 1.1产品问题
  • 1.2 产品目标
  • 2.设计思路
  • 2.1分析原型图
  • 2.2制定设计策略
  • 3.设计执行
  • 3.1视觉调性
  • 3.2 设计脑暴
  • 3.3 绘制静帧
  • 3.4动效设计
  • 3.5最终效果展示
  • 4.项目反馈
  • 5.项目总结

 

1.项目背景:

1.1产品问题

目前平台的月活新用户数量较大,但是留存率不高,主要原因是无法精准的分发优质作品,并且海外用户并不喜欢暴露自己的性别隐私,去掉原有的性别选择页面,转而将现版的用户推荐进行视觉升级。

1.2产品目标

为了让新用户更快找到想看且平台优质的作品,这次改版的目标是要提高平台新用户阅读率,目前现版的分类页整体视觉表现较弱,决定将原有的新用户推荐进行视觉升级:

图片

 

2.设计思路:

2.1分析原型图

与产品进行多次沟通并结合背景分析产品线框图,确定分类页是新用户最先看到的页面,相对于静态的图形,动效更容易被眼睛捕捉。利用这个特性,我决定从另外一个维度吸引用户注意力。

图片

 

2.2制定设计策略

通过顶部头图动效的设计,让整个页面视觉感受更为生动,让用户增强互动感。为让更好的做好衔接流畅,我决定增加一个加载动效,降低等待的枯燥感,同时加强品牌感知,强化世界观。

图片

 

3.设计执行

3.1视觉调性

3.1.1颜色

配色上延续海外版的清爽的感觉,以橙色和黄色为主色调,并以蓝色为辅助色调,但是在视觉规范的基础上进行了降低饱和度以及渐变的处理。黑白灰以文案和提示性区域。

图片

 

3.1.2质感

在表现手法上,在海外版扁平风基础上增加一些质感,以微拟物手法进行再设计,并且增加一些磨砂材质及弱反射的效果,弱化元素的重量,减轻视觉负担。

图片

 

3.2设计脑暴

整个动效的创意来源于品牌故事

图片

 

从故事中我主要提取了几个元素:普林斯星球的王子(黑子)、太空、星球、火箭、流星 。

图片

在设想了许多方案以后,最终敲定用【画面一:黑子向用户打招呼】-用户选择分类之后出现【画面二:火箭飞向漫画星球】的过渡画面-进入为你推荐整个动效的创意来源于品牌故事。

图片

 

3.3绘制静帧

下面是几个重点元素的优化过程稿

图片

图片

 

3.4动效设计:

设计过程主要分为三个部分:

黑子动效设计

怎么样能让黑子打招呼生动、有趣?开始没有想太多,既然是打招呼,那应该只摇摇手就行了,但是做出来之后发现太死板了,观察和朋友同事打招呼的时候,面部表情也是非常关键的,同时可以表达出喜怒哀乐,提炼了三个关键点:

背景动效设计

如何让画面更有层次?背景起到了很大作用,让我想起小学那会儿给名词加形容词,浩瀚的太空,漂浮的星球,飞驰的流星

 

火箭动效设计

在制作火箭动效的时候主要考虑这两点 1.火箭飞行的角度要怎么摆放?做了两种摆放样式,会觉得倾斜摆放更有冲击力 2.火箭在飞的过程中如何能做的生动,找了很多参考,发现了三个关键点:旋转、气流、速度 。

图片

 

3.5最终效果展示

图片

 

4.项目反馈:

项目输出之后收到多方的好评,并且尝试未来在子APP上使用;

图片

 

5.项目总结:

新用户推荐作为用户最开始接触的选项,同时也是知道用户喜好的敲门砖,如何跳脱出竞品同质化的困境,在视觉的表现上,应当从本质出发,打造品牌自身的独特风格,让动效的视觉表现和页面信息相呼应,给用户一种代入感的体验。

通过这次需求对AE也有了新的认识,例如3D Storke和粒子插件的应用,并且对表情动效有了新的理解,但是在执行当中也因为整体风格把控以及前期静帧元素绘制不够精细,导致花费了很多时间在调整元素上,之后尽量保证在进入动效设计之前完成静帧设计。

 

原文地址:TCD设计中心(公众号)

作者:张彭彭

图片

 

 

转载请注明:学UI网 » 海外新用户推荐动效设计

登录收藏
 
你可能喜欢的:
HMI设计需要遵循什么设计原则?HMI设计需要遵循什么设计原则?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
15条APP体验设计的思路分析15条APP体验设计的思路分析
设计师如何提升总结力设计师如何提升总结力
淘宝订单页改版分析:如何提高支付转化率淘宝订单页改版分析:如何提高支付转化率
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍
【蓝湖大咖访谈】流利说设计负责人黎静波:创业型设计团队的组织特点【蓝湖大咖访谈】流利说设计负责人黎静波:创业型设计团队的组织特点
如何基于业务思考设计B端的IP活动如何基于业务思考设计B端的IP活动
设计验证!如何进行可用性测试设计验证!如何进行可用性测试