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

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

编辑梅林粉杖2016年01月23日 12时00分

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

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

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

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

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

梦幻西游

梦幻西游
3650.16 MB  通用版  免费
iTunes下载

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

突出一个主要图案

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

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

还是经典,这图标是传错了?

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

超脱力医院

超脱力医院
334.79 MB  通用版  免费
iTunes下载

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

扁平化是不可逆转的潮流

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

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

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

善于突破方寸之间

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

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

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

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

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

用细节营造意境

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

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

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

在任何尺寸都独具美感

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

Bubble Witch 2 Saga

Bubble Witch 2 Saga
305.26 MB  通用版  免费
iTunes下载

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

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

Forbidden Island

Forbidden Island
133.21 MB  部分设备不兼容  美元:4.99
iTunes下载

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

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

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

或是:

结论是:妹子最终超越了以上的所有6条原则,怎么看都是养眼的。我的分享也到此结束。

0

编辑 梅林粉杖

meilinfenzhang@chuapp.com

其实,我是一个美工

查看更多梅林粉杖的文章
关闭窗口