动效如何构成连接篇贰

wanzi3220 · 发表于 2021-9-3 16:54:59

本系列上一篇文章中我们将动效的连接概念细分成了联系和衔接两层含义。

其中衔接指两个控件组之间建立动态关系，而联系则特指单个元素的动态转换。因此衔接动效中往往包含着联系动效。

根据它们具体表现形式的不同，以及设计思路上的不同，各自又能划分成两种相近的概念。

其中，联系动效又可划分为直接联系与间接联系。

直接联系指的是两个互相转换的图形之间进行直接可视化的动态转化；间接联系则未必会有可视化的转化，但视觉效果上一定造成两者间的联系。

上图所示的《飙酷车神2》中，车辆场景与车辆切换界面之间的切换，就利用了直接联系的方式：上个画面内的车辆保持不变，只是将背景画面撤去，载入新的界面，车辆只有角度旋转的变化。这种保持两个画面内的共有元素不变的跨画面转接方式就是一种典型的直接联系方式。

还有一种比较典型的直接联系，就是界面控件本身的变化。如上图所示的《使命召唤手游》中，“异变围城”玩法中的模式选择界面，在每个模式选择的框体离，都有一个屏显打开的效果，这种效果本身属于直接联系。

如上图所示，《杀出重围：人类分裂》中的新物品提示。在玩家进行操作后，从操作点位动态延伸出两个线条，一直连接到新物品提示的控件上。这个过程看似是有东西从操作点位移动到了提示点位，但实际上并没有任何东西发生移动，而是视觉上的动态趋势给人造成的错觉，它事实上是一种间接联系动效。

由于同元素夸界面存在的情况并不多见，因此在游戏界面动效中，用的比较多的连接方式还是间接联系。而间接联系除了上例中用的直观视觉元素去表现外，大部分情况下用的是视觉上的假象。即两个物件之间在物理上未必有直观的联系，但通过“此起彼伏”的视觉效果，让人以为两者之间有联系。

比如上图中游戏《真三国无双霸》的“人物详情”界面页签切换效果中，利用的就是动效中“此起彼伏”的间接联系模式：左侧的页签被操作后发生变化，同时右侧的面板和信息刷新。两者的运动有先后关系，但没有物理上的直接联系，但因为两个动作在时间上的先后关系，很容易被玩家认为是有连接关系的。类似这种方式在游戏界面中非常常见。

衔接动效则进一步可以划分为逻辑衔接和硬衔接两种。

逻辑衔接指的是建立在两组元素之间共通元素基础上进行衔接的动态设计方法；而硬衔接则是通过一定的障眼法建立两组元素的联系。典型的如之前文章提到的硬切、黑幕以及抽象图形转场等。

上图所示游戏《控制》中“收集物打开”界面的衔接关系就属于逻辑衔接。通过上一界面中的图形收缩，和后一个界面细节展开的形式，直接展示了两个界面之间的操作逻辑和图形逻辑关系。这一衔接中显然包括了那个图形伸缩动作的联系。

上图所示的《纪元1800》的“统计界面”入场，就是一种典型的硬衔接。从连接的意义层面上来说，这里的转场前后页面之间没有图形逻辑上的联系，但是通过这种具有丰富图像变化的动态转场，让两个界面之间产生了平滑衔接关系。

到这里，我们就可以画出联系和衔接的关系图如下：

总体上，连接的概念就可以划分为这些细分类型。但这些类型未必能够囊括所有在游戏界面动效内产生了“连接”意义的效果。需要大家在实践中根据实际情况去针对性的设计实际的解决方案。

那么实际运用中都有什么方法让我们灵活运用动效的连接概念呢？我们会在本系列的下一篇文章中尝试去提炼一些具体可用的方法供大家借鉴，敬请期待。

以上。

来源：COTA五号
原文：https://mp.weixin.qq.com/s/PbcrW7Y1HTcBgjo0lDOfPA

帐号		自动登录	找回密码
密码			立即注册

微信公众号

微博

头条号

百家号

网易号

知乎号

动效如何构成连接篇贰

动效如何构成连接篇贰

相关帖子

微信公众号

微博

头条号

微信公众号

微博

头条号

百家号

网易号

知乎号

动效如何构成连接 篇贰

动效如何构成连接 篇贰

相关帖子

微信公众号

微博

头条号

动效如何构成连接篇贰

动效如何构成连接篇贰