APP图标梦工厂
特别策划
那些形形色色的图标
不同的人对图标的定义是有不同的,司机眼中的图标可能是交通指示牌上的指示图形;机械操作员眼中的图标可能是操作面板中按钮上的图案;计算机开发人员眼中的图标可能是电脑中的程序和文件标示。图标是标志、符号、艺术、照片的结合体,是图形信息的结晶,而我们今天所要说的图标,则是在我们生活中接触越来越多的手机和平板等移动设备上的应用图标。按照图标的风格,它们也可以分为各种各样的流派。
图像流:利用实体物品说明用途





图像流讲究一目了然,这种表现方法能够直观地展现应用的使用方式和操作方式,让用户能直接清楚地了解APP用途。图像流最常用在书籍、现实生活中常见的物品相关的APP上,比如iReading童话故事、乐顺备忘录、中国全史、Camera Genius、Virtuoso Piano等APP就用上了这招。
内容流:展现APP代表界面





使用内容展示的多为游戏应用,这类应用更需要给用户展示尽可能多的游戏玩法和内容。
例如:水果忍者、Cut the Rope、FIFA game、Asphalt5、FaceFighter这几个APP,它们的图标无一不是取自游戏内容,很好地表现了游戏玩法。你看FaceFighter,图标上那一记重拳,简直是拳拳到肉。
比喻流:借用熟知的形象





这类图标往往会在效率类、聊天类、健康类的应用中,例如k歌之王、计算器、Live Sketch、todo、MSN、影片播放器等。因为这些类型的图标往往都比较抽象,所以我们需要利用更多人们熟知的形象和物品来为应用内容做隐喻,让用户能够联想到其里面的内容,而不需要去看简介。
标志流:利用已有标志





严格意义上讲这种类型并不属于图标的范畴,但由于人们对其已经印象深刻,所以在应用图标中可以借助这种“印象”来阐述应用内容。对于一些已经有一定用户基础的公司或是应用使用这种方式更加合适,例如虚拟人生3、凯立德移动导航、列车时刻表查询、UNIQLO、掌中新浪。
创意有没有: 图标的生命力
图标最关键的点在于“隐喻”,这是图标的灵魂。当你在设计你的应用程序图标时,第一件事就要考虑什么样的图标能够说明你的应用程序,能够吸引你的目标用户。这也就需要我们去认真地分析和提炼,让这枚图标更有生命力!
下面通过《水果忍者》这款游戏图标,我分成5个部分来给大家详细分析这枚图标创意的过程,希望大家能从中得到一些启发。
分析应用程序的性质
你的应用程序是游戏,是书籍,还是应用软件?是否使用一个词或是一个句子就能够说清楚?这是设计一枚图标最根本的事情,也是隐喻的开始。
“《水果忍者》是一款第一人称视角的游戏,你将扮演忍者,而你的手指便是忍者刀,尽力切开屏幕中出现的所有水果,同时避开与水果一起弹出的手雷。”
游戏简介很清晰地介绍了游戏的性质和规则,这是一款容易上手、规则简单的切水果游戏。

根据内容进行关键词提炼重组
如果应用程序是一款游戏,我们需要尽量用一个词语,或是一个动词+名词的形式将游戏内容展现出来。提炼关键词和关键点是非常重要的,尽可能去掉副词和形容词,以及描述性的语言。
通过提炼游戏说明,最终我们会得到以下几个关键词:忍者、刀、切开、水果、手雷。
接下来重组这些关键词:忍者用刀切水果,并避开手雷。其中“忍者”“刀”均为用户自己,可以不用在图标中展现,而需要展现后面的“切水果、避手雷”。最终经过精简该图标的内容就会清晰很多:“切+水果”。


将词语具象化,语言图形化
这是确定图标的一个很重要的部分,也是将语言图形化的第一步。
首先,要将词语尽可能名词化。由“切”这个动词,我们可以联想到“刀”“刀痕”等。
其次,名词需要更具体,并选择更具代表性、更饱满的形态。“水果”容易图形化。但需要进一步具象化,给用户更直观的感受。
在选择水果时,需要选择更具有视觉冲击力的色彩、饱满的形态。西瓜的形态非常饱满,红色有着比较强的视觉冲击力,容易让人产生好奇心和破坏的欲望。


定位你图标的风格,清楚你的用户
确定这款应用的最终用户是哪种类型,图标的风格要倾向于这类用户的喜好。
目前图标风格大致可以分为商务类型、卡通类型。
《水果忍者》有些倾向于卡通类型,这个类型比较适合易于上手的游戏。
商务类型图标多以“冷色”为主,配色中主要体现冷色,但也可以使用暖色,但相对于同色相的色彩,也多为偏灰或是偏冷的色调。这类颜色能够使人冷静、心情平缓。
卡通类型图标多以“暖色”为主,颜色绚丽、纯度偏高,或对比强烈。这类型颜色可以调动人的情绪,更快地进入角色。


将它们的草图画出来
画出你想象的草图。这一步需要一些艺术基础。选择并且重组、优化这些图形,以便能够符合整体的图标风格。这个过程是不断修改图标的过程,尽可能将想到的图标内容画出来,并且合理地组合在一起。


小贴士 :图标设计技巧
1.避免图标中过多元素的堆积。
图标内容越简单、表意越清楚越好。只要有一件物品能表达清楚意思,就不要再加任何同类物品了。增加图标的复杂度无异于画蛇添足。


以上两个例子都是元素过多地堆积,已经影响了表意
2.注意保持光、反射、影子的一致性。
图标中的内容必须要有一致性。包括光源、影子、反光、倒影、透视等。否则会让人感觉到图标是拼凑起来的,显得杂乱无章。
3.充分利用有限空间,使用饱满的图形。
要充分利用图标所给出的有限空间,将所表现内容充分表现出来。这时需要我们在选择图标元素或是游戏内容时,尽量挑选既要有代表性,也要非常饱满的图形。如果没有饱满的图形,可以制造假空间、框体等来弥补,下面这几个应用图标都非常饱满。




设计工具:飞花摘叶俱可伤人
应用图标设计并没有指定设计软件,只要你懂的、或是上手的软件都可以设计图标,但需要保证你可以输出标准大小的png格式的图片。
目前设计师在设计图标时,多使用Photoshop、Illustrator、Fireworks,也有设计师使用Flash、Coreldraw、Freehand、Maya、C4D、3Dmax、Painter等。下面简单介绍一下几个常用工具:
Photoshop
可用指数:★★★★★
是一款位图软件。这个工作在做图标时,非常灵活,你可以从中画出你所需要的图形,也可以利用应用程序中的素材内容。最方便的是其灵活的图层样式和丰富的路径图形可以创造出任意的图形。但在放大缩小时,需要重新调整,增加或减少图标中的内容。
Fireworks
可用指数:★★★★★
是一款位图与矢量结合的软件,非常适合做小图标,操作方式是由贝斯曲线画图,但是以像素方式展示的,对图标设计师来讲可以非常灵活地调整像素,放大缩小。
Illustrator
可用指数:★★★★
是一款矢量软件。在画图标时,不需要太多地关注大小。同样也可以做出非常多的效果,但相对Photoshop的效果要弱一些。在导出png图片时,需要重新调整,以便于用在应用程序中。
其他软件在这里就不多介绍了,在图标设计中不乏有用各种软件来表现图标每个细节的情况。图标的本质不在使用的工具,而在于谁在使用工具,用什么方式来创意图标。

__LEVEL__小贴士:Photoshop的简单技巧
使用PS时,我们可以使用“路径+图层样式”的方式来设计图标。
软件中预设了很多图形,可以直接拿来用,如果你觉得不够,也可以在素材站点下载到这类图形。

10个APP图标设计佳作

视角选得很好,有空间感。扬起的灰尘给人感觉汽车就要冲出来,对追求速度感的赛车游戏爱好者来说很有吸引力。

Twitter第三方客户端,颜色对比很鲜明,有活力,图标只用了比较饱满的头部,加强了图标的视觉冲击。

DJ打碟应用,直接使用打碟机外形,直观、易懂,并且巧妙地利用了打碟机和图标规范外形融合,可谓恰到好处。

金属质感强烈,灯光效果非常动感,外形刚刚融合。

半写实风格,设计制作非常精细。

可爱搞笑的图标,第一时间吸引你的眼球。

Facebook官方应用,简明的风格,与网站的颜色、风格非常一致。

以相关物体局部作为背景,兼顾写实效果。

采用人物形象,动作刻画得很好,很酷很劲爆。实际试玩游戏,操作和图标给人的感觉一样爽。

写实图标,修改形状来适应iOS圆角图标,以达到视觉与空间完美的平衡。