移动端APP(iPhone/iPad/Android)UI设计规范
- 28
- 2136
- 09-08 14:01
根据网上的一些数据做了归纳,关于尺寸整理是在其他网站找的,具体原始作者是谁我也无从查证,如果原作者看到了可以联系我,我会标识出来出处。另外在项目中很多重要实时依据,我也整理了数据入口供参考,我也做了部分归纳,也希望所有无论是产品,用户体验设计师还是UI设计师,可以做到有据可查,不要盲目拍脑袋。
iPhone界面尺寸
设备 | 分辨率 | PPI | 状态栏高度 | 导航栏高度 | 标签栏高度 |
---|---|---|---|---|---|
iPhone6 plus设计版 | 1242×2208 px | 401PPI | 60px | 132px | 146px |
iPhone6 plus放大版 | 1125×2001 px | 401PPI | 54px | 132px | 146px |
iPhone6 plus物理版 | 1080×1920 px | 401PPI | 54px | 132px | 146px |
iPhone6 | 750×1334 px | 326PPI | 40px | 88px | 98px |
iPhone5\5C\5S | 640×1136 px | 326PPI | 40px | 88px | 98px |
iPhone4\4S | 640×960 px | 326PPI | 40px | 88px | 98px |
iPhone\iPod\Touch1,2,3 | 320×480 px | 163PPI | 20px | 44px | 49px |
iPhone图标尺寸
设备 | App Store | 程序应用 | 主屏幕 | Spotlight搜索 | 标签栏 | 工具栏和导航栏 |
---|---|---|---|---|---|---|
iPhone6 Plus (@3×) | 1024×1024 px | 180×180 px | 114×114 px | 87×87 px | 75×75 px | 66×66 px |
iPhone6 (@2×) | 1024×1024 px | 120×120 px | 114×114 px | 58×58 px | 75×75 px | 44×44 px |
iPhone5\5C\5S (@2×) | 1024×1024 px | 120×120 px | 114×114 px | 58×58 px | 75×75 px | 44×44 px |
iPhone4\4S (@2×) | 1024×1024 px | 120×120 px | 114×114 px | 58×58 px | 75×75 px | 44×44 px |
iPhone\iPod\Touch1,2,3 | 1024×1024 px | 120×120 px | 57×57 px | 29×29 px | 38×38 px | 30×30 px |
iPad的设计尺寸
设备 | 尺寸 | 分辨率 | 状态栏高度 | 导航栏高度 | 标签栏高度 |
---|---|---|---|---|---|
iPad... | 2048×1536 px | 264PPI | 40px | 88px | 98px |
iPad 1 - 2 | 1024×768 px | 132PPI | 20px | 44px | 49px |
iPad Mini | 1024×768 px | 163PPI | 20px | 44px | 49px |
iPad图标尺寸
设备 | App Store | 程序应用 | 主屏幕 | Spotlight搜索 | 标签栏 | 工具栏和导航栏 |
---|---|---|---|---|---|---|
iPad... | 1024×1024 px | 180×180 px | 144×144 px | 100×100 px | 50×50 px | 44×44 px |
iPad 1 - 2 | 1024×1024 px | 90×90 px | 72×72 px | 50×50 px | 25×25 px | 22×22 px |
iPad Mini | 1024×1024 px | 90×90 px | 72×72 px | 50×50 px | 25×25 px | 22×22 px |
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×600 | 1024×768 1280×76 8WXGA(1280×800) | 1536×1152 1920×1152 1920×1200 | 2048×1536 2560×1600 |
Android的图标尺寸
屏幕大小 | 启动 | 操作栏 | 上下文 | 系统通知 | 最细笔画 |
---|---|---|---|---|---|
320×480 px | 48×48 px | 32×32 px | 16×16 px | 24×24 px | 不小于2 px |
480×800px 480×854px 540×960px | 72×72 px | 48×48 px | 24×24 px | 36×36 px | 不小于3 px |
720×1280 px | 48×48 dp | 32×32 dp | 16×16 dp | 24×24 dp | 不小于2 dp |
1080×1920 px | 144×144 px | 96×96 px | 48×48 px | 72×72 px | 不小于6 px |
百度流量研究院,提供了“浏览器市场份额”、“操作系统市场份额”、“分辨率使用情况”、“网民地域分布”、“网民上网时间分布”和“流量入口选择”六个报告,每个报告都有全局整体分布及每个具体对象过去2年的历史趋势数据。同时也分为移动端,PC端不同维度和专注方向的数据统计,其中移动端的用户属性,使用行为,移动设备相信对做移动端市场的朋友还是有一定价值,但提醒一下对于PC端分辨率的统计,其中一条360X640不要意外这个其实是手机浏览器。
Talkingdata智能数据平台包含数据、技术、方案集成等多类合作伙伴的协作平台。同时他们也提供了一些不错的数据报告可以供我们平时做产品的时候作为数据依据,辅助我们更好的做好判断。
【友盟+】数据报告源自对应用程序每一次启动的挖掘和分析,可以充分展现移动应用的使用细节、发展状况及行业整体趋势, 为移动应用行业 提供准确 、全面、深入的数据观察。
27