关灯
开启左侧

iPhone/iPad/Android UI尺寸规范

[复制链接]
大菲 发表于 2018-7-18 13:01:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 大菲 于 2018-7-18 14:15 编辑

对于刚入行的UI设计师宝宝们,最容易犯的错就是在设计移动APP时,不懂什么尺寸或者用哪种屏幕的尺寸是最适当的?为了解决这个问题,今天大菲姐姐就简单的为大家整理了做UI时最基础的尺寸规范。

iPhone界面尺寸
游客,如果您要查看本帖隐藏内容请回复

iPhone图标尺寸:
设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏
图片1.jpg
iPhone6 Plus (@3×)
1024×1024 px180×180 px114×114 px87×87 px75×75 px66×66 px
图片41.jpg
iPhone6 (@2×)
1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px
图片42.jpg
iPhone5 - 5C - 5S (@2×)
1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px
图片42.jpg
iPhone4 - 4S (@2×)
1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px
图片42.jpg
iPhone & iPod Touch第一代、第二代、第三代
1024×1024 px120×120 px57×57 px29×29 px38×38 px30×30 px


图片4.jpg


iPad的设计尺寸
设备尺寸分辨率状态栏高度导航栏高度标签栏高度
图片6.jpg
iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2
2048×1536 px264PPI40px88px98px
图片6.jpg
iPad 1 - 2
1024×768 px132PPI20px44px49px
图片6.jpg
iPad Mini
1024×768 px163PPI20px44px49px


图片7.jpg


iPad图标尺寸:
设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏
图片6.jpg
iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2
1024×1024 px180×180 px144×144 px100×100 px50×50 px44×44 px
图片6.jpg
iPad 1 - 2
1024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px
图片6.jpg
iPad Mini
1024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px


图片8.jpg

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手机分辨率和尺寸
设备分辨率尺寸设备分辨率尺寸
图片9.jpg
魅族MX2
4.4英寸800×1280 px
图片10.jpg
魅族MX3
5.1英寸1080×1280 px
图片11.jpg
魅族MX4
5.36英寸1152×1920 px
图片12.jpg
魅族MX4 Pro未上市
5.5英寸1536×2560 px
图片13.jpg
三星GALAXY Note 4
5.7英寸1440×2560 px
图片14.jpg
三星GALAXY Note 3
5.7英寸1080×1920 px
图片15.jpg
三星GALAXY S5
5.1英寸1080×1920 px
图片16.jpg
三星GALAXY Note II
5.5英寸720×1280 px
图片17.jpg
索尼Xperia Z3
5.2英寸1080×1920 px
图片18.jpg
索尼XL39h
6.44英寸1080×1920 px
图片19.jpg
HTC Desire 820
5.5英寸720×1280 px
图片20.jpg
HTC One M8
4.7英寸1080×1920 px
图片21.jpg
OPPO Find 7
5.5英寸1440×2560 px
图片22.jpg
OPPO N1
5.9英寸1080×1920 px
图片23.jpg
OPPO R3
5英寸720×1280 px
图片24.jpg
OPPO N1 Mini
5英寸720×1280 px
图片25.jpg
小米M4
5英寸1080×1920 px
图片26.jpg
小米红米Note
5.5英寸720×1280 px
图片27.jpg
小米M3
5英寸1080×1920 px
图片28.jpg
小米红米1S
4.7英寸720×1280 px
图片29.jpg
小米M3S未上市
5英寸1080×1920 px
图片30.jpg
小米M2S
4.3英寸720×1280 px
图片31.jpg
华为荣耀6
5英寸1080×1920 px
图片32.jpg
锤子T1
4.95英寸1080×1920 px
图片33.jpg
LG G3
5.5英寸1440×2560 px
图片34.jpg
OnePlus One
5.5英寸1080×1920 px

主流浏览器的界面参数与份额
浏览器状态栏菜单栏滚动条市场份额(国内)
图片35.jpg
Chrome 浏览器
22 px(浮动出现)60 px15 px8%
图片36.jpg
火狐浏览器
20 px132 px15 px1%
图片37.jpg
IE浏览器
24 px120 px15 px35%
图片38.jpg
360 浏览器
24 px140 px15 px28%
图片39.jpg
遨游浏览器
24 px147 px15 px1%
图片40.jpg
搜狗浏览器
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%





图片43.jpg
 

精彩评论1

正序浏览
周半仙儿 发表于 2018-7-23 21:56:14 来自手机 | 显示全部楼层
 
菲姐怎么多怎么记得住呢?
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

4粉丝

23帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  安仔IT技术交流论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )