ios 改变cell分割线高度_iOS兼容性和布局

iOS>视觉设计>兼容性和布局

人们通常希望他们喜欢的APP能够在任何设备任何环境下都能很好运行。在iOS系统中，界面元素及布局会跟随设备尺寸及设备方向的改变而自动发生改变。比如，在iPad上进行多任务处理，旋转屏幕，它可以以拆分视图的方式来展现。所以，您必须设局一个兼容性强的布局，来使您的应用能应对各种情形。

一.设备屏幕大小和方向

iOS设备有不同大小的尺寸，每种尺寸又有横屏和竖屏两种状态。

图1.1

设备	竖屏尺寸	横屏尺寸
12.9" iPad Pro	2048px × 2732px	2732px × 2048px
11" iPad Pro	1668px × 2388px	2388px × 1668px
10.5" iPad Pro	1668px × 2224px	2224px × 1668px
9.7" iPad	1536px × 2048px	2048px × 1536px
7.9" iPad mini 4	1536px × 2048px	2048px × 1536px
iPhone XS Max	1242px × 2688px	2688px × 1242px
iPhone XS	1125px × 2436px	2436px × 1125px
iPhone XR	828px × 1792px	1792px × 828px
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

二.自动布局

自动布局是一种用来开发响应式交互界面的工具。使用自动布局时，您可以定义一个管理您APP界面内容的规则标准。例如，您可以为一个按钮制定一个规则，无论界面尺寸多大，都让它距离上方图片8pt。

图1.2

当检测到场景(也成为特性)发生变化时，应用会根据既定的规则自动的对布局进行调整。你可以为应用设置成动态响应以满足以下特征：

• 不同的屏幕尺寸、分辨率、色域(sRGB/P3)；

• 不同的设备方向(竖屏/横屏)；

• 拆分视图；

• iPad下的多任务处理模式；

• 文本大小动态改变；

• 基于区域的国际化标准(从左到右/从右到左的布局方式、日期/时间/数字格式、字符装换、文本长度)；

• 系统功能的可用性(3D Touch)；

三.布局引导和安全区域

布局引导定义了一个矩形区域，这个矩形区域不会显示在屏幕上，但是它却有助于内容的定位，对齐和间距的设定。该系统包括包括一个被标准化的间距(内容到边缘)，以保证文本在宽度上获取最佳的用户体验。当然你也可以自定义布局引导。

图1.3 iPhone

图1.4 iPad

1.坚持使用UIKit定义的安全区域和边界。这些布局引导可以确保您插入的内容显示在设备合适的地方。安全区域还可以保证内容中的状态栏，导航栏，工具栏和标签栏出现在合适的位置。标准系统提供的界面视图将自动遵循安全区域和布局引导。

四.尺寸类型

尺寸类型会对内容按照尺寸大小自动进行分配。系统定义了两个尺寸类型，常规尺寸(拥有相对宽松的控件)和紧凑尺寸(拥有相对紧凑的空间)。它们有所对应的宽度和高度。

它们可以组合成不同类型的视图组合：

• 常规宽度，常规高度；

• 紧凑宽度，紧凑高度；

• 常规宽度，紧凑高度；

• 紧凑宽度，常规高度；

和其他的环境变化一样，iOS系统布局是基于内容区域的尺寸类型进行动态调整的。例如，垂直尺寸可能会因为屏幕的旋转(从横屏旋转成竖屏)会从紧凑高度变成常规高度，这样标签栏也可能会跟着视图的变化而变高。

1.设备尺寸类型

根据设备尺寸的不同，会提供给用户不同尺寸的视图组合的全屏体验。

图1.5

设备	横屏方向	竖屏方向
12.9" iPad Pro	常规宽度, 常规高度	常规宽度, 常规高度
11" iPad Pro	常规宽度, 常规高度	常规宽度, 常规高度
10.5" iPad Pro	常规宽度, 常规高度	常规宽度, 常规高度
9.7" iPad	常规宽度, 常规高度	常规宽度, 常规高度
7.9" iPad mini 4	常规宽度, 常规高度	常规宽度,  常规高度
iPhone XS Max	紧凑宽度, 常规高度	常规宽度,  紧凑高度
iPhone XS	紧凑宽度, 常规高度	紧凑宽度紧凑高度
iPhone XR	紧凑宽度, 常规高度	常规宽度,紧凑高度
iPhone X	紧凑宽度, 常规高度	紧凑宽度,紧凑高度
iPhone 8 Plus	紧凑宽度, 常规高度	常规宽度,紧凑高度
iPhone 8	紧凑宽度, 常规高度	紧凑宽度,紧凑高度
iPhone 7 Plus	紧凑宽度, 常规高度	常规宽度,紧凑高度
iPhone 7	紧凑宽度, 常规高度	紧凑宽度,紧凑高度
iPhone 6s Plus	紧凑宽度, 常规高度	常规宽度,紧凑高度
iPhone 6s	紧凑宽度, 常规高度	紧凑宽度,紧凑高度
iPhone SE	紧凑宽度, 常规高度	紧凑宽度,紧凑高度

2.多任务情形下的尺寸类型

在iPad设备上，当应用处在多任务情形下也会出现尺寸类型。

图1.6 2/3拆分视图

图1.7 1/2拆分视图

图1.8  1/3拆分视图

设备	模式	竖屏方向	横屏方向
12.9" iPad Pro	2/3拆分视图	紧凑宽度, 常规高度	常规宽度,常规高度
	1/2拆分视图	N/A	常规宽度,常规高度
	1/3拆分视图	紧凑宽度,常规高度	紧凑宽度,常规高度
11" iPad Pro	2/3拆分视图	紧凑宽度,常规高度	常规宽度,常规高度
	1/2拆分视图	N/A	紧凑宽度,常规高度
	1/3拆分视图	紧凑宽度,常规高度	紧凑宽度,常规高度
10.5" iPad Pro	2/3拆分视图	紧凑宽度,常规高度	常规宽度,常规高度
	1/2 split view	N/A	紧凑宽度,常规高度
	1/3拆分视图	紧凑宽度,常规高度	紧凑宽度,常规高度
9.7" iPad	2/3拆分视图	紧凑宽度,常规高度	常规宽度,常规高度
	1/2拆分视图	N/A	紧凑宽度,常规高度
	1/3拆分视图	紧凑宽度,常规高度	紧凑宽度,常规高度
7.9" iPad mini4	2/3拆分视图	紧凑宽度,常规高度	常规宽度,常规高度
	1/2拆分视图	N/A	紧凑宽度,常规高度
	1/3拆分视图	紧凑宽度,常规高度	紧凑宽度,常规高度

五.常规布局注意事项

1.确保主要内容在默认大小情况下清晰可读。除非在用户要求缩放大小，否则的话请不要在用户阅读重要文本的时候出现横向滚动条，或者通过缩放查看主要图像。

在整个APP中，应该保证一致的视觉外观。通常，具有相似功能的元素在外观设计上也应该保持相似。

2.通过视觉上的权重设计来表达信息层级。大的元素相比于小的元素更能吸引眼球。在一些容易分散用户注意力的环境下(比如厨房或者健身房)，大的元素会更容易被点击，体验会更好点。一般情况下，针对于从左至右阅读的习惯的人群，把重要的视觉元素安排在屏幕上半部，靠左的位置会比较合适。3.元素对齐可以提高阅读效率及传到信息结构和层级。对齐对于整个APP看起来整洁有序，在滚动屏幕的时候也能让用户集中注意力，并且还能让用户快速找到想要查询的内容。缩进和对齐配合使用可以表达内容之间的关联性。

4.尽可能的让您的APP支持横屏和竖屏两种模式。人们更喜欢在任何模式下都能很好的使用APP，所以您的APP最好能符合用户期望。

5.为应用中文本大小变化做好准备。当用户在设置面板里改变了系统文本大小，他们总希望大部分的APP能适应这些变化。为了适应文本大小的改变，您可能需要调整您APP的页面布局。

图1.9

图1.10

6.为交互元素设置足够(大)的点击区域(热区)。所有的可点击控件都不得小于44pt*44pt大小的可点击区域。

图1.11 4.7英寸iPhone

图1.12 5.8英寸iPhone

7.请在多个设备上预览您的APP。您可以使用模拟器(Xcode附带的)来预览您的应用界面在不同尺寸下裁切后的样子及布局的变化。如果您的浏览器支持横屏模式，请保证在横屏模式不论是向左或是向右翻转，界面依然保持良好。全屏模式下，iPhone的图像不能进行倒置显示。某些功能只能适合在真机上测试(比如检查APP中广色域的样式)。8.在尺寸较大的设备上应该设置一个足够的边距，以提高阅读体验。大的边距可以减小文本区域单行的长度，从而提高阅读体验。

六.根据内容做出适应的变化

1.当环境(比如设备尺寸)改变时，要保证当前的焦点内容不变。在您的APP中，内容才是第一优先级，如果环境改变造成了内容焦点的改变，给用户造成“APP失控了或者崩溃了”这种困惑。

2.避免无缘无故更改布局。即便是用户旋转设备，也不代表整体的布局都要跟着改变。比如，您的设备在竖屏情况下显示一张图片，在横屏下，他没你要也显示相同外观的图片。相反，你可以通过改变图片的尺寸来适应横屏模式，尽量在任何环境下都能维持一样的体验。

3.如果您的APP只支持一种屏幕模式，那么您也最好提供两种模式的变量。一个仅支持横屏模式的应用，无论是向左或向右旋转成横屏，它都应该能很好的运行。一个仅支持竖屏模式的应用，当设备旋转180度，其内容也应该旋转180度-除了iPhoneX(不支持倒置的竖屏模式)。如果你的应用只支持一种模式，并且你没有按照正确使用方式来放置它，它会自动的旋转到对应屏幕模式，不需要您去纠正。

4.根据当前的视图内容来自定义您应用对屏幕旋转的响应。例如，一个通过旋转屏幕来让角色移动的游戏应用，就不会在游戏中通过旋转屏幕来切换屏幕模式。但是，它可以根据当前的设备方向来显示菜单和引导步骤。

5.确保您的APP不仅能在iPhone上很好运营，也要能在iPad很好运行。用户可以很灵活的在这两种不同的设备上切换运用您的应用。即便是您希望您的APP主要在iPhone端上展示，但也要能保证他在iPad端可用。如果在iPhone上的一些基于硬件的特殊功能(如3D Touch)，无法在iPad上使用，那么请在iPad上禁用或隐藏这些功能，并让用户使用其他功能。

图1.13 4.7英寸全屏图片

图1.14 5.8英寸裁切图片

图1.15 5.8英寸垂直嵌套图片

图1.16 5.8英寸全屏图片

图1.17 4.7英寸裁切图片

图1.18 4.7英寸水平嵌套图片

6.在使大量使用图像资源时，请注意在不同设备上长宽比例差异。不同的设备尺寸可能具有不同的宽高比，这将会造成图像资源在不同的设备下被裁剪、水平嵌套或垂直嵌套。确保被裁剪或嵌套的图像资源的主要部分被显示出来。确保在所有设备上都能显示图像的最重要部分。

七.设计全屏体验

1.将可视元素撑满全屏。确保背景图能延伸到屏幕边缘(撑满全屏)；对于垂直可滚动的区域(比如列表视图和集合视图)，确保能延伸到底部。

2.避免将交互控件设置在屏幕最底端或者角落中。在屏幕的底部安置了用来返回首屏(原来的HOME键)和快速访问应用切换器的滑动手势操作，这些交互将会影响到用户设置在此处的自定义交互。而在屏幕角落的操作因为距离手指太远，所以用户也很难触及到它们，体验也不好。

图1.19

3.放置重要的内容被裁切掉。一般情况下，内容是居中对齐的，这样做不仅可以让内容在设备的各个方向(横屏或竖屏)都能保证不错的视觉效果，还能保证元素不被设备的圆角裁减掉(如iPhoneX)，不被设备的传感器覆盖掉(如iPhone的刘海屏)，不被Home键或应用切换器(iPhoneX)交互影响到。为了获取最佳的效果，请使用标准的，系统提供的界面元素和布局方式来构建界面，并遵循UIKit定义的布局引导和安全区域。当设备处于横向时，某些APP(比如游戏类)允许在屏幕的底端(甚至延伸到安全区域外)放置可点击的控件，以便为它的内容视图预留更大的区域。如果将交互控件放置在屏幕的底端或顶端，请为这些控件留有足够的空间来避免他们和系统的Home键交互发生重叠。由于Home键位置是固定在中间的，所以可以通过移动APP界面视图来和Home键位置发生错位。

图1.20

图1.21

4.设置通栏按钮。如果通栏按钮的宽度撑满全屏(延伸到安全区域外)，那么它看起来就不像按钮了。所以对于通栏按钮，请按照标准的UIKit规范来设置标准的边距。通栏按钮最好设置成具有圆角的，位置上和安全区域下边缘对齐的样子--这样还能避免和Home键(iPhone X)发生交互干扰。

5.不要为一些元素设置蒙版或者添加其他特殊效果。不要试图通过设置一些视觉效果来隐藏设备圆角，刘海以及Home按钮(iPhoneX)。也不要试图通过一些特殊标记(如括号，边框，形状或引导文本)这些区域。

6.注意状态栏的高度。相比于早期的iPhone，全面屏(如iPhoneX)的状态栏会比较高。如果您的内容视图是以状态栏高度为定位的，那么请修改您的APP来使您的内容视图会根据用户设备不同进行动态调整。请注意，在全面屏下，状态栏高度是固定的，所以状态栏上出现定位及语音提示符时，并不会发生高度上的改变。

7.如果您的APP在老版本的iPhone下时隐藏状态栏的，那么在全面屏的iPhone上请重新考虑是否隐藏状态栏。与旧版的iPhone相比，全面屏的iPhone在垂直高度拥有更大的空间，状态栏所占的高度其实是不会影响到您APP的内容展示的。状态栏经常显示一些非常有用的信息，所以如果隐藏状态栏并不会带来更多的好处，就不必隐藏。

8.慎重设置Home键的自动隐藏选项。如果启动自动隐藏Home键，那么用户停止触碰屏幕几秒钟后，Home键指示器就会自动隐藏，你可以通过再次触及屏幕来唤醒(显示)Home键的指示器。这种设置经常出现在一些视频播放界面或者幻灯片播放界面等沉浸式体验的场景。

八.其他布局注意事项

1.确保您的网站在边缘显示处理上很棒。

注释

Adaptivity and Layout    兼容性和布局

Layout guides    布局引导

Size classes    尺寸类型

compact     紧凑

artwork    图像(图像资源)

letterboxed    水平嵌套

pillarboxed     垂直嵌套

app switcher    应用切换器

full-width button    通栏按钮

2018.12.28  更新