/【半周谈】041 动效的转场应用-2-层级关系交代

【半周谈】041 动效的转场应用-2-层级关系交代







本篇是游戏界面中“转场”的系列第二篇,第一篇点此重温:















【半周谈】039 动效的转场应用-1-转场的基本概念








”。


























本篇我们在转场的“层级关系交代”上着重展开。



























游戏界面的转场动效,根据前后界面层级关系可大致分成两种情况:同级间平移转接层级间上下跳转



























如果静态层面的界面无法足够交代清楚彼此之间的层级关系,就需要在界面间的转场动效上,用一定的方式去明示或暗示这种关系。


























同级间平移转接,通常会用上下、左右的横移动作,或者这种动作趋势来进行示意。



























如游戏《机动都市阿尔法》中的一个活动界面中,各个页签的转场动画:

























由于在静态层面,这个界面已经非常明确交代了子页面之间的平级关系。因此该界面内各个子页面之间的切换动效,并没有明显的暗示功能,而是将各个页面当作独立界面进行了入场动画处理。


























但当同级之间并不是这种明确布局时,应该用动效表达的方法去暗示。



























如在同一游戏中的同级别界面转场,就使用同一种入场动画来表明两个界面的“平等”关系:













层级间的上下跳转,则需要根据实际情况,利用多种方法去体现。



























直观的方式就是利用直接联系动效,将原先层级的某个控件进行放大,引入次级界面,有必要的情况下,还需要联动场景或者人物动作。如游戏《死亡循环》中的开始界面到模式选择界面转场:












类似形式在手游中也有具体的应用,比如《黑潮之上》中从“时之城”进入其子系统“卡牌研究所”的转场:












根据界面的布局,有时也可以不是缩放,而是平移转换。如游戏《漫威对决》中的便捷组卡操作:

























甚至,可以利用镜头动画在场景内穿梭,直观展现从整体聚焦到局部的过程,如下图《黑潮之上》里的层级转场:








































而类似的镜头使用,我们也在“












【半周谈】014 界面镜头语言二三事












”中提到过很多示例,有兴趣可以点击文字回顾一下。


























但是,过于复杂的转场形式通常会与相应的操作体验相冲突。因此这些具体的形式除了要考虑上下层级的关系交代,还要顾及操作过程的便捷性。


























不管怎么设计,这些都属于某种形式感。形式感其实是仪式感的基础。不同复杂程度的形式感本质上是营造不同程度的仪式感的。不同复杂程度的转场形同不同复杂程度的入场动画,都应该与具体界面的视觉层级相匹配。



























因此,同界面动效的风格化一样,转场的形式应该讲究整体局面上的节奏感。有梳有密,且应该按照功能层级去具体划分。这也是为啥,我们在一款成熟的游戏界面内,很难看到密集出现的复杂转场设计,它们只会在必要的时候出现,而大部分情况下我们用的转场形式依然是最普通的硬切,或者加入了一些细节的“一张一合”式转场。


























或者可以说,当你在一整个项目的视觉层级、疏密节奏上还没有具体细微的把握时,用通用的、普通的转场去承担所有界面之间的转接,是最安全和最有效的设计手段。在此基础上,当项目进展到更垂直的细节时,在进行过一段时间的打磨和迭代后,逐步建立起特有的风格时,再为其中比较高层级的界面设计复杂的转场形式。这才是比较科学合理的游戏界面动效的逐步设计过程。


























以上。






















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



往期推荐:

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