您的位置:首页 > 产品设计 > UI/UE

Android /iPhone/iPad UI之常用图标尺寸规范

2017-03-03 16:17 615 查看


整合的相对比较全面了,如果不足可以指出在补充完整。


Android-App
常用图标尺寸规范

出自:http://www.cnblogs.com/libertycode/p/5666088.html


程序启动图标(Logo):

小屏ldpi() 36 x 36 px。

中屏mdpi(160dpi):48*48px

大屏hdpi(240dpi):72*72px

特大屏xhdpi(320dpi):96*96px

超大屏xxhdpi(480dpi):144*144px

 


底部菜单图标

中屏mdpi(160dpi):48*48px

大屏hdpi(240dpi):72*72px

特大屏xhdpi(320dpi):96*96px

超大屏xxhdpi(480dpi):144*144px

1. 大屏:

1. 完整图片(红色): 72 x 72 px

2. 图标(蓝色): 48 x 48 px

3. 图标外边框(粉色): 44 x 44 px

1. 中屏:

1. 完整图片: 48 x 48 px

2. 图标: 32 x 32 px

3. 图标外边框: 30 x 30 px

1. 小屏:

1. 完整图片: 36 x 36 px

2. 图标: 24 x 24 px

3. 图标外边框: 22 x 22 px



 


弹出对话框顶部图标

小屏 24 x 24 px Low density screen (ldpi)

中屏mdpi(160dpi):32*32px

大屏hdpi(240dpi):48*48px

特大屏xhdpi(320dpi):72*72px

超大屏xxhdpi(480dpi):89*89px

 


列表内部列表项图标

小屏 24 x 24 px Low density screen (ldpi)

中屏mdpi(160dpi):32*32px

大屏hdpi(240dpi):48*48px

特大屏xhdpi(320dpi):72*72px

超大屏xxhdpi(480dpi):89*89px

 


底部或顶部tab标签图标

小屏(ldpi) screens:

  完整图片: 24 x 24 px

  图标: 22 x 22 px

中屏mdpi(160dpi):

  完整图片: 32*32px

  图标:28*28px

大屏hdpi(240dpi):

  完整图片: 48*48px

  图标:42*42px

特大屏xhdpi(320dpi):

  完整图片: 72*72px

  图标:42*42px

超大屏xxhdpi(480dpi):

  完整图片: 32*32px

  图标:42*42px

 



底部状态栏图标

小屏ldpi (120 dpi) 18 x 18 px

中屏mdpi(160dpi):24*24px

大屏hdpi(240dpi):36*36px

特大屏xhdpi(320dpi):48*48px

超大屏xxhdpi(480dpi):60*60px



出自:http://tool.lanrentuku.com/guifan/ui.html


iPhone界面尺寸

设备分辨率PPI状态栏高度导航栏高度标签栏高度


iPhone6 plus设计版
1242×2208 px401PPI60px132px146px


iPhone6 plus放大版
1125×2001 px401PPI54px132px146px


iPhone6 plus物理版
1080×1920 px401PPI54px132px146px


iPhone6
750×1334 px326PPI40px88px98px


iPhone5 - 5C - 5S
640×1136 px326PPI40px88px98px


iPhone4 - 4S
640×960 px326PPI40px88px98px


iPhone & iPod Touch第一代、第二代、第三代
320×480 px163PPI20px44px49px



iPhone图标尺寸:

设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏


iPhone6 Plus (@3×)
1024×1024 px180×180 px114×114 px87×87 px75×75 px66×66 px


iPhone6 (@2×)
1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px


iPhone5 - 5C - 5S (@2×)
1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px


iPhone4 - 4S (@2×)
1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px


iPhone & iPod Touch第一代、第二代、第三代
1024×1024 px120×120 px57×57 px29×29 px38×38 px30×30 px



iPad的设计尺寸

设备尺寸分辨率状态栏高度导航栏高度标签栏高度


iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2
2048×1536 px264PPI40px88px98px


iPad 1 - 2
1024×768 px132PPI20px44px49px


iPad Mini
1024×768 px163PPI20px44px49px



iPad图标尺寸:

设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏


iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2
1024×1024 px180×180 px144×144 px100×100 px50×50 px44×44 px


iPad 1 - 2
1024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px


iPad Mini
1024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px


324234sdfsdfasdf撒打发士大夫撒打发士大夫


Android SDK模拟机的尺寸

屏幕大小低密度(120)中等密度(160)高密度(240)超高密度(320)
小屏幕
  QVGA(240×320)      480×640 
普通屏幕
WQVGA400(240×400) WQVGA432(240×432)  HVGA(320×480)WVGA800(480×800) WVGA854(480×854) 600×1024  640×960
大屏幕
WVGA800 *(480×800) WVGA854 *(480×854)WVGA800 *(480×800) WVGA854 *(480×854) 600x1024  
超大屏幕
   1024×6001024×768 1280×768WXGA(1280×800)1536×1152 1920×1152 1920×12002048×1536 2560×1600


Android的图标尺寸

屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画
320×480 px
48×48 px32×32 px16×16 px24×24 px不小于2 px
480×800px 480×854px 540×960px
72×72 px48×48 px24×24 px36×36 px不小于3 px
720×1280 px
48×48 dp32×32 dp16×16 dp24×24 dp不小于2 dp
1080×1920 px
144×144 px96×96 px48×48 px72×72 px不小于6 px


Android安卓系统dp/sp/px换算表

名称分辨率比率 rate (针对320px)比率 rate (针对640px)比率 rate (针对750px)
idpi
240×3200.750.3750.32
mdpi
320×48010.50.4267
hdpi
480×8001.50.750.64
xhdpi
720×12802.251.1251.042
xxhdpi
1080×19203.3751.68751.5


主流Android手机分辨率和尺寸

设备分辨率尺寸设备分辨率尺寸


魅族MX2
4.4英寸800×1280 px

魅族MX3
5.1英寸1080×1280 px


魅族MX4
5.36英寸1152×1920 px

魅族MX4 Pro未上市
5.5英寸1536×2560 px


三星GALAXY Note 4
5.7英寸1440×2560 px

三星GALAXY Note 3
5.7英寸1080×1920 px


三星GALAXY S5
5.1英寸1080×1920 px

三星GALAXY Note II
5.5英寸720×1280 px


索尼Xperia Z3
5.2英寸1080×1920 px

索尼XL39h
6.44英寸1080×1920 px


HTC Desire 820
5.5英寸720×1280 px

HTC One M8
4.7英寸1080×1920 px


OPPO Find 7
5.5英寸1440×2560 px

OPPO N1
5.9英寸1080×1920 px


OPPO R3
5英寸720×1280 px

OPPO N1 Mini
5英寸720×1280 px


小米M4
5英寸1080×1920 px

小米红米Note
5.5英寸720×1280 px


小米M3
5英寸1080×1920 px

小米红米1S
4.7英寸720×1280 px


小米M3S未上市
5英寸1080×1920 px

小米M2S
4.3英寸720×1280 px


华为荣耀6
5英寸1080×1920 px

锤子T1
4.95英寸1080×1920 px


LG G3
5.5英寸1440×2560 px

OnePlus One
5.5英寸1080×1920 px


主流浏览器的界面参数与份额

浏览器状态栏菜单栏滚动条市场份额(国内)


Chrome 浏览器
22 px(浮动出现)60 px15 px8%


火狐浏览器
20 px132 px15 px1%


IE浏览器
24 px120 px15 px35%


360 浏览器
24 px140 px15 px28%


遨游浏览器
24 px147 px15 px1%


搜狗浏览器
25 px163 px15 px5%


系统分辨率统计

分辨率占有率分辨率占有率
1366×768
15%1440×900
13%
1920×1080
11%1600×900
5%
1280×800
4%1280×1024
3%
1680×1050
2.8%320×480
2.4%
480×800
2%1280×768
1%

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android ui app 尺寸