Android的icon设计指南

用户头像
长沙/UI设计师/15年前/6415浏览
Android的icon设计指南
用户头像
VikeeMMX

关键词:Android,icon,计指,研究,Android,ico

在研究Android的icon设计之前,有必要先了解Android的界面是如何适配多样化屏幕的。 适配性由于同一个UI元素(

关键词:Android,icon,计指,研究,Android,ico

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

适配性

由于同一个UI元素(如100 x100像素的图片)在高精度的屏幕上要比低精度的屏幕上看起来要小,为了让这两个屏幕上的图片看起来效果差不多,可以采用以下两种方法:
程序将图片进行缩放,但是效果较差。 
为这两个精度屏幕的手机各提供一个图片。
 

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

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

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

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

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



01.jpg 



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。 

设计指南



02.jpg 



Android标准icon

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

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



03.jpg 



正确和错误的icon

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

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



04.jpg 



推荐色值

尺寸和定位

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

2
举报
|
36
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
网页电商背景矢量插画
浏览电脑网页的元素
卡通风格网页页面3D渲染
 网页背景
女生坐在网页面前办公矢量插画
卡通风格网页页面3D渲染
一个人拿着优惠券准备支付购物电商矢量插画
男生和女生站在网页面前矢量扁平插画
男生坐在网页面前办公矢量插画
一个男生和两个女生站在网页前面打招呼矢量
三位美女围着网页看信息矢量插画
商务网页
卡通女孩与网页表格3D渲染
网页图标
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
四个人物分别在上网贴纸合集
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
3D风格时尚电子商务设计元素
三个青年站在网页周边矢量插画
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
三个青年正在装修网页矢量插画
户外旅行飞机情侣假日出行
网页页面矢量插画
新年快乐送福网页矢量图banner
你可能喜欢
相关收藏夹
大家都在看
登录注册