必知的Android APP常用图标尺寸规范

  • 内容
  • 评论
  • 相关

前言

无规矩不成方圆,按规矩办事都有好的结果。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个像素用于填充(无底色)。
注,小米图标圆角要求:
720*1280 px的安卓设计界面 对应的启动图标尺寸是 96px*96px 圆角约等于18px
1080*1920px的安卓界面设计 对应的启动图标尺寸是144px 144px 圆角约等于25px

Action bar, Dialog & Tab icons

24 × 24 area in 32 × 32 (mdpi)
36 × 36 area in 48 × 48 (hdpi)
48 × 48 area in 64 × 64 (xhdpi)
72 × 72 area in 96 × 96 (xxhdpi)
96 × 96 area in 128 × 128 (xxxhdpi)
.png 这些图标用于操作栏菜单。第一个数字是图标区域的大小,第二个是文件大小。

Small Contextual Icons

16 × 16 (mdpi)
24 × 24 (hdpi)
32 × 32 (xhdpi)
48 × 48 (xxhdpi)
64 × 64 (xxxhdpi)
.png 小图标用于表示操作和/或提供特定项目的状态。例如,在Gmail应用中,每封邮件都有一个星形图标,标记该邮件非常重要。

Notification icons

22 × 22 area in 24 × 24 (mdpi)
33 × 33 area in 36 × 36 (hdpi)
44 × 44 area in 48 × 48 (xhdpi)
66 × 66 area in 72 × 72 (xxhdpi)
88 × 88 area in 96 × 96 (xxxhdpi)
.png 这些用于表示状态栏中的应用程序通知。它们应该是平的(没有渐变),白色和正面透视

二、Android 8.0以后图标的规范

2.1 自适应图标 — Adaptive Icons背景

iOS使用的是圆角图标,雷布斯的小米也一直向乔布斯的iOS看齐,还有个单口相声老罗崇尚不规则。由于OEM商各自都有自己的设计理念,加上Android是开源的,说实话,这确实是一个长期以来都让人头疼的问题,Google多年来对此也是睁一只眼闭一只眼。

这个问题对于Google来说还是挺难解决的。因为Google一直在强调自由与开放,那么小米强制要求所有应用图标都必须圆角化也是人家的自由呀,你不准人家这么干是不是本身就违背了自由和开放的理念呢?当然我们在这里讨论这个,有点像讨论先有鸡还是先有蛋的感觉,不过Google还是想出了一套完美的解决方案。

2.2 Adaptive Icons定义

从Android 8.0系统开始,应用程序的图标被分为了两层:前景层和背景层。也就是说,我们在设计应用图标的时候,需要将前景和背景部分分离,前景用来展示应用图标的Logo,背景用来衬托应用图标的Logo。需要注意的是,背景层在设计的时候只允许定义颜色和纹理,但是不能定义形状。那么应用图标的形状由谁来定义呢?Google将这个权利就交给手机厂商了。不是有些手机厂商喜欢学习苹果的圆角图标吗?没问题,由于应用图标的设计分为了两层,手机厂商只需要在这两层之上再盖上一层mask,这个mask可以是圆角矩形、圆形或者是方形等等,视具体手机厂商而定,就可以瞬间让手机上的所有应用图标都变成相同的规范。原理示意图如下:

2.3 Adaptive Icons规范

自适应图标由两张图层和一个形状来定义
在以前的 Android 版本中,图标大小定义为 48 x 48 dp。现在你必须按照以下的规范定义你的图层大小:
1. 两张图层大小都必须为 108 x 108 dp。
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制定混乱的局面,这也对设计、开发解决了很多麻烦,有没有?

2.4 Adaptive Icons制作

Android studio 中提供了 Image Asset 工具,可以帮我们快速生成并适配各种分辨率的图标,在 AS 项目中的任意地方,右键 new 选择   Image Asset 是不是很友好?
这个Asset Studio编辑器非常简单好用,一学就会。左边是操作区域,右边是预览区域。
先来看操作区域,第一行的Icon Type保持默认就可以了,表示同时创建兼容8.0系统以及老版本系统的应用图标。第二行的Name用于指定应用图标的名称,这里也保持默认即可。接下来的三个页签,Foreground Layer用于编辑前景层,Background Layer用于编辑背景层,Legacy用于编辑老版本系统的图标。
再来看预览区域,这个就十分简单了,用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状,包括圆形、圆角矩形、方形等等。注意每个预览图标中都有一个圆圈,这个圆圈叫作安全区域,必须要保证图标的前景层完全处于安全区域当中才行,否则可能会出现图标被手机厂商的mask裁剪掉的情况。
为了让大家能够更加直观地看到操作,这里我使用一张GIF图来演示操作的过程:
最终,Android Studio会自动帮我们生成适配8.0系统的应用图标,以及适配老版本系统的应用图标,我们甚至一行代码都不用写,一切工作就已经完成了。感兴趣的朋友可以自己到mipmap目录下面去观察一下Android Studio帮我们生成了哪些东西,这里就不带着大家一一去看了。

参考: