光子设计师:如何用导演思维中的分镜手法谈UI创作？
UI设计中的导演思维。
文/光子设计师老王编辑/浩克yoli
与电影相比，游戏是视觉和声音的混合艺术。如何让游戏像电影一样有更强的代入感和沉浸感？
本文将从镜头的角度，研究多角度的镜头拆分和丰富创意的构图如何给视觉效果和整体游戏体验带来动感和变化。
比如我们在经历“死亡搁浅”的时候，大量鲸鱼搁浅在沙滩上的全景给我们一种孤独寂寞的感觉。随着镜头慢慢抬起，天空中渐渐浮现出游戏logo。相信这一幕给了玩家极大的震撼。
比如《征途》开头，当反派慢慢走上山坡——镜头拉远，神圣的山，孤独，神圣，沙漠的气息顿时扑面而来。
这里用的例子都是电影中常用的远距镜头，通常用来表现整体的环境氛围、地貌等状况。...
事实上，在一些游戏中，为了加强玩家的代入感，这种大前景切换的效果也被应用在UI中，以加强代入感。
在柏文品牌中，玩家通过远程升降镜头的方式被带入游戏，仿佛直接置身于这个场景中。
背景前提:游戏镜头语言的走向
对于游戏来说，不同的镜头视角可以表达不同的氛围、情绪和画面张力。随着大型游戏对情感表达的日益重视，更多的是沉浸感的展现。与过去相比，镜头语言和视觉效果与现在的时尚潮流大相径庭。
生化危机2重置版里，摄像头就在里昂后面几米，很强。好像玩家是Leon，我们一起在经历游戏带来的诸多危机。
制片人在采访中也强调了这一点。“我们想呈现感同身受的恐怖，就好像你和僵尸有了一次亲密接触，只有这个视角可以做到。”
其实这里用的原理是，镜头离角色越近，玩家越有代入角色的感觉。现在越来越多的游戏开始使用这种过肩透视的故事镜头。
故事镜头对用户界面的影响
其实围绕着突出故事表达的趋势，越来越接近角色的镜头语言对我们的UI设计和视觉设计语言有什么影响？
这里我们以战神为例。
在传统的游戏视角中，UI位于整个游戏画面的外围，利用UI视觉中武器建模的关联性来体现剧情。画面整体视角多为远景，体现了一枪打死叶的凶悍。奎爷此时还是一个“神”而且是无敌的，所以游戏设置了大量的敌人和大量的大规模攻击，所以镜头缩小带来了整个战场的宽视角。UI与屏幕分离，以“控制器”的形式出现。奎爷在画面中也很小，玩家更像是在操作一个玩具或者木偶，而不是在扮演一个角色。
玩家对“游戏”本身还是有一定的距离感的。那么在UI设计中，我们会更倾向于使用相关的视觉元素或者造型来帮助体现游戏的世界观和文化表达，比如战神中魁耶的斧头造型元素。
而新一代战神4中所讲述的则是一个更加人性化的故事，更多的展现了奎大师作为一个“人”或者说是一个“好父亲”的一面。
所以江湖人称之为“战神和他的老父亲”。为了表达这个故事，游戏采用了过肩透视和一面镜子到底的方式。这样可以像看电影一样细致地观察奎大师，也可以让玩家更贴近人物。
为了整个游戏的代入感和故事性，UI也采用了扁平化、半透明、弱对比的设计，尽量不破坏视觉范围内的整体画面感，玩家可以更多的带入奎爷的内心世界，体验奎爷的视角。
但同时也带来了一些弊端，就是玩家的视野有限，很难看清身后的敌人。
为了解决这个问题，需要从UI层面给玩家一个预警，防止被绕过和攻击。可以看到角色周围有很多这样的暗示箭头，箭头的颜色变化表示敌人正在接近的危险警告。同时，声音的提示和辅助也是最有效的方式之一。在《战神》中，“儿子”还会和玩家进行语音交互，用语音和UI结合的方式提醒身后的敌人。
在这方面，《死亡搁浅》更是别出心裁，通过与世界观本身的物体交互来表现提示、指向等功能UI，减少了对整体画面的干扰，进一步加强了游戏的沉浸感。
UI中几种常见的镜头角度及其适用范围
接下来说说设计实际案例中不同的镜头角度和设计原则。
平视:游戏中最常规的视角类型，也是ui设计中常见的视角。这种平行视角接近玩家的整体感受，信息的层次表达也比较清晰，所以也是最常见和应用最广泛的，这里就不赘述了。
俯视:特点是视角在被摄对象的头顶或上方，层次和视野清晰。常用于策略类游戏或者需要玩家做出理性客观的指令时。让玩家有上帝视角的感觉或者运筹帷幄的感觉。接下来用实际案例来看看这个视角带给玩家的感受。
仰视:特点是视点在人物腰部以下或主体下半部。图像显得很高。给玩家的整体感觉是对手和玩家有一定的地位或者阶级差异，有一定的崇拜感或者关注感。
抬头更能体现玩家对信息或人物的重要性。
镜头的运动模式及其在UI中的应用
其实镜头移动的方式都是一样的，都是按照以下基本原则来排列组合的。
拉镜头:
推动镜头:
跟随镜头(彼得潘故事板):
摇动镜头:
升降镜头(岁月童话故事板):
组和镜头(红猪故事板):
说了上面的基本原则，我们直接来看看在实际的UI设计中如何使用这些镜头移动方式。
在《全境封锁》中，我们通过镜头的移动，重点关注人物换衣服的部分。
玩家也会更专注于视觉体验，代入感更强，可以专注于最有用的信息层面。
在开场中，主角从低角度镜头下飞机，跟随角色镜头的移动，使得cg转场和屏幕、UI表现之间的过渡非常自然。
通过推镜头，可以进一步直观的感受到穿衣打扮的不同和信息层次的不同。
进一步将镜头推向主角的焦点，增加体验感。
镜头推拉切换穿衣的信息层次和焦点。
死亡搁浅中的升降镜头。
平安北京里的人物跟着推镜头切换推镜头到位置。
无序在信息级别切换镜头运动。
P5中的著名镜头就是效仿了主角和UI的结合。
从以上不同的案例表现可以看出，通过镜头基本运动原理的组合应用，可以大大增加玩家对整体视觉表现和游戏互动的代入感。
希望能从镜头运动的角度给你更多的启发，创造更多的可能性。
标签
以上，我们从镜头的角度和运动模式的维度对镜头进行了分析和解释。
相信你也看到了，在路线越来越精致的今天，设计一个好的系统界面不仅仅是视觉或者交互层面单方面的去创作，还需要我们的设计师有更多的导演思维，能够从全局的角度从更高的维度去整体包装设计。
同时对我们团队的要求也更加全面。更重要的是，我们需要我们拥有VX动画、TA、3D场景、人物模型、音效等多个维度的学生在精品化、讲故事化的道路上进行协同作战，这也使得我们作为设计师需要更全面的思考，可以从全局的角度更深入的挖掘整体概念和基本原理，通过各种协作和创作，在整体方向上推进。
我在这里列举一下镜头的使用在整体故事表达中的作用，希望能给你以后的创作带来一些启发和方向。谢谢你。
分配困境|对话马晓义|野斗|动态经济学
最强蜗牛|二次元游戏困境|游戏设计书籍