/【半周谈】068 漫谈写实类动效设计-4

【半周谈】068 漫谈写实类动效设计-4



本篇继续讨论写实类动效的设计手法。考个不是很古的古,看下写实竞速类游戏中的一个例子。








关于写实竞速类的游戏界面和动效设计,我们在之前的文章《王牌竞速动效简析》中有简单的提及。基于以下原因,这类游戏的界面设计往往极为扁平和简约:








1.写实类画面匹配“无风格化”的界面,视觉上更加一致;








2.为了尽量展示画面中精致的车辆设计,界面等其他视觉元素要相对让位;








3.个别时尚感的设计,需要简约的设计方式来构成整体的调性。








本篇的这款游戏是《极限竞速: 地平线4》



(Forza Horizon 4),它是一款由游乐场游戏工作室开发并由微软发行在Xbox One和Windows 10上的开放世界竞速游戏。本作最早发布于2018年,是一款相对比较老的游戏了。其最新一代

《极限竞速 地平线5》已于2021年11月9日发售。

这是一款画风上非常写实的竞速类游戏。整体的风格调性也比较符合上文所说的“时尚感”它的界面设计就基本上没有什么风格调性:


1.极为扁平的设计,没有特殊设计的图形。


2.仅有的色调构成了它的独有风貌。


3.局内的界面更加没有“存在感”。完全为游戏画面让位。


它的界面动效则全部使用了通用型设计。且非常接近应用类界面中常用的柔顺、劲道的设计方向。


这样设计的好处在于既延续界面本身的时尚调性,又规避了太有风格化而抢了其他视觉元素的焦点。


尽管如此,尽管它看起来没有风格,但它依然有一套自己的设计体系。以比较明显的特点举例。

如统一的界面出入场形式:


该作界面的关键选项入口都是实体框体构成的,比较类似windows 8系统中开始使用的一种“磁贴”概念,可算是本作界面设计的最大特点。从一个界面进入另一界面时,这些框体构成的集合会以整体缩放的形式转场。

如上图所示,当界面覆盖至全屏时,这种放大退场的形式更像镜头穿梭。配合背景上对准车辆局部的画面,使整个画面非常活跃动感。

当界面主体全由“磁贴”构成时,入场设计中还会有一定的时间错层设计,让这些框体看起来更加灵动,效果上接近花瓣绽放的感觉。





退场时则延续由纵深进入前景再穿出画面的一致轴线,框体们四散开来。形式感十足。


就像上图这样,多个框体构成的界面,也有时候会以缩进的形式入场。


如上图所示,大部分情况下则保持为放大入场。


当几个主要系统的页签进行互相切换时,这些卡片则用翻转的形式进行信息刷新。


在同一页面内切换时,仅仅保持选中态略微放大:

这其实都符合我们对“卡片”的直觉。虽然这种设计基本上没有什么新鲜感,但它构成了独特的体系,看起来极为合理,玩家可能甚至不会注意到这些小细节。


如下方多图所示,这种缩放出入场的形式在多个设计样式之间保持了高度一致:

甚至简单到二次确认弹窗这样的小控件,也是一样:


本作界面单从平面设计的角度来看,是比较没有特点,甚至比较老气的。在它刚诞生的年份或许还比较新鲜,比如斜长投影这种当年特别流行的设计,配合上常见的圆角矩形以及没有风格特征的无衬线黑体字。总体上看起来平平无奇。


但它整体的观感却并没有这么普通,其关键就在于整体体验非常完善。这里边最关键的就是细腻动效的加入。


我们似乎有必要再一次强调“通用型”动效设计其实并不是普通的动起来,而是一种基调,一种保证界面系统是基本安全可用版本的基础设施。是一种很多情况下较难做到的状态。


纵观本作动效,就做到了这一点。而且从它本身成体系的设计来看,背后其实是对整个界面设计系统的深入理解。


当然,它也发挥了这种风格调性的优势。如下图所示,在结算类界面中,动效表现上就充分利用了高质量模型,镜头设计和简约的平面设计,充分将这种特有情绪高潮点位的情绪调动了起来:

最终玩家呆的时间最久的是局内。虽说本作局内界面的设计“存在感”很弱,但设计水准极为在线,这种纤细的图形构造,有一种时尚与科技结合的风格,与写实竞速有极高的吻合度:

局内有很多状态提示,它们均保持了与外围系统同样调性的动态设计:




通用、无风格和优雅。








这类写实风格游戏中,界面设计的极度扁平化与无风格化,对动效基本状态的设计要求会更高。虽然这么做的目的我们已经很清楚,为画面更多让位,以及烘托特别的风格氛围,但写实风格界面设计中动效设计的品质依然决定了游戏整体的体验质量。









以上就是本篇全部内容。









 本号知识星球营建中 

欢迎扫码关注









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



推荐阅读

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