动效设计 | 海外新用户推荐融入动效设计-技术圈

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区
转自：TCD设计中心
编辑：韦建军审核：王翎旭
本文共 1806 字 20 图预计阅读 5 分钟

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

1.项目背景

1.1 产品问题

1.2 产品目标

2.设计思路

2.1 分析原型图

2.2 制定设计策略

3.设计执行

3.1 视觉调性

3.2 设计脑暴

3.3 绘制静帧

3.4 动效设计

3.5 最终效果展示

4.项目反馈

5.项目总结

Part 1

项目背景

1.1 产品问题

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

1.2 产品目标

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

Part 2

设计思路

2.1 分析原型图

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

2.2 制定设计策略

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

Part 3

设计执行

3.1 视觉调性

3.1.1 颜色

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

3.1.2质感

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

3.2设计脑暴

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

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

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

3.3绘制静帧

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

3.4动效设计：

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

黑子动效设计

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

背景动效设计

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

火箭动效设计

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

3.5最终效果展示

Part 4

项目反馈

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

Part 5

项目总结

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

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

···

文末 发消息

和主理人交流探讨

— The End —

🔥热门文章推荐🔥

▽

设计师们应该多玩电子游戏，游戏化设计背后的极致体验

为数字项目制定用户体验策略的 6 个实用工具！

符号学分析导论，图标构建的 3 大要素

在校的学弟学妹们，想要进大厂实习，请务必提前准备！

解密设计系统的 11 大优点，终于可以说服你的管理层

📚 精选体验设计知识📚

▽

精选收录文章

🙋 我们一起聊设计 🙋‍♂️

三分设

精选全球设计知识，助力 1 亿设计师成长

43,823

设计师已关注

欢迎添加 ⭐️ 星标，获取每日好文推荐

高质量设计微信交流群

期待与更多优秀用户体验设计师一起成长

PS：欢迎大家关注三分设，每天早上 8 点，准时充电。分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。添加小小虫微信号【 Lil_Bug 】，备注【 三分设 】加入！

↓↓↓点开『阅读原文』，欢迎你的加入

动效设计 | 海外新用户推荐融入动效设计

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区转自：TCD设计中心编辑：韦建军 审核：王翎旭本文共 1806 字 20 图 预计阅读 5 分钟

欢迎来到专业设计师学习交流社区
转自：TCD设计中心
编辑：韦建军审核：王翎旭
本文共 1806 字 20 图预计阅读 5 分钟