发布时间：2019-9-1 分类： 电商动态
UI和UX设计人员的工作最终是为了满足用户的需求并解决问题。天空的大脑仍将在实际产品上实施。即使在游戏中，UI也从未被设计用于纯娱乐。此前，Tubik的设计师为Real Multiplayer Racing游戏设计了插图元素，下一个UI和UX设计也由Tubik Studio设计师完成。今天的文章将介绍游戏的整个用户界面的设计过程。
任务
为赛车游戏设计UI界面。
预处理过程
按照通常的意义，游戏的UI界面将包含以下元素：
玩家信息：个人信息，排行榜，教程，进度数据，奖金等。预设界面：选择角色和设置，如角色，游戏，武器，车辆，形状，路线等。游戏界面：实际游戏链接的界面。结束界面：游戏结束后的得分和摘要，成就和其他界面。
在设计游戏界面时，设计师需要找到让玩家流畅和愉快的方法。玩家不准备花很多时间在不清楚的导航上。他们想要一个直观的界面，希望直接参与到游戏中。这是游戏界面设计者必须记住的东西。对于手机游戏界面，您还需要面对另一个挑战 - mdash; —与桌面游戏相比，移动界面更小，设计师需要更高效地使用屏幕，还能维持游戏。
这次被分配到UI和UX设计的设计师是Ludmila Shevchenko，让我们来看看她的设计过程。
用户体验设计
整个游戏的UI设计始于线框设计。在这个阶段，设计师将构思基本的交互和导航设计。在对视觉设计进行抛光之前，单色线框框架允许设计人员更多地考虑布局和界面之间的过渡。没有图片和动画，只有基本图标和布局，因此设计师可以更专注于交互过程。在这里，您可以看到Real Reacing的一些基本界面布局：
第一个屏幕是游戏的主界面。单击CTA按钮开始游戏。在它下面，您可以看到邀请其他朋友一起玩的按钮。屏幕顶部显示基本数据：汽油量，硬币数量，车辆存储和通知。设置和排行榜的按钮也可以在屏幕底部找到。
第二个屏幕显示车辆选择的过程。可以快速选择左右滑动，而底部是每个车辆的相应数据。此外，用户可以自定义车辆的颜色。
第三个屏幕显示挑战朋友的功能。游戏的全名是Real Multiplayer Racing。当然，你可以一起在线玩。界面还包括通知每个玩家是否准备就绪的功能。
所有这些交互都经过仔细审查和测试，设计师继续进行UI设计工作。接下来，她需要有一个精心设计的互动过程，具有美丽和吸引人的视觉，具有强烈的情感吸引力。
UI设计
在开始探索UI解决方案的过程中，设计师首先开始使用颜色匹配。为了更好地满足客户和用户的愿景，设计师提供了两种不同的配色方案：一种是暖色系，包括两种暖色，橙色和红色，与速度密切相关;另一种配色方案是酷色，颜色主要是蓝色，这种颜色在用户中非常受欢迎。车辆，徽标，武器，障碍物等元素也会根据以前的元素进行重新设计，为他们提供更清新，更原始的视觉效果。
△基于暖色匹配的概念设计
△基于冷色匹配的概念设计
客户更倾向于冷色调设计，但希望在视觉中展现夜间游戏的感觉，因此在下一次迭代中，基于此程序，进行调整以适当增强情感吸引力并营造夜间感觉光彩。并提供更时尚的视觉体验。这是迭代后的样子：
在UI界面中，每个屏幕都有许多不同的按钮，设计师使用不同的颜色进行着色，以便用户可以区分它们。游戏开始时的按钮是最关键的按钮，它是最重要的，优先级高于其他辅助按钮，相应的图标也设计为与主要视觉风格相匹配。
各种界面的背景也采用了倾斜的轨道装饰，不仅赋予了界面运动感，还创造了强烈的速度感和竞争氛围。
这组接口是用户选择汽车的界面。您可以通过左右滑动选择汽车，您可以检查相应汽车的参数和性能。在选择车辆之后，用户还可以挑选出所需的颜色。如您所见，设计师使用颜色混合背景，彩色车辆是白色背景，其余信息在深色背景上呈现。这种对比很有趣，并允许整个界面。它看起来和谐自然。
此外，在汽车的选择过程中，设计师还添加了有趣的动态效果，让用户在使用过程中感受到足够的乐趣。
前三个界面是多人游戏的玩家准备界面，带有计划进度条的游戏进程界面，以及游戏完成后的结果界面。完成游戏后，用户可以直接在游戏结果界面上分享社交网络上的结果，这对游戏的通信效果很好。 “You Win”的字体似乎没有足够的张力。这可以在测试后进行调整和迭代。
排行榜的存在允许用户清楚直观地呈现他们的分数，增加他们的游戏动机。它还鼓励更多玩家参与并挑战更高的分数。
对于Tubik来说，手机游戏界面是一个非常有趣的挑战。 Real Multiplayer Racing项目是Tubik团队历史上第一次参与游戏界面的设计，既考虑到娱乐，又兼顾功能，风格需要仔细审查，导航和过渡，获得深入分析和测试的反馈，并尽可能详细和原创。
