ipad的尺寸是怎么计算的(平板电脑尺寸对照表)

iPad设计目前也非常多,今天这节课跟大家一起回顾下iPad界面设计的一些设计规范和常识。

第一部分:iPad用户体验设计指导性原则

ipad的尺寸是怎么计算的(平板电脑尺寸对照表)

首先,在iPad上侧重的是内容和交互,而不是UI。

然后,是内容形式上富有真实感。

iPad上自带的iBooks、Note以及Google Map都是很好的例子。苹果给出的解释是:程序显示和现实生活越相似,用户就越容易理解、操作并喜欢。可以使用动画进一步增强真实感觉,东纵的真实感比外观更为重要,要符合物理规律。

最后,是充分利用设备性能和特性。

iPad是由苹果公司于2010年开始发布的平板电脑系列产品,除了具有普通数码设备的硬件指标和性能参数之外,还具有很多诸如重力和加速度感应、多点触控、手势识别等人机交互新特性。如何把这些交互手段通过设计结合到你的作品中,会是个有趣的挑战。

包括现在小米、华为、TCL等都推出了自己的平板电脑产品。所以,让我们设计的平板UI和产品还是有很多的。

第二部分:iPad界面设计尺寸规范

下面我们先以ios系列的ipad产品为例来说下:所有的ipad设计尺寸如下

设备分辨率状态栏高度导航栏高度标签栏高度iPad6/iPad Air22048 × 153640px88px98pxiPad5/iPad Air/ipad mini 22048 × 153640px88px98pxiPad4/ipad mini2048 × 153640px88px98pxiPad3/the new iPad2048 × 153640px88px98pxiPad21024 × 76820px44px49pxiPad11024 × 76820px44px49pxiPad Mini1024 × 76820px44px49px

下面是详细的设计尺寸信息图纸:

看到这里,肯定很多小伙伴也会说,这是ios的平板设计规范,那么安卓的平板设计规范呢?

小编只想说,你会了安卓上的APP设计,其实安卓的平板上的设计规范是差不多的。唯一区别就是尺寸大了些。无非就是解决适配的问题。

例如:小米平板电脑的尺寸和分辨率:

屏幕尺寸:7.9英寸

屏幕分辨率:2048×1536 刚好跟最新的ipad的尺寸相等。所以,我们偷懒的可以按照ios ipad的尺寸设计。

iPad界面设计尺寸:2048×1536 px

下面我们再来分享一份关于安卓平板适配的图片:

注1:分辨率限定符的匹配是向下匹配,如果没有values-land-mdpi-1024×552,比如,分辨率values-land-mdpi-1024×600的屏幕,当rom不把虚拟键计算到屏幕尺寸时,实际显示的屏幕应该是values-land-mdpi-1024×552,无法适配到values-land-mdpi-1024×600,那这样就可能适配到下一级,比如values-land-mdpi-800×480,但是现在的平板已经没有这么低的分辨率了,所以是配到无限定符的values-mdpi里,造成界面显示上的瑕疵。

注2:由于分辨率限定符的匹配是向下匹配,所以如果有非主流mdpi屏幕不能精确适配到上述指定值时,values-mdpi至少可以保证app运行时不至于崩溃,同理values可以保证ldpi屏幕的平板不会因生成view而又取不到相应值而崩溃。

这里从ipad横屏、竖屏的2个不同的场景跟大家聊聊ipad的界面设计尺寸规范。

第一部分:iPad横屏(Landscape)界面设计尺寸规范

iPad在横屏(Landscape)模式下,界面区域元素主要由下图所示构成:

横屏主要尺寸:

宽度:1024px

高度:768px

状态栏(Status Bar)高度:20px

导航条(Nav Bar)高度:44px

主内容区域(Main Cotent Area)高度:655px

标签栏(Tab Bar)高度:49px

键盘高度:352px

第二部分:iPad在竖屏模式下,界面区域元素主要由下图所示构成:

竖屏主要尺寸:

宽度:768px

高度:1024px

状态栏(Status Bar)高度:20px

导航条(Nav Bar)高度:44px

主内容区域(Main Cotent Area)高度:911px

标签栏(Tab Bar)高度:49px

键盘高度:264px

如果你是设计的尺寸是1536 x 2048px的: 与上面的对比关系如下:2倍的倍率

iPad 768 x 1024 pixels 1024 x 768 pixels

1536 x 2048 pixels (@2x) 2048 x 1536 pixels (@2x)

APP store苹果应用市场上需要上传的截图要求:

72 dpi,RGB,扁平,不透明度

高质量的JPEG或PNG图像文件格式下列任何尺寸参考:1024×748 像素的景观(无状态栏)最低

1024×768 像素的景观(全屏)最大

2048×1496 像素的高分辨率(无状态栏)最小

2048×1536 像素的高分辨率(全屏)最大

768×1004 像素的肖像(无状态栏)最小

768×1024 像素的肖像(全屏)最大

1536×2008 像素的高清晰度(无状态栏)最小

1536×2048 像素的高清晰度(全屏)最大

希望以上所有的ipad横屏和竖屏界面尺寸设计规范可以帮到各位APP设计师们。继续加油吧!

发表评论

登录后才能评论