Android vs iPhone icon设计指南

在研究Android的icon设计之前,有必要先了解Android的界面是如何适配多样化屏幕的。

适配性

上一篇博文中提到,由于同一个UI元素(如100×100像素的图片)在高精度的屏幕上要比低精度的屏幕上看起来要小,为了让这两个屏幕上的图片看起来效果差不多,可以采用以下两种方法:

程序将图片进行缩放,
但是效果较差。为这两个精度屏幕的手机各提供一个图片。

但是屏幕的参数多样化,为每一个精度的屏幕都设计一套icon,工作量大并且不能满足程序的兼容性要求,势必要对屏幕的分级,如在160dpi和180dpi的手机屏幕上采用同一套icon,当这套icon在240dpi效果满足不了设计要求,就需要另做一套稍大些的icon。

在Android 1.5以及更早的版本中,只支持3.2″ 屏幕上的HVGA (320×480)分辨率,">开发人员也不需要考虑界面的适配性问题。从Android 1.6之后,平台支持多种尺寸和分辨率的设备,这也就意味着开发人员在设计时要考虑到屏幕的多样性。

为了简化设计并且兼容更多的手机屏幕,平台依照尺寸和分辨率对屏幕进行了区分:

三种尺寸:大,中,小。三种精度:高(hdpi),中(mdpi)和低(ldpi)。

程序可以为这三种尺寸的屏幕提供默认资源,如有需要,还可以为各种精度的屏幕提供资源。在运行时,系统会根据屏幕布局加载正确尺寸或者精度的图片。

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。设计指南

Android标准icon

Launcher Icon是程序主界面上的功能图标,Android对于各个icon的风格有一定的要求:

符合当下的流行趋势,避免过度使用隐喻。高度简化和夸张,小尺寸图标也能易于识别,不宜太
复杂。尝试抓住程序的主要特征,比如音像作为音乐的icon。使用自然的轮廓和形状,看起来几何化和有机化,不失真实感。Icon采用前视角,几乎没有透视,光源在顶部。不光滑但富有质感。

正确和错误的icon

另外,所有的icon都有文字标签,不要在设计时把文字也放到icon中。

Launcher Icon通常是一个较大的标准图标中包含一个小图标,使用一个中性色彩和一个主要色彩,并保持高度的对比,不宜过度饱和。

推荐色值

尺寸和定位

Launcher icons要有多样化的形状和样式,但又要形成统一的视觉风格,其尺寸和定位也用统一:

(Full Asset)红色边框为图标尺寸(Icon)蓝色边框是图形尺寸,比图标尺寸稍小,图形之外的空间用于显示阴影和特殊效果。(Square Icon)橙色边框是另外一种图形尺寸。两种类型的图形尺寸可以达到统一的视觉权重。

Icon dimensions for high-density (hdpi) screens:

Full Asset: 72 x 72 pxIcon: 60 x 60 pxSquare Icon: 56 x 56 px

Icon Dimensions for medium-density (mdpi) screens:

Full Asset: 48 x 48 pxIcon: 40 x 40 pxSquare Icon: 38 x 3

Icon Dimensions for low-density (ldpi) screens:

Full Asset: 36 x 36 pxIcon: 30 x 30 pxSquare Icon: 28 x 28 px模板

下载Android的标准图标模板,在此基础上绘制icon,后期还要加上阴影效果。

WVGA (高精度) 屏幕的阴影:

Effect: Drop ShadowColor: #000000Blend Mode: MultiplyOpacity: 75%Angle: 90°Distance: 2pxSpread: 0%Size: 5px

另外,还有Menu icon 、Status bar icon 、Tab icon、 Dialog icon 和List view icon的设计教程请查看原文吧。

非常详尽的icon设计教程,一个程序里要放置三套icon,还有Android硬件比较好,不然内存爆掉了。

iPhone

iPhone对于icon的设计建议:富有吸引力和可识别性。由于app软件可供全球的用户下载,所以在设计时,也要考虑到用户不同的文化背景。

程序icon的设计:

57×57像素,直角。无发光效果。无透明度。

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

iPhone的icon设计就这么简单,iPhone的屏幕只有320×480像素,所以程序没有适配性问题。

参考文章:

《Icon Design Guidelines, Android 2.0》

《iPhone human interface guidelines》

来源:http://daichuanqing.com/index.php/archives/1140

时间: 2024-09-21 16:16:21

Android vs iPhone icon设计指南的相关文章

Android 4.0的设计指南文档全介绍

冰淇淋三明治(Android 4.0)标志着Android设计的一个重要里程碑.我们设计了几乎系统内的每个像素,扩展了蜂巢平板中的设计方式,并应用到所有的移动设备.从最基本的 元素开始,我们引进了新的Roboto字体,并为高分辨率的显示设备增强了设计.其它大的变化,还包括系统框架层级操作栏和支持没有物理按键的新设备. 我们在三个主要目标上专注于核心应用程序和整个系统的的设计工作.当你为Android平台设计应用程序时,请考虑这些目标: 文档全介绍-生存指南汉化补丁4.0"> 使人沉浸 美不

细节成就卓越——浅析iPhone用户界面设计精粹

作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜.过去两个月多的时间里,我们认真地咀嚼<iPhone-Human-Interface-Guidelines>,感悟字里行间透露着的苹果的细致与智慧.兴奋.激动之余,有太多的惊喜想与大家分享.但无论从时间上还是精力上,130页的完整套餐肯定会让所有的人吃不消.我们收集了iPhone平台的专业设计师的意见,加上翻译过程的一点体会,整理出11条设计精粹.最后,希望这份1

浅析Android 4.0的通知系统(附Android 4.0设计指南全文翻译)

通过手机的通知系统,可以将应用程序的一些重要消息告知给用户.流畅.舒适.友好的应用程序离不开精心设计的消息提醒机制.但是并不是所有的通知都是用户想看的,否则只会给用户造成骚扰,所以要谨慎使用通知. 在对<Android Design>进行翻译时发现:Android 系统已经提出了一些关于通知消息的设计建议,故在此分享给大家. 一.何时使用通知? 通知主要用于对时间敏感(Time Sensitive)的事件,尤其是涉及他人(Involve another person)的同步事件.例如下面的 G

设计师必看的ANDROID WEAR设计指南

  一种新形式需要一种新的UI设计模式.在较高层次上,Android的可穿戴设备UI主要由建议和询问这两个核心方面组成.应用程序在这两方面扮演重要的角色. 建议:信息情景 上下布局是一个垂直列表,列表中的每一条会显示有用的或及时的信息.就像现在Android手机和平板上的Google浏览器一样,用户垂直滑动界面,了解卡片的简要信息或是将对自己有用的东西查看更多.在屏幕上,一次只会显示一张卡片,而背景图片常常可以提供额外的可视化信息.应用程序可以创建卡片,如果这张卡片是最常用的,可以将它插入到上下

Android Wear设计指南

本文由江南大学设计学院研究生卢孩翻译,查看原文 一种新形式需要一种新的UI设计模式.在较高层次上,Android的可穿戴设备UI主要由建议和询问这两个核心方面组成.应用程序在这两方面扮演重要的角色. 建议:信息情景 上下布局是一个垂直列表,列表中的每一条会显示有用的或及时的信息.就像现在Android手机和平板上的Google浏览器一样,用户垂直滑动界面,了解卡片的简要信息或是将对自己有用的东西查看更多.在屏幕上,一次只会显示一张卡片,而背景图片常常可以提供额外的可视化信息.应用程序可以创建卡片

用户体验及产品层定位的差异:Android和iPhone

文章描述:Android与Iphone的体验差异. 2007年中苹果发布iphone,2007年末谷歌发布Android系统.在今年已经超过Iphone成为美国的头号智能手机系统!从产品开发而言,苹果mac平台加授权开发模式阻挡了一部分人群:而java的安卓系统且用xml方式构建widget,很方便的开发出应用也是其优势,毕竟众人拾柴火焰高,也就铸就了安卓应用市场的繁华.对用户使用层面而言,苹果的产品构建无疑高出一筹,也较好的匹配了其价格,尽管HTC已经和谷歌密切合作,但他们的产品在整体体验方面

交互设计指南:信息可及

 可及,通俗的说是"可以达到",加上主语和宾语,在"交互设计"这个大的语境下,含义应该是"用户可以达到自己的操作目标",这不是和"有效性-用户的操作是有效的"重复了吗?其实,在交互设计实用指南中,"可及"是一个狭义的概念,是放在有效性下面的,具体解释为"色盲.肢体残疾等特殊人士可以完成基本操作".更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人.       也就是

浅析Google Glass的界面设计指南

近期,Google在SXSW大会上公开了演示Google Glass Mirror API的视频,同时还公开了一些界面设计指南.对于这个视频,Glass确实是一个全新的平台,并且在这个平台上设计产品需要面对和手机.平板完全不同的游戏规则.就像砍掉手机上所有的APP图标入口,只剩下Dock上系统内置的电话短信等主功能,之后再把通知系统放到更加重要的位置. 一.主要输入/输出方式 输入方式: 触摸板:眼镜的腿其实是一块触摸板,可以感受向上下前后四个方向的滑动以及点击操作.这四种方向的操作会在后面详细

Android Vs iPhone:2013年鹿死谁手

在2012岁末2013年初之际,Android与iPhone孰优孰劣之争又上尘嚣.如果作为消费者或者开发者,假如你不知道应该支持哪方,不妨将它们各自的优点都列出来作个对比,看下它们是如何在各自优势领域击败其竞争对手. 电池的对比 Android和iphone对比起来,其中最大的差异之一在于电池.Android 具备可更换的移动电池,而iPhone却不行.如果iPhone的电池出了问题,那只能送去维修了.但这对于Android用户并不太重要,因为他们如果 外出旅行都会多带一个充电电池,而且目前市面