前言
无规矩不成方圆,按规矩办事都有好的结果。Android也有自家的一套规则,其中Icon就是有诸多规则,这些还是要遵循的,不为别的,就是大家都在按章就你搞特殊化,后果真的要自负。虽然这个规则一变再变,但因出师有因——人的审美再变。
关于异形图标和规则图标的取舍,在不同阵营的 Android 用户之间一直存在着争议。而一向提倡使用异形图标、讲求图标「个性」的 Google 在 Android 7.1 中引入了圆形图标规范,在 Android 8.0 中还将带来全新的自适应图标特性——Google 似乎想通过应用图标规范来触及 Android 平台的碎片化问题。
下面为慢慢给大家简述,直到Google为什么在Android 8.0 开始采用自适应图标。
一、Icon的尺寸规则
Android Icon Size and Location for Apps
名称 | 大小(px) | 位置 | 比例(以mdpi为基数 1) | 屏幕密度(DPI) | 边距 | 格式 | 圆角尺寸 |
XXXHDPI | 192×192 | mipmap-xxxhdpi | 4 | 640 DPI | 12 to 16 pixels | .png(32位、透明) | 33.685px |
XXHDPI | 144×144 | mipmap-xxhdpi | 3 | 480 DPI | 8 to 12 pixels | .png(32位、透明) | 25.263px |
XHDPI | 96×96 | mipmap-xhdpi | 2 | 320 DPI | 6 to 8 pixels | .png(32位、透明) | 16.843px |
HDPI | 72×72 | mipmap-hdpi | 1.5 | 240 DPI | 4 to 6 pixels | .png(32位、透明) | 12.632px |
MDPI | 48×48 | mipmap-mdpi | 1 | 160 DPI | 3 to 4 pixels | .png(32位、透明) | 8.421px |
MDPI | 48×48 | mipmap (Cupcake) | 1 | 160 DPI | 3 to 4 pixels | .png(32位、透明) | 8.421px |
LDPI | 36×36 | mipmap-ldpi | 0.75 | 120 DPI | 2 to 3 pixels | .png(32位、透明) | 6.316px |
NA | 512×512 | Google Play | NA | NA | 32 to 42 pixels | .png(32位、透明) | 89.825px |
上图中的"边距"解释:建议在设计过程中,在四周空出几个像素点使得设计的图标与其他图标在视觉上一致,例如
96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px, 四周留出4个像素用于填充(无底色)。
72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px, 四周留出2个像素用于填充(无底色)。
48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px, 四周留出1个像素用于填充(无底色)。
36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px, 四周留出1个像素用于填充(无底色)。
72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px, 四周留出2个像素用于填充(无底色)。
48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px, 四周留出1个像素用于填充(无底色)。
36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px, 四周留出1个像素用于填充(无底色)。
注,小米图标圆角要求:
720*1280 px的安卓设计界面 对应的启动图标尺寸是 96px*96px 圆角约等于18px
1080*1920px的安卓界面设计 对应的启动图标尺寸是144px 144px 圆角约等于25px
1080*1920px的安卓界面设计 对应的启动图标尺寸是144px 144px 圆角约等于25px
二、Android 8.0以后图标的规范
iOS使用的是圆角图标,雷布斯的小米也一直向乔布斯的iOS看齐,还有个单口相声老罗崇尚不规则。由于OEM商各自都有自己的设计理念,加上Android是开源的,说实话,这确实是一个长期以来都让人头疼的问题,Google多年来对此也是睁一只眼闭一只眼。
这个问题对于Google来说还是挺难解决的。因为Google一直在强调自由与开放,那么小米强制要求所有应用图标都必须圆角化也是人家的自由呀,你不准人家这么干是不是本身就违背了自由和开放的理念呢?当然我们在这里讨论这个,有点像讨论先有鸡还是先有蛋的感觉,不过Google还是想出了一套完美的解决方案。
从Android 8.0系统开始,应用程序的图标被分为了两层:前景层和背景层。也就是说,我们在设计应用图标的时候,需要将前景和背景部分分离,前景用来展示应用图标的Logo,背景用来衬托应用图标的Logo。需要注意的是,背景层在设计的时候只允许定义颜色和纹理,但是不能定义形状。那么应用图标的形状由谁来定义呢?Google将这个权利就交给手机厂商了。不是有些手机厂商喜欢学习苹果的圆角图标吗?没问题,由于应用图标的设计分为了两层,手机厂商只需要在这两层之上再盖上一层mask,这个mask可以是圆角矩形、圆形或者是方形等等,视具体手机厂商而定,就可以瞬间让手机上的所有应用图标都变成相同的规范。原理示意图如下:
自适应图标由两张图层和一个形状来定义
在以前的 Android 版本中,图标大小定义为 48 x 48 dp。现在你必须按照以下的规范定义你的图层大小:
在以前的 Android 版本中,图标大小定义为 48 x 48 dp。现在你必须按照以下的规范定义你的图层大小:
1. 两张图层大小都必须为 108 x 108 dp。
2. 图层中心 72 x 72 dp 范围为可视范围。
3. 系统会保留四周外的 36dp 范围用于生成有趣的视觉效果(如视差和跳动)。
2. 图层中心 72 x 72 dp 范围为可视范围。
3. 系统会保留四周外的 36dp 范围用于生成有趣的视觉效果(如视差和跳动)。
是不是对上面的解释一头雾水,这里是官方的解释,其实说的是mdpi也即基准Icon,来解释的。如果还是理解,那你就往下看,是不是就明白了?
Android 8.0中Icon规范如下。
名称 | 背景大小(px) | 前景中图标大小(px) | 位置 | 比例(以mdpi为基数 1) | 格式 |
XXXHDPI | 432×432 | 288×288 | mipmap-xxxhdpi | 4 | .png(32位、透明) |
XXHDPI | 324×324 | 216×216 | mipmap-xxhdpi | 3 | .png(32位、透明) |
XHDPI | 216×216 | 144×144 | mipmap-xhdpi | 2 | .png(32位、透明) |
HDPI | 162×162 | 108×108 | mipmap-hdpi | 1.5 | .png(32位、透明) |
MDPI | 108×108 | 72×72 | mipmap-mdpi | 1 | .png(32位、透明) |
LDPI(已废弃) | 81×81 | 54×54 | mipmap-ldpi | 0.75 | .png(32位、透明) |
NA | 540×540 | 360×360 | 出图 | 5 | .png(32位、透明) |
下图更能直观反映,这种规范满足各个OEM商,也就解决了Icon制定混乱的局面,这也对设计、开发解决了很多麻烦,有没有?
Android studio 中提供了 Image Asset 工具,可以帮我们快速生成并适配各种分辨率的图标,在 AS 项目中的任意地方,右键 new 选择 Image Asset 是不是很友好?
这个Asset Studio编辑器非常简单好用,一学就会。左边是操作区域,右边是预览区域。
先来看操作区域,第一行的Icon Type保持默认就可以了,表示同时创建兼容8.0系统以及老版本系统的应用图标。第二行的Name用于指定应用图标的名称,这里也保持默认即可。接下来的三个页签,Foreground Layer用于编辑前景层,Background Layer用于编辑背景层,Legacy用于编辑老版本系统的图标。
再来看预览区域,这个就十分简单了,用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状,包括圆形、圆角矩形、方形等等。注意每个预览图标中都有一个圆圈,这个圆圈叫作安全区域,必须要保证图标的前景层完全处于安全区域当中才行,否则可能会出现图标被手机厂商的mask裁剪掉的情况。
为了让大家能够更加直观地看到操作,这里我使用一张GIF图来演示操作的过程:
先来看操作区域,第一行的Icon Type保持默认就可以了,表示同时创建兼容8.0系统以及老版本系统的应用图标。第二行的Name用于指定应用图标的名称,这里也保持默认即可。接下来的三个页签,Foreground Layer用于编辑前景层,Background Layer用于编辑背景层,Legacy用于编辑老版本系统的图标。
再来看预览区域,这个就十分简单了,用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状,包括圆形、圆角矩形、方形等等。注意每个预览图标中都有一个圆圈,这个圆圈叫作安全区域,必须要保证图标的前景层完全处于安全区域当中才行,否则可能会出现图标被手机厂商的mask裁剪掉的情况。
为了让大家能够更加直观地看到操作,这里我使用一张GIF图来演示操作的过程:
最终,Android Studio会自动帮我们生成适配8.0系统的应用图标,以及适配老版本系统的应用图标,我们甚至一行代码都不用写,一切工作就已经完成了。感兴趣的朋友可以自己到mipmap目录下面去观察一下Android Studio帮我们生成了哪些东西,这里就不带着大家一一去看了。