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

 

 

 

 

 

 

 

 

 

该文参考了最新的官方文档和自身实际开发实践简单总结归纳而成,转载请注明出处!谢谢合作!

如有不当之处,欢迎指正.

顶部图片和表格由我整理归纳而成.

 

 

posted @ 2015-01-19 13:05  RonnyWu  阅读(7464)  评论(0编辑  收藏  举报