特实用：移动游戏图标设计的7个原则

2016-01-23 12:00 · 稿源: 查看原文

内容速读：

今天，无论打开一个Windows还是Mac系统，无论在笔记本、台式电脑还是在移动设备上，五颜六色的应用图标都在影响着使用者每时每刻的心情。不用被华而不实的广告吸引，不用来自亲朋好友的建议，他可能仅仅是被设计感出众的图案吸引，就轻而易举地被一个应用或是游戏折服。这就是图标设计的艺术。

在图形化操作系统出现之初，图标的功能体现出了极强的实用性。一方面你无法随时用文字描绘一个系统功能，所以必须让指代它的图案通俗易懂；一方面，图标能够支持的大小和发色数都十分有限，必须在有限的像素点下让图案简单又醒目。可是时代在进步，今天的游戏图标概念听起来已经和“游戏图片”或是“游戏海报”差不多了，图案也变得越来越多样化。以iOS系统为例，它最高支持将1024×1024分辨率的图片设为图标，然而iOS系统出于不同设备和不同场合显示的需要，会将图标存储为近20个尺寸，原图大小的图标和手机屏幕上的图标，显示效果甚至可能天差地别，这样的设计其实非常考验图标设计者们。

于是，今天我不想谈游戏，我想也许可以抛砖引玉，列出几条游戏图标设计上我认为十分重要的原则，与各位读者探讨一下游戏图标设计的得失，如果你恰好是一个移动游戏从业者，那么也许这种探讨会更有价值。

■ 什么也别想，你只需要写字

是的，首先我要说的就是，什么也别想，只是在你的图标上写字——写一个两个汉字，当然3个我觉得也可以接受。我相信很多非游戏类的应用早就这么干了，但我仍想把这条原则放在最开始，推荐给所有国产游戏开发者。因为这实在是个颇具中国特色的原则（其实日本人也喜欢这么干，但好像并没有国人这么过分），而且看看喜欢套用这个原则的游戏们，你就知道这条原则对于中国手机用户来说有多受用。

梦幻西游-2017城市争霸秋季赛: 676.82 MB 通用版免费; iTunes下载

就像所有在中国播放的电视广告一样，不要企图用新鲜的创意、高深的隐喻去影响你的目标用户，那样做徒劳无功，实际上只要告诉他们“送礼还送脑白金”就会有人高兴地买买买了。这个原则对于图标设计来说也是一样，淘宝就应该用“淘”，贴吧就应该用“贴”，简单直接。此外注意下配色、字体这些元素的差异性，以便用户可以在画风类似、玩法其实也类似的一堆游戏中快速找到你的产品。

■ 突出一个主要图案

一旦你看不起直接飙汉字这种简单粗暴的美学，想要在图标设计的道路上精进一些，基本上你会选择一个游戏画面或游戏人物作为图标的主体图案。所以，这时需要做的就是：突出这个主要图案。我曾认为这是一个不必再三强调的基本原则，但是看看同样采用三国题材，有的游戏图标是这样的：

三国志之魏武挥鞭: 147.77 MB 通用版人民币：1; iTunes下载

经典的《德军总部》，我也不知道这是闹哪样：

Wolfenstein 3D Classic Lite: 43.91 MB 通用版免费; iTunes下载

还是经典，这图标是传错了？

轩辕剑贰 DOS怀旧版: 50.77 MB 通用版人民币：12; iTunes下载

考虑到大多数时候你的用户只是在手机屏上看到这个图标，我不认为他们第一眼能够分得清这到底画得是什么。因此，把主体图案的焦点——大多数时候是人的脑袋——放大就是通常的选择。另外，如果可以去掉那些随意涂抹、模糊不清的背景图案就更好了。现在，你拥有一个完美的人脸，或者是人物的上半身，这也许还不足以体现这款游戏的内涵，可至少我知道这张图片到底要表达出什么了。

超脱力医院 - 最好玩的中文单机模拟经营...: 477.76 MB 通用版免费; iTunes下载

比如这个图标，我解读一下，它的意思是：如果不能突出主要图案，你就该吃药了。

■ 扁平化是不可逆转的潮流

是的，再看一下上面那个被我批判的三国游戏，它的图标周围那圈金色还带有凹凸感的边框真是太不合时宜了。我从来也不是个扁平化的绝对支持者，也不是拟物风的完全反对者，但既然苹果和Google都选择追随这样的潮流，那么再强行设计类似的图标元素就显得有些违和了，但其实类似这样的设计现在还有很多。

扁平化之后，其实并不意味着你不可以再设计边框，比如这款《饿狼传说》里简洁的白色边框就十分舒服：

FATAL FURY SPECIAL: 81.73 MB 通用版人民币：25; iTunes下载

所以，优先考虑扁平化吧。就算是古代题材也不是不能和扁平化相融合，扁平化只是为设计师打开了另一扇窗。

■ 善于突破方寸之间

出色的设计师善于突破方寸之间，利用简单的设计让你有种戴上3D眼镜观赏IMAX的感觉，所以一旦有机会，不要让你的游戏图标看起来是一张呆板的贴纸，而是要立体和运动起来，满是冲击力。

前面已经提到，在iOS系统拟物化的时代，设计师们喜欢给图标的外围加上一个厚薄不等的边框，然后让主体图案突破边框，利用前后物体的遮挡关系形成空间感和一定的视觉冲击力。在崇尚扁平化的今天，设计师们已经基本抛弃了这种“过时”的设计，而是更多地在构图上做文章。比如这款新近上架的《梦境旋律》，图标中并没有不负责任地把男女主人公挤在一起，放进方框之内，只是将“小凯”的脸部放大到极致，突出眼睛和发饰等等细节。遮挡到只有一半的面庞反而更容易表达出人物的神情和内心世界，又不至于让整个画面过满，流于平庸。

在这个原则下，实际上赛车游戏图标的设计更值得一提。我们常见的赛车游戏图标一般是这样的：

狂野飙车8：极速凌云: 1784.12 MB 通用版免费; iTunes下载

说实话，我不知道这是要表达什么，我看到的就是一辆静止的汽车，而且长相也很奇怪。或许你会说，在一个正方形空间里要想表达出风驰电掣的感觉也许有些勉为其难，但你看下面这个图标的感觉就好得多：

倾斜的构图、反光的地面完全营造了赛车游戏应有的感觉。是的，如果只有这些，那么也许这只是个及格的作品。最妙的是，设计师在画面上方添加了一条白色的流线，你可以将它理解为赛道，也可以理解为汽车飘逸的前进线路，不管是什么，总之，一个简单的元素就让运动感呼之欲出。

■ 用细节营造意境

你可能觉得意境是个很玄妙的东西，但往往一些巧妙的处理可以让一个图标看上去比你所期望的更好。比如说，不管下面这个《蝙蝠侠》游戏事实上是多么声光炫酷，看到这个不负责任的图标我就失去了95%想要尝试的兴趣，这真是令人伤感的事。

相反，《侦探爱丽丝》是个玩法上没有什么新意的热点搜索解谜游戏，一般来说，如果你自愿想要近视，那么可以试试玩它几个小时。然而，我真的忍不住去玩了。吸引我的首先是它独特的画风，在画风的基础上，这款游戏的图标设计显然完全展现了它在美术上的优势，重点是，虚化的背景营造了一种朦胧的意境，这让我觉得我看到的不只是女主的大头照，似乎还看到了什么隐藏的秘密。