设计实战!为扁平风的移动端赛车游戏定制插画 - 优设-UISDC

设计实战!为扁平风的移动端赛车游戏定制插画

2018/04/16 评论区

竞速类游戏是诸多游戏类型当中,最为刺激的类型之一。即使是在小屏幕上,极限的速度同样吸引着大批无法置身真实赛道的玩家投身其中。赛车游戏所带来的极限体验和其他类型的游戏完全不同,这也使得它足以成为一个完全独立的游戏类型。

当然,即使是在赛车游戏这个大类当中,不同的品类也是非常之多的。不同的玩法,不同的样式使得玩家可以按照自己的喜好来选择游戏。不过,不论是哪种赛车游戏,真实而贴合实际的赛车设计总是少不了的。这次,Tubik 的设计师接到一个设计需求,是为一款名为 Real Multiplayer Racing 的移动端赛车游戏进行原创的赛车设计。接下来,是这次设计实战的具体情况。

任务

为移动端赛车游戏进行平面设计。

预处理流程

Tubik 团队接到需求的时候,客户不仅要求要针对界面进行设计,而且还要进行大量的原创赛车外观设计。为了更好实现这个项目,我们分配了两个不同专业的设计来执行。其中,负责平面设计的是设计师 Arthur Avakyan,也许你在之前的许多设计实战案例当中见到过这个名字。他曾经负责过包括 Binned、AppShack、Passfold、Saily和SwiftyBeaver 在内的多个应用的设计。

作为一个赛车游戏,客户希望其中包含一些原创的设计元素。作为赛车爱好者,客户希望我们设计出详细的汽车插画,以便游戏能够营造出对的氛围。另外,客户还希望游戏足够正面、明亮且拥有卡通风格。

所以,这个平面设计的项目当中,涵盖了下面的部分:

  • 汽车插画
  • 特效
  • 障碍插画
  • 武器图标

经过团队的头脑风暴并且和客户讨论过后,整个创意设计的过程就开始了。

汽车插画

假定游戏中会提供从基本款到超跑各种各样的汽车,因此设计师在动手开始创作之前,先做了足够多的调研,对真实的汽车设计有了相对完整的了解,熟悉不同车辆的最重要的特征,然后着手开始进行图形化的创作。

扁平化的插画风格更加贴合客户的需求,因此设计师使用更为简单的形状和视觉元素来构建插画。插画的设计提供了足够成熟和细致的细节,这使得它能够满足用户在审美上的需求。

正如同你所看到的,设计师采用了相对鲜艳的配色方案,让汽车显得更为卡通。微妙的渐变让整个插画显得生动而对比鲜明。

有些车辆的设计需要设计师非常注意一些小细节。运动版的汽车,超级跑车,应该在用户获得了足够多的经验之后再解锁。这些车比基础款的更加强大,而它们的展示也需要更加惊艳炫酷。因此设计师为一些车型添加了一些定制化的细节,比如火焰和骷髅的花纹。这些细节为这些插画带来了正确的感觉。

赛车和超级跑车并不容易获得,只有经验丰富的玩家能够获得它们,它们不止是性能上更优秀,而且在整个外观体验上也截然不同。虽然风格并不写实,但是它们和原型车高度相似。

特效

当设计师完成主要的车辆插画的工作之后,开始制作额外的定制的细节。和许多同类的其他的赛车游戏一样,Real Multiplayer Racing 还拥有一系列额外的功能让整个游戏更加有趣。玩过这类游戏的玩家可能知道,赛车的时候,可以通过氮气加速。在许多桌面游戏当中,可以提供各种各样的快捷操作,但是在移动端设备上,这样的操作可能没办法太复杂,而且视觉上一定要足够明显。

所以,当玩家开始启用氮气加速的时候,设计师让车钱出现蓝色的特效,以示功能的启用。

除此之外,开发商还为汽车提供了一定程度的保护功能,在一个时间段内确保车辆免受伤害。为了区别于之前的氮气加速的效果,设计师采用了红色和紫色来呈现特效。如上图所示,左边是氮气加速的特效,右边是保护罩特效。

障碍

障碍是赛车竞速游戏中最常见的元素,赛道中的障碍让整个游戏的游戏性更强,让玩家更好娱乐。障碍通常会因为位置和环境而不尽相同,许多多人赛车游戏当中,障碍会基于当前环境而随机生成,比如泥土,石头等。当然,路上还会遇到诸如金币或者道具等其他的东西。

当然,玩家还得避开前面道路上的其他的非竞赛车辆,它们看起来就是普通的货车或者轿车。通常,这些作为障碍的元素会使用冷色来展示,这样在整个界面中会显得更加显眼。

武器

Real Multiplayer Racing 中最有趣的特征之一,是能够使用武器,包括前面所说的氮气加速和保护罩,玩家还能使用火箭弹来破坏对手的车辆,或者使用道具加速或者减速。

设计师的任务是设计出小而易于辨认的标识,确保用户能够理解他们所使用的武器是哪种。

结语

高效的平面设计确实能够在手机游戏中起到至关重要的作用。原创的扁平风插画让整个手机游戏的视觉体验非常突出地呈现出来。在接下来,我们的设计师还会继续参与这款游戏的 UI 和 UX 设计,届时会有专门的文章对它进行分析和介绍。

「2018年设计趋势,一个都不要错过」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/case-study-racing-graphic-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里