游戏图标设计在一款游戏UI中占据非常重要的位置,举个例子:当我们看到一款游戏的启动图标时,会很容易分辨出这是哪款游戏。设计游戏图标不仅是一种图形,更是一种标识。本篇文章将通过多种游戏图标设计素材,分享游戏图标的类别以及设计游戏图标的思考。

移动游戏UI

移动游戏UI

1. 游戏图标分类

游戏图标设计种类主要是以下几种:

1.1 徽章图标

属于大型图标,对游戏图标设计的精度要求最高,也最挑战设计师审美和创造力的内容。

1.2 功能图标

功能游戏图标又称入口图标,指的是界面中各个功能的入口。功能图标是游戏UI界面中可以产生交互功能(如点按、长按等手势操作)的图标,下侧的菜单入口,带指向性的功能入口,成就,活动,战令等图标就属于入口功能图标

1.3 道具图标

游戏中代表各种奇奇怪怪的道具的图标都属于道具图标,比如各种宝箱,各种经验卡,各种小喇叭一类,对局中的装备也属于道具图标;道具图标种类繁多,用于展示游戏内道具的缩略图示信息,帮助玩家在游戏世界观中产生联想与共鸣。道具游戏图标需求量大,对绘制的精度要求也比较低。

1.4 控件图标

控件图标是比较无关紧要的部分,即经常出现在游戏UI界面上方的好友按钮,设置按钮,关闭开启等,面积最小,只要清晰且统一即可。

1.5 技能图标

技能游戏图标说复杂是比较复杂的一类,对游戏图标设计的精度要求比较高,要能精准简洁又能快速效果地展现出技能的关键内容,说简单也难度不高,因为有比较多的套路可以遵循。

1.6 启动图标

启动图标是玩家在平台端口(手机、PC或其他平台)第一眼能接收到一个游戏的信息。通过点击启动游戏图标可以进入相应的游戏世界。

2. 游戏图标设计风格

不同种类的游戏图标有不同的表现方式,所以暂时只能从笼统的大范围来概括,按照图标的风格大概可以分为这几类:

2.1 像素风格游戏图标

像素风格最早可以追溯到电子游戏刚刚诞生的年代,因此我们对这种风格也有天然的接受度和情怀;然而,设计出优质的像素风格游戏图标并不是一件简单的事情,画面毕竟比粗糙,能留存住玩家的只能是好玩的游戏内核了;同时,像素风格的游戏在美术开发上的难度也远远小于更精美的其他风格,所以独立游戏开发者,在条件有限的情况下,选择像素风格是相当明智的。

像素风头像

像素风头像

2.2 扁平风格游戏图标

扁平风格的游戏图标设计难度其实相比手绘风格要小上很多,设计的重点在于对图案节奏感、正负形的把控和线条的流畅程度、图标的可识别度。此外,如何让简单的扁平化图标不显得简陋,也是游戏UI设计师需要学习的东西。

不同于商业应用图标设计,在设计游戏图标时,设计师拥有更多的自由,在直观和清晰的信息传达的基础上,可以添加比普通UI图标丰富很多的细节,以配合不同的风格。

游戏社交客户端

游戏社交客户端

2.3 Q版风格游戏图标

Q版风格与手绘风格的最大的不同在于弱化笔触感,有的甚至直接用三维模型来辅助绘制,以获得完美的光影;在造型特点上,Q版游戏图标图标的突出特点在于轮廓线十分圆润,造型极其饱满,细节大且圆,各组件都比真实的物件要更厚。

3D图标

3D图标

2.4 写实手绘风格游戏图标

手绘风是最常见也是最“古老”的图标美术风格,绘制重点在笔触感和图标的色感上,图标需要结构清晰且有立体感。手绘风格的图标经过多年的演变,已经产生了各种各样的分支风格,目前仍有大量的游戏界面图标是使用手绘风格绘制的,因此基本的手绘能力以及对结构,素描关系的理解,驾驭不同风格的手绘能力,是游戏UI设计师的必备技能。

3. 游戏中图标怎么设计

设计游戏图标的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮。游戏图标设计遵循以下三个原则,即可用性、美观性和原创性。通常我们可以用以下几个常用原则去判定一个图标的可用性好与坏,即易识别、直观、差异化以及统一。

像素风图标

像素风图标

3.1 设计游戏图标常见问题

当绘制完图标后,可以通过问自己以下问题来避免踩坑:

  • 是否无明显差异化,太相似、难辨识?

  • 图标是否太多元素?或着加入了不必要元素?

  • 一整套图标是否不够统一?

  • 过度设计,但表意不足?

  • 是否存在大图精致,小图糊出天际的情况?

  • 有放到手机里看过了么?如果存在以上问题,则需要重新调整设计,细致打磨直到满意为止。

3.2 游戏图标设计核心思想

符合世界观的引导,让玩家更易产生代入感,同时比文字更易理解和记忆 :

  • 功能:需要根据游戏的需求性设计,例如这是一个怎么样的游戏图标?有什么功能作用,需要传递给玩家哪一种情绪。

  • 美观:造型是否好看,角度光源是否且统一,颜色是否会灰或焦?元素是否会过多造成难识别,缩小之后是否清晰。

  • 创意:元素与元素的结合是否具有趣味性 。

3.3 游戏图标设计规范

在一个游戏中,游戏图标往往不是单独出现的,而是大量的、一套一套的,因此需要设定一些规范来统一游戏内的图标,让其保持一致性。同一功能的图标需要做到:

  • 风格统一

  • 尺寸统一(视觉区域大小、内容感知区域等)

  • 样式统一(角度、光源、描边等)

3.4 游戏图标设计技巧

  • 创意:源于生活、提取创意,多看优秀作品。

  • 细节:优秀的图标也同样注重细节,一下细小的设计会增添图片的差异化。

  • 整体:一套图标要有同样的风格设计,便于识别。

推荐使用Pixso快速开启图标设计

Pixso资源社区内置大量优秀的设计资源素材,涵盖网页设计、移动UI、插画、图标等,每款设计模板都可以免费下载,你可以在图标专栏,直接免费复用游戏图标,查看设计源文件,学习游戏的图片设计。推荐使用Pixso开启图标设计,Pixso是新一代设计协作工具,不仅实现了和Figma、 Sketch、Adobe XD 的无缝衔接,更基于优秀的组件变体、自动布局等特色功能,让UI设计师在网页上就可以尽情自由创作。作为一款为本土设计师量身打造的国产设计工具,因其实时协作、精细化设计工具等特色功能,收获了广大使用者的喜爱。

Pixso资源社区

Pixso凭借自主研发的矢量网格算法,率先突破了矢量网格在色彩填充上的限制,实现了矢量图形闭合路径可独立填色的效果。与一般设计工具相比,使用Pixso在线协同设计高级感投影效果,可以用更少的时间,更简单的步骤,达到更优秀的设计成效!

矢量网格

设计是通用的,说完了游戏图标设计类型、方法以及思考问题的方法,我们掌握了做事的方法以及思考问题的方式,就可以一劳永逸适用在另外的设计领域中,我们可以阅读Pixso设计技巧专栏的设计教程文章,提升你的设计能力。