没想到我的设计竟然被大厂相中了！-技术圈

菜心星球个人专栏第四期——一条

今天的主角是我们的星友一条，在星球一年多的时间，非常用心的打卡，个人比较擅长质感图标和动效，去年年底的作品还被网易游戏买下，非常非常的优秀，今天他来和大家聊聊动效的一些知识！

废话不多说，正文开始：

伙伴们好，我是一条，是一名UI设计师，前阵子在星球打卡中完成了一套较为满意的IP动效，后来这个IP被网易游戏买下成为游戏《喵喵探案馆》的IP，部分效果如下：

非常荣幸地凭此收到菜心大佬邀请，分享一下这套作品创作中的一点总结。有兴趣的伙伴可以先移步到站酷中看看这套作品的完整内容。

https://www.zcool.com.cn/work/ZNTc3OTY3NzY=.html

这次分享的目录：

1. 前期角色的设计要点

2. 设计过程中节奏感的掌控

3. 设计过程中动画画面的饱满度

4. 动效成品的导出

5. 通过学习来反哺原创

01.前期角色的设计要点

前期构思卡通角色的时候，很重要一点是要考虑到如何让角色“动起来“，我这里分享一个讨巧实用的方法：尽量使用基础形状去“拼”出卡通形象。

基础形状组合既能保持插画本身的简约美观，同时在拉伸、形变等方面又有更具有延展性。通过拆解，可以发现下图中两个优秀案例都是由简单的圆形+描边路径+（圆角）矩形组成

在绘制这次的形象的时候我也是遵循着这个原则

02-设计过程中节奏感的把控

节奏感是一个偏主观的感知，一个动效节奏感掌握不好，我们是能够感觉到效果的别扭的；我把这个影响节奏感的要素归纳为时机控制、附属运动和预备动作

1-时机控制；时机控制是节奏感把控的最关键点，以下同一个运球的案例，打过篮球就会知道两点，1、运球后球会在手上悬浮一小段时间；2、运球必然是先迈腿再运球。对比这两点就能发现左图节奏感混乱的原因所在

2-附属运动；元素的的运动会带动附属于上面的元素的运动，且由于受力的顺序和元素本身的重量影响，会使这些附属元素的运动有时间差，下图案例中左图则是没考虑到这个因素，而右图通过更加夸张的处理，让画面的节奏感更好

3-预备动作；预备动作也是影响节奏感的重要因素，下图案例中，同一个滑板动作，右边由于把预备动作「抬手伸腿蓄力」放大，使画面的张力更足，蓄力+发力的节奏也把握的很好；

最后，我把自己的猫头做了一个节奏感的对比，大家可以对照看出两者的不同：

03-设计过程中动画画面的饱满度

我认为，画面的饱和度来源于画面中动效的层次和动效元素的细节两个层面。

1-动效的层次，可以理解为效果的多样性；除了动效基本位移、缩放、透明度和旋转外，我们还可以加入诸如3D、镜头切换、动态模糊、场景渲染、挤压拉伸等方式提升效果的多样性，从而让画面更加饱满。

下图案例中做了一个对比，可以看到右图提升效果多样性后饱满度有显著提升

以下两个案例则分别通过场景渲染和3D的手法提升动效的层次

2-动效元素的细节，可以简单理解为画面中，在一个动作中，在「动」的元素有多少。如下案例中同样是一个行走的动效，左图中熊本熊上下肢我们看做两个动作；而右图中的大象，除了四肢外还有鼻子+耳朵+尾巴的动作，即在「动」的细节上赋予更多，对比之下饱满度就会做的更好

通常来说，一个几秒钟的动效表达不了太多动作行为，在有限的时常内丰富画面元素是一个重要的课题，以下两个案例同样是通过增加动效元素的数量提高画面的饱满度

04-动效的导出成品

我较常用的方法是使用Ae导出序列帧然后倒入iSparta中合并成GIF、APNG或WEBP，这三种格式基本足够个人或前端开发使用。

如需提交App原生开发，考虑到动效失真和文件大小，通过插件Bodymovin导出json文件的方式更加合适。

05-通过学习来反哺原创

创作过程中遇到瓶颈是很普遍的事情，在我看来主要是两个问题：没有想法（不知道要创作什么）、没有技法（不知道如何实践想法）；我的办法都是，通过带着疑问的学习，或快或慢，都能在新的知识中找到反哺自己原创的点，以下都是在这次创作中途遇到瓶颈时学习新的案例做的笔记，相信有些知识点即使这次没用上，未来都会有派上用场的时候。

最后的话

进步是一件需要漫长的累积才能产生质变的事情，很幸运有星球一群一起努力的伙伴，同志们，共勉💪！！！

重磅消息

有想学习这组动效制作流程的小伙伴，这周日晚上9点星球有一场私密直播，一条进行上机操作，并且讲解一些关键知识点。

星球去年已经更新了6场私密直播：

《作品集包装技巧》

《大厂面试技巧》

《质感图标设计技巧》

《创意转化的常用方法》

《大厂面试题怎么做》

《视觉案例优化》

今年还会新增3d相关内容的私密直播，打卡也会新增视觉相关的，所以现在加入基本等于一年享有两年的内容，相当划算，今天再发一些30元优惠券，先到先得：

最后，一条在广州，有想认识认识的朋友或者公司，可以加他微信聊一聊：