①iPhone的设计尺寸

iPhone界面尺寸:

设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度
iPhone6 plus设计版 1242 × 2208 60px 132px 146px
iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
一套完整的UI设计规范手册(IOS版)
移动端界面设计之尺寸篇(淘宝版)
图说: iPhone 6 (plus) 没那么容易搞定
设计尺寸回顾:iOS设计规范整理汇总
iPhone6 plus物理版 1080 × 1920 54px 132px 146px
iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
一套完整的UI设计规范手册(IOS版)
移动端界面设计之尺寸篇(淘宝版)
图说: iPhone 6 (plus) 没那么容易搞定
设计尺寸回顾:iOS设计规范整理汇总
iPhone6 750 × 1334 40px 88px 98px(88px)
iPhone5s 640 × 1136 40px 88px 98px(88px)
iPhone5c 640 × 1136 40px 88px 98px(88px)
iPhone5 640 × 1136 40px 88px 98px(88px)
iPhone4s 640 × 960 40px 88px 98px(88px)
iPhone4 640 × 960 40px 88px 98px(88px)

iPhone图标尺寸:

系统 分辨率 圆角大小
iOS 6- 90px - 1024px 约为图标宽度 × 0.175
iOS 7+ 90px - 1024px 约为图标宽度 × 0.225
Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s (@2x) iPad and iPad mini (@2x) iPad 2 and iPad mini (@1x)
App icon
(required for all apps)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76
App icon for the App Store
(required for all apps)
1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024
Launch file or image
(required for all apps)
Use a launch file
(see Launch Images)
For iPhone 6, use a launch file
(see Launch Images)
For iPhone 5, 640 × 1136
640 × 960 1536 × 2048 (portrait)
2048 × 1536 (landscape)
768 × 1024 (portrait)
1024 × 768 (landscape)
Spotlight search results icon
(recommended)
120 × 120 80 × 80 80 × 80 80 × 80 40 × 40
Settings icon
(recommended)
87 × 87 58 × 58 58 × 58 58 × 58 29 × 29
Toolbar and navigation bar icon
(optional)
About 66 × 66 About 44 × 44 About 44 × 44 About 44 × 44 About 22 × 22
Tab bar icon
(optional)
About 75 × 75
(maximum: 144 × 96)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 25 × 25
(maximum: 48 × 32)
Default Newsstand cover icon for the App Store
(required for Newsstand apps)
At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 512 pixels on the longest edge
Web clip icon
(recommended for web apps and websites)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76


转载请注明来源:http://www.ui001.com/chicun/

②iPad的设计尺寸

iPad界面尺寸:

设备 分辨率 状态栏高度 导航栏高度 标签栏高度
iPad6/iPad Air2 2048 × 1536 40px 88px 98px
iPad5/iPad Air/ipad mini 2 2048 × 1536 40px 88px 98px
iPad4/ipad mini 2048 × 1536 40px 88px 98px
iPad3/the new iPad 2048 × 1536 40px 88px 98px
iPad2 1024 × 768 20px 44px 49px
iPad1 1024 × 768 20px 44px 49px
iPad Mini 1024 × 768 20px 44px 49px

iPad图标尺寸:

系统 分辨率 圆角大小
iOS 6- 90px - 1024px 约为图标宽度 × 0.175
iOS 7+ 90px - 1024px 约为图标宽度 × 0.225
Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s (@2x) iPad and iPad mini (@2x) iPad 2 and iPad mini (@1x)
App icon
(required for all apps)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76
App icon for the App Store
(required for all apps)
1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024
Launch file or image
(required for all apps)
Use a launch file
(see Launch Images)
For iPhone 6, use a launch file
(see Launch Images)
For iPhone 5, 640 × 1136
640 × 960 1536 × 2048 (portrait)
2048 × 1536 (landscape)
768 × 1024 (portrait)
1024 × 768 (landscape)
Spotlight search results icon
(recommended)
120 × 120 80 × 80 80 × 80 80 × 80 40 × 40
Settings icon
(recommended)
87 × 87 58 × 58 58 × 58 58 × 58 29 × 29
Toolbar and navigation bar icon
(optional)
About 66 × 66 About 44 × 44 About 44 × 44 About 44 × 44 About 22 × 22
Tab bar icon
(optional)
About 75 × 75
(maximum: 144 × 96)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 25 × 25
(maximum: 48 × 32)
Default Newsstand cover icon for the App Store
(required for Newsstand apps)
At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 512 pixels on the longest edge
Web clip icon
(recommended for web apps and websites)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

转载请注明来源:http://www.ui001.com/chicun/

③Android的设计尺寸

屏幕尺寸

指实际的物理尺寸,为屏幕对角线的测量。
为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。

像素(PX)

代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。

屏幕密度

为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。
于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。

典型的设计尺寸

• 320dp:一个普通的手机屏幕(240X320,320×480,480X800)
• 480dp:一个中间平板电脑像(480×800)
• 600dp:7寸平板电脑(600x1024)
• 720dp:10寸平板电脑(720x1280,800x1280)

相关阅读

一套完整的UI设计规范手册(Android版) 移动端界面设计之尺寸篇(淘宝版)

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手机分辨率和尺寸

设备 分辨率 尺寸 设备 分辨率 尺寸
三星Galaxy S3 4.8英寸 720 × 1280 三星Galaxy S4 5英寸 1080 × 1920
三星Galaxy S5 5.1英寸 1080 × 1920 三星Galaxy S6 4.5英寸 1200 × 1920
小米1 4英寸 480 × 854 小米1s 4英寸 480 × 854
小米2 4.3英寸 720 × 1280 小米2s 4.3英寸 720 × 1280
小米3 5英寸 1080 × 1920 小米3s(概念) 5英寸 1080 × 1920
小米4 5英寸 1080 × 1920 红米 4.7英寸 720 × 1280
红米Note 5.5英寸 720 × 1280      
OPPO Find 7 5.5英寸 1440 × 2560 OPPO Find 7 轻装版 5.5英寸 1080 × 1920
OPPO N1 mini 5英寸 720 × 1280 OPPO R3 5英寸 720 × 1280
OPPO R1S 5英寸 720 × 1280      
锤子 Smartisan T1 4.95英寸 1080 × 1920      
华为 Ascend P7 5英寸 1080 × 1920 华为 Ascend Mate7 6英寸 1080 × 1920
华为 荣耀6 5英寸 1080 × 1920 华为 Ascend Mate2 6.1英寸 720 × 1280
华为 C199 5.5英寸 720 × 1280      
HTC One (M8) 5英寸 1080 × 1920 HTC Desire 820 5.5英寸 720 × 1280
魅族 MEIZU MX4 5.36英寸 1152 × 1920 魅族 MEIZU MX3 5.1英寸 1080 × 1800

转载请注明来源:http://www.ui001.com/chicun/

④Web的设计尺寸

Windows XP任务栏的高度30px  Windows 7任务栏的高度40px

主流浏览器的界面参数

浏览器 状态栏 菜单栏 滚动条
Chrome浏览器 22px(浮动出现) 60px 15px
火狐浏览器 状态栏高度 导航栏高度 标签栏高度
IE浏览器 状态栏高度 导航栏高度 标签栏高度
360浏览器 状态栏高度 导航栏高度 标签栏高度

系统分辨率统计

安全分辨率为1024 × 768 px  可建议大分辨率为1280 × 800 px

综合分辨率及浏览器下的统计数据

网页宽度与首屏高度

安全宽度1002 px  可建议较大宽度1258 px

Window XP首屏大小580 px  Window 7 首屏大小710 px

转载来源:http://www.ui001.com/chicun/

iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页的更多相关文章

  1. 精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具

    在制作界面原型的时候,如果有现成的界面基础元素可以使用的话,设计师就可以非常快速的完成原型的制作,能够节省大量的时间和精力.在这篇文章, 我向大家分享45套非常有用的 UI 和 Wireframe 套 ...

  2. qt ui界面控件布局设计

    1.布局控件简介: 水平布局,里面的控件将水平展示,布局器里面的控件大小若没有固定,其大小将随着布局的大小而自动拉伸.可以通过设置其左(layoutLeftMargin).上(layoutTopMar ...

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

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

  4. 转载:21个免费的UI界面设计工具、资源及网站

    我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产 ...

  5. 【转】21个免费的UI界面设计工具、资源及网站

    本文将介绍21个免费的UI界面设计工具.资源及网站,如果你在做用户体验设计.界面设计.产品设计.JS前段开发.手机产品设计以及iPad和平板电脑产品设计,不妨来看看. AD: 2013云计算架构师峰会 ...

  6. Android开发1:基本UI界面设计——布局和组件

    前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...

  7. 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

    明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...

  8. 8个设计师必看的免费UI图标设计资源站

    图标是我们日常APP及网页设计过程中必不可少的元素之一,通过小小的图标,可以快速方便的实现视觉引导和功能划分.在创作时,我们需要寻找各种各样的图标来满足自己的设计需求,非常浪费时间和精力.今天,小编给 ...

  9. PyQt5系列教程(二)利用QtDesigner设计UI界面

    软硬件环境 OS X EI Capitan Python 3.5.1 PyQt 5.5.1 PyCharm 5.0.1 前言 在PyQt5系列教程的第一篇http://blog.csdn.net/dj ...

随机推荐

  1. Android Paint的属性

    在Paint中有很多的属性可以设置,比如可以设置阴影,颜色过滤等等,这些会产生不同的奇妙效果,今天就对各种属性探索一下. 方法一: 1 //设置绘制的颜色,a代表透明度,r,g,b代表颜色值. 2 s ...

  2. 某预约系统分析 > 某区公共自行车租车卡在线预约,关于如何提高成功概率

    概诉 网上提交预约申请单,线下面交完成实体卡的交付和办理. 本文主要从技术角度分析预约页面,仅供初学者技术交流使用. 表单输入和校验 系统通过2步的确认点击到达信息输入页面. 地址:/bjggzxc/ ...

  3. QM模块包含主数据(Master data)和功能(functions)

    QM模块包含主数据(Master data)和功能(functions)   QM主数据   QM主数据 1 Material   Master MM01/MM02/MM50待测 物料主数据 2 Sa ...

  4. C++多线程の条件变量

    如果有一个队列,方法一和方法二:方法一是生产者,方法二是消费者: 两者不停的相互等待,加减锁,为了减少不必要的等待,我们可以使用条件变量, 条件的变量的第二个参数的加入可以控制多个线程的"消 ...

  5. Latex环境安装

    安装latex环境 sudo apt-get install texlive-full 推荐使用texstudio编辑器,简单方便高效靠谱 sudo apt-get install texstudio ...

  6. UE4 AI入门

    转自:http://blog.csdn.net/u011707076/article/details/46607121 本文是翻译的官方文https://docs.unrealengine.com/l ...

  7. 关于node.js杂记

    https://gitlore.com/page/gitlore-git/nodejs/index.html[node.js中文文档] //////    https://gitlore.com/in ...

  8. ArcGIS影像配准与空间配准

    ArcGIS影像配准与空间配准 ArcGIS影像配准与空间配准 地图配准可分为影像配准和空间配准.影像配准的对象是raster图,譬如TIFF图.配准后的图可以保存为ESRI GRID, TIFF,或 ...

  9. Java集合框架

    集合框架体系如图所示 Java 集合框架提供了一套性能优良,使用方便的接口和类,java集合框架位于java.util包中, 所以当使用集合框架的时候需要进行导包. Map接口的常用方法 Map接口提 ...

  10. font-weight -- 定义字体的粗细

    font-weight -- 定义字体的粗细 取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 70 ...