第 4 回 众多亮点的游戏设计世界

UI/UX 未来志向——预测未来之走向,知晓当下之所需

第 4 回 众多亮点的游戏设计世界

明治大学 综合数理学部 先进媒体科学专业专职讲师

渡边惠太 ( WATANABE Keita ) 译 / 苏袆

URL http://persistent.org/ mail watanabe@gmail.com Twitter @100kw

此次我们的主题是从电子游戏中学习UI/UX。近年来,电子游戏机在硬件接口上发生了很大的变化,例如任天堂3DS的双屏画面、Wii 的手柄以及XBOX的 Kinect 等。这些变化值得我们去关注,但实际上,从 20 世纪80年代的所谓红白机(FC)时代开始,游戏领域里就已经对UI/UX有着非常深入的思考了。

电子游戏是以娱乐为目的的,虽然乍一看会觉得展现的都是实质内容,并不用涉及UI/UX,但实际上没有哪一个领域能比它更适合UI/UX的主题了。若要提及和其他应用开发的不同,那就是目的是在娱乐,还是在解决问题上了。

游戏是非常注重体验的,所以一旦玩家觉得玩法太复杂,游戏就会被嫌弃。因此,和应用程序一样,游戏也需要花费非常大的精力来提升 UI 和用户体验的品质。在此次的文章中,我们将考察为了重视用户的体验,游戏都在UI上下了哪些工夫。

剧情声手法

在电影中,有一种惯用的手法称为剧情声(Diegetic)。一般在荒野打斗的场景中,都会播放具有紧张感的音乐,但主角们并不是一边听着这种音乐,一边在打斗的。在电影的世界里,可能会有风声,也可能会有空气的声音,但是具有紧张感的音乐则是为了电影这一类媒体的演出效果而在后期加上去的。说起来可能会觉得太夸张了,但其实电影里的音乐大部分都是“演出效果”。而剧情声手法则与此相反。

也就是说,是电影里的主角们也会实际听到的音乐效果,并且音源是处于明确显示的状态。例如,如果是拍摄有人在酒吧等场所演奏钢琴的话,这个场所中响起的音乐就会如实地在电影中呈现出来。剧情声和演出效果音的区别在于是否会在画面中出现成为音源的那部分。也就是说,是充满了真实体验的表现手法。

游戏中的剧情声手法

这个剧情声手法其实在电子游戏的 UI 中也有使用。UI 上的剧情声是怎么一回事呢?一起来看一下具体的例子吧。

格斗游戏和射击游戏中,画面上会显示代表自己剩余能量的血槽。这是给游戏玩家的提示,与游戏的真实场景并无关联。从这点看来,与前面的音乐类似,这也不是场景的真实内容,而只是一种演出效果,并不属于剧情声手法。

但是在最近的游戏里,也开始不在画面上向玩家显示上述的血槽 UI 了,或者说在 UI 方面也开始使用剧情声手法了。那么是如何显示这些信息的呢?以能量槽为例的话,就是让能量归属于游戏角色。例如在《死亡空间3》 ( Dead Space3)1中,游戏角色被设定为穿着在背后显示其生命状态的制服,用来向玩家显示现在的能量(图1)。这样,能量槽就成为了这个游戏世界中真实存在的东西。同时,去除了向玩家提示的能量槽,画面结构也更加简洁清爽。从结果来看,可以改善是通过画面来玩游戏的感觉,具有提高游戏世界沉浸感的效果。

1Electronic Arts(2013 年),Windows/PlayStation 3/Xbox 360。

{%}

© Electronic Arts Inc 2013

图 1 《 死亡空间3》 的剧情声手法在背脊上有代表能量槽的部分,而在画面中则没有其他提示。

特别是在最近的大制作游戏中,CG也采用了如同电影般极度精美的画面,如果在 UI 画面上显示文字的话会对场景的美观有一定损害,因此尽量不表示这类提示信息才是大势所趋。

另外,在游戏中还有拿着自己拥有的武器、替换武器、查看地图等设置方面的操作。在世界观设定时,将角色装备的护目镜设定为AR(虚拟现实)的透视型显示器,将这些操作的设置画面显示在该装备上,就会减弱这些画面是特意为了玩家显示出来的感觉。

教学

游戏虽然是娱乐活动,但是最近有些游戏很复杂,用户需要学习“怎么玩”“有哪些功能”。但是,又很难向玩家说出“请看完说明书后再来玩”这样的话。

因此,复杂的游戏经常会在初始阶段设置很多教学(Instruction),让玩家自然而然地进行学习。而有些教学做得几乎让人无法察觉这是教学,能够自然地让玩家进行练习。

例如在《超级马里奥》2中,第一关有两个阶梯状的由砖块组成的小山,每个小山的中心是悬崖。在第一个悬崖掉落的话由于有地面不会有危险。但是第二个小山的悬崖下没有地面,掉下去的话就会少一条命。

2任天堂(1985年),Family computer(FC)。

也就是说,第一个小山是用来练习的。但是多数玩家会认为关卡就是这么设计的,自然地就学会了跳跃的技巧。

类似这样的自然教学形式在游戏关卡设计中也很重要,很多游戏都设计为通过不断地提高难度和学习来推动游戏。

在应用程序中的应用

在 UI 的设计上,这样的教学也相当重要。不特意为了操作单写一份说明书,而是让用户在使用的过程中不知不觉地掌握应用程序和服务的功能。一些Web服务还导入了奖励机制,也就是促使用户进行实际操作,当所有操作都完成后,作为奖励用户能获得积分,或者增加可以使用的容量,或者可以使用其他一些高级功能。这也是通过让用户尝试所有的功能,让他们对产品的价值能有更好的理解。

游戏与UI/UX

刚才提过,游戏的核心是体验。为了UX,我们要绞尽脑汁将UI提升到极致。

经常会有人认为UX就是通过调查,进行人物角色和剧情的设定,从而发掘新的价值,带来体验。但是,即便发掘了新的价值,在落实到画面设计的时候,很容易就陷入某个按钮、某个菜单、某些文字放在哪里这样非常表面的配置上的改善,多数情况下只是在品牌建立的层面上改善了体验设计。

当然,也不是说“新的体验=奇特的互动”才是最佳的解决方案,但是操作中的舒适感是在互动中产生的。而这点我们在游戏中可以学到很多。在进行UX设计的时候,流程方面的宏观角度虽然也很重要,但作为人类个体的知觉和身体会如何感知也是非常重要的。体验并不会发生在会议室,而是产生在使用它的用户身上。

在撰写本文章时,笔者与游戏设计研究者筑濑洋平先生做了一定的沟通交流。在此感谢他对本文的帮助。

目录

  • 编委会
  • 分栏目录
  • 第 4 回 众多亮点的游戏设计世界
  • 特辑 1 智能手机测试最前沿
  • 第 1 章 智能手机测试的基本知识
  • 第 2 章 本机应用程序的 UI 自动化测试
  • 第 3 章 浏览器自动化测试
  • 第 4 章 JavaScript 自动化测试
  • 第 5 章 服务器端自动化测试
  • 第 6 章 自动构建与发布应用程序
  • 特辑 2 Amazon Web Services 最新技巧
  • 第 1 章 Amazon Web Services 的分层比较
  • 第 2 章 使用 EC2 和 VPC 构建系统
  • 第 3 章 有效利用 RDS 构建数据库
  • 第 4 章 利用 CloudFormation 实现自动化的系统环境构建
  • 特辑 3 Sass/Compass 实战
  • 第 1 章 Sass/Compass 简介
  • 第 2 章 构建开发环境
  • 第 3 章 Sass 的基本语法以及 Compass
  • 第 4 章 写出现代化的 CSS
  • 第 5 章 实践中的 Sass/Compass
  • 第 9 回 使用 Boxen 进行 Mac 的环境搭建和配置管理
  • 第 9 回 通过重构改善数据库设计
  • 第 10 回 移动设备环境下的调试技术用方法
  • 第 4 回 使用 Grunt 实现前端开发的自动化
  • 第 9 回 用程序性能分析来分析性能问题
  • 第 9 回 通过 Doctrine Annotations 实现的声明式编程
  • 第 23 回 Perl 应用的测试与高速 CI 环境的构建方法
  • 第 18 回 致力于改善响应速度的“特命”小组
  • 图灵访谈 CSS 只是进化的一部分