这样的动效，很夜之城
赛博朋克前世今生
----正文于下一下节开始，可手动跳转----
《赛博朋克2077》（英语：Cyberpunk 2077，香港常用英文，台湾译作“电驭叛客2077”）是一款由CD Projekt，俗称波兰蠢驴，开发并发行的融合动作角色扮演元素的第一人称射击游戏。
本作改编自桌面游戏《赛博朋克2020》，设定在2077年美国加利福尼亚州的“赛博朋克”反乌托邦式城市“夜之城”，玩家在这一开放世界中扮演称为“V”的角色。
游戏最早在2012年公布，2018年3月21日，开发商CD Projekt Red宣布在弗罗茨瓦夫开启一个新的工作室以协助游戏开发。
在2019年E3电子娱乐展上宣布，《赛博朋克2077》将于2020年4月16日发售，稍后宣布游戏将登陆Google Stadia云计算游戏平台。
而在2020年1月16日，开发商CD Projekt RED宣布将游戏发行时间推迟到了2020年9月17日。
2020年6月18日宣布延后至11月19日。
2020年10月28日宣布要再延后至12月10日。
嗯，这是最后一次跳票，我们最终在2020年12月10日玩到了它。
回想小岛的《死亡搁浅》（将来有一文专门讲讲它）和《赛博朋克》同时变成梗的年代，一阵唏嘘。
在那些艰难的期盼时期，我们甚至认为它真的会在2077年上线。
但蠢驴就是蠢驴，有《巫师》的优秀“前科”，我们可以经历数次跳票而依然对它抱有信心。
2012年时，游戏业界还没有流行赛博朋克的设计风格。也还没有流行诸如蒸汽波，坏信号这些视觉设计元素。
什么是赛博朋克？
但在这款游戏出现之前很久，这个概念就早已存在。不过随着《赛博朋克2077》的出圈，“赛博朋克”的含义已经演变得更加丰富。
已经有很多人分析过它的源流与含义，它含义复杂且有众多表现它的艺术作品，如《阿基拉》，《银翼杀手》，《黑客帝国》，《攻壳机动队》等等。这些作品中所传达出的未来高科技，宏大场景以及霓虹灯，神秘东方元素等等，都是这种艺术风格的重要组成部分。
究其本质，赛博朋克实际上是一种反乌托邦（Dystopia、Cacotopia、kakotopia或anti-utopia），即一种与理想社会相反的“不得人心、令人恐惧的假想社群或社会”。
本质上它所描述的是一种具有尖锐的阶级对立关系的假想世界。
因此才会有以“九龙城寨”为原型的拥挤肮脏混乱的底层居住环境，才会有使用高科技，干净体面的高层生活图景，才会有各种电子义肢。才会有在“公司”压迫下产生心理纠葛的电子人，探寻自己的意义是这种作品最核心的思想路线。
简单的说，这个风格的表层就是体现一种“高科技，低生活”的生活场景。这种场景大部分在描述底层的一种“朋克”式生活状态。这是一种失序的状态，因此极为符合源自音乐流派的“朋克”所描述的精神实质，即自由和反叛。自由是因为失序，反叛是因为要挣扎，要反对所有对自己生存有威胁的因素。
只追求视觉层面的“赛博朋克”并不能真的让人体验赛博朋克的精神内涵。这也是很多跟风者所犯的最严重的问题。这款游戏之所以让玩家有沉浸式的赛博朋克体验，就在于它所描绘的“人吃人”的底层社会规则与血腥掠夺毫无人性的上层阶级所组成的混乱社会。披着高科技的皮，广大的底层只能活在水深火热之中，被赛博（cyber，控制）着，用朋克（punk，反传统）的生活方式活着。世上少有这样的社会，只有在这样的虚拟中，我们才能从这种混乱中体味到游戏的乐趣，但愿全人类都只能在虚拟中才得以体验赛博朋克吧。
这种未来失序的生活场景所拥有的视觉化元素，无不体现着这些它所要表现的精神内核。
视觉语言
这里所说的视觉语言指的是这款游戏的界面所表现的视觉特点。
它的世界观建立在一种未来高科技的基础之上。游戏中出现的霓虹灯，全息影像技术和机械义肢以及跟人的肉体相结合的芯片技术都指向了这一点。
在游戏的界面系统上，设计师巧妙的利用了芯片与生化结合的特点。玩家在界面中的操作被设定成是在游戏主角的脑子里，即某种脑机操作系统中，进行操作。人物有机器人的特征，然而并不是完全的机器人。所以界面中就出现了大量相关的设定，如进入游戏就是“侵入系统”，而人物死亡就是“系统致命错误”。
技能成长界面，有很多科技感元素图形
如下图，是游戏开始前的loading界面，这时界面的提示信息是“正在入侵...”这似乎意味着，玩家在黑进游戏内人物的脑内操作系统，这非常赛博朋克。
而下图的死亡血屏动态效果里，界面提示信息则先是显示“致命系统错误”，而后是“停搏”。这是个典型的“程序化思维”，即先判断错误类型，然后定位到具体错误事件。也是一种脑机系统的设定。
在色调上，游戏界面以红色基调为主色调，以黄色为提示色调，辅以青色等辅助色。
这种配色是很典型的“霓虹”色。是一种在赛博朋克类世界观游戏里经常被用到配色方式。在该游戏中，这种起源于霓虹效果的色彩也多被用在一些纹身效果上，用在场景和人物身上或者服装上。总体上散发出一种超现实的观感，结合原先的一些图腾或者纹身样式，很有重金属摇滚、自由反叛的精神气质。
战斗界面，主要界面色彩是红色，黄色和青色作为点缀色
游戏场景中不乏荧光元素，包括这种墙上的涂鸦
而在此基础上进行的动态效果设计里，就需要有跟信息化，高科技相关的动态设计。如闪动，切变等效果。
如下图的等级经验提升提示tip，该控件的每个元素都基本是以闪动的效果出现和消失的。
此外，这里应用到的最有特点的动态元素是坏信号效果。这种效果虽然也是高科技类风格常用的，但由于它在赛博朋克视觉风格中的频繁使用，加之赛博朋克的出圈，这种效果就被认为是赛博朋克风格的代表性元素。其实在出圈的过程中，这种动态风格也逐渐扩散和丰富，它目前几乎可以被套用在任何风格的界面上，而且也呈现出一种多样化趋势。
但将它在运用赛博朋克游戏界面中，则是一种能最贴切表现这种设计风格的设计手法。
游戏登录界面里的坏信号效果
玩家血量低的“血屏”效果也用的坏信号效果
主角的relic出现故障时，战斗界面会出现严重扰动，画面也会出现崩坏特效
坏信号效果的意义
我们在探讨赛博朋克这一概念最本质含义的时候意识到它所描述的是在大资本控制的社会中，底层与上层尖锐对立的故事。
这种底层的所谓高科技生活中最有代表性的特点就是质感的破旧和损坏。它的日常与当代有着类似社会制度的国家中底层的日常没有什么本质不同。两者之间的差别仅在于前者的社会生活中所使用的技术不同。
就如同《异形》中的高科技货船，它的设定与现实中的长途卡车司机没有什么不同。只不过一个是虚幻的高科技飞船，一个是真实的卡车而已。
1979年《异形》第一部开头中飞船操作台的开机动画
但它们一样都有喝了半拉的脏兮兮的咖啡杯，三明治，以及随便放置在驾驶台上的杂物。并不因为故事所描述的是未来而在场景上被描写成干净的样子。
因为这种设定认为，人类的活法从来不变，无非是从使用鹅毛笔变成了使用全息屏。底层生活的艰难本质并不会因为技术的革命而改变多少。正是这种对本质行为的深刻认知，才塑造出了真实可信的未来生活细节。
这种视觉风格元素也可以在同样是赛博朋克风格的电影《银翼杀手 2049》中看到。
运用了高科技的，甚至可以飞行的载具，内部的仪表图像风格却像极了老旧的显像管设备。
电影《银翼杀手 2049》中的主角座驾仪表
本游戏中类似物件的风格跟这种视觉风格有很高的相似度。虽然是2077的未来世界，但汽车依然只是单色仪表，且有着浓浓的80年代外形设计风格。看起来和老旧的收音机一个质感。底层的“高科技”生活依然是如此陈旧。
游戏中车载界面的效果
在《赛博朋克2077》里我们所扮演的角色，所生存的地方，和在香港鸽子笼或者里约热内卢贫民窟里生活的平民没有本质的差别。也会用淘换来的二手货，也会住在嘈杂拥挤的公寓里，也会用跟时代相同的技术。
游戏中浓厚港味的街景
脏乱差的街角，可以说非常写实了
所以说，游戏人物所用的物品虽然是高科技产物，有全息显示技术，但不是多新多贵的事物。无非是可以用黑客技术进行改造和组合，让它们看起来足够厉害（Diao）。这样的设备频繁出现一些问题乃是家常便饭。高科技的物件，尤其是视觉化显示的东西，出现问题就会有画面的损坏效果。这是坏信号效果出现的最本质逻辑。
事实上，游戏内的界面上每次使用坏信号效果的情景，往往都是跟设备问题有关。如主角血量低、电话信号差、快进剧情等等。
80年代复古未来感
这种“低生活”的朋克图景其实也有跟“蒸汽波”艺术风格中的某些元素有密不可分的关系。坏信号效果跟显像管显示器、数字化损坏的效果也脱不开关系。尤其是一些old school的视觉元素，如对70到80年代老电脑上的一些显示效果的模仿等等。
而且赛博朋克这一概念本身就有很大一部分是对上一代艺术形式的复古，尤其是对80年代的复古。这种复古意味着这种未来感中的科技感一定是带有强烈古早电子设备特征的。如对早期的电子辅助绘图设备显示效果的模仿。
现实世界里80年代科技设备Tektronix 4010 里的图像显示
现代艺术家创作的古典电子风格：IBM电脑设备，可以看到复古未来主义的界面特点：单色的界面显示，简约的界面设计风格
老物件所传递出的陈旧气息，和未来复古元素综合体现在2077的世界里，传达出一种反现实的朋克气息。
界面动效
这款游戏的界面动效如果按照效果类型来划分，可以归纳成三种：
坏信号效果，闪动效果和简化效果。
坏信号效果
前边我们有分析过这种效果在整个视觉语言体系中的作用。
具体到某些细节上时，这种效果通常用来表现“信号差”，“出错”以及“快切”等视觉感受。
如下图的电话头像效果中出现的坏信号效果，表现的就是电话信号不太稳定的意思（或者仅仅只是丰富这里的视觉表现）。
下图中的回忆读取演示动画里，大量使用坏信号效果，表现的就是“快切”的视觉感受。
当玩家驾驶车辆发生了碰撞时，车载界面中也会出现扰动效果，这里就表示“损坏”和“出错”。
而玩家受伤或者死亡时的“血屏”则是全屏红色，并有很强的扰动和坏信号。不仅表现出义体的科技化损坏特点，还传达出极为强烈的不安感受。
闪动效果
闪动效果大量出现在界面入场类的动画中。
在该游戏的战斗界面中存在大量的提示信息，即通常我们称之为tip的界面控件。
这些tip的入场就大量使用了闪动效果。这种闪动效果有两种作用，一个是用较为强烈的动态语言引起玩家注意；另一个是体现上边我们提到的科技感的，古典式电子元件的视觉化特点。
任务完成提示
进入新区域提示
简化效果
这款游戏的界面动态效果存在一个割裂式的表现。
在战斗界面和一些演示类型的界面中存在大量细腻的动态表现，对界面控件元素进行结构拆解后，赋予闪动、伸展等动画效果。
但在系统型界面，如主菜单界面、人物详情、背包、任务等等中，则用了较为简化的动态视觉语言。
如下图所示的主菜单界面的入场动画，基本只用了简单的位置滑动与透明度变化动画。
不过也应该注意到，这种界面中也有一些比较细腻的背景动态表现。最明显的就是画面两侧的一些类似“数据”的动态图形。这种动态使整个界面在待机状态下时不至于显得很“死”。
这种内部系统页面表现出的动态特点与战斗内界面很多控件细腻化的表现是比较割裂的。虽然我们也可以理解为这是设计师对整体界面动态表现节奏的一种规划。
但至少在某些有比较细腻的图形设计的界面里，其实是可以赋予更多的解构式动画，才更能从动态层面表现出视觉设计所想要表达的那种结构化的，科技感的特点。
比如下图所示的“专长”界面切入“技术能力”界面的转场动画中，“技术能力”界面里有很丰富的图标和框体设计。有许多结构是可以用动态的语言去解释得更加详尽，从而给人更多带入感的。
但事实上，目前的这个入场只是将整块内容区域作为一个整体做了缩放和透明度变化。这种动态设计相对于界面设计来说是比较寡淡的。
除此以外，有些界面会与人物或者场景进行联动，比较典型的是在“义体”界面中的动效。
如下图所示的“义体”界面内的几个切换效果，其界面操作就与具体的身体部位产生联动，点击具体部位时，会有镜头推拉表现。这种表现将原本单调的界面控件推拉动作衬托得不那么寡淡。而且联动的动态效果会更直观的展现界面本身所代表的含义。
这种“界面与三维物体进行联动”的效果，在游戏界面中不是什么新鲜事物。在这种效果里，需要额外注意的是：联动的几个元素需要在运动逻辑上保持一致性。事实上，在该游戏的某些界面里就出现了一些联动逻辑的破绽。
如下图所示，从背包界面切换到武器替换界面时，界面的控件整体上是朝两边扩散式消失的，但居于场景中间的三维人物却朝右侧运动消失。这种效果没有能够体现出界面与人物之间的空间逻辑。
正常来讲，当界面呈现左中右三块式的布局时，两侧控件朝向各自的外侧运动消失时，中间的物体应该缩放消失，就好像朝它的三维空间的后（或前）层运动一样。
也许是因为项目组没能有足够精力去处理界面上体验设计的问题，也许是因为这种类型游戏面向的目标群体主要是国外玩家，而他们的操作习惯与我们经常面对的目标群体--国内玩家的习惯有巨大的差异。
不管是什么未知原因，都导致了这款游戏的内部系统的体验设计显得混乱和多有错漏。
在动态设计的功能表现维度，这款游戏的界面动效则可以划分为三个类型：
提示型，演示型和展示型。
提示型
提示型的动效几乎全部都在战斗界面中，而且多以闪动、刷入的动态进行组合的方式入场，并且它们普遍都有一个稍微较长的时间节奏。
这类动效大致有“任务提示”、“物品提示”、“经验点提示”、“地点提示”、“声望提示”（该描述包括“街头声望”、“刀剑技能”、“专长点数”等类似设计形式的提示）和“被入侵提示”（该描述也包括类似设计形式的几种提示）等几种。这里被提到的前四种提示出现在界面的左侧中间靠下区域，是一种较为频繁出现的，和较为弱化的提示信息。而后两种出现在画面中央，一个在中央顶部，一个在中央偏底部。从位置、设计样式和画面占比这几点来看，这两种显然是较前四种而言较重的提示。
任务提示
收到新物品提示
经验点数提示
地点提示
声望提示
被入侵提示
这些提示类型的动效依附于其界面的功能设计而有着不同的具体展开动画，但都使用了同一种动态语言，即由点及面的展开，闪动式和延展式展开的效果。
演示型
演示型的动态效果比较类似于游戏中的过场动画。通常用来展示一段任务的基本信息。可以看作是“任务简报”视频。
它们是一种自动播放的视频，实现方式应该不同于游戏中的可交互界面。
其内展示的一些虚假的界面动效的动态语言，与游戏内真实的界面的动态语言是相对比较一致的。
比如都用了伸展式的框体入场动画，闪动的效果，以及复古电子动画的模拟。
但是，相较于真实的游戏界面，仍然能看出来它们有更为细腻的动态设计。
这点是可以理解的，以视频形式展示的界面演示，会比较少的受限于游戏引擎，就会较大化的展示动态设计师原本想要设计的动态样式。与真实的游戏界面相比，会多一些更加细腻的动画细节。尤其是能与一些三维物体有着更加融洽的配合，让整体的动画演示效果更加顺畅和出彩。
山车任务简报
小平头任务简报
展示型
展示型的动效指的就是该游戏内界面框体的入场和交互动效。由于它的功能主要就是解释界面的来源和去由，目的是展示界面内容，并促使玩家与界面进行交互，因此本文称其为展示型动效。
它们看起来和演示型的动效比较相似。不过，与演示型的动效最根本的差别在于，它们是游戏内真实界面的入场与交互效果。需要严格考虑体验流程与落地实现的程度。
这些展示型的动效，比较完善继承整体动态视觉语言的，也绝大部分存在于战斗界面内的弹窗类界面上。
上文中提到的一些系统内界面动效，与战斗内这些界面存在较大的割裂感，不太能体现整体的动态语言，所以此处不再讨论那些部分。
纵观这些动效，总体上可以大致分为两种类型：一种是以闪动效果为主要入场效果的框体。另一种是主要以拉伸方式入场的框体。
第一种的有如下的“呼叫联系人”界面、“车载电台”界面以及“消息”界面。
这类界面的特点是，界面结构中的几个部分被拆分后，渐次入场，并且主要的入场形式是闪动，辅以少量的伸展运动，如标题栏的底图伸展。
联系人界面
车载电台界面
而像“消息”界面这样的界面，就几乎是直接整体闪动入场。
消息界面
另外一种的就如以下的“入侵”界面、“快速破解”界面和“扫描人物”弹窗。它们主要是以框体的主体部分进行伸展的方式入场，辅以少量的闪动效果。
入侵界面
快速破解入场动效
扫描人物弹窗
这两种展示型动效的设计，实际上还是同一种动态视觉语言。只是在闪动与伸展这两种形式中各自有所取舍。
可以发现这样的规律：在框体比较虚化的时候，即没有实体的图形勾勒，整个框体显得较为“虚无”时，动态上多用闪动。这时是第一种展示型动效；而在框体有实体图形，显得“实在”时，动态上多用伸展。这时是第二种展示型动效。
可见，面对这些丰富的界面框体设计类型，动态设计师设计了一种可以合理解释界面视觉元素逻辑关系动态表现规则，使整体的动态都更趋向合理。
与场景界面的交互
作为一款高自由度的游戏，不仅在界面中存在大量交互操作，在场景中也存在大量可交互的界面。
这种界面依附于场景中的模型上，可以看作是一种可以让玩家与场景内物体直接交互的模式，而非传统上的界面二维化交互方式。
不过这也不是一种三维化的交互方式，而是将界面上的二维交互用面片的形式贴在了场景的三维模型上。并且它也常见于该类游戏（故事性强，开放性世界）中。
这种形式不仅直接提升了游戏的沉浸感，还在操作层面上对“科技感”这一含义进行了解释和完善。
这种交互模式需要动效与特效技术的结合，如下图中进入电脑的操作流程中，就首先需要一个场景内镜头的运动动画来承载。
电脑交互动作
而在进入电脑界面之后，玩家可以更加像在真实世界里那样的去操作电脑屏幕内的界面。这时候的界面并没有被设计成“浮”在画面层之上的一个二维层，而是直接被制作在电脑的模型面上。
电脑内界面交互
而且在这个界面里，还有相应的响应玩家操作的动效。这种场景动画与场景内界面动画想结合的方式，最大化模拟了现实中对相似物件的操作方式，给予了玩家最大的沉浸感。
类似的还有电梯里界面的相关操作。这个操作流虽然去掉了被动式的镜头移动动画，但需要玩家手动将自己的视角，也就是第一人称的镜头移动到电梯操作面板上的相应位置，才可以跟面板里的界面进行交互。
就像我们在现实世界里那样，得先把目光移动到需要操作的地方，我们的手才知道触摸哪里。
呼叫电梯操作
电梯内操作
动态语言特征
在这些界面动效中，我们可以感受到一种风格明显的设计。
这种风格的主要动态语言特征就是由点及面的节奏设计与伸展和闪动效果的综合运用。
由点及面
由点及面。指的是该游戏的很多控件，包括一些较大块的框体的动效都是以一个点为起始，通过动态变化，最终延展成一个面的过程。
这个过程中，起始的“点”可能是一个图标，也可能是框体中的一个小的元素。
通过这种延展式的动画效果，配合一以贯之的闪动与片状图形伸展，构成了一种特殊的节奏感。
这种节奏感除了是一种比较常见的科技感动态设计之外，也是对游戏视觉语言中“80年代复古未来”的一种表达。
如下图所示的Tektronix 4012 设备中，文字的显示过程，就是一种有特点的刷新动画。最有特点的部分实际上是闪动效果，以及经典文字光标。
80年代电子设备Tektronix 4012 里的图像文字显示动画
模仿这种刷新信息的动态逻辑，如下图所示，游戏里的提示控件动效，从一个图标的变化入场，接着刷入右侧的条栏，并显示出要展示的文字信息，就构成了一个完整的由点及面的动态节奏设计。
刀剑技能提示
在其他地方也可以看到很多对文字光标的模拟。
如下图的“获得塔罗牌”提示入场动效中，就是以左上角的图形为起始点渐次展开的：
先是左上角图形的闪现，接着一个形似文字光标的横条从这里向右刷出，当它抵达右侧预定位置时，这个控件的主要显示信息也在下方区域展示出来。
展示信息区域的黄色标题文字，也同样用文字光标的模式刷出，两者保持了整体的风格一致性。
同样，这个提示的收起动画用的则是光标刷入的反向动画，即光标向左刷出，同时其他信息消失。
获得塔罗牌提示
下图中的“新消息提示”控件，也是以同样的动效入场的。右上角承担刷入整个信息区域的红色横条在待机状态时，也巧妙的承担了整个框体边界标识的作用。而且它的设计样式也很体现复古未来感。
新消息提示
伸展和闪动
该游戏整个界面体系中，有非常多基于实体框体设计，尤其是面片上的伸展动画，以及图形元素的闪现动画。
这些动画设计都很明显是一种科技感设计风格。正如我们在很多其他科技感游戏界面设计中所能看到的动效设计一样，它们都喜欢用非常多的面片伸展与元素闪动的效果。
但该游戏中的这种延展动作，由于进行了非常多图形结构上的拆解，则显得更加细腻。尤其应用在一些结构复杂的界面设计中时。
如下图所示的“系统重启”界面。这种界面在平面设计上仍然是一种复古未来科技感的设计：单色显示，线框和面片的组合，诸多代码文字等。正如我们所见到的那样，它的动效就可以是直接模仿老式电子设备的显示效果：图形逐个伸展，一个图形引出下一个图形，文字信息逐个在已形成的框体中刷入等。
系统重启
基于前文所讲的原因，在一些演示型的界面中，这种细腻的表现更加的富有细节。如下图的“生物监测面板”的载入动画：先是logo图形的显示，接着是框体的伸展，然后面板中的文字和加载条出现，接着是框体变形，刷出新的信息。这些新的信息也由多个渐次入场的伸展动画组成。
生物监测面板载入
在一些简单的控件中，也继续延伸了这种伸展式的动态设计。比如在下图的“对话框切换”动效中：玩家选择哪一条对话，黄色的衬底就会在哪条对话文字的下方伸展式出现。
对话框切换
虽然该游戏在内部系统的整体入场动画和出场动画上的设计较为简约，即我们上文说的与其他界面的设计有较大的割裂感。但在一些小的提示弹窗上依然有一些细节设计。
其中一个特点就是对延展式设计的统一性设计。如下图的“删除存档”弹窗。它的入场就有机结合了闪动和延展的效果：以侧栏的图形为起始，闪动的同时，弹窗的主体横线展开。
删除存档弹窗
从该游戏的整体上去看的话，其界面动态设计有细腻的设计，也有简略的设计。
很多地方的设计是有理由的取舍，而有的则显然是因为没有做到位。导致一些相似的设计没有保持统一的动态效果。但是在整体设计语言上，它们保持了相对高的一致性和有理由的取舍，整体上是成熟的设计。
而且它们是一种非常有特点的设计。比如偶尔会有比较长的时间长度设计。这在我们常见的动效设计里是不多见的。但这种长时长设计也仅多见于提示类的设计中，并且比较符合它的功能场景。
另外就是复古未来科技感的体现。在常见的科技感元素基础上做了一些对复古电子动态元素的模仿，使整个界面体现出一种反现代的观感。这也是赛博朋克元素设计的客观需要。
那些不完善的地方，正如当下这款游戏的诸多BUG一样，并没有阻断玩家去体验游戏。原因无外乎于游戏巨大的号召力，以及本身就被设计得很强的沉浸式故事体验。
但如果问题得不到解决，那些优势就都会被逐渐损耗掉。对游戏来说终究会是一场灾难。
希望蠢驴再接再厉！
以上就是篇文章的全部内容，如果感到有所收获，请点击“在看”，或者分享给好友。有问题想要跟我交流，欢迎你在本文或公众号后台留言，我都会看到并回复。
Send to Author