关于游戏 UI 设计的中西讨论

作者:indienova
2018-02-27
17 16 3

indienova 有话说

indienova 老朋友们应该对于董晶晖有所了解,作为 Sledgehammer Games, Activision 的 Associate UI Engineer,董晶晖参与了 CoD:WWII 的大量 UI 程序工作,在 UI 方面积累了不少经验,因此也非常关注国内 UI 的发展,对此我们曾有过简短的讨论。恰逢师维《游戏 UI 设计:修炼之道》出版,我很欣喜地向景晖介绍了这本书,他也很有兴趣,在阅读书稿之后,景晖与师维针对本书内容与游戏 UI 设计进行了讨论,在此为大家做一分享。

讨论

Hi 师维, 很高兴能第一时间读到这本书籍,在此感谢!

关于这本书的内容,我大致有以下几点联想: 

1. 设计初期的区別 

从书中的内容,我了解到国内很多游戏项目,会在项目初期进行大量的市场调研,并同时研究其他相同类型产品的设计。

这一点在国内的商业游戏领域确实是一种现象,这多少与国内研发环境有一定关系。比如大厂中有时候同一个品类的产品,会出现多个工作室竞争。我所在的公司的创新项目和一些独立游戏团队与国外有相同的地方。

而在接触国外的项目过程中,我发现国外的团队更多地是把 UI 设计和游戏设计等同。UI 核心理念的确定,是先从游戏体验的核心目标触发,再逐渐细化。这个过程中,我们会参考其他同等类型游戏的设计。

比较好的两个例子是:《炉石》和《死亡空间》GDC 讲座分別是:Crafting Destruction: The Evolution of the Dead Space User Interface  Hearthstone: How to create an immersive user interface

这方面暴雪始终是我们学习的榜样!希望国内更多的项目回归游戏的本质。 

另外非常感谢视频分享,这是两个超级棒的游戏并且在 UI 方面也是时代引领者的地位,是值得我们不断学习的。

2. 多方向人员的参与 

因为我自身是 UI 程序,因此对于多方向人员参与感受比较深刻。相比于 UI 团队和前端人员合作,将程序直接纳入 UI 团队,无疑能增加团队合作的紧密度。同时,UI 程序需要具备基本的 UI/UX 设计知识以及基本 UI 审美。这能增强产出价值。

这一点真的非常棒!国内互联网的 UED 团队不少也采取这种方式,有了解到可以在很多方面提升用户体验,甚至做开发预研。而游戏公司还没有听到这样的工作方式,很多小型团队甚至连 UI 设计师都是很稀缺的。

在我个人看来,UI 方面的程序实现具有自己的特点。另外,UI 方面的 bug 也会比较繁琐且困难。如果没有专门的技术团队去开发和维护,很难保证 UI 的品质。

这一点非常赞同!在国内很多时候 UI 设计师的设计工作完成后,需要不断在游戏内查看效果还原度,找到各种体验方面的 bug,整理成文档发给程序,甚至有的设计师就搬到程序座位旁边直到版本完成。 

而面对具有高度审美的程序人员,这一切就是非常简单和高效的了。我想根据不同的公司情况出发,但是设计师懂些开发原理,程序员懂得审美基础都是非常必要的。

除此之外,多方向人员的参与,能保证 UI 设计在初期阶段就能尽可能多地验证可行性。

以《炉石》的开发流程为例,他们的流程大致如下: 

  1. UI + Design + Programming ( 手绘 mock up ) 
  2. UI + Design + 2D 
  3. UI + 2D + 3D 
  4. UI + 2D + 3D + Programming 
  5. UI + 2D + 3D + Tech art + Programming 

当然,每个团队的流程都有自己的特点,我们不可能一一照搬。团队合作流程的敲定以及不同职位角色的确定,前提应该是对 UI/UX 需求的明确化,以及游戏项目对于 UI/UX 有一个比较明确的定位。这需要团队的磨合以及项目开发经验的积累。

非常赞同!还是回到前面您说过的,先从游戏体验的核心目标出发,看怎样的设计理念和人员配置更符合实际情况。每家公司甚至每个团队都会有自己不同的风格,设计师是其中一个环节还是贯穿整个流程,还需要团队的磨合以及经验的积累。

3. 联想到的书籍 

阅读过程中,我非常喜欢下列关于界面布局的知识: 

“Fatt's Law 菲茨定律 大而近的目标用户更容易达到,小而远的目标更容易消耗时间。频繁眼动时,向下看优于向上看。所以频繁操作的部分放在屏幕下方,重要信息但低频操作的部分放在上方。“ 

这让我联想到书籍《点线面》 。该书对于抽线视觉元素有著非常独到的分析。我还推荐《超越平凡的平面设计》。我非常喜欢书中关于文字的分析和字体的设计。

非常感谢您!都是非常棒的设计书籍! 

点线面是设计的基础,至关重要,大师也曾在《艺术中的精神》中将黑色喻为死,白色为生,水平线代表承载,垂直线代表生长……这些都是存在于人类潜意识中的,设计师用设计说话的基础认知。 

《超越平凡的平面设计》也是非常棒!通过通俗易懂的演示和循环渐进的方法帮助设计师训练对艺术的直觉。 之所以在书的第二章基础知识中,简略提到版式设计这些知识,就是希望设计师能够饮水思源,游戏 UI 需要从各个领域吸收养分,很多决策都是根据多种领域经验结合实际场景来进行设计的。

另外,我还有几个问题想请教一下,还望能得到你的解答: 

电影中的 FUI,尤其是科幻电影中的很多 UI 设计,它们的流程和设计方式,和游戏 UI 的设计方式相比,有什么值得借鉴的地方吗?

因为我个人没有参与过影视中的 FUI 设计,只能从以往了解到的信息来做猜测。 

一次 Create Change 概念设计论坛中 Nathan Fowkes 老师分享过好莱坞的影视制作流程,在剧本确定后,场景、故事、动画和建模等方面都是需要先从草图和低模阶段开始,在这几方面进展到尾声阶段前,开始进行动效、遮景、光线和调和方面的工作。 

概念艺术家 Tyler West 有说过他认为工业设计理念可以贯穿整个设计过程,即使是电影娱乐中也要符合人的认知,这样才能被认为更真实。在做设计之前要先了解来龙去脉,设计过程就是在各种限制下解决问题,好的设计能够可持续迭代和历久弥新。 

电影《钢铁侠》的 FUI 设计师有在网站分享团队的设计过程,首先纸上画概念草图,也是同样需要考虑不同的使用状态,如常用模式、战斗模式、破损耗尽模式以及它们的不同的动态效果。然后在 AI 中做更加标准和精细的刻画,最后在 C4D 中实现动画。 

以上这些工作方法来看都是相通的,多考虑故事背景,主要驱动是什么?表现重点是什么?否则设计再好也不一定适合。前期需要把细节始终都是非常重要的,但是不要在过早就陷入到细节之中。

是否有什么有效的开发方式,能保证 UI 风格在开发过程中的整体性?随着游戏体量的增大以及游戏版本的迭代,我发现如何保证 UI 风格的整体性是一件非常困难的事情。我们要考虑和游戏本身风格的融合,同时还要考虑后期增添的组件风格要契合当前的美术风格。相比于开发后期再重新调整艺术风格和布局的成本,如果能有方法尽可能确保艺术风格的统一,无疑会节省大量的成本。

随着游戏体量的增大以及游戏版本的迭代, UI 风格的整体性始终是个难题。因为原因是多方面的,首先游戏体量的增大,会出现更多的玩法,策划总会想出不可思议的点子,而我们需要保证新加入的元素一致性的情况下又不至于显得单调;另一方面团队成员的加入离开和版本的迭代,人们总是希望 UI 提供给项目新鲜的视觉感受。而他们通常认为 UI 的内容只有屏幕常见的内容,所以不能理解换风格带来的工作量是怎样的,也只有在频繁出现两种风格 UI 切换的时候才能感受到那种冲突的感觉。 

这一点我特别喜欢《辐射》的做法,几代内容都能保持延续下来。写实、扁平、漫画、场景式多种表现手法,你中有我我中有你,并且出现在合适的时间,感觉既丰富又统一的感觉。这应该是不断换 UI 风格的项目永远不能达到的高度吧。 

我们工作的项目,UI 通常在前期确定风格指南,尽可能将设计内容写的更加详细。并且为后去的玩法和运营类系统也提供一些设计标准。这样临时调配到项目的设计师也能很快上手,如果需要重新设计也会根据其使用相同的配色、质感和图形节奏。而给程序的另一份文档标注着字体配色、常用通用控件在服务器的位置,这样减少一部分沟通成本。

你最喜欢哪些游戏的 UI 设计?能在此分享一下吗? :)

暴雪的游戏 UI 都超级喜欢:),另外主机游戏的也有好多,《辐射》、《怪物猎人》、《死亡空间》、《光环》等等,这些都是值得不断研究和学习的 w

不得不说,《游戏 UI 设计:修炼之路》涵盖了 UI 设计中的太多内容。每一点拿出来都可以再出一本书。非常感谢你为我们带来了这样一本书籍,我相信会有越来越多的人在这本书的指导和启发之下,加入游戏 UI 设计的行列。同时,我们也将会看见更多的游戏 UI 书籍。

写书过程中深刻体会到,游戏类型和风格、不同游戏公司也有各自不同的经验。自己的能力和视野有限,不能够在一本书的章节中表述完整,只希望能够梳理脉络和抛砖引玉,让越来越多的人了解游戏 UI。 我也是非常期待能够看到更多国内外关于游戏 UI 的书籍,也非常感激有机会与您交流学习!

近期点赞的会员

 分享这篇文章

indienova 

indienova - 独立精神 

您可能还会对这些文章感兴趣

参与此文章的讨论

  1. 叶默哲 2018-02-27

    想到了上次和孙静老师的讨论哈哈

  2. 无有时代 2018-02-27

    前面一唱一和……后面一问一答……不得不说一句,这讨论像印在书前面的介绍啊………………

    ps:书是好书,有空拜读

  3. WeiweiFeng 2018-03-01

    第一次知道有UI程序这样一个专门的职位

您需要登录或者注册后才能发表评论

登录/注册