赢在第一印象——应用图标设计技巧

我们辛辛苦苦做出来的应用程序,在应用下载站点和手机菜单上表示的仅仅是一个图标(icon)。也许会有人认为,icon套个模板随便弄弄就好了,自己又不是专业做图的,只要应用做得好就行。

但有句话我们是经常听到的,“人靠衣装,佛靠金装”。在应用商店、应用市场、手机菜单等显示的icon就像我们去求职面试的着装。得体的着装能带给面试官良好的第一印象,而合适且表现力强的icon能够迅速抓住人的眼球,让用户知道是否能满足他们的需求。对应用来说,用户就是我们的面试官。游戏和软件的icon需要表现的着重点不同,也就正如不同的行业要求不同的着装一样。如果你去银行面试,穿着明显不合尺寸的西装,或者干脆穿着T恤短裤拖鞋出现在面试官面前,面试官会怎样想你呢?他们大概会觉得你不尊重公司且因形象不够专业而不敢信任吧。对icon来说,也是这个道理。如果您的icon 很普通,不能准确地表现应用,而且失真,那么你的应用就很有可能错失第一时间被用户看中然后下载的机会。

所以说,小小的icon我们也不能忽视,以免因小失大。那么,我们的应用要怎样才能通过面试官——用户的面试,成功进入公司——手机呢?我们一起总结一下大牛们的icon设计技巧。

技巧一:抓住用户的眼球

游戏类应用由于没有什么功能可以概括,所以比较适用吸引眼球这点。

  1. 对于静态图片,人眼对3D效果更敏感。

静态图片

3D图片

要抓住用户的眼球,icon需要高度简化和夸张,小尺寸图标也能易于识别,不宜太复杂。使用自然的轮廓和形状,看起来几何化和有机化,不失真实感icon采用前视角,几乎没有透视,光源在顶部。不光滑但富有质感。

2. 人首先是动物,本能对于具有生命特征的物体更为敏感。因为这能激发起人心中潜在的危险感。

技巧二:抓住用户的需求

抓住用户的需求,就是icon能准确阐述应用的功能,让用户在看到应用icon的第一眼就能知道这个应用能带给他们什么服务,能不能满足其需求。这个技巧普遍适用于软件类应用。

技巧三:注意图标的尺寸

  1. Android的icon尺寸

Android的界面需要适配多样化屏幕,所以在运行时,程序为最佳显示效果提供了三种方法:

1)图片缩放

基于当前屏幕的精度,平台自动加载任何未经缩放的限定尺寸和精度的图片。如果图片不匹配,平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。例如,当前为高精度屏幕,平台会加载高精度资源,如果没有,平台会将中精度资源缩放至高精度。

2)自动定义像素尺寸和位置

如果程序不支持多种精度屏幕,平台会自动定义像素绝对位置和尺寸值等,这样就能保证元素能和精度160的屏幕上一样能显示出同样尺寸的效果。例如,要让WVGA高精度屏幕和传统的HVGA 屏幕一样显示同样尺寸的图片,当程序不支持时,系统会对程序慌称屏幕分辨率为320×533,在(10,10)到(100,100)的区域内绘制图形完成之后,系统会将图形放大到(15,15)到(150,150)的屏幕显示区域。

3)兼容更大尺寸的屏幕

当前屏幕超过程序所支持屏幕的上限时,定义supports-screens元素,这样超出显示的基准线时,平台在此显示黑色的背景图。例如,WVGA 中精度屏幕上,如程序不支持这样的大屏幕,系统会谎称是一个320×480的,多余的显示区域会被填充成黑色。

但为了达到最佳的显示效果,最好的方法还是设计多套图片。那就有必要对于所有的屏幕依据精度值进行分级(高中低),之后再设计三套icon:

先为主流的中精度屏幕(HVGA)设计一套icon,确定图片的像素尺寸。

为高精度屏幕将图片放大到150%,为低精度屏幕将图片缩小至75%。

将这三套资源放置到程序的三个文件夹下 :res/drawable-mdpi/ 、res/drawable-hdpi/、 res/drawable-ldpi/。程序在运行时,平台会根据屏幕的精度调取合适的icon。

2. iPhone的icon 尺寸:

57×57像素,直角。

无发光效果。

无透明度。

将图片命名为Icon.png,放置在程序的资源包中,iPhone os会自动生成一个icon。

附:图标制作常用工具:
Photoshop是一款位图软件。这个软件在做图标时,非常灵活,你可以从中画出你所需要的图形,也可以利用应用程序中的素材内容。最方便的是其灵活的图层样式和丰富的路径图形可以创造出任意的图形。但在放大缩小时,需要重新调整,增加或减少图标中的内容。可用指数★★★★★

Fireworks是一款位图与矢量结合的软件,非常适合做小图标的软件,操作方式是由贝斯曲线画图,但显示是以像素方式展示的,对图标设计师来讲可以非常灵活的调整像素,放大缩小。可用指数★★★★★

Illustrator是一款矢量软件。在画图标时,不需要太多的关注大小。同样也可以做出非常多效果,但相对ps的效果要弱一些。在导出png图片时,需要重新调整,以便于用在应用程序中。可用指数★★★★

其他软件在这里就不多介绍了,在图标设计师中不乏有用各种软件来表现图标每个细节。图标的本质不在使用的工具,而在于谁在使用工具,用什么方式来创意图标。

 

参考文章:《app Icon设计心法》、《Android 图标设计指南》、《方寸之间——图标的设计方法及技巧》、《Android vs iPhone icon设计指南》

图片来自应用之家www.app111.com

by dev.youmi.net


分享到:



赢在第一印象——应用图标设计技巧》上有 4 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>