> 财经 >

如何制作电子游戏UI,UX线框图(上)

时间:2023-08-26 03:27:38       来源:哔哩哔哩

文章来自于:John “The Wingless” Burnett,他是一名视频游戏艺术总监和屡获殊荣的 UI UX 设计师,在该行业拥有约 20 年的经验。他还开展自己的国际 UI 设计指导计划,教授设计师如何以 UI 艺术家的身份进入视频游戏行业。

这是他的个人网站:/ui-ux-design-sponsorship-for-recruiters-video-game-studios-and-job-placement/

文章仅作技术语言上的调整,不代表本译者观点。


(资料图片仅供参考)

第 1 部分 – 如何开始创建视频游戏(video game)线框图

视频游戏(video game)UI UX 线框到底是什么?

视频游戏(video game) UI UX 线框是一个随着时间的推移而演变和解决的迭代文档。线框还为概念性问题提供了视觉答案,如果运气好的话,还可以发现更好的问题。最后,线框是团队对话的方式,,可以让大家统一目标并理解的蓝图。

从抽象的角度来看,线框将我脑海中的内容放入你的脑海中,并尽可能减少沟通上的误差。其中可能会包括:显示动画,模式变化的视频、笔记,故事板等等。如果在用户体验上有关于色彩的问题,那么它也可以在线框阶段提出,无论传统上与颜色无关的线框如何。你可以在线框阶段尽一切努力规划最终产品的样子。

视频游戏UI UX 线框不应该是什么?

在早期阶段(有时称为低保真模型),线框绝对不是任何细节都完美的像素蓝图。事实上,过早太多细节会使设计陷入困境,将你推入技术死胡同,并陷入困境。您需要有经验来弄清楚什么时候对线框花更多的力气,什么时候需要去推进它。

线框也不应该展示那么多的艺术品。原始的、功能性的用户体验是第一位的,如果做得正确,艺术品就会覆盖在你刚刚搭建的坚实基础上。如果做得不好,你将不断地开玩笑、匆忙和黑客艺术直到你交付——这对现代数字设计师来说是一种折磨。

视频游戏UI UX 线框如何在真实的视频游戏(video game)中发挥作用?

在实际的工作中,线框主要是围绕它的对话,通常是与创意总监或团队的对话(如果团队规模较小或场合较大)。因此,视频游戏(video game)线框图中的真正劳动基本上是看不见的:工程、设计和 UI 之间数周、数月甚至数年的看不见的会议沟通中都需要使用到它。 

一旦特定屏幕上的对话完成,就可以根据反馈来完善线框,或者将其交给实施(也许由您来实施?)。如果线框需要更多迭代,那么这是一个从【低保真(草图)】到具有【动画和交互的超高保真度原型】的演变过程。

如何开始制作视频游戏UI UX线框?

最简单的方法是根据元素的层次结构或它们对玩家的相对重要性来放置元素。虽然花纹和装饰很重要,但在这个阶段它们应该是次要考虑的因素(tips:不过在工作时一定要让你的头脑充满灵感)

您第一次尝试线框图时应该努力回答几个基本问题:

您将在一段时间内面临的最明显的用户体验问题是什么?

该项目的范围有多大?

可以通过巧妙的设计来缩小范围吗?

每个元素放在一起时会是什么样子?

如何快速迭代、变化并从头开始? 

关于HUD设计

对于 HUD 设计,力求屏幕上尽可能少的杂乱,这可能是与设计师或创意总监的(充满活力的?)对话。如果可能的话,下一步是为屏幕元素打造令人愉悦的对称性和平衡性。如果这种对称性不可行,至少让线框同时考虑到游戏中可以一起出现的每个元素。 

请特别注意,HUD 背景可能会非常复杂,因此请在足够复杂的背景下测试您的设计。如果您想要那颗闪亮的金色星星,您还可以通过在游戏中叠加线框来尽早测试您的设计。在紧要关头,您还可以将线框放置在游戏视频上,试试看结合上下文、比例和分散注意力的感觉。

关键词:

精彩推送