设计交互界面

接口数据流

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

interface.png

上图是一个简单的映射图,我修改了一下原来的图,觉得现在这样更容易理解。一共是四种交互,其中只有一种交互是连接玩家的,也即玩家操作物理输入端(手柄,鼠键),接受物理输出端(显示器显示图像)。玩家通过操作物理输入端进而操作虚拟 IO (Input/Output,输入输出设备,下面简称 IO)和游戏世界。这两层并不完全一样,有些游戏单纯地用物理 IO 操纵游戏角色就可以了,比如用手柄操纵「马里奥」,有些游戏会有一层虚拟 IO,比如「密室逃脱」会有物品栏,可以用鼠标点选房间里的各个角落。绝大多数游戏是两者都有,既有物理 IO 跟游戏世界的交互,又有通过虚拟 IO 来补足物理 IO 的不足。此外,我认为现在有些游戏已经难以区分物理 IO 和虚拟 IO 了,比如不少手机游戏利用了触控技术,可以直接物理地接触虚拟端口,上图中的超级马里奥手机模拟器,就用到了触控技术来实现物理/虚拟 IO的融合。

交互当中最关键的仍是玩家与物理 IO 的那对交互,「当玩家沉浸在游戏中时,对他们而言,不再是按按钮或者看屏幕,相反,他们是在狂奔,在飞跃,在挥舞着手中的剑」。交互界面的最高境界是透明。

高质量反馈

反馈的一些细节其实很容易被忽略,一个正面例子是篮球框上的网,网本身并不影响游戏玩法,但是网能使篮球在通过网的时候减速,让所有人都看清球确实进了。一个反面例子是,美国十字路口的行人按钮。

pushtowalk.jpg

行人按下这个按钮,说明这段路有行人需要过马路,那么过一阵子,人行道就会变绿灯。但人行道的标志并不会立刻改变,行人们不得不等一段时间才能知道刚才按下的按钮是否真的起作用了。于是你可以看到很多奇怪的按钮行为:有人按了一段时间后才松开,有人会按好几次,整个体验充满不确定性,行人会不安地观望信号灯期待它们给出反馈。

一般来说,你的游戏接口需要在玩家输入后的 1/10 秒内响应玩家,比如跳跃这样的动作如果花了1/4秒以上的时间,玩家就会有迟滞感,导致心理不安,脱离沉浸状态。

高质量反馈通常还会包含二级动作,当玩家的动作很容易操控,而游戏角色的动作体现出很多二级动作的时候,比如后轻轻地向左动两下摇杆,角色做出一个后空翻跳杀的动作,给用户很大的权利感和奖励。我们称之为「多汁」的系统。就像一只成熟的桃子,轻轻一咬,就会给你持续不断的美味果汁作为奖励。

信息的通道

任何接口都有一个重要目的,即交流信息,在游戏中找到最佳办法呈现信息,可以分为四个步骤:

  1. 列举信息并按照优先级排序。比如按照玩家需要每时每刻都知道的信息,和偶尔才需要知道的信息来分类。
  2. 列举通道。不同的游戏有不同的通道,这些通道在设计的时候有很大的灵活性,比如屏幕的中间位置,角色头上的对话框,游戏音乐,音效,屏幕顶端的信息板等。
  3. 映射信息到通道上。这个任务是把不同的信息映射到不同的通道上,一部分靠直觉,一部分靠经验。画很多草图,不断尝试与失败直到你发现合适的。
  4. 审查各个界面的元素属性。比如数值、颜色、尺寸、字体等,利用各种对比来强化信息的作用。比如游戏中给予敌方伤害的时候,50以下用小小的白色字体,50-99用中等大小的黄色字体,超过100的时候用醒目的红色大数字等。

模式

接口模式是一种交互状态,切换模式就像电影中的切镜头一样。比如你在控制一个人跑动,此时是在跑动模式下,按下一个键之后,改为瞄准模式。模式可以给游戏带来大量变化,但必须要小心玩家可能会因此变得很困惑,下面有一些小提示:

  1. 尽量使用简单的模式,模式越少,玩家被困惑的可能性越小。
  2. 避免使用重叠的模式,尤其是不同类的模式,比如移动和瞄准最好不要用一样的输入端口。
  3. 使不同的模式在视觉上有所区别,比如放一些醒目的,大体积的东西在屏幕上,改变游戏人物的动作,屏幕上的数据,镜头角度等。

More

上面已经讲述了接口的数据流程、反馈、通道、属性和模式。还有一些其他的设计接口的小提示。

  1. 拿来主义,如果你设计的游戏是一款已知类型的游戏,不妨从这个领域当中成功的游戏接口设计开始入手,根据你的游戏进行修改。当然,如果你的游戏没有什么新鲜玩法的话,你的游戏看起来会像是一个克隆品。
  2. 自己动手,和拿来主义相反,当每个人都在参考和克隆的时候,你花时间在独特的界面设计上,也会会让人焕然一新。
  3. 视觉化接口,找一个美术设计师来帮助你吧。
  4. 给触摸加上听觉反馈,在真实世界里操作某样东西时,触觉是反馈的核心来源之一。在虚拟游戏当中,触摸操作很少给我们信息反馈,这时候通过播放合适的音效来模拟触摸,比如鸟叫声,玻璃碎裂的声音等,会让人感觉很真实。
  5. 平衡选择和简洁,设计界面时,一方面你会希望给玩家更多的选择,另一方面则想尽量保持界面的简单。一个保持平衡的方法是创立子菜单,或者子模式。或者在平时隐藏主菜单,只留下一个「开始」按钮。了解游戏界面元素的优先级是一个好的开始。
  6. 可视化元素,比如当你设计一个用到无线电设定的游戏时,设计了命令与执行的延迟,这时候可视化无线电传播过程和音效能避免玩家因为延迟反馈带来的不安感。
  7. 测试,界面是游戏的重要组成部分,测试界面当然是必要的。
  8. 打破规则,思考「设计本身是否对你的游戏玩家有利」,也许在很多游戏都复用过的一些界面设计是设计师盲目跟风的结果,思考能不能打破这个规则吧。

总结


lens #53 控制:询问自己如下问题来测试你的界面设计能让玩家沉浸在人机交互中:

  • 交互界面是否提供了玩家期望的功能?
  • 你的界面是否直观,简单?
  • 玩家是否能感觉到自己的操控对结果有重要影响?
  • 玩家能否通过熟练的操控,感受到自己的强大?享受流畅的控制感呢?

lens #54 物理 IO:视频游戏中,大多数设计师并不需要考虑创造一种新的自定义物理输入设备。思考如何把物理接口和游戏衔接好,询问自己如下问题:

  • 玩家需要看到或者触摸到什么?有没有办法把这个过程变得尽量有趣?
  • 物理 IO 是如何跟玩家、虚拟 IO、游戏世界进行交互,能否更直接?
  • 玩家如何感知游戏世界?如何设计物理接口让玩家想象出更真实的世界?

lens #55 虚拟 IO:虚拟 IO 即游戏内部的界面,如果设计得好,玩家更容易得到游戏世界的即时反馈,增强玩家在游戏世界里的掌控感,询问自己如下问题:

  • 什么信息是玩家需要看到的?玩家什么时候需要看到?任何时候还是偶尔?
  • 这些信息如何传递给玩家,是否会妨碍到玩家与游戏世界的直接交互?
  • 游戏中是否有些元素适合弹窗、适合物理接口?

lens #56 透明:最理想的游戏界面设计就是透明的界面,这样可以让玩家沉浸在游戏世界当中。询问自己如下问题:

  • 玩家想要什么,游戏能让玩家做他们想做的事情吗?
  • 界面是否足够简单直观,能让玩家简单练习甚至不用思考就能上手吗?
  • 允许玩家自定义界面/操作是否有必要?
  • 界面上的元素,比如血条,任务栏等是否会干扰玩家?
  • 对于玩家来说,界面上的信息是否可能过载?能删掉或者改进界面设计吗?比如用条形图代替数值?

lens #57 反馈:玩家需要从游戏当中得到持续有效的反馈,设计合适的反馈确保你创造的是你期望的体验,询问自己如下问题:

  • 玩家此时想要知道什么?需要知道些什么?
  • 你希望玩家感受到什么?玩家期望感受到什么?什么样的反馈可以达到这些效果?
  • 玩家此时的目标是什么?什么样的反馈可以帮助他们达成目标?

lens #58 多汁:制造多汁的反馈接口,引爆玩家的体验,询问自己如下问题:

  • 针对玩家的各种动作,我的接口是否有持续不断的给玩家反馈?
  • 玩家的动作是否产生了二级动作,是否足够有趣有力?
  • 多汁的系统通常会从很多方面同时奖励玩家,我能给玩家更多的奖励吗?

lens #59 通道和属性:设计游戏界面的核心就是把游戏信息映射到各种各样的通道和属性上,询问自己如下问题:

  • 什么样的数据需要传递给玩家或是由玩家传递给系统?
  • 那些数据是最重要的?
  • 我有哪些可用的通道来传输这些数据?
  • 哪些数据有通道的偏好性?哪些通道有数据的偏好性?
  • 对不同的通道来说有哪些属性?如何使用这些属性让数据变得更直观?

lens #60 模式:接口有时候需要模式,为了确保玩家能理解和控制模式,不会产生疑惑或受打击,询问自己如下问题:

  • 我的游戏需要什么样的模式?
  • 那些模式可以被分解和合并?
  • 是否有重叠的模式,可以分开在不同的输入通道上吗?
  • 如何告知玩家发生了模式切换?

这篇文章是我读 Jesse Schell 的 The Art of Game Design 的笔记和感悟,本书也有中文译本,名字叫全景探秘游戏设计艺术。接下来的几天,我会陆续发布后续的文章笔记。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

干货!浅谈知识图谱的构建与应用

自从2012年Geogle推出自己第一版知识图谱以来,各大互联网企业也纷纷推出了自己的知识图谱产品。知识图谱是把所有不同种类的信息连接在一起而得到的一个关系网络...

5248
来自专栏腾讯大讲堂的专栏

腾讯自动化测试的AI智能

引子: 本文是林奕在腾讯 DevDays 2018 分享内容的脱敏整理,介绍了 CSIG 测试开发中心(前 SNG 测试开发中心)在自动化测试领域所做的智能...

1.1K2
来自专栏无原型不设计

微交互:App成功的秘诀

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 最好的产品拥有两个很棒的特点:功能和细节。产品的功能可...

37611
来自专栏企鹅号快讯

如何开发一款游戏:游戏开发流程及所需工具

「文末高能」 编辑 | 哈比 游戏作为娱乐生活的一个方面,参与其中的人越来越多,而大部分参与其中的人都是以玩家的身份。 他们热爱一款游戏,或是被游戏的故事情节、...

55010
来自专栏程序员互动联盟

做软件测试,如何月薪过万?

很多人提到软件测试都觉得测试,就是看看软件能不能正常的运行,而且一般测试都是一些小姑娘,一般都是嘻嘻哈哈在聊天中就完成一些软件功能的测试,还有多大的技术含量,这...

44411
来自专栏镁客网

苹果欲开发“说话者识别”技术,解决隐私漏洞 | 热点

1753
来自专栏机器之心

入门 | 如果是个穷光蛋:如何从零开始学习成为一个数据科学家?

去年,我自学了数据科学,搜集了几百个在线资源,每天学 6~8 个小时。与此同时,我白天还在日托中心上班,拿着最低的薪资水平。

1112
来自专栏互联网杂技

20个有用的UX日常使用工具&APPs

交互设计师或产品经理在工作中需要一些用户研究的工具,此文分享了一些日常使用的app及在线工具,希望对大家有所帮助~~ 在UX团队工作通常需要掌握相当多的在线工具...

3648
来自专栏DevOps时代的专栏

腾讯自动化测试的 AI 智能

本文是林奕在腾讯 DevDays 2018 分享内容的脱敏整理,介绍了 CSIG 测试开发中心(前 SNG 测试开发中心)在自动化测试领域所做的智能化尝试。

2252
来自专栏Golang语言社区

Golang 语言中Select与for结合使用时可能会遇到的坑

作为一个刚接触go编程的新鸟,是不是被它的某些新特性给吓到,尤其是之前已经习惯了C++的编程。对于Go语言,网上褒贬不一,有极力推崇的,如七牛的许式伟,其对go...

3667

扫码关注云+社区

领取腾讯云代金券