QQ快速登录未注册用户登录时自动注册
设计石代 » 苹果IOS设计规范-适应性和布局

苹果IOS设计规范-适应性和布局

人们通常希望能够在所有设备上和任何上下文中使用自己喜欢的应用程序。在iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理时,在拆分视图中,在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。

设备屏幕尺寸和方向

iOS设备具有各种屏幕尺寸,可以纵向或横向使用。

如果您的应用在特定设备上运行,请确保该应用在该设备的所有屏幕尺寸上运行。换句话说,仅iPhone应用程序必须在每个iPhone屏幕尺寸上运行,而仅iPad应用程序必须在每个iPad屏幕尺寸上运行。

苹果IOS设计规范-适应性和布局

设备 肖像尺寸 景观尺寸
12.9英寸iPad Pro 2048像素×2732像素 2732像素×2048像素
11英寸iPad Pro 1668px×2388px 2388px×1668px
10.5英寸iPad Pro 1668px×2224px 2224像素×1668像素
9.7吋iPad 1536px×2048px 2048像素×1536像素
7.9吋iPad mini 4 1536px×2048px 2048像素×1536像素
iPhone X S最大 1242px×2688px 2688px×1242px
iPhone X S 1125px×2436px 2436px×1125px
iPhone X R 828px×1792px 1792像素×828像素
iPhone X 1125px×2436px 2436px×1125px
iPhone 8 Plus 1242px×2208px 2208px×1242px
iPhone 8 750px×1334px 1334px×750px
iPhone 7 Plus 1242px×2208px 2208px×1242px
iPhone 7 750px×1334px 1334px×750px
iPhone 6s Plus 1242px×2208px 2208px×1242px
iPhone 6s 750px×1334px 1334px×750px
iPhone SE 640px×1136px 1136px×640px

要了解屏幕分辨率如何影响您应用的图片,请参阅图像大小和分辨率

自动版面

Auto Layout是用于构建自适应界面的开发工具。使用“自动版式”,您可以定义用于控制应用程序内容的规则(称为Constraints)。例如,您可以约束一个按钮,使其始终水平居中并定位在图像下方八点,而不管可用的屏幕空间如何。

苹果IOS设计规范-适应性和布局当检测到某些环境变化(称为特征)时,“自动布局”会根据指定的约束条件自动重新调整布局。您可以将应用程序设置为动态适应各种特征,包括:

有关开发人员的指导,请参见《自动布局指南》和《UITraitCollection》

布局指南和安全区域

布局指南定义了实际上不在屏幕上可见的矩形区域,但有助于内容的定位,对齐和间距。该系统包括预定义的布局指南,可轻松在内容周围应用标准边距并限制文本的宽度,以实现最佳的可读性。您还可以定义自定义布局指南。

遵守UIKit定义的安全区域和布局边距。这些布局指南可确保根据设备和上下文进行适当的插入。安全区域还可以防止内容重叠在状态栏,导航栏,工具栏和选项卡栏上。系统提供的标准视图将自动采用安全区域布局指南。

对于开发人员指南,见UILayoutGuidelayoutMarginsGuidereadableContentGuidesafeAreaLayoutGuide

尺寸等级

大小类是根据其大小自动分配给内容区域的特征。该系统定义了两个大小类,规则类(表示扩展空间)和紧凑类(表示约束空间),它们描述了视图的高度和宽度。

视图可以具有尺寸类别的任何组合:

  • 常规宽度,常规高度
  • 宽度紧凑,高度紧凑
  • 常规宽度,高度紧凑
  • 宽度紧凑,常规高度

与其他环境变化一样,iOS根据内容区域的大小类别动态地进行布局调整。例如,当垂直尺寸类别从紧凑高度更改为常规高度时(可能是由于用户将设备从横向旋转为纵向),选项卡栏可能会变得更高。

设备尺寸等级

根据屏幕尺寸,不同的尺寸类别组合适用于不同设备上的全屏体验。

苹果IOS设计规范-适应性和布局

设备 纵向 横向取向
12.9英寸iPad Pro 常规宽度,常规高度 常规宽度,常规高度
11英寸iPad Pro 常规宽度,常规高度 常规宽度,常规高度
10.5英寸iPad Pro 常规宽度,常规高度 常规宽度,常规高度
9.7吋iPad 常规宽度,常规高度 常规宽度,常规高度
7.9吋iPad mini 4 常规宽度,常规高度 常规宽度,常规高度
iPhone X S最大 宽度紧凑,常规高度 常规宽度,高度紧凑
iPhone X S 宽度紧凑,常规高度 宽度紧凑,高度紧凑
iPhone X R 宽度紧凑,常规高度 常规宽度,高度紧凑
iPhone X 宽度紧凑,常规高度 宽度紧凑,高度紧凑
iPhone 8 Plus 宽度紧凑,常规高度 常规宽度,高度紧凑
iPhone 8 宽度紧凑,常规高度 宽度紧凑,高度紧凑
iPhone 7 Plus 宽度紧凑,常规高度 常规宽度,高度紧凑
iPhone 7 宽度紧凑,常规高度 宽度紧凑,高度紧凑
iPhone 6s Plus 宽度紧凑,常规高度 常规宽度,高度紧凑
iPhone 6s 宽度紧凑,常规高度 宽度紧凑,高度紧凑
iPhone SE 宽度紧凑,常规高度 宽度紧凑,高度紧凑

多任务大小类

在iPad上,当您的应用程序在多任务配置中运行时,大小类也适用。

苹果IOS设计规范-适应性和布局2/3分割视图

苹果IOS设计规范-适应性和布局1/2分割视图

苹果IOS设计规范-适应性和布局1/3分割视图

设备 模式 纵向 横向取向
12.9英寸iPad Pro 2/3分割视图 宽度紧凑,常规高度 常规宽度,常规高度
1/2分割视图 不适用 常规宽度,常规高度
1/3分割视图 宽度紧凑,常规高度 宽度紧凑,常规高度
11英寸iPad Pro 2/3分割视图 宽度紧凑,常规高度 常规宽度,常规高度
1/2分割视图 不适用 宽度紧凑,常规高度
1/3分割视图 宽度紧凑,常规高度 宽度紧凑,常规高度
10.5英寸iPad Pro 2/3分割视图 宽度紧凑,常规高度 常规宽度,常规高度
1/2分割视图 不适用 宽度紧凑,常规高度
1/3分割视图 宽度紧凑,常规高度 宽度紧凑,常规高度
9.7吋iPad 2/3分割视图 宽度紧凑,常规高度 常规宽度,常规高度
1/2分割视图 不适用 宽度紧凑,常规高度
1/3分割视图 宽度紧凑,常规高度 宽度紧凑,常规高度
7.9吋iPad mini 4 2/3分割视图 宽度紧凑,常规高度 常规宽度,常规高度
1/2分割视图 不适用 宽度紧凑,常规高度
1/3分割视图 宽度紧凑,常规高度 宽度紧凑,常规高度

总体布局注意事项

确保主要内容以其默认大小清晰可见。人们不必水平滚动即可阅读重要文本,也无需缩放即可查看主要图像,除非他们选择更改大小。

在整个应用程序中保持整体一致的外观。通常,具有相似功能的元素应看起来相似。

利用视觉上的重量和平衡来传达重要性。大件物品比小件物品引人注目,并且显得更重要。较大的物品也更容易挖掘,这在将应用程序用于分散周围环境(例如在厨房或健身房中)时尤其重要。通常,将主要项目放置在屏幕的上半部分,并在从左至右的阅读上下文中放置在屏幕的左侧附近。

使用对齐方式可以简化扫描并传达组织和层次结构。对齐使应用看起来整洁有序,可帮助人们在滚动时集中精力,并使查找信息更加容易。缩进和对齐还可以指示内容组之间的关系。

如果可能,请同时支持纵向和横向。人们倾向于以不同的方向使用应用程序,因此,当您能够实现这一期望时,这是最好的。

准备更改文本大小。人们期望大多数应用程序在“设置”中选择不同的文本大小时做出响应。为了适应某些文本大小的更改,您可能需要调整布局。有关应用程序中文本使用情况的更多信息,请参见Typography

苹果IOS设计规范-适应性和布局苹果IOS设计规范-适应性和布局

为交互元素提供足够的触摸目标。尝试将所有控件的最小可触碰区域保持在44pt x 44pt。

苹果IOS设计规范-适应性和布局

4.7英寸iPhone

苹果IOS设计规范-适应性和布局

5.8英寸iPhone

在多个设备上预览您的应用。您可以使用Simulator(Xcode随附)来预览您的应用,并检查剪切和其他布局问题。如果您的应用支持横向模式,则无论设备向左还是向右旋转,请确保布局看起来都不错。全屏iPhone不支持上下颠倒肖像模式。某些功能(例如彩色图像)最好在实际设备上进行预览。

在较大的设备上显示文本时,请应用可读性边距。这些边距使文本行足够短,以确保舒适的阅读体验。

适应环境变化

在上下文更改期间保持对当前内容的关注。内容是您的最高优先事项。当环境变化时改变焦点可能会令人迷惑和沮丧,并使人们感到失去对应用程序的控制。

避免不必要的布局更改。当有人旋转设备时,整个布局不必更改。例如,如果您的应用以纵向模式显示图像网格,则不必以横向模式显示与列表相同的图像。相反,它可能只是调整网格的尺寸。尝试在所有情况下保持可比的经验。

如果您的应用必须在单一方向上运行,则必须同时支持这两种变体。无论设备向左还是向右旋转,仅在横向模式下运行的应用都应该可用。仅在纵向模式下运行的应用程序应在设备旋转180度时将其内容旋转180度(iPhone X除外,后者不支持上下颠倒的纵向模式)。如果当有人以错误的方向握住设备时您的应用程序不会自动旋转,他们会本能地知道如何旋转设备。您无需告诉他们。

根据上下文自定义应用对轮换的响应。例如,允许人们通过旋转设备来移动角色的游戏可能不应该在玩游戏时切换方向。但是,它可以根据当前方向显示菜单和介绍序列。

旨在同时支持iPad和iPhone。人们赞赏能够在两种类型的iOS设备上运行您的应用程序的灵活性。如果您的应用程序的某些功能需要iPhone专用的硬件(例如电话),请考虑在iPad上隐藏或禁用这些功能,并让人们使用您应用程序的其他功能。

全屏4.7英寸设备图像

苹果IOS设计规范-适应性和布局在5.8英寸设备上裁剪

苹果IOS设计规范-适应性和布局5.8“设备上的信箱

苹果IOS设计规范-适应性和布局

全屏5.8英寸设备图像

苹果IOS设计规范-适应性和布局在4.7英寸设备上裁剪

苹果IOS设计规范-适应性和布局4.7英寸设备上的弹药筒

重用现有图稿时请注意宽高比的差异。不同的屏幕尺寸可能具有不同的宽高比,从而导致图稿出现被裁剪,出现字母框或竖框的现象。确保在所有尺寸的显示器上都保留重要的视觉内容。

设计全屏体验

扩展视觉元素以填充屏幕。确保背景延伸到显示器的边缘,并且垂直可滚动的布局(例如表格和集合)一直延续到底部。

避免在屏幕的底部和角落中明确放置交互式控件。人们使用显示屏底部边缘的滑动手势来访问主屏幕和应用切换器等功能,这些手势可能会取消您在此区域中实现的自定义手势。屏幕的远处可能是人们难以舒适到达的区域。

苹果IOS设计规范-适应性和布局插入基本内容以防止剪切。通常,内容应居中且对称地插入,这样它在任何方向上都看起来不错,不会被圆角夹住,不会被传感器外壳隐藏,也不会被访问主屏幕的指示器遮盖。为了获得最佳结果,请使用系统提供的标准界面元素和“ 自动布局”来构造您的界面,并遵守布局指南和安全区域由UIKit定义。当设备处于横向时,可能适合某些应用程序(例如游戏)将可点击的控件放置在屏幕的下部(在安全区域下方延伸),以便为内容留出更多空间。将控件放在屏幕的顶部和底部时,请使用匹配的插图,并在“主页”指示器周围留出足够的空间,以便人们在尝试与控件进行交互时不会意外地将其作为目标。由于“主页”指示器仍在屏幕上居中,因此它相对于应用程序界面的位置可能会发生变化。

苹果IOS设计规范-适应性和布局苹果IOS设计规范-适应性和布局

苹果IOS设计规范-适应性和布局苹果IOS设计规范-适应性和布局

插入全角按钮。延伸到屏幕边缘的按钮可能看起来不像按钮。遵守全角按钮两侧的标准UIKit边距。屏幕底部有一个全角按钮,该按钮有圆角且与安全区域的底部对齐时,它看起来最好,这也确保了它与“主页”指示器不冲突。

不要掩盖或特别注意关键的显示功能。不要试图通过在屏幕顶部和底部放置黑条来隐藏设备的圆角,传感器外壳或用于访问主屏幕的指示器。也不要使用诸如括号,边框,形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。

请注意状态栏的高度。在全屏iPhone上,状态栏比在旧iPhone上高。如果您的应用假定状态栏的高度固定为将状态栏放置在状态栏下方,则必须更新您的应用以根据当前设备动态定位内容。请注意,当诸如录音和位置跟踪之类的后台任务处于活动状态时,全屏iPhone上的状态栏不会更改高度。

如果您的应用当前隐藏状态栏,请为全屏iPhone重新考虑该决定。全屏iPhone的内容垂直空间要比旧版iPhone多,并且状态栏占据了您的应用可能无法充分利用的屏幕区域。状态栏还会显示人们认为有用的信息。它仅应隐藏以换取附加值。

允许自动隐藏指示器以节省访问主屏幕的操作。启用自动隐藏后,如果用户几秒钟未触摸屏幕,指示灯就会淡出。当人们再次触摸屏幕时,它会重新出现。仅对于被动观看体验(例如播放视频或照片幻灯片),应启用此行为。

开通VIP会员免费使用全部素材。

关注微信公众号,回复“加速”获取网盘无限速下载

站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
领取设计教程,书籍
关注公众号,下载最新设计软件
已经110000人关注
分享到:
赞(0)

评论抢沙发

评论前必须登录!