`
isiqi
  • 浏览: 16489866 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Icon Design Guidelines-android 图标设计指导

阅读更多

Android

在研究 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)。

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

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程

Android的icon尺寸

在运行时,程序为最佳显示效果提供了三种方法:

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 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程

Android标准icon

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


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

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程

正确和错误的icon

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

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

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程

推荐色值

尺寸和定位

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


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

Icon dimensions for high-density (hdpi) screens:

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程


Full Asset: 72 x 72 px
Icon: 60 x 60 px
Square Icon: 56 x 56 px

Icon Dimensions for medium-density (mdpi) screens:

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程


Full Asset: 48 x 48 px
Icon: 40 x 40 px
Square Icon: 38 x 3

Icon Dimensions for low-density (ldpi) screens:

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程


Full Asset: 36 x 36 px
Icon: 30 x 30 px
Square Icon: 28 x 28 px

模板

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

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

android 
屏幕分辨率问题(转载) - 云端漫步 - 心路历程


Effect: Drop Shadow
Color: #000000
Blend Mode: Multiply
Opacity: 75%
Angle: 90°
Distance: 2px
Spread: 0%
Size: 5px

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

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

分享到:
评论

相关推荐

    Action Bar Icon Pack

    Action Bar Icon Pack是Google为开发者提供的一套标准图标集,以确保应用遵循Android Design Guidelines,提供一致且美观的用户界面。 Action Bar图标通常包括导航、搜索、分享、设置等常用操作的图形表示,这些...

    开发常用图标Icon资源

    4. 符合规范:在开发过程中,遵循各平台的图标设计规范,如iOS的Human Interface Guidelines和Android的Material Design Guidelines,以确保用户体验的一致性。 5. 版权问题:在使用这些图标时,务必注意版权问题。...

    一套实用漂亮的icon

    而Android图标则更注重色彩和细节,遵循Material Design指南。同时,考虑到跨平台兼容性,这套图标集可能会提供统一的视觉语言,使用户在不同设备间切换时有连续的体验。 “web”标签意味着这套图标集同样适合网页...

    Android应用源码之安卓彩色图标.zip

    1. **Android图标设计原则**: - **一致性**:图标应该在整个应用中保持一致的风格和色彩,以提高用户体验。 - **清晰度**:图标应简洁明了,即使在小尺寸下也能清晰辨识。 - **颜色选择**:颜色应与应用的主题和...

    273张PNG格式android+iphone图标打包

    在Android图标设计中,遵循Material Design规范是至关重要的。这些图标通常具有简洁的几何形状,强调层次感和触觉反馈。设计师需要确保图标在白色和深色背景下都能清晰可见。同时,Android 9.0 (Pie) 引入了 ...

    App短信图标

    此外,图标还需要遵循平台的规范和设计指南,如iOS的Human Interface Guidelines和Android的Material Design Guidelines,以确保与操作系统的整体风格保持一致,提供良好的用户体验。对于"App短信图标",它需要在...

    超爽的android抽屉效果.zip

    7. **Material Design Guidelines**:对于现代Android应用,Google推荐遵循Material Design设计规范。这包括了对抽屉效果的详细指导,如颜色、动画、触觉反馈等。 实现抽屉效果的基本步骤如下: 1. 在布局XML文件...

    IPhone图标系列之十七

    Android的Material Design提供了指南,鼓励使用大胆的颜色、清晰的形状和层次分明的阴影,以创造出既美观又实用的图标。这个系列图标能在Android上使用,表明设计者考虑到了不同平台的设计语言和用户习惯。 从...

    小黄人 图片

    2. **Android图标设计**:在Android平台上,图标需要遵循Material Design指南,通常包括启动图标、动作图标、通知图标等。小黄人图标在Android中可能需要多个尺寸,以适应不同分辨率的设备,并且要确保在各种背景下...

    UI资源界面设计

    遵循平台的设计规范(如iOS的人际接口指南或Android的Material Design)能提供一致且高效的用户体验。 4. **ICON设计**:图标是UI中的重要元素,它们可以传达功能、节省空间并增强视觉效果。好的图标应该简洁、易于...

    漂亮的APP 手机开发触摸手势图标集

    开发人员在集成这些图标时,应考虑与应用的其他设计元素保持一致,确保风格统一,同时遵循平台的交互设计指南,如iOS的Human Interface Guidelines或Android的Material Design。此外,适配不同设备和屏幕尺寸也很...

    Android端仿优亿市场软件界面上的slideTab

    虽然目标是仿制优亿市场,但遵循Material Design指南可以使应用看起来更现代且符合Android设计规范。这包括使用正确的颜色、动画和交互效果。 6. **动态添加Tab**: 如果SlideTab的内容是在运行时动态确定的,你...

    移动开发素材大全

    在iOS中,图标需要遵循苹果的Human Interface Guidelines(HIG),而在Android中,则需遵循Material Design指南。这些规范包括了图标尺寸、样式、颜色和清晰度等方面的要求。 图标(icon)是移动应用界面中的核心...

    开发常用的ico图标打大全,网页开发、桌面程序开发、手机开发

    此外,每个平台都有其图标设计的规范和尺寸要求,如Android的Material Design指南和iOS的Human Interface Guidelines。 综上所述,ico图标是软件开发中不可或缺的一部分,无论是在网页、桌面程序还是手机应用中,都...

    axure元件库.zip

    1. **图标icon.rplib**:这个库专注于图标设计,提供了一系列矢量图标,涵盖了多种类别,如导航、操作、状态等。设计师可以通过这些图标快速创建具有视觉吸引力的界面元素,提高原型的清晰度和专业性。 2. **...

    程序设计中的小图标

    而在iOS和Android等移动平台上,图标设计需要符合各自的Material Design或Human Interface Guidelines。遵循这些规范有助于提高用户体验,让用户在不同应用之间保持一致的操作习惯。 接着,图标的设计工具也是关键...

    5000+用于iOS_Android_Web和应用程序的图标集.zip

    这个图标集覆盖了iOS、Android、Web和应用程序的多种设计需求,意味着图标遵循了各个平台的设计指南,如Apple的Human Interface Guidelines (HIG)和Google的Material Design。这意味着图标不仅具有视觉吸引力,还...

    手机应用游戏开发的一些PNG图片

    图标需要简洁、一致,符合用户预期,同时也要遵循平台的风格指南,如Android的Material Design或iOS的Human Interface Guidelines。 7. **图标动画**:在某些情况下,动态PNG (APNG) 可用于实现简单的动画效果,如...

Global site tag (gtag.js) - Google Analytics