优秀译者:陈子木
归根结底,UI和UX设计师的工作就是满足用户的需求并解决问题。 天马行空的想象力最终必须落实到实际产品中。 即使在游戏中,UI 也从来不是为了纯粹的娱乐而设计的。 此前,Tubik 的设计师为《真实多人赛车》游戏《Design in Action!》设计了插画元素。 一款扁平化手机赛车游戏的定制插画”,接下来的UI和UX设计也是由Tubik Studio的设计师完成。今天的文章将介绍整个游戏的用户界面设计过程。
任务
设计赛车游戏的UI界面。
预处理过程
一般来说,游戏的UI界面会包含以下元素:
・玩家信息:个人信息、排行榜、教程、进度数据、奖金等。
・预设界面:选择角色和设置,如角色、游戏、武器、载具、风格、路线等。
・游戏界面:实际游戏会话的界面。
・结束界面:游戏结束后,得分及总结、成就等界面。
在设计游戏界面时,设计师需要找到一种方法,让游戏对玩家来说更加流畅和愉快。 玩家不准备花费大量时间面对不清晰的导航。 他们想要一个直观的界面,并希望能够直接参与游戏过程。 这是游戏界面设计师必须记住的。 对于移动游戏界面来说,需要面临另一个挑战——与桌面游戏相比,移动界面更小,设计者需要在保持游戏性的同时更高效地利用屏幕。
这次负责UI和UX设计的设计师是Ludmila Shevchenko。 接下来我们就来看看她的设计过程。
用户体验设计
整个游戏的UI设计是从线框设计开始的。 设计师将在此阶段构思基本的交互和导航设计。 单色线框框架使设计人员可以在进行外观视觉设计之前更好地考虑界面之间的布局和过渡。 没有图片和动作效果,只有基本的图标和版式。 在这种情况下,设计师可以更加关注交互过程。 这里你可以看到Reacing的一些基本界面布局:
第一个屏幕是游戏的主界面。 单击 CTA 按钮开始游戏。 在它的下方,您可以看到邀请其他朋友一起玩的按钮。 屏幕顶部显示基本统计数据:汽油、货币、车辆商店和通知,而屏幕底部提供设置和排行榜按钮。
第二屏显示车辆选择的过程,只需左右滑动即可快速选择,下方是每辆车对应的数据。 此外,用户还可以定制车辆的颜色。
第三屏展示的是挑战好友的功能。 游戏的全称是“真实多人赛车”。 当然,也可以一起在线玩。 该界面还包括通知每个玩家是否准备就绪的功能。
所有这些交互都经过了仔细的考虑和测试,设计师开始继续后续的UI设计工作。 接下来,她需要让精心设计的交互流程在视觉上美观、有吸引力,具有足够强的情感感染力。
用户界面设计
当开始寻找 UI 解决方案时,设计师首先从色彩匹配开始。 为了更好地匹配顾客和用户的视觉,设计师提供了两种不同的配色方案:一种是暖色系,包括橙色和红色,与速度感密切相关;另一种是暖色系,包括橙色和红色,与速度感密切相关;另一种是暖色系,包括橙色和红色ui设计是什么意思,与速度感密切相关。 另一种配色是冷色调,配色以蓝色为主,颇受用户欢迎。 而车辆、标志、武器、障碍物等元素也在之前的基础上进行了重新设计,赋予了更新鲜、原创的视觉效果。
△ 基于暖色搭配的概念设计
△ 基于冷色调搭配的概念设计
客户更倾向于冷色系的设计,但希望在视觉上展现夜间游戏的感觉,所以在下一次迭代中,基于此方案进行调整,适当增强情感诉求ui设计是什么意思,打造夜间游戏氛围。环境。 并给人更时尚的视觉体验。 迭代修改后的样子是这样的:
在UI界面中,每个屏幕都有很多不同的按钮,设计者使用不同的颜色给它们着色,以便用户可以区分它们。 游戏开始按钮是最关键的按钮。 它是最突出的,并且比其他辅助按钮具有更高的优先级。 相应的图标也设计得与主视觉风格相匹配。
各个界面的背景也都装饰有倾斜的轨道,不仅赋予界面动感,还营造出强烈的速度感和竞技氛围。
这组界面是用户选车的界面。 通过左右滑动选择汽车,可以查看对应汽车的参数和性能。 选择汽车后,用户还可以选择所需的颜色。 正如您所看到的卡通形象,设计师使用了混合颜色作为背景。 颜色鲜艳的车辆位于白色背景上,而其余信息则显示在深色背景上。 这组对比很有趣,让整个界面看起来和谐自然。
此外,在选车过程中,设计师还加入了有趣的动态效果,让用户在使用过程中感受到足够的乐趣。
以上三个界面分别是多人游戏时的玩家准备界面、带有日程进度条的游戏进程界面以及游戏完成后的结果界面。 用户完成游戏后,可以直接从游戏结果界面将结果分享到社交网络上,这对游戏的传播有很好的作用。 “You Win”的字体可能看起来不够强烈,这个可以在测试后调整迭代。
排行榜的存在可以让用户的分数清晰直观的呈现出来,提高他们玩游戏的积极性。 也鼓励更多的玩家参与并挑战更高的分数。
对于Tubik来说,手游界面是一个非常有趣的挑战。 Real Multiplayer Racing项目是Tubik团队历史上首次参与游戏界面的设计。 它需要兼顾娱乐性和功能性。 、导航、转场都经过仔细考虑,并通过深入分析和测试获得反馈卡通形象,细节和原创性尽可能好。
- 本文固定链接: https://wen.nuanque.com/ui/10616.html
- 转载请注明: nuanquewen 于 吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计 发表
- 文章或作品为作者独立观点不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。本文之内容为用户主动投稿和用户分享产生,如发现内容涉嫌抄袭侵权,请联系在线客服举报,一经查实,本站将立刻删除。本站转载之内容为资源共享、学习交流之目的,请勿使用于商业用途。