Android系统的图标设计规范 icon 大小

简介:

 目前移动平台的竞争日益激烈,友好的用户界面可以帮助提高用户体验满意度,图标Icon是用户界面中一个重要的组成部分,今天我们来研究和学习一下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程序为最佳显示效果提供了三种方法:

  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 px

  Icon: 60 x 60 px

  Square Icon: 56 x 56 px

  Icon Dimensions for medium-density (mdpi) screens:

  Full Asset: 48 x 48 px

  Icon: 40 x 40 px

  Square Icon: 38 x 3

  Icon Dimensions for low-density (ldpi) screens:

  Full Asset: 36 x 36 px

  Icon: 30 x 30 px

  Square Icon: 28 x 28 px

  模板

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

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

  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等,今后我们会再介绍。

  最后顺带介绍一点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》

相关文章
|
24天前
|
搜索推荐 Android开发 iOS开发
安卓与iOS系统的用户界面设计对比分析
本文通过对安卓和iOS两大操作系统的用户界面设计进行对比分析,探讨它们在设计理念、交互方式、视觉风格等方面的差异及各自特点,旨在帮助读者更好地理解和评估不同系统的用户体验。
18 1
|
2月前
|
搜索推荐 Android开发 iOS开发
探析安卓与iOS系统的优劣
【2月更文挑战第7天】安卓与iOS是当今手机市场上最主流的两款操作系统,各有优劣。本文将从用户体验、开放程度、生态系统等方面对两者进行深入探析,以期帮助读者更好地了解它们的特点。
|
2月前
|
Android开发 数据安全/隐私保护 iOS开发
安卓与iOS系统的发展趋势与比较分析
【2月更文挑战第6天】 在移动互联网时代,安卓和iOS系统作为两大主流移动操作系统,各自呈现出不同的发展趋势。本文将从技术角度出发,对安卓和iOS系统的发展方向、特点及未来趋势进行比较分析,以期为读者提供更深入的了解和思考。
35 4
|
3月前
|
Linux 调度 Android开发
【系统启动】Kernel怎么跳转到Android:linux与安卓的交界
【系统启动】Kernel怎么跳转到Android:linux与安卓的交界
46 0
|
4月前
|
数据库 Android开发
Android Studio开发之应用组件Application的讲解及实战(附源码,通过图书管理信息系统实战)
Android Studio开发之应用组件Application的讲解及实战(附源码,通过图书管理信息系统实战)
49 0
|
4月前
|
JSON 自然语言处理 Java
Android App开发语音处理之系统自带的语音引擎、文字转语音、语音识别的讲解及实战(超详细 附源码)
Android App开发语音处理之系统自带的语音引擎、文字转语音、语音识别的讲解及实战(超详细 附源码)
120 0
|
18天前
|
机器学习/深度学习 人工智能 搜索推荐
探索安卓应用中的新趋势:人工智能驱动的智能推荐系统
传统的应用推荐系统已经无法满足用户日益增长的个性化需求。本文将探讨如何通过引入人工智能技术,构建智能推荐系统,为用户提供更加精准、个性化的应用推荐体验,进而提升应用的用户满意度和留存率。
16 0
|
1月前
|
搜索推荐 测试技术 定位技术
基于Android的自助导游系统的设计与实现(论文+源码)_kaic
基于Android的自助导游系统的设计与实现(论文+源码)_kaic
|
1月前
|
搜索推荐 安全 Android开发
安卓与iOS系统的用户体验比较
【2月更文挑战第11天】 在当今移动设备市场上,安卓和iOS系统一直是两大主流操作系统。本文将从用户界面设计、应用生态、系统定制性等方面对安卓和iOS系统进行比较分析,旨在探讨两者的优势和劣势,为用户选择合适的操作系统提供参考。
|
2月前
|
人工智能 vr&ar Android开发
探索安卓与iOS系统的发展趋势
【2月更文挑战第9天】 过去,人们对于安卓和iOS系统的争论主要集中在性能、用户体验和生态系统的比较上。然而,随着移动互联网的快速发展,两大操作系统在人工智能、物联网、安全性等方面的发展趋势也备受关注。本文将探讨安卓与iOS系统在技术发展方面的差异以及未来的发展趋势。