时间错层
是一项游戏界面动效设计的基本设计手法。它指的是组成单独动效的各个元素之间的动画动作起始点之间的错位设计。这种设计促使动效更加合理，从而体现出舒适的观感，也是让动效更有细节的要点所在。在很多时间轴设计软件中（如AE），各个元素都以图层的形式存在，设计这种效果时，会让各个图层错开，从而称呼为时间错层。以下简称错层。
但很多初学者甚至是多年经验的动效设计师依然对此感到迷茫。
主要原因在于两点：一个是，无法准确掌握错层的间隔，即不知道哪个先哪个后；另一个是，元素足够多时，更难以把控全局。本文就这两点展开讨论一下，看是不是能够对你有所帮助。
首先，错层的间隔其实是没有准数的，更依赖感觉。但是感觉是有依据的。所以客观上讲，一个简单的动效其实是有逻辑的，正是特定的逻辑使得一个动效能够合理。而“合理”最终构建了舒适感。
举个例子：
下图是我在文章“【一个练习】动效预演练习“Atelier” ”（点文章名称阅读）中展示过的一个练习的细节：
这是一个典型的代币控件，它的入场就有简单的错层设计：先是代币图标的出现，然后右侧加号图标引领数字面板展开，数字稍晚，但几乎同时伴随面板展开而出现。
这里的错层动态并不是随意设计的，而是遵循了这个小控件内部的一些逻辑。实质上，右侧的一坨，包括数字、背板以及加号，都可看作是左侧代币图标的“附属”。那么整个小控件的出现就应该以代币图标为基准。只有主体出现了，附属才会展示。错层设计就是基于这种图形展示给我们的基本逻辑进行的设计。
同样的，下图所示上述同一作品中的另一个控件，也是依据同样的设计思路。左侧的图标是一种视觉引导式的主体型体，因此右侧的底板、文字以及修饰都成为附属。主体先入，附属后入。
只不过这个小控件的图形复杂程度要比前者更复杂一些，因此错层上会多一些细节，比如主体图标入场前的前奏设计与本体之间的错层，和全体入场后，框线的额外落脚动作等，都需要仔细调整，错开与主体图形的时间差。
这都只是一些细节处的，相对比较简单的错层设计。但基本的思路其实都是一致的：寻找到原图形中的一些逻辑，用动态来解释它，你自然能安排它们的次序。
第二点，如果元素过多从而无法把控全局。
这点可以从两个方面去分析。一方面可能说明一个问题，那就是你的练习量可能还不足够多。这其实是一个很简单的道理。我们的学习是有客观规律的，总是由简而难，由浅入深的。总要先学会走路，才要去学习跑步，否则就像掌握了歪门邪道，最终走火入魔也不是不可能。
对动效设计来讲，我们不仅要按照学习规律进行由浅入深的学习。还要清楚的明白这山望着那山高时，其实是你内心汹涌的动力在澎湃，不要着急，饭总得一口一口吃。
另一个方面，我们需要正视复杂。其实掌握复杂是有方法的。你可以回想一下，现实本身就是复杂的，我们是怎么应对现实的？我们通过计划，通过分析规律，最后通过实际行动来掌握现实的复杂。这本质上是把复杂简单化的过程。
这个过程的本质是什么呢？就是总结规律。利用规则驾驭复杂。
对动效来说同样如此，我们通过制定设计规范，来驾驭界面中的复杂。而具体到一整个界面的错层设计也是如此。
一整个界面的规律就是，它是分层级的。那么我们就可以由大及小对一个界面进行划分，先划分第一个层级，决定它们的先后顺序；然后是第二个层级内部的划分，接着是第三个层级……
可以一直这样划分下去。但还有一些问题需要同时考虑，那就是动效不需要无限多的细节，它大部分时间模拟现实，但并不忠于现实。我们只需要让动效干一个活，那就是交代的足够的信息。
所以你看，复杂并不是无限的，我们通过规则这一牢笼将它死死困住，大卸八块，最后吃掉。
最后，你会发现，面对复杂元素的错层设计，就只需要做两件事。一个是战术层面的，通过一定的逻辑去划分，切碎、细分；二一个是战略上的，你需要持之以恒的练习，大量的练习，动脑子的练习，最后形成感知。有一天，这些划分层级、区分重点、先后功能等等充满思考的动作都会变成快捷键，也就是俗称的肌肉记忆。当再有人问你，你是怎么这么快且自然的做到错层设计的？你可能已经记不起这些过往的努力，而只是觉得，这，可能是天赋？
不是的，这都是持久的练习和聪明的思考，两者混在一起，持久训练而来而已。
以上。
欢迎点击下方名片关注本号
推荐阅读
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
