Persona5 UI 解析视频 记录

原视频

标题：Examining Persona 5's Menus - Video Notes on P5's UI

作者：Research Runs

链接：https://www.youtube.com/watch?v=DxOGkhLfPf8

Title Screen

• 开始游戏时，会有一段“猫”奔跑移动的镜头。
• 以白色，黑色，灰色，红色作为主色调，让玩家的Curosr变成一个移动的蓝色物体，使得选项变得独特。
• 因为浅蓝色是整个屏幕非常独特的颜色，所以会显得很显眼。（moving blue bubble)
• 2.34

Title Screen01

• 当玩家按下按键时，会有一个声音作为反馈，同时镜头开始向下移动，当镜头到达底部时，会有一个镜头的碰撞来调节镜头。
• 这会让镜头变得更有重量感，更真实。
• 当玩家选择其他选项时，镜头的运动原理同上。

Config

• 到了设置页面，作为底色的红色消失了，而是以黑色和白色所存在。
• 红色代替了蓝色，作为强调和cursor的存在所存在着。
• Loading screen 一样底色变成了白色跟黑色，用亮红以及更多的信息量强调着玩家目前的选项。例如，当玩家选择了选项时，会出现：难度“，“游玩时间”这些信息。

Main Screen

• 在左边，是一个游戏当前的场景，并加上了红色的滤镜，使得左边的部分与整个UI相结合。同时，因为还是有显示一部分的游戏场景，也不会让游戏的主界面看起来跟游戏分离。（底色：黑白红）同时这部分，也给整个主界面与游戏的结合提供了过渡。

• 在其他游戏中，主界面的使用是，按下按键，屏幕变黑，主界面出现，按下按键，屏幕变黑，游戏画面出现。使得整个主页面看起来像是与游戏分离开的一样。

• 主界面的响应时间为15帧

• 整个主界面画面，在移动的物体总共有三件，第一是玩家的Cursor，第二是右边选项对应数字，第三是背景的星星。在心理学中，Inattentional blindness，在处理相对复杂的任务中，人们的注意力会放在最为显眼的物体上，而没有知觉到背景中的刺激。

• 玩家的Cursor，依然是采用在移动的Bubble，蓝色也依然只在玩家的Cursor出现（整个屏幕唯一的地方）。移动选项，会使选项放大从而强调选项。

• 因为玩家的Cursor是移动频率最高的物体，所以玩家不会被背景的星星所影响。背景的星星给整个画面提供了更多的动态。

• 选项的颜色，也没有采用完全的白，而是采用黄褐色，来体现出与背景底色的不同。

  

• 玩家的Cursor，在玩家在不同的选项中切换时，蓝色部分，会变得非常锐利。给与玩家视觉（input）上的feedback。

Character

• 整一个UI移动的非常流畅，新界面的右边依然保留着原来的游戏场景，来保证UI与游戏的结合性。并且整一个UI的逻辑是从上至下的（Up and down)

  

• 每次移动除了，之前提到的，会进行变形的Bubble以外，还有人物的头像会像气泡一样，bububu的变大变小，强调当前选择的人物。同时，当前选择的人物的底色，会由白色变成黄褐色，同上。

  

• Up and down的UI进行逻辑，让不同页面之间的切换更加顺滑。个人感觉，其他的UI，要不就是一张大的表格拥有不同的选项，要不就是不同的PPT相互切换。而P5的UI则更像是，将一张纸折叠张开再折叠再张开的感觉。

• 切换到下一层UI后，显示人物Cursor的变形bubble会被冻结，但被选择的人物选项会变大。

• Command Screen

  在没有声音给玩家的input做出反馈的时候，游戏将每一个Icon都做了一个类似撞击的效果，来让玩家知道Icon里面内容的变化。
  

  • 在玩家显示其他种类类型时，游戏会播放一个将子弹弹开的动画

  • 而在显示枪类型的种类时，子弹会停留在Armor的位置。

  • 对于其他的子菜单，基本同理。（颜色，撞击，动画）

• Persona Screen

• 在对于重要信息的时候，游戏将白色去除了出去，大大的一个感叹号强调这条消息的重要性。蓝色，依然是表示选项和强调。

  

• 在进入详细页面时，背景依然是之前的黑色（取消了星星），白色的条状物开始变化，变成承载了Persona属性的横条。因为是在相同元素上进行变化，所以P5所有的菜单变化都看起来非常流畅。

  

• 白色的条状物是承载信息的主要物体，每一次的切换，在大体上也只是切换白色的条状物

消除动画

• 在从子菜单回到主菜单时，因为每一个子菜单都有跟主菜单同样的红色部分（跟游戏场景相连的部分），整个界面像是被消除（不可见）一样。非常的自然流畅。
• 两个界面切换中，就是相同元素的切换。（主要左上角的齿轮）

战斗界面

• 对应手柄的位置，上下左右的按键非常清晰可见。就算不低头寻找具体的按键，也能根据大概方位找出。同时，在每个指令的下面，还有对于该指令的描述，让所有按键都非常具有可读性。

• 攻击时的，屏幕抖动，视觉效果，让玩家感受到自己每一次的input都是有效的，并且有反馈性的。

• 在战斗中，数字有相应的反馈，例如当玩家选择到这个选项时，数字会跳动，对应的消耗量，也会在人物的头像附件中跳动。（注意右下角，狐狸的血条以及魔力值）

• 总结：

  • 利用颜色来区分选项，例如P5中利用蓝色，来确定玩家当前的选项。
  • 利用颜色来强调，选项的白色会变成黄褐色
  • 保持主菜单与游戏场景的连接
  • 相同元素的变化，使得子菜单切换变得更加流畅。
  • 使用撞击效果，声音，让玩家的input得到最够多的feedback
  • 对于icon的变形同样是一个很好的方法。