赞助商
立即赞助

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

UI设计3年前 (2021)更新 流光
2.5K 0 0

UI 和 UX 设计师的工作归根到还是满足户的需求,解决问题。天马行空的脑洞最终还是要落实到实的产上的。即使在游戏当中,UI 从来是为了纯娱乐而设计的。之前,Tubik 的设计师为游戏 Real Multiplayer Racing 设计了中的插画元素《设计实战!扁平风的移动端赛车游戏制插画》,接下的 UI  UX 设同样由 Tubik Studio 设计师来完成。今天文章将会呈现个游戏用户界设计过程。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

任务

为赛车游戏计 UI 界面 。

预处理流程

在通常义上,游戏的 UI 界面中会包含下面的素:

  • 玩家信息:个人信息,排行榜,教程,进度数据,奖金等。
  • 预界面:选择角色和置,比如角色、游戏、武器、车辆、造型、路线等。
  • 游戏界:实游戏环节界。
  • 结束界面:游戏结束之后的得分总结、就界面。

在设计游戏界时候,设计师需要找到让玩家流畅愉悦地游戏法。玩家们并没有准备大把时来不晰导航,他们希望观界,希望能够接参与到游戏过程去,这是游戏界设计师所必须记住。于移动端游戏界,需要另挑战——和桌端游戏相比,移动端界更小,设计师需要更高效利用屏幕,要保持游戏性。

这次被分配行 UI  UX 设的设师 Ludmila Shevchenko,接下我们看看她的设流程。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

UX 设计

个游戏 UI 设计是从线框图设计开始。设计师在这个阶段会构思好基本交互和导航设计。在打磨观视觉设计前,单色线框图框架让设计师更好地思考布局和界过渡。没有图片和动效,有基本图标和排版布局,这样情况下,设计师能够更加专注于交互流程。这里你可以看到 Real Reacing 些基本界布局:

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

第屏是游戏主界,击 CTA 按钮可以开始游戏,在它下,可以看到邀请其他朋友起游戏按钮。屏幕顶部显示了基本数据:油量、游戏币数量、辆商店和知,屏幕底部提供了设和排榜按钮。

第二屏显示了车辆选择的过程,左右滑动速选取即可,底部则每辆车相应的数据。此外,用户可以制车辆的色彩。

第屏则显示了挑战友的功,游戏的全名是 Real Multiplayer Racing 自然是可联机一起游戏的。界面中还包含了通知各个玩是否都准备好了的功。

所有的互经仔细的推敲和测试,设计师就开始继续面的 UI 设计工。接下来,她需要让精心设计的互动流程拥有漂亮而吸引人的视,具备够强烈的情感吸引力。

UI 设计

在开始探求 UI 决方案的程中,设计师首先是从着手。为更地匹客户和用户的愿,设计师提供两个不同的方案:一个是暖的方案,包括和速度感息息相关的橙与红两种暖;另一个方案是冷的,是以蓝为主,种在用户中颇为受欢迎。而诸车辆、标识、武器、障碍物等元素也在之前的基础上,为游戏进行重设计,赋予他们更为新鲜原创的视。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

△ 基暖的概念设计

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

△ 基冷的概念设计

户更加倾向于冷色调的计,不过希望在视觉中呈现出夜间比赛的觉,因此在下一次迭代当中,基于这个方案进行了调整,适当地增了情吸引力,营造出夜间流光溢彩的觉并且赋予更加尚的视觉受。下面是迭代修改之后的:

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

UI 界面中,每屏都有许多不同的按钮,计使用不同的色彩来进行着色,便于用户对它进行。游戏开始的按钮是最为关键的按钮,它最为显著,优先比其次要按钮更高,相应的图标也被计成和主视觉更为匹配的风格。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

各种界面的背景也使用倾斜的赛道来进行装饰,不仅赋予界面以动,而且营造出烈的速度和竞争的氛围。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

这组界面是用户选择赛车的界面,通过左右滑动选择赛车,并且可以查相应车型的参数和性能,选择好了车辆以后,用户也可以挑选出所需的颜色。正如你所的,计采用了色彩混搭式的背景,色彩鲜艳的车辆是色的背景,而其余的息则呈现在深色的背景上,这组对比是有趣的,并且让整个界面显得协调而然。

此,选取过程,设计师加入了有趣动效,让用户在使用过程感受到足够乐趣。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

上三个界,分是多游戏时玩家准备界,带有赛程进度条游戏过程界,以及完成比赛后结界。用户在完成比赛后可以从比赛结界,接将结分享到社交网络上,这于游戏传播有很好效。「You Win」体可能看起来不够有张力,这个可以在测试后再进调和迭代。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

排榜存在,让用户比分晰观地呈现出来,提高他们在玩游戏时候动力。也促使更多玩家参与进来,挑战更高分数。

设计实战!扁平风的手机赛车游戏UI界面是这样设计的

于 Tubik 而言,手游戏界是个常有趣挑战,Real Multiplayer Racing 项目是 Tubik 团队历史上第参与游戏界设计,既需要考虑到娱乐性,也需要照顾到功能性,需要在风格、导航、过渡上仔细敲,在深入分析和测试获反馈,在细节和原创上尽可能做好。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比...
幽灵按钮
作为设计师,你有没有想过怎么设计自己的「人生大事」?这两个在纽约的交互设计师,远程设计了自己的800人归国婚礼。历经5个...
UX COFFEE
UI 设计的工具层出不穷,每年都有不同的设计软件、动效工具、标注工具、原型工具问世。原因是因为 UI 类设计操作太简单,所以...
ui设计
Darren大人 :总结了一套引导页的设计思路,希望自己在新的一年能多学习总结,在这里和大家分享交流,大家也可以提出问题和建...
2.5D
本期文章会给大家带来一些设计思维方面的内容,加深大家对于设计的理解。毕竟,咱们不能只是做一个执行者,更要做一个具备设...
产品价值
编者按:用户访谈是了解用户最常见也最重要的一种方式,但是为什么有团队做的用户访谈并没有发挥它应有的作用呢?造成这个结...
UX设计
Low Poly Style 虽然不是我们设计一定非要掌握的设计风格,但是通过它我们可以学到很多结构素描中非常重要的一个环节。 一...
low poly教程
现代人对于健康越来越重视,而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用,还是卡路里计算器,...
App设计