IOS 12设计规范(5-1)视觉设计:适应性和布局(Adaptivity and Layout)

点击前往本读书笔记总目录

5.1 适应性布局(Adaptivity and Layout)

人们总是希望他们的所有设备,随时随地都能使用他们喜欢的App 。在iOS中,界面元素和布局能够⾃动改变形状和⼤⼩小以匹配不同的设备,比如在iPad中多任务操作时、分屏模式时以及屏幕旋转时的显示。因此,你必须设计一个适应性强的界面,在任何环境中都能提供良好的(用户)体验。

设备屏幕尺⼨寸

iOS设备有各种不同的屏幕尺⼨寸,可以横屏或者竖屏使用。

IOS12设计规范

想要更多了解屏幕分辨率如何影响App中的显示效果,请参阅 Image Size and Resolution.

⾃动布局

⾃动布局是构建⾃适应界面的开发⼯工具。你可以定义App的内容规则。例如, 您可以约束一个按钮,使其总是⽔水平居中,并且位于图像下方8点,而不管可用的屏幕空间如何。

当检测到某些场景变化(称为特征)时,⾃动布局将根据特定约束⾃动调整布局。你可以将 APP 设置为动态适应特征,包括:

IOS12设计规范

当检测到App使用环境变化(称为特征)时,⾃适应会根据指定的约束⾃动重新调整布局。您可以将应用设置为动态适应各种特征,包括:

  • 不同的设备屏幕尺⼨寸、分辨率和颜⾊(显示)模式(sRGB/P3)(screen sizes,resolutions, and color gamuts (sRGB/P3))
  • 不同的设备⽅向(横屏 / 竖屏)
  • 拆分视图(Split view)
  • 在iPad上的多任务处理模式(Multitasking)
  • 动态文本的⼤⼩小变化(Dynamic Type)
  • 场景定制的国际化特征(布局⽅向的从左到右或者从右到左,⽇期/时 间/数字格式,字体变化,文本长度)
  • 系统特性可用性(3D Touch)

开发者指南,请参阅,Auto Layout Guide 和 UITraitCollection 。

布局引导和安全区域

布局引导定义了在屏幕上实际上并没有显示的矩形区域,但对内容的定位、 对齐和间距提供了帮助。该系统包含预定义的布局引导,可以方便地在内容 周围应用标准的边缘,并限制文本的宽度以达到最佳的可读性。你还可以⿎定义布 局引导。

遵守 UI Kit 定义的安全区域和布局边界:这些布局引导可以根据设备和(显示)内容进行适当的嵌入,安全区域还可以防⽌止内容对状态栏、导航条、工具栏和标  签栏的影响。标准系统提供的视图⾃动采用安全区域布局引导。 了解更多开发者的指南,请参 阅 UILayoutGuide, layoutMarginsGuide,readableContentGuide, 和safeAreaLayoutGuide 。

IOS12设计规范

尺⼨寸类型

尺⼨寸类型是根据它们的⼤⼩小⾃动的分配内容区域。该系统定义了两个尺⼨寸种类, 常规的(表示可拉伸的空间)和固定的(表示固定长度的空间),描述视图的高度和    宽度。 视图可以拥有任何尺⼨寸类型的组合:

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

与其他环境变化一样,iOS基于内容区域的尺⼨寸是动态地进行布局调整的。  例如,当垂直尺⼨寸种类从固定高度变为常规高度时,可能是因为用户将设备从横屏旋转到竖屏,标签栏可能会更⾼高。

设备尺⼨寸类型

基于屏幕尺⼨寸,不同尺⼨寸类型的组合应用于不同设备的全屏体验。

IOS12设计规范

设备 竖屏⽅⽅向 横屏⽅⽅向
12.9″ iPad Pro 常规的宽度, 常规的⾼度 常规的宽度, 常规的⾼度
10.5″ iPad Pro 常规的宽度, 常规的⾼度 常规的宽度, 常规的⾼度
9.7″ iPad 常规的宽度, 常规的⾼度 常规的宽度, 常规的⾼度
7.9″ iPad mini 4 常规的宽度, 常规的⾼度 常规的宽度, 常规的⾼度
iPhone XS Max 紧凑的宽度,常规的⾼度 常规的宽度,紧凑的⾼度
iPhone XS 紧凑的宽度,常规的⾼度 紧凑的宽度, 紧凑的⾼度
Phone XR 紧凑的宽度,常规的⾼度 常规的宽度,紧凑的⾼度
iPhone X 紧凑的宽度, 常规的⾼度 紧凑的宽度, 紧凑的⾼度
iPhone 8 Plus 紧凑的宽度, 常规的⾼度 常规的宽度, 紧凑的⾼度
iPhone 8 紧凑的宽度, 常规的⾼度 紧凑的宽度, 紧凑的⾼度
iPhone 7 Plus 紧凑的宽度, 常规的⾼度 常规的宽度, 紧凑的⾼度
iPhone 7 紧凑的宽度, 常规的⾼度 紧凑的宽度, 紧凑的⾼度
iPhone 6s Plus 紧凑的宽度, 常规的⾼度 常规的宽度, 紧凑的⾼度
iPhone 6s 紧凑的宽度, 常规的⾼度 紧凑的宽度, 紧凑的⾼度
iPhone SE 紧凑的宽度, 常规的⾼度 紧凑的宽度, 紧凑的⾼度

多任务的尺⼨寸类型

 在iPad上,当你的App在进行多任务处理时,尺⼨寸类型也同样适用。

IOS12设计规范

设备 模式 竖屏⽅⽅向 横屏⽅⽅向
12.9″ 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 拆分视图 紧凑的宽度, 常规的⾼⾼度 紧凑的宽度, 常规的⾼⾼度

布局注意事项

确保重要内容在默认⼤⼩小下清晰可读:除非用户选择调整⼤⼩小,否则不应该让用户横向滑动才能阅读重要的⽂字信息,或者放⼤才能看清重要的图片。

在整个App中保持一致的视觉外观:一般来说,具有相似功能的元素应该看起来    类似。

用视觉权重和平衡来表示重要性:⼤的对象比⼩小的对象更能抓住人的眼球,显   得更重要。⼤的对象也更容易点击,这在容易分散注意力的使用环境中(如厨房或健身房)使用时这点尤为重要。一般来说,处于从左往右的阅读环境时把首要的对象放在屏幕的上半部分并且偏左的位置。

用对⻬齐来方便浏览,并且表达结构和层级对⻬齐会让App看起来整⻬齐有次序,   当页面滑动时有助用户聚焦,更容易找到信息。缩进和对⻬齐还可以表明多组内容之间的关系。

如果可能,同时支持竖屏和横屏模式:用户更喜欢在两种模式下都能使用 App, 所以最好能够满足他们的期望。

准备好应对文本⼤⼩小的改变:当用户在设置里选择了不同的文本⼤⼩小,他们总是希望⼤部分的  App  都能适配。为了适应某些文本⼤⼩小的改变,你可能需要调整布局。了解更多关于应用内文本使用的信息,请参阅 Typography 。

IOS12设计规范

为可交互元素提供足够的空间:尽量让所有控件都有不⼩小于 44pt x 44pt 的点击区域。

IOS12设计规范

在多个设备上预览您的应用:您可以使用模拟器器(Xcode附带)来快速预览您的应用程序并检查剪切和其他排版问题。如果您的应用支持横向模式,请确保您的布局看起来很棒,无论设备是向左还是向右旋转。全屏iPhone不支持倒置肖像模式。某些功能(如宽彩⾊图像)最适合在实际设备上预览。

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

适应语境的变化

环境变化时保持当前内容的焦点不内容是你的最⾼高优先级。让焦点随着环境变化而发⽣改变是会让用户困惑的,感觉当前的 App 失控了。

避免无缘由的布局变动:即使用户旋转了设备,也不代表整体的布局需要变换;比如,如果你的App  在竖屏模式展示了一网格的图片,那么在横屏模式你没必要展示同样的图片。相反地,你只需要简单地调整网格的尺⼨寸就行了。尽量在  任何环境下都能维持一样的体验。

如果你的 App 只支持一种模式,那么请提供两种屏幕模式的变量:

如果你的App 只能在一种模式下运行,那么确保它能够支持该模式的两种⽅向变化是⼗分重要的。比如,如果你的 App 只在横屏模式运行,那么无论Home 键在左边还是右边,应用都该能正常使用。如果设备被旋转180度,那么你的 App 内容也该同时旋转180度。反之,当用户拿错设备⽅向时,你的 App 没有⾃动旋转, 那么他们就会很⾃然地知道应该旋转设备。你无需告诉他们该如何纠正。

根据当前使用内容来规定相应的旋转⽅向:比如,一个需要用户旋转设备来控制角⾊移动的游戏,就不会在游戏中改变横竖屏的⽅向。但是,它可以根据当前设备的旋转⽅向来展示菜单和引导步骤。

确保你的应用在iPad上也能运:用户很⾼高兴能够灵活地在任一类型的 iOS 设备上运行你的应用。即使你希望⼤多数人在iPhone上使用你的应用,但其界面元素在iPad上仍需保持可见并且实用。如果应用的某些功能需要特定于iPhone  的硬件(如 3D Touch),请考虑在iPad上隐藏或禁用这些功能,并让用户使用应用的其他功能。

IOS12设计规范

在重用现有艺术作品时,请注意宽⾼高比差异:不同的屏幕尺⼨寸可能具有不同的宽高比,导致艺术品出现裁剪,信箱或邮筒。确保所有显示尺⼨寸都能保留重要的可视内容。

设计全屏体验

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

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

插入必要内容以防⽌止剪裁:通常,内容应该居中且对称插入,因此它在任何方向上看起来都很好,没有被圆⻆角修剪,没有被传感器器外壳隐藏,并且不会被用于访问主屏幕的指示器器遮挡。为获得最佳效果,请使用标准的,系统提供的界面元素和⾃动布局来构建界面并遵循布局指南和安全区域由UIKit定义。当设备处于横向时,某些类似应用的游戏可能适合在屏幕的下半部分(延伸到安全区域下方)放置可点击控件,以便为内容留留出更多空间。在屏幕顶部和底部放置       控件时使用匹配的插入,并在Home指示器器周围留留出足够的空间,以便人们在   尝试与控件交互时不会意外地将其作为目标。

IOS12设计规范

插入全宽按钮:延伸到屏幕边缘的按钮可能看起来不像按钮。尊重全宽按钮两    侧的标准UIKit边距。当屏幕底部出现圆⻆角并与安全区域的底部对⻬齐时,屏幕底     部出现的全宽按钮效果最佳 – 这也确保它不会与Home指示灯冲突。

请勿掩盖或特别注意按键显示功能:不要试图通过在屏幕的顶部和底部放置⿊黑条来隐藏设备的圆⻆角,传感器器外壳或用于访问主屏幕的指示器器。不要使用括号, 边框,形状或教学文本等视觉装饰来特别注意这些区域。

IOS12设计规范

请注意状态栏高度:全屏iPhone上的状态栏比旧款iPhone更⾼高。如果您的应用假设状态栏高度为状态栏下方的定位内容,则必须更新您的应用以根据用户的设备动态定位内容。请注意,当语⾳录制和位置跟踪等后台任务处于活动状态时,全屏iPhone上的状态栏不会更改高度。

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

允许⾃动隐藏指示器以便谨慎访问主屏幕:启用⾃动隐藏后,如果用户未触摸屏幕几秒钟,指示灯会淡出。当用户再次触摸屏幕时,它会重新出现。应仅针对播放视频或照片幻灯片等被动查看体验启用此行为。

其他布局注意事项 

确保您的网站在边缘到边缘的显示上看起来很棒。请参阅webkit.org上的为iPhone X设计网站。

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(5-1)视觉设计:适应性和布局(Adaptivity and Layout)

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏