Android 图标尺寸与设计
样例和图解
外框:整体大小
↑
边框:图标留白大小
↓
图标:外图标的大小
↑
阴影:阴影特效大小
↓
图形:内图标的大小
↑
可选视图权重:使用两种类型的图形尺寸可以达到统一的视觉权重(可选),
一般是针对图标有凸出的情况,会有一个内部会有一个更小的尺寸大小
↓
可选图形:第二种图形尺寸(可选)
注:绘制上图时用到一个示例图标,是在网络上找的,如有侵犯您的权利,请联系我,进行删除.
外框尺寸
最新尺寸:(根据分辨率,Google已经更新尺寸信息如下)
MDPI:48 × 48 px
HDPI:72 × 72 px
XHDPI:96 × 96 px
XXHDPI:144 × 144 px
XXXHDPI:192 × 192 px
目前DPI最高的设备已经可达534,538的样子,所以这个尺寸目前应予以恰当的考虑,
一般情况下,前4种尺寸即可,目前新建项目后,默认也是前4种尺寸
|
科普一下 历史尺寸:(早期时候,由于分辨率没有现在那么高,采用尺寸如下) MDPI:36 × 36 px HDPI:48 × 48 px XHDPI:72 × 72 px XXHDPI:96 × 96 px XXXHDPI:144 × 144 px |
图标尺寸
MDPI:40 × 40 px (边框各4 px)
HDPI: 60 × 60 px (边框各6 px)
XHDPI:80 × 80 px (边框各8 px)
XXHDPI:120 × 120 px (边框各12 px)
XXXHDPI:160 × 160 px (边框各16 px )
图形尺寸
MDPI:38 × 38 px (阴影各2 px)
HDPI: 56 × 56 px (阴影各4 px)
XHDPI:76 × 76 px (阴影各4 px)
XXHDPI:112 × 112 px (阴影各4 px)
XXXHDPI:152 × 152 px (阴影各4 px )
可选图形尺寸
MDPI:36 × 36 px (可选视图权重2 px)
HDPI: 52 × 52 px (可选视图权重4 px)
XHDPI:72 × 72 px (可选视图权重4 px)
XXHDPI:108 × 108 px (可选视图权重4 px)
XXXHDPI:148 × 148 px (可选视图权重4 px)
ICON For Launcher:
| 编号 | 尺寸\名称 | 边框尺寸 | 边框留白 | 图标尺寸 | 阴影区 | 图形尺寸 | 可选视图权重 | 可选图标尺寸 |
| 1 | MDPI | 48 × 48 px | 4 px | 40 × 40 px | 2 px | 38 × 38 px | 2 px | 36 × 36 px |
| 2 | HDPI | 72 × 72 px | 6 px | 60 × 60 px | 4 px | 56 × 38 px | 4 px | 52 × 52 px |
| 3 | XHDPI | 96 × 96 px | 8 px | 80 × 80 px | 4 px | 76 × 76 px | 4 px | 72 × 72 px |
| 4 | XXHDPI | 144 × 144 px | 12 px | 120 × 120 px | 4 px | 112 × 112 px | 4 px | 108 × 108 px |
| 5 | XXXHDPI | 192 × 192 px | 16 px | 160 × 160 px | 4 px | 152 × 152 px | 4 px | 148 × 148 px |
ICON For All:
|
尺寸\图标类型 |
Launcher (启动图标) |
Menu (菜单图标) |
Status Bar (状态图标) |
Tab (Tab导航图标) |
Dialog (对话框图标) |
List View (列表Item图标) |
| MDPI | 48 × 48 px | 48 × 48 px | 32 × 32 px | 32 × 32 px | 32 × 32 px | 32 × 32 px |
| HDPI | 72 × 72 px | 72 × 72 px | 48 × 48 px | 48 × 48 px | 48 × 48 px | 48 × 48 px |
| XHDPI | 96 × 96 px | 96 × 96 px | 64 × 64 px | 64 × 64 px | 64 × 64 px | 64 × 64 px |
| XXHDPI | 144 × 144 px | 144 × 144 px | 96 × 96 px | 96 × 96 px | 96 × 96 px | 96 × 96 px |
| XXXHDPI | 192×192 px | 192×192 px | 128×128 px | 128×128 px | 128×128 px | 128×128 px |
该文参考了最新的官方文档和自身实际开发实践简单总结归纳而成,转载请注明出处!谢谢合作!
如有不当之处,欢迎指正.
顶部图片和表格由我整理归纳而成.
