设计产出物的品质受到很多因素的影响。其中一种就是细节。平面设计和动态设计都被细节左右。细节和品质不一定是正相关关系，但是缺乏基本细节设计的产物，一定会影响设计品质。
对游戏界面动效来说同样如此。一些基准设计因素的缺失，会使动效设计产生“未完成”、“低品质”或者“奇怪”的感觉。这些其实都是动效设计的细节。
本文就来讨论一下，通过哪些方式可以让你的动效设计更有细节。
想让动效体现出细节，往往最先需要从两个方面着手：静态丰富与层次细节。
即丰富原有静态图形的表现方式。
动效是基于静态设计稿去做进一步的动态设计的，除了要弄懂界面设计本身表达的功能含义外，在细节上要尊重原有的图形设计。
我们在上一篇文章中提到过一点：复杂界面控件的动态设计要在读懂静态图形的运动趋势的基础上去做进一步的设计。但是这种设计绝不意味着原地踏步，而是要学会去演绎原有的图形。
比如下图这样的一个面片，我们很明显能看到它的一些纹理特征。
就可以从这些纹理特征入手去做一些动画设计，首先是最基本的伸缩动作，和表面上文字图标的随动动态：
但是这样并不能延伸原本静态设计的风格特点，也就是那些斜切型体所应有题中之意。那么我们可以为它们也设计一些小细节，比如说闪动：
又如这样一个独立的控件，具备层次比较丰富的图形设计。
此时可以通过提取它的主要设计元素来参与到它的整个动画生命周期（蓄力→爆发→拖尾）中：
这种基于静态去思考动态的思维并没有超脱出我们在《五种演绎法拯救单调》中提到的方法，最核心的思路还是补充它在时空上的前后关系。
即增加多层细节表现。
在上一个做法的基础上，如果控件的视觉层级很高，目前的方式不足以体现它的某种视觉层级时，就可以为它增加“滤镜”。
上一点指的实际上是设计控件的结构细节，而这一点指的则是设计控件的样式细节。样式细节应该基于结构细节。除了某些特别的情况，一般先考虑结构细节再考虑样式细节。
比如说常见的按钮动态细节，当我们有这样一个按钮时：
如果需要设计动态让它更有视觉强度，应该先设计结构细节，比如像这样：
如果这样的结构细节仍然不足以表达它的视觉层级重度，或者想体现某些特别状态，就可以考虑增加样式细节，比如粒子、光效等（为了更好观看光效，这一效果背景变更为暗模式）：
基于以上两点，让动效的设计更加细腻的方式，还有另外两点。即元素互动与动画曲线。
指的就是构成一整个动效的元素之间，应该有所互动，而非互相隔离。
这同样是来自我们常提的“现实经验”。现实有几个特点，其中最主要的几个就是：没有完全静止的物体；没有绝对孤立的个体。
第一个特点使我们在动效中模仿现实时始终需要保持动态物件是“活”的。如果保持呆滞的状态，就会让人感觉很假。
第二个特点使我们在动效设计中，多注意各个元素之间的交互作用。这就是我们现在说的元素互动。
比如我们有这样一个控件，需要设计它的入场动画。
根据它的设计结构分析，绿色栏条是承载黄色箱子图标与黑色文字元素的底座。所以入场动画应该先让底栏入场，而后是文字和图标的入场。但它们之间的时间差不应太多。
所以就可以设计出这样的一个基准动画：
文字的入场方向遵守我们此前提到的图形逻辑关系：让它们和底栏的伸展动画保持同向运动。箱子图标的颜色和位置决定了它是这个控件中最重要的物品。为它设计一个由下往上飞动又摔在底栏条上的动画从而凸显它的重要性。
这样的动画其实也能满足功能与视觉效果了，但是如果想让动画更加生动，我们可以尝试为它增加元素之间的互动。
目前的效果中，显然是没有互动的，除了文字的入场方向受底栏伸展效果影响之外。
这其中最明显的关系，就是箱子图标摔在底栏上的动作。如果能将它的力道传递给底栏甚至是文字，效果会大不一样：
上图这个新的效果中，我们增加了底栏受箱子撞击的反应。文字也都相应加了一点相似的效果。
是不是看起来更加生动了呢？这就是一点点元素交互作用带来的效果。
曲线的重要性如何强调都不过分。它是构成动画最基本的元素。但这里的重点并不是告诉你什么动作应该设计什么曲线，想要了解这些，可以看下过往的相关文章。相信大家已经非常熟悉这一点。
这里要说的是，动画曲线的微弱调整会影响动效在整体上的表现，尤其是一些细节的有无，非常影响整体动画的样子。其实这一点也和上一点有所联动，有时候一些微弱的曲线调整正是想要带给元素间互动效果的。
比如我们有这样一个控件：
它可以被设计成这样的动作：
这看起来是个很平常的抖动红点效果。一般情况下应用起来是没有什么问题的。
这时候它的运动曲线是这样的：
但是如果我们需要在一个风格别致的界面里设计动效。比如说需要富有弹性的风格，这样一个“普通”的弹动效果可能就不足够生动了。
这时可以将它的曲线进行这样的微调：
可以看到，起始帧到第一个摆动角度的曲线是典型的慢入快出动作，这意味着一段“预备动作”。第二帧到第三帧也是一段慢入快出动作，意味着从这个角度回到另一个相对点的动作会有个漫长的加速过程。等它回弹回去到第四帧时，却是一个快入慢出的曲线，这意味着能量的爆发。这样的动作给了气泡本身很多弹性因素，而且相对之前的运动曲线，这个曲线的总时长也做了一些调整。
这时候物体的运动状态看起来就会是下面这样：
看起来是不是曲线的调整非常的微弱呢？但最后的效果是不是差别很大？这就是曲线微调的威力。
这只是个很简单的小例子，但在实际工作中，我们会遇到结构更加复杂的情况。我们就需要对其中一些部件或者元素的运动进行详细的分析，认清它们互相之间的关系，对它们应有的“生动”运动进行“还原”，这是动效设计中最有趣的部分。
动效
的细节设计应注意塑造更合理的图形动作。
图形动作的合理性是从图形结构上来的，遵守图形结构的动画会更“好看”。因为符合客观规律的设计本身就会带给人以美感（
引自《游戏UI设计原则与实例指导手册》P032 “1.3.3 界面的美丑”小节
）。
魔鬼藏在细节中。当你的动画看起来不够合理时，就需要检查一下，那些图形是不是没有遵守在符合规律的情况下，理应具有的运动规律。
在游戏界面动效中，需要注意以下界面控件中出现的图形动画的合理性：
有边界图形的运动形式
没有出画的图形都可以被看做有边界图形。相对来说，如果不是后文提及的情况，这些图形的动画形式限制更少。可以根据它们具体的形态或功能去设计具体的运动方式。如弹窗，tip，一些背板等。
比较常见的有边界图形就是按钮、弹窗和tip类的控件。它们可以像下几图所示的样子，支持比较多类型的动态变化。
无边界图形的运动形式
无边界图形
指出画图形，这类图形边界不在画面内。如果没有特定的设计，它们实际上是向画外无限延伸的。因此最好不要认为它们的边界就是画面的边缘，从而以画面为边缘做一些伸缩运动。这对这类图形来说就是一种特意展示破绽的动画。
这类图形主要有跨屏弹窗，贴边控件等。
无边界图形中最常见也最容易出现动态设计问题的就是类似下图的跨屏弹窗。下图所示的样子为建议的入场方式。
如下图所示贴边控件的样式，也是一种边缘在画外的图形。建议的入场方式如图所示：
跨屏弹窗的错误处理方式往往如下图所示：
主要问题在于，设计师将它视作有边框型体去处理了。这种动态方式的破绽主要在缩放过程中，这个型体所暴露的两侧边缘，并非它被设计成的无边缘样式。属于破坏原始图形结构的设计方法，应尽量去避免。
而处理这样的图形样式动态设计问题，除了上文中出现的上下扩展形式外，还可以用左右虚边的扩展方式，如下图所示。或者是利用抽象图形入场的形式，如下下图所示。这两种方式都避免它原本不具备的左右边框被在运动过程中暴露出来，形成破绽。
类似的，贴边控件也应该避免如下图所示的缩放入场，这同样犯了“将它们当作有边框控件处理”的错误。
还有一些并不显著的控件型体，也容易出现类似的问题，比如斜向但位于页面边角的图形。它们往往会被按照图形运动趋势的方向设计入场动画，这时候就总会出现一些“端头”。这些“端头”其实也类似跨屏弹窗的那两个并不存在的左右边缘：
正确的处理方式可以参照跨屏弹窗的处理方式，也可以简单的如下图这样进行处理：
直图形运动
直图形
指横平竖直的图形。这类图形的变形伸缩通常不会导致外形或内含结构的变形挤压。因此在各种情况下的运动设计都会比较自由，但需要注意某些情况下的旋转运动和特有旋转角度时的单维度缩放。这类图形通常在按钮，底框，一些图形结构复杂的结算中。
下图是一个带纹理的按钮，它的动态设计方式是将衬底与纹理分开进行处理，由于它是个平直的图形衬底，因此这种缩放动画并不造成整个图形的挤压变形。但如果没有将纹理与衬底分开，仍然设计为当前的缩放动画，就会造成纹理挤压变形。
下图所示的菱形动画中，菱形的旋转与缩放过程中都始终保持等比，因此整个型体的动画都比较稳。
但如果在动画过程中不保持等比，就会出现很奇特的现象。因此除非刻意追求这种怪异的效果，这种平直的图形应在任何情况下保持等比变化，以维持图形本身的稳定。
斜图形运动
斜图形
则是带有斜切造型的，或者其他形状的平直图形。这些斜切或者其他形状在伸缩，旋转时应格外注意变形挤压的的情况。这些图形也通常出现在按钮，底框以及其他图形结构复杂的控件中。
如下图所示的控件组，由多个斜图形组成。它的入场动画没有考虑到斜图形在横向缩放过程中产生的变形挤压问题。
正确的处理方法应该如下图所示，将所有的斜图形按照三宫拉伸的方式进行横向缩放变形，保证斜边不会因为这种动画而产生变形挤压。
中心对称图形运动
中心对称图形
包括圆形，星形，放射型等等中心对称的图形。这类图形往往只适合中心伸缩，并非常适合中心旋转运动。如果用它们做其他类型的运动，则同样在很多情况下会产生破坏型体的效果。它们通常在一些特别的控件中，如结算、勋章类等控件。
如下图所示，中心对称图形在等比缩放和旋转时的效果都比较稳定。
下图所示，多个中心对称图形同时组合运动时，也能在保持等比缩放的情况下保持图形结构的稳定性。
但如果不保持等比缩放，如下图所示的多个图形单一维度缩放时，会产生类似透视翻转的效果。但这与真正的三维透视翻转效果又有所不同。在特定情况下使用问题并不大，但需要看情况决定。
这些是游戏界面中常见的图形，也是动效设计师很容易在复杂动画中忽略掉的细节。
动效设计的细节，应注意多图形运动的运动趋势一致性设计。
动效设计的细节，应注意多图形运动的运动趋势一致性设计。
指的就是组成一个控件或者多个控件组的元素，在参与界面动画时的运动趋势，要保持一致。这个一致性建立在多元素组成的控件基础上，那些结构单一的控件不在本次讨论范围内。
你可以将组成界面控件的所有要素，如文字、图标、图形等当成一起在舞台上跳群舞的演员。他们需要保持一个一致的舞动韵律，才可能跳出优美的群舞。而合理安排其中的每个演员，才会让动效的设计更加合理，也更具细节美感。
主要需要注意以下三点：
1.主轴运动驱动
主轴运动
指的是为多图形构成的控件所设计的主体运动趋势，这很像海中的鱼群游动。不同之处在于，这是一个明显经过设计的，有目的的运动趋势。其中的单个图形运动趋势一定为整体运动服务，并是整体运动的组成
部分。
主轴运动
指的是为多图形构成的控件所设计的主体运动趋势，这很像海中的鱼群游动。不同之处在于，这是一个明显经过设计的，有目的的运动趋势。其中的单个图形运动趋势一定为整体运动服务，并是整体运动的组成
部分。
所以，主轴运动驱动的动力源选择就很重要。一般来说，我们都会选择将原本复杂的结构进行拆解，然后将代表性元素作为这个动力源，来驱动整个动效设计的运动趋势。
我们在《
【半周谈】023 什么是前奏设计 2/2
》一文中所列举的实例用的就是这种方法。
这里再总结一下的话，可以简单的认为主体运动趋势可以分成三个设计步骤：
第一步，抽离关键元素，作为主体运动的动力源；
第二步，根据具体的功能需要，对关键元素进行动作设计；
第三步，将控件中的其他元素融入主轴运动趋势中，完成设计。
如果想要设计出足够合理、拥有细节和生动的动效，第三步中的一些细节处理就显得比较重要了。这里主要解决的问题就是图形间配合相应。
2.图形间配合响应
图形间的运动趋势一定是一致的，同时也是有互相交互的。除了主轴运动元素外，相配合的其他图形应该以互相交互和配合的关系存在。否则就只是多元素的堆积或者拼接，而无法合理解释多图形运动的合理性。
图形间的运动趋势一定是一致的，同时也是有互相交互的。除了主轴运动元素外，相配合的其他图形应该以互相交互和配合的关系存在。否则就只是多元素的堆积或者拼接，而无法合理解释多图形运动的合理性。
多图形之间的交互作用非常简单，就是对前后图形的运动有所响应。
举个简单的例子，我们有下图这样的图形设计：
举个简单的例子，我们有下图这样的图形设计：
假设将它们设计成获得类的感觉，也就是从四周汇聚的运动趋势，要
做出
图形之间有互相交互的运动形式，就需要中央图形与外围图形的运动有互相影响。
假设将它们设计成获得类的感觉，也就是从四周汇聚的运动趋势，要
做出
图形之间有互相交互的运动形式，就需要中央图形与外围图形的运动有互相影响。
首先，我们利用主轴图形设计出外围图形的动画：
首先，我们利用主轴图形设计出外围图形的动画：
然后是中央图形的动画。如果没有互相作用，它们的效果看起来是这样的：
然后是中央图形的动画。如果没有互相作用，它们的效果看起来是这样的：
为它们加入互动，可以是外部图形入场后对中央图形的撞击：
为它们加入互动，可以是外部图形入场后对中央图形的撞击：
也可以是中央图形对外围图形运动趋势的一种延续：
也可以是中央图形对外围图形运动趋势的一种延续：
这就是最简单的设计出图形间配合动画的方式了。控件中的图形元素越多，这种互相作用的细节也就越多。那怎么才能让它们看起来还是有序的呢？
这就是最简单的设计出图形间配合动画的方式了。控件中的图形元素越多，这种互相作用的细节也就越多。那怎么才能让它们看起来还是有序的呢？
一个方法是遵循主轴运动的趋势，什么时段是什么趋势，就只按照当前时段的趋势去设计运动，不要强加过多的交互动作；另一个方法就是在前一个的基础上，为各个元素设置相应的次序，构成合适的节奏。
一个方法是遵循主轴运动的趋势，什么时段是什么趋势，就只按照当前时段的趋势去设计运动，不要强加过多的交互动作；另一个方法就是在前一个的基础上，为各个元素设置相应的次序，构成合适的节奏。
3.节奏错落有序
如何安排各个图形元素的入场顺序，对设计师来说似乎是一件比较难的事情，但事实上未必。
如何安排各个图形元素的入场顺序，对设计师来说似乎是一件比较难的事情，但事实上未必。
设计师只需要搞明白一件事就能让这件事变得简单。那就是现实中的物体运动是如何进行的。自然的运动从来不会严格的整齐划一。板正有秩序的运动一定是人造物的特征。
设计师只需要搞明白一件事就能让这件事变得简单。那就是现实中的物体运动是如何进行的。自然的运动从来不会严格的整齐划一。板正有秩序的运动一定是人造物的特征。
而我们为了让动效的运动显得自然和有趣，通常就会模仿自然运动。就会将原本板正的运动次序稍作处理，从而显得自然。
而我们为了让动效的运动显得自然和有趣，通常就会模仿自然运动。就会将原本板正的运动次序稍作处理，从而显得自然。
比如下图的图形：
比如下图的图形：
如果为它们设计摔入的入场动画，严格的整齐划一时，就是下图的样子：
如果为它们设计摔入的入场动画，严格的整齐划一时，就是下图的样子：
但如果稍微为它们错开一点点次序，按照从左到右的阅读顺序，会是这个样子：
如果此时的效果还让人感到“秩序”，那就是还不够错落，我们索性可以设计成这样：
如果此时的效果还让人感到“秩序”，那就是还不够错落，我们索性可以设计成这样：
这是不是就显得比较自然了呢？
这是不是就显得比较自然了呢？
实际工作中，我们处理的问题会比这个简单的示例复杂很多，这时候就需要一个轴线图来处理相应的问题：
实际工作中，我们处理的问题会比这个简单的示例复杂很多，这时候就需要一个轴线图来处理相应的问题：
从左到右是秩序到混乱，但我们要设计的效果大部分处于中间。有时候会为需要秩序感的东西多做一些稍显整齐的动作，而有
时候又会偏错落一些。较少的情况下会做完全的整齐动作和完全的混乱动作。
从左到右是秩序到混乱，但我们要设计的效果大部分处于中间。有时候会为需要秩序感的东西多做一些稍显整齐的动作，而有
时候又会偏错落一些。较少的情况下会做完全的整齐动作和完全的混乱动作。
动画
节奏与组成它的图形的秩序强相关。这些我在动画的节奏感中有详细讨论，可
以点击
这里
和
这里
回
顾。
动画
节奏与组成它的图形的秩序强相关。这些我在动画的节奏感中有详细讨论，可
以点击
这里
和
这里
回
顾。
我们讨论细节，并非在表达所有的设计都要在任何角落里布满细节。细节的确可以提升品质，但也要注意适可而止。市面上有很多游戏产品的界面缺乏细节，从而显得简陋。同时也有设计了过多的细节从而让人眼无所适从的。这两种方式都不是我们所提倡的。
从整体上，你应该根据自己的产品调性决定细节的密度布局；从局部上，你应该根据具体的功能要求合理安排细节的多寡。这些我们都在不同的文章里反复提及，具体的设计应该因地制宜，而不是用二极管的思维方式非此即彼。
以上就是本篇全部内容。
以上就是本篇全部内容。
欢迎点击下方名片关注本号
往期推荐：
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
