美惠

《第五人格》GUI负责人

1、前言

非常有幸参与了网易《第五人格》的GUI设计。在开发和运营过程中，我们GUI团队会经常被问到一些问题，例如你们的设计思路是什么？为什么会做这样的设计？怎样说服产品选择这样的设计？实现过程中都经历了什么？那么对于即将走入职场的新人们，对于想要选择GUI这个行业来开启职业篇章的各位，希望下面的内容能够抛砖引玉，为学弟学妹们带来些启发。

2、我们这样的设计，怎么来的？——源自希望有突破

在参与《第五人格》的制作之前，我们GUI团队也参与过其他一些游戏项目，在当时我们就已经发现一些行业内共通的问题：

我们可以找一些市面上手游的设计观察一下，交互基本继承端游功能布局，加以结合手机操作区域划分，很久没有看到大的设计颠覆了。

接下来我们先看看独立游戏交互和GUI设计思路：

由此我们可以认识到玩家买账的是什么—— 随着主机游戏普及和游戏直播火爆，包含：有内容，高品质，夺眼球，话题性，创新等特征的游戏才是更受现在玩家青睐的游戏。

核心体验是——有趣，我们能做的有很多。

反思：需要寻求突破，怎样突破？

独立游戏是不能够全盘复制的，因为在手游的开发条件下，我们有操作媒介限制，显示设备限制，受众群体限制，以及引擎编辑器的限制。

需要做适合手游的GUI设计突破，须得技术容易实现，表现简单有惊喜点。经过长久的尝试，我们找到了一种方法是在自创IP中，做深度沉浸式的GUI设计，这个设计方式——即强化第五人格主题包装的完整性，强化沉浸感——在《第五人格》中得到了完美验证。

这里就几处设计做一下说明：

1、侦探笔记本设计 

灵感：来源故事线——侦探的调查笔记  （最初的笔记本）

营造故事舞台的时代感（材质样式）：笔记本的牛皮封面，纸质，全部粘贴素材都选用合理的实物设计，光线造旧处理，页签的写实处理位置。

营造贴合剧情的细节（细节）：表现侦探的性格笔记本的手写字体，划痕来源。

笔记本的照片：最初始设计是立绘，由于笔记本是GUI多个包装概念交汇并发展的基础道具，故不希望在情节延伸上受限，这里开了个脑洞  以哈利波特会动的报纸为灵感，从笔记本照片挂接真实场景过来，点击后延伸到侦探脑内冥想世界。

2、雾

选用雾气元素，同样是出于对游戏GUI语言识别性的考虑。灵感来源雾都伦敦，多雨，暗示侦探精神世界的混沌。我们会想到，侦探坐在车中思考案件时，手指会不会在车窗上涂画些什么呢？大雨，车窗这一组合经常被影视作品引用，例如《致命ID》

玻璃是分割开安全内室和凶险外界的屏障，玻璃上布满的水雾影响视线，对外界情形的未知，危险是否正在逼近？

越平静的气氛下，内心的恐惧滋生越快，这是恐怖影视作品屡试不爽的经典套路。

除去作为GUI符号元素外，可以回归到游戏故事本身来看：

战斗环节是作为侦探脑内犯罪过程的推演来展开的，玩家透过屏幕，看到了侦探的脑内的活动，屏幕成为了连接虚幻和现实的媒介。

这也让手机的屏幕回归了本质“屏幕”的物理概念。在玩家操作体验上，有了微妙的贴合感。

3、Loading 设计

说到这里，就需要介绍一下雾气符号设计的延伸，一体性设计变化的案例：第五人格loading的设计、网站等待设计灵感举例。

通常的 vs 有趣的创意  

据统计，用户等待加载进度耐性极限最多只有6-8秒，如何丰富等待时间，是个问题。

游戏的loading设计，常见的都是进度条形式。随着游戏包体越来越大，设备性能优劣差异大，玩家耐性越来越差等原因，越来越多的设计者希望能够丰富玩家不得不等待期间的体验。比如加入游戏技巧教学，游戏世界观说明文字，甚至加入打地鼠。但是都没跳脱读取进度条的表象形式。

可以看一些有趣的loading，他们让用户不知不觉被动画而吸引，从而忘却等待的时间。

在第五人格的loading设计上，我们延伸了雾的概念。在实现上，我们将涂抹的每一笔单拆成一根独立的进度条，本质上我们的设计也是读取进度条。但经过一体化设计，我们将单一的进度条丰富为一个有故事的画面。模糊了等待时间的界限。

4、动效环节设计

在交互形式上，选用动效来丰富效果和体验是个好办法。可以说现在是动效的时代。

前面部分，我们就看到了优秀的游戏中，GUI动效设计为游戏的交互操作和情节连贯性带来的巨大帮助。就像蒙太奇赋予电影灵魂，动效也是代表第五人格的GUI符号语言之一。

这里我们要分享一下笔记本向虚幻的脑内联想包装过渡的两个设计，首先是换皮界面，我们在游戏中是可以看到这个效果的。我们将超写实包装部分的交互都指代成生活中具体的行为，实体化。

例如这个脑内换装系统，就是用放映厅题材进行包装，可交互的元素都设计成真实物品，是希望玩家操作中感受到合理性。

这个则是早期道具加点的交互操作，就直观的包装为意识的海洋，思维慢慢沉浸，是一种意向式的表达。

动效情节在气氛的把控上发挥了绝对优势。在进入战斗等待大厅的过场设计中，设计灵感来自剧情：因为看到书架上受害者的日记，侦探在脑海中还原推演出了每一局对战，所以我们看到的是意象化的书穿，或者说侦探在入定。

除了我们已知的雾的动效以外，还有例如下面这种出现在其他环节的，GUI动效设计在这里起到完善剧情，增强美术表现力的作用。

3、个人心得感悟

1、以艺术的眼光审视自己的工作，支持美术支持世界观构设。

回到最初的问题上来，我为什么要做深度沉浸的GUI设计呢？

这里引用我很认同的一种看法，它来自大家熟悉的一段GDC分享中：荒野之息技术总监堂田卓博，他称游戏为——聪明的谎言。

没错，游戏是虚假的，最直观看来这就是代码和无数资源的整合。但情感的投射是真实的。

以第五人格为例，让玩家接受我们的故事，认同，并深爱这个故事，这不就是一场成功的催眠么？

2、增强沉浸感，增设伏笔

催眠绝不发生在你认为的时刻——第五人格的设计伏笔，预约站，新手引导

回忆一下电影 “ 盗梦空间，催眠大师” 其中精彩的催眠情节，都在精密的、长期的铺垫下，不断强化、固化同一个概念，直到它渗入潜意识，变成自发的认知。

第五人格的铺垫开始于预约站，在新手部分得到强化。

前有预约站的背景墙灵感：

侦探的线索收集，可视化，实物化的交互操作体验，引导玩家发掘游戏线索，产生好奇。同时玩家也已经在接受预设的操作习惯了。

同时放出的缪斯符号意义以及对游戏名第五人格的思索，进一步营造神秘气氛。是不是更好奇了？仿佛背后有阴谋，也许是在下盘大棋？你看，玩家认可了我们的预设。

后有新手引导的故事线流程设计：

别人的新手引导：固定区域，只可以点这里，直到学习完成。

我们的新手引导：登录动画——首次起名（GUI交互）——动画继续——进入大厅点蜡（GUI交互）——纸飞机动画——检视纸飞机分析线索（GUI交互）——侦探开始侧写，进战闪回动画——第一次战斗流程引导（剧情+GUI+交互操作）——侧写结束，继续探查房间（GUI操作交互）——发现隐匿的书架，找到求生者日记——翻看日记（GUI）——再次以监管者身份进入战斗教学——战斗结束，新手环节完成。

这里只是列举第五人格中几例包装设计，真实的细节是发掘不尽的。也许有人会担忧，这样细节化的设计会在游戏后期后继无力，害怕创意用光。实际上我们目前设计思路建立在真实环境基础之上，新的包装灵感随处可见。

---

扫码进入网易互娱招聘传送门，更有《第五人格》等产品岗位等你来撩！