《风暴英雄》对战界面的主要讲在“辅助大厅”

《风暴英雄》英雄界面

当然不是每个游戏都有“大厅”，或者两者分得这么清楚。

以最近热门的《旅行青蛙》为例子，它的“大厅”和“游戏”之间并没有明显的区分，因为看似辅助的商城和邮件都融入了核心玩法中。

“采集——购买——放置——获取明信片/手信”和“手信——朋友互动——收取信件”就是《旅行青蛙》的两种“游戏交互”内容。

游戏玩法

《风暴英雄》匹配完成后，会进入一个全屏界面，进入核心玩法环节。

涉及游戏的核心玩法的交互体验，以及承载核心玩法的界面交互，则为“游戏玩法”。

《风暴英雄》对战界面

下面主要讲一下在“辅助大厅”的交互上，游戏和产品的异同。

相同点

游戏大厅可以理解为“辅助玩家更好体验游戏、增加粘性的产品”。

所以在基础交互原则上，大厅交互和产品交互是共通的。

可以看看经典书籍（《About Face》之类）

以下把大厅交互常用到的尼尔森可用性原则 进行详细说明：

状态可见原则 用户在网页上的任何操作，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。

游戏有较多实时拉取的数据（活动、游戏场景等），难做到“即时”反馈，就需要增加“过渡”。

“过渡”可以分为：加载进度条、加载动画、分步加载、转场动画。

-加载进度条

游戏不同于产品，体量较大，所以第一次进入会有比较长的加载过程，这时候就需要一个加载条。

加载条结合游戏元素进行适当的趣味设计，或者增加一些tips或趣味文字，都能帮助降低玩家的焦虑情绪。

-加载动画

加载进度条是一个明确有终点的动画，而加载动画一般是一个循环动画，用在较短的加载场景，或不能明确知道加载所需时间的时候。

-分步加载

活动因为有较多即时拉取的图片信息，较长时间才能加载完信息。

这时候，使用分步加载，优先加载占用网络资源少的内容，例如框架、文字、默认图案，再加载图片内容，就可以降低玩家的等待焦虑。

-过渡动画

过渡动画一般用在差异较大的场景间的切换，用和场景结合的过渡动画，会让场景间的过渡更加自然。

网易的某款游戏-大厅到剧情地图用了云雾散开的过渡动画

一致性原则 同样的用语、功能、操作保持一致。

结构上，一个游戏常常包含很多功能模块（例如好友、聊天、信息、商城等），比大部分产品更加复杂；一致性上，游戏又比产品更加强调体验和风格的一致性（产品功能更核心）。

同时，游戏开发团队一般包含多个交互设计师和视觉设计师，每个人负责不同的模块；另外，对设计的灵活性，创新性也有更高的要求。

所以一份详实的交互文档、视觉文档供设计师间合作沟通，就显得尤为重要。

很多团队觉得文档耗费时间，也没有实际用途，就不去制作。游戏开发越到后期，功能越多越复杂的时候，因缺乏规范文档，不同设计师的习惯和风格导致的设计差异，也就会越明显地暴露出来；新增功能因缺乏前期布局规划而只能挤在角落。

最后会导致产品不同模块体验的不一致，需要花费更多的时间去统一。

游戏交互文档因为比较机密，所以基本在网上难找到完整的，应该写什么内容，每个项目也不尽相同，以辅助沟通、规范设计为目吧。

附上个项目我写的一份游戏交互文档，希望可以给大家一些参考。

网易设计师：超全面的交互规范设计流程 - 优设-UISDC：

易取原则 尽可能减少用户回忆负担，把可用的操作和选项展示出来。

为了给玩家提供好的体验，很多游戏在这一块上都已经做的很好了。

特别是商城功能，为了抓住玩家“一闪而过的购买欲”，很多游戏都会简化中间所有货币转换过程，给玩家提供“一键购买”按钮。

灵活高效原则 中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。

最开始做交互的时候，容易把用户当成“小白”，还要陷入“用户至上”的坑里。

不少产品是提供新功能，同时用户年龄段广、特征较分散（例如，微信、外卖这些针对全年龄段用户的产品）所以趋向于简单化设计。

但游戏一般不是完全创新的，核心玩法总会跟其他游戏相似（例如各种MMORPG游戏（在此不得不叹息一下中国游戏市场的创新无力）），且目标玩家都有一定的游戏经验。

所以做游戏交互时，不需要把玩家想得太傻，最开始的玩法提示手机游戏大厅，尽量轻，给玩家自由探索的空间。

长得都差不多的MMORPG

《梦幻西游》

人性化帮助原则 帮助性提示最好的方式是：无需提示 > 一次性提示 > 常驻提示 > 帮助文档。

因为游戏在视觉和创意上更加灵活，所以可以用更有趣的方式来提示。

例如《王国保卫战》里的难度，低中高分别用了3个不同形象的士兵，玩家一看就清楚知道每个难度的含义提醒，自然贴切。

《王国保卫战》

游戏提醒还可以通过NPC说话方式表达，也能使提示和场景更加搭配。

差异点

如果说大厅和产品相似，都是以帮助用户达到某些功能而设计的；那它们最大的不同，可能也就是视觉上的差异了。

视觉风格上的差异，不仅仅是视觉设计师的责任。

“你有故事吗？”

不知道你有没有听过“给你的产品讲一个故事”这种说法？

参加广州创客马拉松的时候，每个小组只有3分钟来展示项目，这时候就需要通过“故事”来把产品传递给听众。故事怎么讲，就显得尤为重要了。

但在实际的产品研发过程中，很多人都忽略了这一点。

而对游戏设计来说，“讲故事”是非常重要的事情。

产品交互设计师常常更关注功能的设计，页面的逻辑。但在设计游戏页面框架时，GUI小伙伴提醒我：“你想通过这个页面，讲一个什么故事？”。

每个游戏都是一个世界，而界面就是将这个世界传递给玩家的重要媒介。

所以在游戏主页面开始设计前，设计师和策划们，需要一起构思“给玩家传递一个什么故事”。

以《玩具大乱斗》为例子，它的故事是：“在玩具城里举行了玩具擂台赛手机游戏大厅，于是玩具们都来参加比赛”。

虽然只是简单的一句话，但有了这个故事，界面设计就会表现“擂台”、“打擂”、“排行榜”、等元素；语言设计就会围绕“Show Off”、“玩具城市民”等，而不是冰冷的“玩家”；氛围设计也能紧扣故事，营造出丰饶的玩具城背景和灯光四射的擂台风格——给玩家传达出一致的体验。

《玩具大乱斗》大厅

《玩具大乱斗》准备界面

《玩具大乱斗》排行榜

再以《女神异闻录5》为例子，如果玩过就会知道：大厅围绕地铁为元素，各种界面都在地铁站里切换，再以对比强烈的红黑色彩，渲染出极具风格的游戏特色，且贯穿整个游戏，让玩家体会到游戏风格和故事感受，这就是一个优秀的大厅设计。

之后有时间，会再详细讲讲“游戏界面的故事”

“你有创意吗？”

做产品的时候，几乎没有人强调界面设计的“创意”，更倾向于遵守Material design、HIG这些规范来设计。

但是做游戏交互，你需要花很多精力来思考“怎么让设计变得有趣”。

“有趣”一方面是指创意性上的表现，另一方面是对玩家情绪的体悟。

-创意表现

因为游戏界面设计限制小，图形元素丰富，视觉表现要求高，所以有很大的空间给交互设计师将功能趣味化。

当然这种创意是要合理的，跟游戏本身的“故事”搭配。

以《永远的7日之都》为例子，一般游戏做功能模块，比较多会一排放在底栏，但《永远的7日之都》将功能集合成了一个手机界面的样式，且把这个“手机”编入了游戏故事中，成为了玩家和神器使之间的“通讯工具”。

这种创意处理能让游戏的整体性更强，玩家也更容易沉浸在游戏的故事里。

《永远的7日之都》“通讯工具”

再以《秘宝猎人》为例子，弹窗设计成打开的书，标签变成了书页，比中规中矩的弹窗显得更趣味。

《秘宝猎人》任务弹窗

-情绪体悟

看看下面这个商城设计，大家会觉得如何？

“挺不错，好看，有商城的氛围”——大概很多人会这么觉得。

那再看看下面这个商城设计呢？

我看了之后会心一笑。

后者比前者在对玩家情绪的体会上明显更上一层——

前者只是做了一个“好看”“像商城”的商城；

而后者，将玩家潜意识里“万恶的游戏开发商，欺骗我们的血汗钱”的情绪，通过对牛佬”外表光鲜，内在贩子“的反差丑化，诙谐地表达了出来。

“看你这么不容易，就赞助一把吧。”

所以，创意的更高阶段是在创意里融入对玩家的情绪体悟。

大厅交互暂且写到这里，之后想到会继续补充的。

下次会讲“核心玩法”方面的交互内容，希望大家多多支持～

专栏地址：