扁平化赛车游戏UI界面就是这样设计的

时间:2018-06-20 15:24:33 关键词:游戏ui 扁平化设计 交互设计 配色方案 ui设计师

扁平化赛车游戏UI界面就是这样设计的

归根结底,UI和UX设计师的工作仍然能够满足用户的需求并解决问题。最终,大脑的空洞仍然要在实际产品上实施。即使在游戏中,用户界面也从未为纯娱乐设计。之前,Rubik的设计师为游戏Real Multiplayer Racing设计了插图元素。随后的UI和UX设计也由Tubik Studio的设计师完成。今天的文章将介绍整个游戏用户界面的设计过程。

任务

为赛车游戏设计了一个UI界面。

预处理过程

通常来说,游戏的UI界面包含以下元素:

玩家信息:个人信息,排行榜,教程,进度数据,奖金等。预置界面:选择人物,游戏,武器,车辆,形状,路线等角色和设置。游戏界面:实际游戏界面会话。结束界面:游戏结束后,得分和总结,成就等界面。

在设计游戏界面时,设计师需要设法让玩家顺畅而愉快地玩游戏。玩家不准备在不明确的导航上花费大量时间。他们需要一个直观的界面,并希望能够直接参与游戏过程。这是游戏界面设计师必须记住的。对于手机游戏界面来说,还有另一个挑战。 ——与桌面游戏相比,手机界面更小。设计师需要更高效地使用屏幕并保持游戏玩法。

这次分配到UI和UX设计的设计师是Ludmila Shevchenko。让我们来看看她的设计过程。

UX设计

整个游戏的UI设计从线框设计开始。现阶段的设计师将设想基本的互动和导航设计。在抛光外观的视觉设计之前,单色线框架允许设计者更好地考虑布局和界面之间的转换。没有图片和动态效果,只有基本的图标和印刷布局。在这种情况下,设计师可以更多地关注交互过程。在这里您可以看到Real Reacing的一些基本布局:

第一个屏幕是游戏的主界面。点击CTA按钮开始游戏。在它下面,您可以看到邀请其他朋友一起玩的按钮。基本数据显示在屏幕的顶部:汽油量,硬币数量,车辆商店和通知,以及设置和排名按钮也在屏幕底部提供。第二个屏幕显示车辆选择的过程。您可以左右滑动以快速选择它,底部是每辆车的相应数据。另外,用户可以自定义车辆的颜色。

第三个屏幕显示了具有挑战性的朋友的功能。游戏的全名是Real Multiplayer Racing。一起玩在线是很自然的。界面还包括通知每个玩家是否准备好的功能。

所有这些交互都经过仔细审查和测试,设计人员继续致力于后续的UI设计工作。接下来,她需要有一个精心设计的互动过程,具有足够强烈的情感吸引力,美丽而迷人的视觉。

UI设计

在探索UI解决方案的过程中,设计师首先开始了色彩匹配。为了更好地匹配客户和用户的视野,设计师提供了两种不同的配色方案:一种是温暖的配色方案,包括两种与温度感密切相关的暖色,橙色和红色;另一种配色方案是酷色,配色主要是蓝色,这种色彩在用户中颇受欢迎。诸如车辆,标志,武器和障碍物等元素也在之前的基础上进行了重新设计,赋予了他们更加清新和独到的视野。

客户更倾向于冷色调的设计,但他希望在视觉上展示夜间游戏的感觉,所以在接下来的迭代中,基于此计划进行了调整以适当提升情感吸引力,营造出一种感觉夜间流光溢彩给予更时尚的视觉体验。这是迭代修改后的样子:

在UI界面中,每个屏幕都有很多不同的按钮。设计师使用不同的颜色进行着色,以便用户可以区分它们。游戏开始时的按钮是最关键的按钮,它是最重要的,优先级高于其他次要按钮,并且相应的图标也被设计为与主视觉样式更加紧密匹配。

各种界面的背景也采用倾斜的轨道进行装饰,这不仅给界面带来了运动感,而且还创造了强烈的速度和竞争感。

这组接口是用户选择汽车的界面。通过左右滑动选择车辆,并查看相应车型的参数和性能,选择车后,用户还可以选择所需的颜色。正如您所看到的,设计师采用了彩色混合背景,丰富多彩的车辆为白色背景,其余信息呈现在黑色背景上。这组对比是有趣的,并允许整个界面看起来协调和自然。

另外,在汽车的选择过程中,设计师还增加了有趣的动态效果,让用户在使用过程中感受到足够的乐趣。前三个界面是多人游戏的玩家准备界面,带进度条的游戏进程界面以及游戏完成后的结果界面。用户可以在完成游戏结果界面的比赛后直接将结果分享到社交网络,这对游戏的传播有很好的效果。 “你赢”的字体可能看起来不够紧密。这可以在测试后进行调整和迭代。

排行榜的存在使用户的分数可以清晰直观地呈现,以提高玩游戏时的动机。它也鼓励更多的玩家参与并挑战更高的分数。

对于Tubik而言,手机游戏界面是一个非常有趣的挑战。 Real Multiplayer Racing项目是Tubik团队历史上第一次参与游戏界面设计。它需要兼顾娱乐和功能。它需要风格。仔细审查导航,过渡和过渡。获得有关深入分析和测试的反馈。在细节和原创性上做到最好。

转载请标注:贵阳网站建设专家第一网络,链接:http://guiyang.01netcn.com/news/i1256.html

139 9608 0299
贵阳市高新区贵阳科技大厦A座9楼