移动端app开发-iPhone/iPad/Android UI尺寸规范

  • 本笔记抛去无用的前期分析什么的，全是干货，简洁干练
  • 本笔记不单独针对 ios 或者 Android，两种都介绍，当然我们实际开发过程中，也往往是 Android一套，ios一套

## （一）设计规范与设计流程 - **了解设计规范，熟悉 Android 和 ios 规范差别，了解界面中主要设计元素** - **关键词：** ios 设计基础规范，Android 设计规范，常用界面尺寸，布局规范，图标规范，文字规范 - 设计规范可以很好保证产品一致性，提升同伴之间的沟通效率，简单地说，实际规范是一份由很多范例组成的文档，例如：一级标题用36px，二级标题用30px，等等等 ### iOS 和 Android 基础规范 - 这里从界面尺寸 + 布局 + 控件 + icon + 字体 五个方面介绍 ### ios 常用界面分辨率尺寸： ![](https://images2018.cnblogs.com/blog/1483449/201809/1483449-20180909211137745-1909392541.png)

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 Touch第一代、第二代、第三代

 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 Touch第一代、第二代、第三代

 1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px

iPad的设计尺寸

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

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2

 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 3 - 4 - 5 - 6 - Air - Air2 - mini2

 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×768WXGA（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

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

名称 分辨率 比率 rate (针对320px) 比率 rate (针对640px) 比率 rate (针对750px)

idpi

 240×320 0.75 0.375 0.32

mdpi

 320×480 1 0.5 0.4267

hdpi

 480×800 1.5 0.75 0.64

xhdpi

 720×1280 2.25 1.125 1.042

xxhdpi

 1080×1920 3.375 1.6875 1.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 px 15 px 8%

火狐浏览器

 20 px 132 px 15 px 1%

IE浏览器

 24 px 120 px 15 px 35%

360 浏览器

 24 px 140 px 15 px 28%

遨游浏览器

 24 px 147 px 15 px 1%

搜狗浏览器

 25 px 163 px 15 px 5%

系统分辨率统计

分辨率 占有率 分辨率 占有率

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%

更多文章链接：移动端App开发

- 本笔记不允许任何个人和组织转载

移动端app开发-02-iPhone/iPad/Android UI尺寸规范相关推荐

  1. iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸...

    iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...

  2. iPhone/iPad/Android UI尺寸规范

    iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 146px iPhone6 ...

  3. 移动端app开发 - 01 - 开篇

    移动端app开发 - 01 - 开篇 从此笔记之后开启移动端 app 开发学习 该系列笔记去掉所有无关重要的东西,简介干练 我的移动端App开发笔记 1.移动端App开发 - 02 - iPhone/ ...

  4. 0-2岁的app开发人员必读，Android开发APP前的准备事项

    2019独角兽企业重金招聘Python工程师标准>>> 随着移动互联网的兴起,各行各业对移动应用的需求越来越大,从事APP开发的人也越来越多,APP开发行业可以说是方兴未艾.APP开 ...

  5. 写给Android App开发人员看的Android底层知识合集（1-8）

    写给Android App开发人员看的Android底层知识合集(1-8) 转自包老师:http://www.cnblogs.com/Jax/p/6864103.html 写给Android App开 ...

  6. 移动端app开发-03-IOS 初级开发入门教程

    移动端app开发-03-IOS 初级开发入门教程 什么是iOS   iOS是苹果公司为它的移动设备(iPhone.iPad.iWatch等)开发的移动操作系统. iOS发展史 2007年苹果发布iPh ...

  7. 瑜伽教学TV端APP开发搭建教程IPTV系统

    瑜伽作为一种非常受欢迎的锻炼方式,受到越来越多人的喜爱.但因为时间和距离等因素的影响,很多人也喜欢自己在家里做一些瑜伽锻炼,比如饭后或者休息时间打开电视进行瑜伽锻炼,不仅仅可以很好的学习动作,还可以一 ...

  8. 创业布局移动端App，应该先做Android还是iOS？

    在常州创业布局移动端时,初期往往摆在面前最大的难题是,如何分配有限的成本,在最快的速度内占领市场?这个大难题会影响创始人在团队和产品建设方方面面的决定.缩小至移动App开发一方面来说,先做Androi ...

  9. 使用HTML(Web)开发iOS/iPhone/iPad应用

    许多人想开发自己的iOS App吧?iOS App有几种开发的方法.一种是"正规"的方法,就是Xcode+ObjC.但是这样既得学习ObjC语言,又得搭建Xcode开发环境.都弄完 ...

最新文章

  1. 微软私有云Azure Pack实践系列之三创建虚拟机角色
  2. 云数据中心的网络架构
  3. 分别用递归和非递归方式实现二叉树先序、中序和后序遍历（java实现）
  4. Ubuntu下添加定时任务执行php文件
  5. 使用Nexus配置Maven私有仓库
  6. JMH：如何设置和运行JMH基准
  7. WPF效果（GIS三维篇）
  8. 【HDU - 2203】 亲和串 （思维题，可选KMP）
  9. 文件标识符无效。使用 fopen 生成有效的文件标识符。_「存储架构」块存储、文件存储和对象存储(第1节)...
  10. 如何使用iMazing将iPhone的数据迁移到iPad
  11. websocket 发送多条消息如何判断全部接收_Websocket的分布式集群开发及部署
  12. 方立勋_30天掌握JavaWeb_回顾复习
  13. linux ansys内存不够,ANSYS 硬件配置建议
  14. 互联网大脑进化简史，类脑智能巨系统产生与兴起
  15. Web前端开发之CSS学习笔记5—溢出、浮动、层叠
  16. 服务器在外国那么登录网站算,国外服务器网站好吗？好在哪？
  17. 要重复多少次变成潜意识_潜意识成功法则
  18. UTC、格林威治时间、本地时间
  19. 3dmax渲染软件有哪些？哪个好用
  20. 清华学霸尹成Python教程

热门文章

  1. 【电气专业知识问答】问：直流回路中为何严禁使用交流空气断路器？
  2. 《The Curious Case of Benjamin Button》让我哭了
  3. 双三星970evo组raid0
  4. 我们身边40岁的Android程序员的“晚年“
  5. Heartbleed：更新－受影响的在线服务情况
  6. Echarts的rich使用方法。（附上很多好用的案例网址）
  7. yolact 计算box / mask mAP源码解析
  8. 三天打鱼两天晒网(C语言)
  9. videojs播放监控
  10. c语言头文件命名规则,C语言头文件规则.doc