关于游戏交互界面设计的几点思考

墨蓝 2022-06-03 22:17 280阅读 0赞

**接口数据流**  
  
  
玩家所体验的游戏世界其实是在他们的脑海中的，而玩家融入进游戏所通过的界面，就是交互界面。交互界面的设计目标就是让玩家「感到」他能够自如地控制自己的体验。

![游戏界面设计][Center]

上图是一个简单的映射图，我修改了一下原来的图，觉得现在这样更容易理解。一共是四种交互，其中只有一种交互是连接玩家的，也即玩家操作物理输入端（手柄，鼠键），接受物理输出端（显示器显示图像）。玩家通过操作物理输入端进而操作虚拟 IO （Input/Output，输入输出设备，下面简称 IO）和游戏世界。这两层并不完全一样，有些游戏单纯地用物理 IO 操纵游戏角色就可以了，比如用手柄操纵「马里奥」，有些游戏会有一层虚拟 IO，比如「密室逃脱」会有物品栏，可以用鼠标点选房间里的各个角落。绝大多数游戏是两者都有，既有物理 IO 跟游戏世界的交互，又有通过虚拟 IO 来补足物理 IO 的不足。此外，我认为现在有些游戏已经难以区分物理 IO 和虚拟 IO 了，比如不少手机游戏利用了触控技术，可以直接物理地接触虚拟端口，上图中的超级马里奥手机模拟器，就用到了触控技术来实现物理/虚拟 IO的融合。  
  
  
交互当中最关键的仍是玩家与物理 IO 的那对交互，「当玩家沉浸在游戏中时，对他们而言，不再是按按钮或者看屏幕，相反，他们是在狂奔，在飞跃，在挥舞着手中的剑」。交互界面的最高境界是透明。关于交互设计知海匠库的老师已经讲过很多，如果有必要的话可以应该去复习下。  
  
  
**高质量反馈**  
  
  
反馈的一些细节其实很容易被忽略，一个正面例子是篮球框上的网，网本身并不影响游戏玩法，但是网能使篮球在通过网的时候减速，让所有人都看清球确实进了。一个反面例子是，美国十字路口的行人按钮。

[![Center 1][]][Center 1 1]

行人按下这个按钮，说明这段路有行人需要过马路，那么过一阵子，人行道就会变绿灯。但人行道的标志并不会立刻改变，行人们不得不等一段时间才能知道刚才按下的按钮是否真的起作用了。于是你可以看到很多奇怪的按钮行为：有人按了一段时间后才松开，有人会按好几次，整个体验充满不确定性，行人会不安地观望信号灯期待它们给出反馈。  
  
  
一般来说，你的游戏接口需要在玩家输入后的 1/10 秒内响应玩家，比如跳跃这样的动作如果花了1/4秒以上的时间，玩家就会有迟滞感，导致心理不安，脱离沉浸状态。  
  
  
高质量反馈通常还会包含二级动作，当玩家的动作很容易操控，而游戏角色的动作体现出很多二级动作的时候，比如后轻轻地向左动两下摇杆，角色做出一个后空翻跳杀的动作，给用户很大的权利感和奖励。我们称之为「多汁」的系统。就像一只成熟的桃子，轻轻一咬，就会给你持续不断的美味果汁作为奖励。  
  
  
**信息的通道**  
  
  
任何接口都有一个重要目的，即交流信息，在游戏中找到最佳办法呈现信息，可以分为四个步骤：  
  
  
列举信息并按照优先级排序。比如按照玩家需要每时每刻都知道的信息，和偶尔才需要知道的信息来分类。  
列举通道。不同的游戏有不同的通道，这些通道在设计的时候有很大的灵活性，比如屏幕的中间位置，角色头上的对话框，游戏音乐，音效，屏幕顶端的信息板等。  
映射信息到通道上。这个任务是把不同的信息映射到不同的通道上，一部分靠直觉，一部分靠经验。画很多草图，不断尝试与失败直到你发现合适的。  
审查各个界面的元素属性。比如数值、颜色、尺寸、字体等，利用各种对比来强化信息的作用。比如游戏中给予敌方伤害的时候，50以下用小小的白色字体，50-99用中等大小的黄色字体，超过100的时候用醒目的红色大数字等。  
  
  
**模式**  
  
  
接口模式是一种交互状态，切换模式就像电影中的切镜头一样。比如你在控制一个人跑动，此时是在跑动模式下，按下一个键之后，改为瞄准模式。模式可以给游戏带来大量变化，但必须要小心玩家可能会因此变得很困惑，下面有一些小提示：  
  
  
尽量使用简单的模式，模式越少，玩家被困惑的可能性越小。  
避免使用重叠的模式，尤其是不同类的模式，比如移动和瞄准最好不要用一样的输入端口。  
使不同的模式在视觉上有所区别，比如放一些醒目的，大体积的东西在屏幕上，改变游戏人物的动作，屏幕上的数据，镜头角度等。  
  
  
**More**  
  
  
上面已经讲述了接口的数据流程、反馈、通道、属性和模式。还有一些其他的设计接口的小提示。  
  
  
拿来主义，如果你设计的游戏是一款已知类型的游戏，不妨从这个领域当中成功的游戏接口设计开始入手，根据你的游戏进行修改。当然，如果你的游戏没有什么新鲜玩法的话，你的游戏看起来会像是一个克隆品。  
自己动手，和拿来主义相反，当每个人都在参考和克隆的时候，你花时间在独特的界面设计上，也会会让人焕然一新。  
视觉化接口，找一个美术设计师来帮助你吧。  
给触摸加上听觉反馈，在真实世界里操作某样东西时，触觉是反馈的核心来源之一。在虚拟游戏当中，触摸操作很少给我们信息反馈，这时候通过播放合适的音效来模拟触摸，比如鸟叫声，玻璃碎裂的声音等，会让人感觉很真实。  
平衡选择和简洁，设计界面时，一方面你会希望给玩家更多的选择，另一方面则想尽量保持界面的简单。一个保持平衡的方法是创立子菜单，或者子模式。或者在平时隐藏主菜单，只留下一个「开始」按钮。了解游戏界面元素的优先级是一个好的开始。  
可视化元素，比如当你设计一个用到无线电设定的游戏时，设计了命令与执行的延迟，这时候可视化无线电传播过程和音效能避免玩家因为延迟反馈带来的不安感。  
测试，界面是游戏的重要组成部分，测试界面当然是必要的。  
打破规则，思考「设计本身是否对你的游戏玩家有利」，也许在很多游戏都复用过的一些界面设计是设计师盲目跟风的结果，思考能不能打破这个规则吧。  
  
  
**总结**  
  
  
lens \#53 控制：询问自己如下问题来测试你的界面设计能让玩家沉浸在人机交互中：  
  
  
交互界面是否提供了玩家期望的功能？  
你的界面是否直观，简单？  
玩家是否能感觉到自己的操控对结果有重要影响？  
玩家能否通过熟练的操控，感受到自己的强大？享受流畅的控制感呢？  
  
  
lens \#54 物理 IO：视频游戏中，大多数设计师并不需要考虑创造一种新的自定义物理输入设备。思考如何把物理接口和游戏衔接好，询问自己如下问题：  
  
  
玩家需要看到或者触摸到什么？有没有办法把这个过程变得尽量有趣？  
物理 IO 是如何跟玩家、虚拟 IO、游戏世界进行交互，能否更直接？  
玩家如何感知游戏世界？如何设计物理接口让玩家想象出更真实的世界？  
  
  
lens \#55 虚拟 IO：虚拟 IO 即游戏内部的界面，如果设计得好，玩家更容易得到游戏世界的即时反馈，增强玩家在游戏世界里的掌控感，询问自己如下问题：  
  
  
什么信息是玩家需要看到的？玩家什么时候需要看到？任何时候还是偶尔？  
这些信息如何传递给玩家，是否会妨碍到玩家与游戏世界的直接交互？  
游戏中是否有些元素适合弹窗、适合物理接口？  
  
  
lens \#56 透明：最理想的游戏界面设计就是透明的界面，这样可以让玩家沉浸在游戏世界当中。询问自己如下问题：  
  
  
玩家想要什么，游戏能让玩家做他们想做的事情吗？  
界面是否足够简单直观，能让玩家简单练习甚至不用思考就能上手吗？  
允许玩家自定义界面/操作是否有必要？  
界面上的元素，比如血条，任务栏等是否会干扰玩家？  
对于玩家来说，界面上的信息是否可能过载？能删掉或者改进界面设计吗？比如用条形图代替数值？  
  
  
lens \#57 反馈：玩家需要从游戏当中得到持续有效的反馈，设计合适的反馈确保你创造的是你期望的体验，询问自己如下问题：  
  
  
玩家此时想要知道什么？需要知道些什么？  
你希望玩家感受到什么？玩家期望感受到什么？什么样的反馈可以达到这些效果？  
玩家此时的目标是什么？什么样的反馈可以帮助他们达成目标？  
  
  
lens \#58 多汁：制造多汁的反馈接口，引爆玩家的体验，询问自己如下问题：  
  
  
针对玩家的各种动作，我的接口是否有持续不断的给玩家反馈？  
玩家的动作是否产生了二级动作，是否足够有趣有力？  
多汁的系统通常会从很多方面同时奖励玩家，我能给玩家更多的奖励吗？  
  
  
lens \#59 通道和属性：设计游戏界面的核心就是把游戏信息映射到各种各样的通道和属性上，询问自己如下问题：  
  
  
什么样的数据需要传递给玩家或是由玩家传递给系统？  
那些数据是最重要的？  
我有哪些可用的通道来传输这些数据？  
哪些数据有通道的偏好性？哪些通道有数据的偏好性？  
对不同的通道来说有哪些属性？如何使用这些属性让数据变得更直观？  
  
  
lens \#60 模式：接口有时候需要模式，为了确保玩家能理解和控制模式，不会产生疑惑或受打击，询问自己如下问题：  
  
  
我的游戏需要什么样的模式？  
那些模式可以被分解和合并？  
是否有重叠的模式，可以分开在不同的输入通道上吗？  
如何告知玩家发生了模式切换？

[Center]: /images/20220604/20de5eb8fe0e47ec9ea08da7acb7a1d0.png
[Center 1]: /images/20220604/3c8a8a7083bf4df8ae51e3655ab81a09.png
[Center 1 1]: http://www.zhihiajiangku.com/