关于iPhone X适配

『iPhone X操作特性』

iPhone X 是苹果公司十周年推出的重点产品,无论外观还是技术都有着革命性的创新,让我们先来回顾下 iPhone X 在界面使用体验上都有哪些操作特性。

屏幕变长

因大部分设计师都用 iPhone 8 来做设计稿,所以我们用 iPhone 8 与 iPhone X 做对比。

(* iPhone 6、iPhone 6s、iPhone 7 与 iPhone 8 屏幕分辨率一致)

iPhone X 使用了 5.8 英寸高分辨率、大圆角显示屏。iPhone X 与 iPhone 8 的显示屏宽度一致都是 375pt ,高度上 iPhone X 高出 145pt,可以在垂直空间多展示约 20% 的画面。

iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同,使用 @3x 的图像,界面内容由手机硬件遮罩成带圆角和传感器的形状。所以界面设计时 iPhone X 和 iPhone 8 的设计宽度可以通用 375pt,而实际 iPhone X 的屏幕像素为 375pt×812pt (1125×2436px),且切图使用 @3x 图片。

乔布斯曾说,手持设备最理想的屏幕尺寸是 3.5寸,这是因为单手操作时3.5寸屏幕基本能做到大拇指无障碍全覆盖。但随着人们对手机功能多样化的需求,主流屏幕远大于3.5寸。

iPhone X 是 5.8 寸,屏幕已经超越了绝大多数用户的拇指覆盖范围,这就导致左上和右下角的单手操作不够方便。很多基于 F 型流动视线设计的 App,通常会将重要的功能入口置于左上角,在 iPhone X 上,视线优先和拇指操作未必可以同时满足,这就要求设计师们对操作盲区的功能进行多重考量,评估是否要针对 iPhone X 做出位置调整。

异形状态栏(齐刘海)

iPhone 8 屏幕状态栏高 20pt,iPhone X 状态栏高 44pt 并有齐刘海形状遮罩。状态栏位置显示的信息,在 iPhone X 上受齐刘海遮罩影响,需要特殊考虑展示效果,甚至重新设计信息展示方式避让状态栏,以便保持各屏幕展示效果的统一。

苹果官方不建议采用隐藏或遮挡状态栏的设计,相对 iPhone 8 ,iPhone X 有更高的纵向显示空间足够展示更多的内容,且状态栏显示了对用户有用的信息,除非隐藏状态栏能带来更大的收益,否则还是建议保留。

增加主屏幕指示条

iPhone X 屏幕最底部设置了主屏幕指示条,用户可从屏幕底端使用滑动手势进入主屏幕或切换应用。这些系统的全局操作会优先于App应用的操作。在设计用户沉浸式的产品如视频、游戏时,可以适当的隐藏主屏幕指示条。

主屏幕指示条下方的内容仍是可点击操作的,但要避免在屏幕最底部设置重要操作内容,且要避免使用与指示条相冲突的操作手势。主屏幕指示条只有黑白两种颜色,会根据指示条底部背景自动切换。

设置安全区

从 iOS 11 开始,苹果引入了安全区域的概念。在 iPhone 8 等屏幕上,安全区域默认是除了状态栏以外的屏幕范围。在 iPhone X 上,安全区域默认是除去顶部状态栏以及底部主屏幕指示条周边的范围。

遵照系统安全区的概念进行设计和开发,大多数使用系统标准UI元素(如导航栏、表单、内容集)的应用程序会自动适应设备的新外形,不需手动调整,这样会大量节省开发人员的工作量。所以在这里提倡大家遵照系统提倡的方式进行开发布局,不仅方便iPhone X 的适配工作,也方便后续iOS 系统更新以及界面元素的自动匹配。

固定在屏幕上展示的内容应始终在安全区域内,如顶导、底部tab栏等。垂直滚动的内容,如列表,图片流,需要一直延伸到底部,也就是会在安全区之外展示,这样才能确保提供全面屏操作体验。

『常用元素适配方案』

正是因为 iPhone X 有着许多操作特性,我们的设计方案必须针对 iPhone X 进行适配。以下是针对常见界面元素整理的通用适配规则。

吸顶元素

对于吸顶元素的适配原则是:避让状态栏,内容区吸附于安全区顶部,状态栏背景颜色根据吸顶元素进行调整。

- 顶部导航栏

导航栏直接平移到安全区顶部即可,iPhone X 状态栏高度自动适配,状态栏底色与iPhone 8 时保持统一。

- 顶部通知

通知区域平移至安全区域,通知背景向上加高 44pt,状态栏内容保持在最上层展示。

吸底元素

吸底元素的适配原则是:内容平移至安全区底部,界面背景层元素(界面背景色、背景图片、全屏地图等)充满屏幕,主屏幕指示条下方区域与吸底元素颜色协调。

- 吸底tab栏、选择器、对话输入框等

信息内容平移至安全区域底部,主屏幕指示条下方填充相应背景色。

- 吸底按钮

信息内容平移至安全区域底部,界面底部背景填充相应背景色,按钮可点击区域不变。

- 底部扩展信息

有些信息位于底部隐藏状态,需展开显示,由于 iPhone X 屏幕较长,且安全区域未撑满屏幕,所以会露出原本隐藏的信息。这时候通常会采用形状遮罩遮盖隐藏信息,或对底部隐藏信息的位置进行特殊调整。

信息流

信息流从主屏幕指示条下方穿过,撑满屏幕显示,滑动浏览信息不受影响。主屏幕指示条下方内容仍可点击,此区域滑动手势优先触发系统操作。信息流最底部内容要保障在安全区内

全屏元素

全屏元素多为图片、视频、游戏画面、全屏地图等信息,适配规则是:全屏元素在 iPhone X 上仍要保持充满屏幕的状态,要保证图像信息比例正确不变形,并接受硬件传感器齐刘海和圆角遮罩。

- 全屏图片

因全屏图片在 iPhone X 上仍要保持全屏的话,会被裁剪掉图片信息,所以要根据画面具体元素进行选择,是充满屏幕裁剪图片,还是在空白区域填充色块(系统默认填充黑色)。

App 开屏图片直接调取 iPhone 8 Plus 在 iPhone X 展示会被裁剪,所以最好是单独出图适配,图片尺寸为 375pt×812pt (1125×2436px @3x)。

(* 因 iPhone X 与 iPhone 8 Plus 都使用@3x图片,所以开屏图片不做单独适配的话可以调取 iPhone 8 Plus 图片裁剪使用)

- 全屏阅读模式

当需要沉浸式阅读的时候,我们会采用隐藏状态栏的形式,将屏幕全部用于展示信息,但是这种形式在iPhone X 上因为齐刘海的原因效果并不理想。所以在 iPhone X 上建议保留顶部状态栏,信息在顶部安全区内展示,状态栏的底色可以根据信息内容进行调整。

左右布局元素

最典型的左右布局就是抽屉导航,抽屉拉出后,如果信息卡片和主屏幕指示条交错叠加,就会稍显信息混乱,建议抽屉导航的宽度根据主屏幕指示条的位置进行调整,完整露出或完全遮挡指示条。

居中元素

居中元素在适配中的影响较小,对话框、Toast 提示等均不需单独适配。

- 对话框

对话框为全局居中的元素,不受四周元素的影响,在 iPhone X 上不需单独适配,保障对话框的背景充满屏幕即可。

- 缺省页

因顶部状态栏是不建议遮挡的部分,所以顶部加上顶导距离会很高,这样就导致整体界面稍有重心下移的感觉。尤其在缺省图形居中的界面,重心下移的感觉更为明显,这种情况下建议对界面元素进行单独适配调整,以便达到视觉平衡。

以上的适配规则基本可以满足所有场景的基础适配需求。当然还有很多特殊场景,不需要特意保持 iPhone 8 和 iPhone X 展现效果的一致性,这种情况就需要单独设计方案,不是通用规则能满足的了。

发表评论
留言与评论(共有 0 条评论)
   
验证码:

相关文章

推荐文章

'); })();