网易出品的《王牌竞速》游戏上线有一段时间啦，在骨头老师为期一周的深度体验之后～让我们通过网易的《王牌竞速》这款游戏，探究一下主机类竞速类游戏的美术风格是如何设计的，同时也聊聊竞速游戏里的镜头语言如何运用。

01  美术风格

主机竞速UI风格

在主机竞速游戏中，扁平/拟物/毛玻璃可以说是非常常见的搭配。

 扁平+拟物

界面方面由于重视整体游戏的沉浸感，导致在UI表现上运用了用轻UI，重内容的表现方式。

在游戏主UI里，为了不影响开车时的视野，UI设计上也是非常的轻量。这样可以确保较少的干扰，同时给赛车特效更多的表现空间。

 毛玻璃效果

在不同的光线环境和物品重叠下，其所代表的「背景模糊」效果不同于一般的渐变，色彩结合更加柔和，能够和画面中锐化过的部分产生鲜明的对比。

背景模糊仍然在面板样式层面扮演了重要的角色，不过进一步被改进成了「亚克力材料」（Acrylic Material）风格，通过对亚力克板的仿真来构建视觉层级。

背景增加了景深效果，视觉上往后退。

面板细节上充分利用了每个模块，当作海报来设计。

竞速游戏主UI对比

在《王牌竞速》之前就出过《极品飞车》系列游戏和《狂野飙车》系列游戏，腾讯的《QQ飞车》也是至今很受欢迎的手游之一。

所以对于《王牌竞速》的考验就是如何在竞速游戏之中做出差异化。

骨头老师的一番体验之下，发现《王牌竞速》玩法上相对来说比写实类竞速游戏更休闲，所以在游戏美术上的表现上没有《QQ飞车》这么卡通，更接近《极品飞车》的写实风格。

《王牌竞速》相比《极品飞车》在主UI的表现上背景足够有空间感，右侧的运营活动BANNER也足够突出。

默认车头的朝向指向了“前往速度节”，游戏内的核心玩法都放在了这里。

02  品牌化视觉包装

主机竞速UI风格

《王牌竞速》游戏的关键词是“竞速”，然而速度这个字非常抽象，咱们可以在游戏中看到很多类似这样的流光速度线来做贯穿整个游戏美术包装的SEED。

流光效果的来源VIZIO品牌的概念广告

视觉SEED反复出现不仅可以提示玩家在同一个游戏，也可以增强代入感。

同时也将流光这个元素运用到了各个部分，赛季预告浮层。

升级和获得物品的弹出浮层

以及进行中的状态都有结合动效来表现

《王牌竞速》整体的视觉包装是以“王牌速度节”来做的整体包装，所以在整体气氛的表现上运用了很多荧光玫红色和蓝紫色作为搭配表现UI。

荧光涂鸦元素和在车上坐着的姿势也致敬了LOL的 KDA女团《POPSTARS》里的设定。

主机竞速UI风格

讲真，《王牌竞速》的这种视觉化较强的风格其实不太好做，控制不好的话很容易给人“杀马特”之感。

因此《王牌竞速》除了视觉SEED反复出现提醒玩家是在同一个游戏里外，对饱和度，冷暖炫光，文字排版，光影构成也做了一定程度的统一，导致了完全不同的画面色调下又是在一整个大的界面系统里。

在各种拟物化以及宣传类的界面中，运用了3D渲染制作以及后期合成的手法。

对车辆场景，物件道具表现，进行了大量电影海报级别的合成制作。

王牌竞速对每期活动道具以及车辆，都会针对其进行对应主题进行色彩和元素设计。

在整体饱和度和其他界面保证统一的大前提下，色调和光影会根据主题设计，让玩家不会沉浸在长期的蓝紫色画面中感到视觉疲劳。

幸运盲盒机结合了现实生活中大家购买盲盒的体验。

在这里抽的盲盒是可以选择自己选定的盲盒，也可以随机打开，在视觉表现的同时也充分考虑到了玩家的体验。

03  品牌化视觉包装

 镜头景别 

在游戏中运用了不同的景别来表现需要强调的游戏画面，多用于重要的游戏进程和游戏界面。

从进入游戏开始，建立玩家对游戏的信任感，好的镜头语言设计也非常重要。

在这里给大家科普一下电影和电视的景别，根据景距、视角的不同，一般分为：特写、近景、中景、全景、大全景、远景、极远景等。

这镜头就是从特写到中景到小全景到大全景到远景的一个“拉”镜头。

 变焦镜头

刚进入游戏时采用了变焦拍摄，人物处在小全景的位置，同时镜头给了划入的车手证一个特写。

变焦拍摄：摄影、摄像机不动，通过镜头焦距的变化，使远方的人或物清晰可见，或使近景从清晰到虚化。

321倒数特效动画这里展现了赛车由近景切换为特写，在点击了“开始游戏”了之后，镜头出现了一个由“推”镜头至“拉”镜头的镜头运动，表现了赛车在刚发动引擎时的速度感。

 子弹时间 

子弹时间的视觉表现用在即将冲到终点的高光时刻，会给玩家更强的胜利感。

04  有效的动效设计

动效设计并不是可有可无的视觉修饰，也不是设计师炫技的手段，而是解决问题，提升体验的有效工具，其存在明确的目的性。

阐述：更好的告知界面发生的变化

当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知，阐述层级关系和界面变化。

提升：趣味性的内容缓解用户焦虑

例如加载动画，可以有效降低用户对时间的感知，对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。

把一些无效和枯燥的时间进行趣味性的调整，可以有效减少玩家在这个过程中流失。

在这里配合加载其他玩家和游戏内容，界面背景的涂鸦会有高亮动效。

加载界面多多少少总会有点无聊，不同的赛车地图用不同的画面，可以吸引一部分玩家的注意力，同时用进度条来给大家做提示可以缓解焦虑。

（如果匹配成功这个小动画能更好地利用就更好了～）

在执照答题界面，这里选取的是人物的中景，执照试卷如果回答正确会自动切换下一张。

及时反馈：让用户更有掌控感

当用户执行了某一操作后，动效是一个非常好用的反馈机制。

点击了氮气加速按钮之后，玩家会得到一个动效反馈，同时加速后会飞到速度条处，及时反馈到了玩家速度提升到了多少，更好地辅助玩家提前预判下一个操作。

和玩家的综合排名部分会显示的速度比较快，节约时间迅速让玩家进入下一赛程。

吸引：有效吸引用户注意力，营造视觉焦点

当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力，有效传达信息。

兑换商店这里，为了表现神剑号的速度感，快到已经冲出了画面。

在“喜提新车”这里的动效表现做的比较突出盒子打开的一瞬间，加强了玩家获得新车的满足感。

总  结

作为竞速游戏，《王牌竞速》选择了写实类竞速游戏的美术风格，在整体游戏UI上做了较强的品牌化视觉包装，游戏中还结合了镜头语言设计和有效的动效设计来辅助UI更好的让玩家深入体验游戏。

一块硬币有正反面，如果一味追求视觉而忽略了体验，将适得其反。加强视觉效果短期内是能吸引住大家的目光，但竞速游戏中玩家的体验感也不容忽视。

好的镜头语言和优秀的动效设计是UI设计师乃至游戏人所追求的目标～大家共勉之～

Powered by Froala Editor