《风暴英雄》英雄界面的交互上,游戏和产品的异同

《风暴英雄》英雄界面的交互上,游戏和产品的异同

《风暴英雄》英雄界面

当然,并不是每个游戏都有“大厅”,或者说两者是分得那么清楚的。

以最近流行的《旅行青蛙》为例。 它的“大厅”和“游戏”没有明显的区别,因为看似辅助的商城和邮件都融入了核心玩法。

“收集-购买-放置-获得明信片/纪念品”和“纪念品-与朋友互动-收到信件”是《旅行青蛙》的两个“游戏互动”内容。

游戏玩法

《风暴英雄》匹配完成后,您将进入全屏界面,进入核心玩法。

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

辅助网页制作游戏_网页游戏辅助的制作_如何制作网页游戏辅助

《风暴英雄》战斗界面

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

相同点

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

因此,从基本交互原理来看,大厅交互和产品交互是常见的。

可以看经典书籍(《关于面子》之类)

以下是大厅交互中常用的尼尔森可用性原则的详细说明:

状态可见性的原则是,对于用户在网页上的任何操作,页面都应该立即给出反馈。 “立即”是指页面响应时间小于用户可以容忍的等待时间。

游戏有大量实时拉取的数据(活动、游戏场景等),很难实现“即时”反馈,因此需要添加“转场”。

“过渡”可以分为:加载进度条、加载动画、步骤加载、过渡动画。

-加载进度条

游戏与产品不同网页游戏辅助的制作,体积较大,因此首次进入时会出现较长的加载过程。 这时候就需要一个加载条了。

适当有趣的加载栏设计结合游戏元素,或者添加一些提示或有趣的文字,都有助于减少玩家的焦虑感。

如何制作网页游戏辅助_网页游戏辅助的制作_辅助网页制作游戏

如何制作网页游戏辅助_辅助网页制作游戏_网页游戏辅助的制作

-加载动画

加载进度条是有明确终点的动画,而加载动画一般是循环动画,用在加载场景较短,或者不清楚加载时间的情况下。

辅助网页制作游戏_如何制作网页游戏辅助_网页游戏辅助的制作

- 逐步加载

由于Activity有大量立即拉取的图片信息,因此加载信息需要很长时间。

这时,采用分步加载,优先加载占用网络资源较少的内容,如框架、文字、默认图案等,然后再加载图片内容,可以减少玩家的等待焦虑。

辅助网页制作游戏_网页游戏辅助的制作_如何制作网页游戏辅助

- 过渡动画

过渡动画一般用于差异较大的场景之间的切换。 将过渡动画与场景结合使用,会让场景之间的过渡更加自然。

如何制作网页游戏辅助_辅助网页制作游戏_网页游戏辅助的制作

网易某游戏采用了云彩从大厅散去到故事地图的过渡动画。

一致性原则:相同的术语、功能、操作保持一致。

从结构上来说,一款游戏往往包含很多功能模块(如好友、聊天、资讯、商城等),比大多数产品都要复杂; 在一致性方面,游戏比产品更强调体验和风格的一致性(产品功能更核心)。

同时,游戏开发团队一般包括多名交互设计师和视觉设计师,每个人负责不同的模块; 此外,对设计的灵活性和创新性也提出了更高的要求。

因此,一份详细的交互文档和可视化文档对于设计师之间的协作和沟通就显得尤为重要。

很多团队觉得文档费时间,没有实际用途,所以就不制作。 随着游戏开发到后期,功能越来越复杂,由于缺乏规范文档以及不同设计者的习惯和风格而造成的设计差异会更加明显地暴露出来; 由于缺乏早期布局规划,只会增加新的功能。 可以挤到角落里。

最终会导致产品不同模块的体验不一致,需要更多的时间去统一。

由于游戏交互文档比较保密,所以网上基本上很难找到完整的。 每个项目应该写的内容不同。 目的是协助沟通和标准化设计。

附上我为一个项目写的游戏交互文档,希望能给大家一些参考。

辅助网页制作游戏_如何制作网页游戏辅助_网页游戏辅助的制作

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

轻松访问的原则尽可能减少用户的回忆负担,并显示可用的操作和选项。

为了给玩家提供良好的体验,很多游戏在这方面都做得很好。

尤其是商城功能,为了捕捉玩家的“闪购欲望”,不少游戏会简化所有货币兑换流程,为玩家提供“一键购买”按钮。

如何制作网页游戏辅助_网页游戏辅助的制作_辅助网页制作游戏

灵活高效原则中级用户数量远高于初级和高级用户数量。 为广大用户设计,不要小看,不要小看,保持灵活高效。

初次交互时,很容易将用户视为“新手”,陷入“用户至上”的坑。

很多产品提供了新的功能,同时用户年龄范围广、特点分散(例如微信、外卖等针对各个年龄段用户的产品),因此往往设计简单。

但游戏一般都不是完全创新的。 核心玩法总是和其他游戏类似(比如各种MMORPG游戏(不得不感叹中国游戏市场缺乏创新)),目标玩家都有一定的游戏体验。

所以,在做游戏交互的时候,没必要为玩家考虑太多。 初始的玩法技巧应该尽可能的轻松,给玩家自由探索的空间。

辅助网页制作游戏_网页游戏辅助的制作_如何制作网页游戏辅助

MMORPG 看起来都一样

辅助网页制作游戏_网页游戏辅助的制作_如何制作网页游戏辅助

《梦幻西游》

人性化帮助原则 提供帮助提示的最佳方式是:无提示>一次性提示>永久提示>帮助文档。

由于游戏在视觉上和创意上更加灵活,因此可以以更有趣的方式呈现提示。

例如,《王国保卫战》的难度就使用了低、中、高三种不同的士兵形象。 玩家一眼就能清楚地明白每个难度的含义,自然是再合适不过了。

辅助网页制作游戏_如何制作网页游戏辅助_网页游戏辅助的制作

《王国保卫战》

游戏提醒也可以通过NPC说话来表达,这样也能让提示和场景更加贴切。

网页游戏辅助的制作_辅助网页制作游戏_如何制作网页游戏辅助

不同之处

如果大厅和产品类似,都是为了帮助用户实现某种功能而设计的; 那么他们最大的区别可能就是视觉上的区别。

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

“你有一个故事吗?”

您听说过“给您的产品讲故事”这句话吗?

参加广州创客马拉松时,每个团队只有3分钟的时间展示自己的项目。 这时材质材料,他们需要通过“故事”将产品传达给观众。 如何讲述故事尤为重要。

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

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

产品交互设计师往往更注重功能的设计和页面的逻辑。 但在设计游戏页面框架时,GUI朋友提醒我:“你想通过这个页面讲述什么故事?”。

每个游戏都是一个世界,界面是向玩家传达这个世界的重要媒介。

因此,在开始设计游戏主页面之前,设计师和策划人员需要共同构思“要向玩家传递什么故事”。

以《玩具大战》为例。 它的故事是:“玩具城里举办了一场玩具比赛,所以玩具们都来参加比赛了。”

虽然只是简单的一句话,但有了这个故事,界面设计就会表达“挑战”、“击败”、“排行榜”等元素; 语言设计将围绕“炫耀”、“玩具城公民”等,而不是冷冰冰的“玩家”; 氛围设计也可以紧扣故事情节,营造丰富的玩具城背景和灯火通明的竞技场风格——向玩家传达一致的体验。

网页游戏辅助的制作_辅助网页制作游戏_如何制作网页游戏辅助

“玩具大乱斗”大厅

如何制作网页游戏辅助_网页游戏辅助的制作_辅助网页制作游戏

《玩具乱斗》准备界面

如何制作网页游戏辅助_网页游戏辅助的制作_辅助网页制作游戏

《玩具大混乱》排名

以《女神异闻录5》为例。 如果玩过的话就会知道:大厅以地铁为中心,各种接口都在地铁站内切换。 对比鲜明的红黑颜色被用来渲染出非常时尚的游戏特色,并贯穿整个游戏,让玩家感受到游戏风格和故事体验。 这是一个出色的大堂设计。

辅助网页制作游戏_如何制作网页游戏辅助_网页游戏辅助的制作

以后有时间我会详细讲讲“游戏界面的故事”。

“你有创意吗?”

在做产品时,几乎没有人强调界面设计的“创意”,更喜欢按照Material design、HIG等规范来设计。

但在做游戏交互的时候,你需要花费大量的精力去思考“如何让设计变得有趣”。

“有趣”一方面是指创造性的表现3D素材,另一方面是对玩家情绪的理解。

-创意表达

由于游戏界面设计限制小、图形元素丰富、视觉表现要求高,所以交互设计师有很大的空间让功能变得有趣。

当然,这种创意必须是合理的网页游戏辅助的制作,并且与游戏本身的“故事”相匹配。

以《永远的7天城》为例。 一般游戏的功能模块通常都是排在最底栏的一排,但《永远的7天城》将功能融入到了手机界面风格中,并把这个“手机”编织到了游戏故事中,成为玩家与神器使用者之间的“沟通工具”。

这种创意处理可以让游戏更具整体性,让玩家更容易沉浸在游戏的故事中。

辅助网页制作游戏_网页游戏辅助的制作_如何制作网页游戏辅助

《永远的7日城》《通讯工具》

以《秘密寻宝者》为例,弹窗被设计成一本打开的书,标签也变成了书页,比常规弹窗更有趣。

网页游戏辅助的制作_如何制作网页游戏辅助_辅助网页制作游戏

“宝藏猎人”任务弹出窗口

-情感理解

看看下面的商场设计。 你怎么认为?

辅助网页制作游戏_如何制作网页游戏辅助_网页游戏辅助的制作

“还不错,好看,有商场的氛围”——大概很多人都会这么想。

那么看看下面的商场设计吧?

辅助网页制作游戏_如何制作网页游戏辅助_网页游戏辅助的制作

读完后我会意地笑了。

后者显然比前者更能理解玩家情绪——

前者只是做了一个“好看”、“像商场”的商场;

后者通过丑化外表的“金人”与内心的“庄家”的反差,幽默地表达了玩家“邪恶的游戏开发商骗走了我们的血汗钱”的潜意识情绪。

“看在你这么难的份上,就请赞助我吧。”

因此,创造力的更高阶段就是将玩家的情感理解融入到创造力中。

大厅互动我就暂时写到这里,后续会继续补充。

下次我会讲“核心玩法”的互动内容。 希望大家能够支持我~

栏目地址:

网页游戏辅助的制作_辅助网页制作游戏_如何制作网页游戏辅助

文章来源:http://mp.weixin.qq.com/s?src=11×tamp=1705230628&ver=5018&signature=tR8i-tVXSKWoaUkI-*--QbxNl5DnVIhuOZr0HRT60VBHURSOXk9W5JqJuP-5lw8oSXHuUQPsE5v8EsJPxYy7YhD9OR3Gjk-UOz2egtvDQiEeb4gSMfOoWXLhGJq89Crj&new=1