• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 设计实战!为扁平风的移动端赛车游戏定制插画

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

作者:Tubik Studio 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,Tubik Studio,平面设计,游戏设计,经验分享,设计实战等相关知识,Tubik Studio希望在学习及工作中可以帮助到您

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

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

任务

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

预处理流程

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

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

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

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

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

汽车插画

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

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

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

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

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

特效

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

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

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

障碍

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

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

武器

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

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

结语

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

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

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

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

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

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

优设大课堂

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2017-08-06让网站图片生成灰色效果的三种方法
  • 2018-08-23超全面!创意图形中的实用小套路进阶指南
  • 2018-08-23上亿人使用的起点读书APP,背后的改版设计实录!
  • 2017-08-06html5中几个不容错过的api或者tips小结
  • 2018-08-23这3个适用性极强的网页设计趋势,在4月非常流行
  • 2018-08-23两分钟认识一款把 Sketch 变成 Principle 的插件:Diya
  • 2017-08-06实测图片的HTTP请求
  • 2017-08-06设置网页图片热点链接以及坐标值示例代码
  • 2017-08-06table td 图片水平垂直居中实现代码
  • 2017-08-06font-family 中文字体的英文名称小结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网站的文字还需要设计吗?
    • 好的网站文案 良好的用户体验
    • 帮你搞清楚用户在瞅啥的眼动追踪是怎么回事?
    • 网易设计师:电视交互设计的基础知识科普
    • 如何从0到1建立设计规范?来看腾讯设计师的总结!
    • 优设大课堂讲师申请规范
    • 超详细的《Design Systems》读书笔记
    • 字体大宝库 50款精美的免费细英文字体资源 上篇
    • 我花了80天,开发出这个3分钟快速搭建界面原型的设计工具
    • 如何培养组件化设计思维?来看阿里设计师的经验总结!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有