/不知道这些要点,动效设计无法做到适可而止-之二 【半周谈】075

不知道这些要点,动效设计无法做到适可而止-之二 【半周谈】075







书接上文,我们继续讨论时间和空间影响下的动效动静安排原则。


3.异时同地。就是不同时发生的动画,但两者在同一个地方。大部分情况下,不同功能的控件在不同时间出现在同一处是可以被接受的。由于动效的时长设计各异,不同的动画有可能会交叠在一起,在某个瞬间同时出现在某处地方。但设计的初衷并不如此。

如《碧蓝档案》结算时偶尔会发生的情况:

画面焦点的结算的图标,顶部的任务完成提示,以及切换画面后的信息、新的任务完成提示等,在短时间内集中出现且出现层层交叠的情况,信息密度极大。


这种情况很多时候没办法避免,因为动效并不是线性动画构成的集合,而是由一系列比较随机发生的动画组合而成的。很多极端情况虽然可以被预测,但并不能覆盖所有必须的情况。设计层面上能够优化的就是整理好交叠在一起的控件的优先程度和层次,并且做好相关情况的权衡。


此时的动静规则是:上下有序,规划合理

4.异时异地。不同时也不在一处的动效,彼此间还有关联吗?当然有,这种关联性主要体现在风格的一致性上。

风格一致性不仅是对设计师而言,而且是对玩家而言的。不管是界面设计还是原画,亦或是我们现在讨论的动效,风格的一致性在哪个维度上都有同样的意义。

对设计师而言,是控制品质的好工具。对玩家而言,是对同类体验维度的认知一致性。

比如,同样是获得物品,为何有的是冒tip,有的是走弹窗?同样是胜利,为什么有的强烈有的平缓?为什么不同的系统内可能存在同类型的动态效果?为什么同一个系统内存在不同类型的效果。这都是动效设计时,跨系统,全局范围内需要考虑的设计要点。


通常,决定一个控件的动静设计到什么程度,其原则依据就是其风格调性,同时决定于其所在整体页面内的节奏。


我们可以从《赛马娘》的界面示例中进行横向和纵向对比来理解这一问题:


下两图分别是两种排名的结算:


这两个结算中,横向对比时,其界面布局和动静安排都是一致的。自身进行对比时,都是名次控件动,而其他界面部件不动。尤其是作为列表的排名展示区域。


纵向对比,可以看到在该游戏的其他类型页面中,相似的列表布局如何处理动静:


下图为“编组强化”界面的入场,强化功能的几个主要入口是人物前方的几个卡片状控件,它们被处理成典型的阵列入场形式,这显然又是相对于界面中其他控件的“动”处理:

同样系统内,切换到“支援卡片”强化的详情页时,其转场动画中,列表的处理是相似的。不管是右上的强化细则列表还是下方的卡片矩阵列表,都用经典列表处理方式。


这个流程的后续中也出现几个列表,其中最有特点的是强化成功后出现的界面里的列表,这也是前边详情页中右上区域的那个列表。不通过的是,它这次的入场效果要相对简单一点,而且另外加了一个“新增项”效果:


纵向对比,我们可以得出这样一个结论。同样作为列表,在依据整体风格调性的维度,需要尽量保持列表的入场设计样式。但是需要根据各个页面内的具体情况去协调具体的样式。这两个都是必要条件,而且后者需要建立在前者的基础上。


在结算页,虽然名次控件的样式和大小都比较显著,但为了促使玩家注意力进一步聚焦至此,同页面内的列表直接就省略了列表式入场动画;在“编组强化”页面内,那些入口卡片显然被设计成视觉强度高的样式,它们不仅是卡片状,还有每项专门设计的图标,这表明这里是它们的主场。依我看,它们不仅可以被设计成展示完全版的列表动效样式,动态样式上甚至可以做得更夸张一些;切换到详情页时也有类似的情况,但这里也有个细节处理需要注意,那就是在类似这样信息非常密集的页面中,列表项是相对比较重要的信息,因此也只保留了列表项的动态样式,其他反而被处理成静态;最终强化成功的界面,与结算有类似的情况,需要引导玩家将注意力放在左边的强化成功区域。但同时需要告诉玩家强化完成后的新增项,因此这些项被设计成我们所见的样式,出现在列表内。


正如上例所言,异时异地的动静处理手法非常多,看起来也比较复杂。但逻辑其实是很简单的。你需要着眼全局,知道统一样式的边界;同时要聚焦局部,观察交互结构和功能布局,合理安排对应控件的动态多寡,也就能设计出合理的动静节奏了。


这其实就是我们所说的动效设计适可而止的精髓。你没必要时时处处设计动效,水满则溢月盈则亏,物极必反。不是细节越多越好,而是安排合理的细节越多越好,这里的度的把握核心要点就在知道如何适可而止。


以上就是本篇全部内容。


















请务必备注








加群








,为防止造成骚扰,无此备注者默认不会被邀请进群哦~

























 欢迎点击下方名片关注本号 







本文来自微信公众号“COTA五号”作者:欧型兔(ID:cotadesign)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。