移动游戏图标设计的7个原则

触乐2016-01-27

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

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

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

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

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

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

突出一个主要图案

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

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

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

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

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

扁平化是不可逆转的潮流

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

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

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

善于突破方寸之间

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

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

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

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

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

用细节营造意境

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

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

更具体的我也说不清，但我确实被这样的图标所吸引。

在任何尺寸都独具美感

出色的设计师往往可以照顾到方方面面，从iPhone 4屏幕上的图标到1024×1024分辨率的全尺寸，你都可以看到不同的风景，这是图标设计中的一个至高境界。随便举个栗子：

在King的这款《泡泡女巫传奇2》中，主角的形象得到了非常精致的描绘。即使缩到最小尺寸，你也可以看到她脸部的轮廓、她的衣饰以及不断变换消除的泡泡。放大到原尺寸图标，你就会看到更多的细节：衣服的纹理、泡泡中的奇怪生物以及女巫脸上的雀斑。

这样的例子还有一些，如果你是网页版浏览，可以在图片上点鼠标右键显示512×512尺寸的图片：

不要觉得这样的处理是稀松平常的，绝大多数游戏图标的设计师都不会在意这种细节，有的设计师为了偷懒，甚至可能传一张300×300分辨率的图片上去——他大概觉得，反正没几个人吃饱了撑的会去查看原图。嘿我说，你还是不是个设计师呀？

如果你不知道怎么办，或者必须要吸量，那就放妹子吧

我必须说，再出色的设计师迟早都会面临这样尴尬的场面，你的后面站着一个老板，吹胡子瞪眼，指东指西，让你必须设计出大吸量的游戏图标来，否则不能吃饭。如果你没那么出色，那么碰到这种事儿的概率会更高。这个时候，为了吃饭，你必须用上百试不爽的妙招，那当然就是妹子了。