iPad界面设计尺寸规范详解【完整的平板设计规范】 您所在的位置:网站首页 苹果平板ipad3尺寸 iPad界面设计尺寸规范详解【完整的平板设计规范】

iPad界面设计尺寸规范详解【完整的平板设计规范】

2024-06-13 18:59| 来源: 网络整理| 查看: 265

iPad设计目前也非常多啦,之前25学堂也分享过苹果iPad界面设计规范、尺寸等指导性设计知识。不知道大家还有印象没?如果没有,也没关系,今天这节课25学堂跟大家一起回顾下iPad界面设计的一些设计规范和常识。

 

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

ipad 设计规范

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

作为设计师,几乎我们本能的就会醉心于一些华丽的UI界面而忘了用户本身是来干什么的。为了让用户关注内容本身并在交互的过程中尽量少受干扰,所以我们需要淡化程序UI,弱化界面控件、让信息更扁平化(让上下层级可以在同一界面中自如切换),限制一个视图内的任务复杂度、淡化文件管理、使用最少的模态对话框、只有在需要时才提醒用户??

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

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

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

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

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

iphone ipad mockups

 

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

下面我们先以ios系列的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设计尺寸信息图

 

不太清楚的可以去看下 尺寸大全:最新最全的APP设计尺寸

当然还有全套的iOS 9 GUI iPad Sketch素材以及下载

ipad设计规范详解

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

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

小米平板电脑设计

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

屏幕尺寸:7.9英寸

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

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

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

安卓平板设计适配的原则

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

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

当然,最近很多ipad设计同学在问字体设计大小,25学堂的老谭说其实跟ios和android等平台上的字体设计大小一样的。

下面25学堂提供参考:

ipad-字体设计大小参考

 

APP设计新手可以入读:APP设计常识解读:android界面适配的机制

如果大家有不明白,可以下面评论或者给我们留言。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有