iPhone X 刘海儿打理指南

屏幕大小

在竖屏下,iPhone X 上的显示的宽度与 iPhone 6,iPhone 7和 iPhone 8的4.7“显示屏的宽度保持一致。然而,iPhone X 比4.7”显示屏高了145个点,这导致增加了大约20%的内容垂直空间。

Portrait

Landscape

1125px × 2436px (375pt × 812pt @3x)

2436px × 1125px (812pt × 375pt @3x)

布局

在 iPhone X 布局中,最关键的是:必须确保布局填满屏幕,同时又不会被设备的圆角,传感器外壳或用于访问主屏幕的指示灯所遮盖。

可喜的是,大多数标准的系统提供的UI元素和控件(如 navigation bars,tables 和 collections)都已经为新外形做了很好的适配。 背景已经延伸到显示器的边缘,并且UI元件被很恰当地插入和定位在安全区域。 因此,对于具有自定义布局的 App,支持iPhone X 也应该比较容易,特别是如果使用了 AotuLayout 并遵守安全区域(safe area)和边距布局(margin layout)指南。这些在上文都已经有过较详细的阐述。 下面说几点需要特别注意的:

在 iPhone X 上预览 App**😗* 在拿到新机之前,也可以先使用 Simulator 来预览和检查下布局问题。 但是一些依赖硬件的功能,如图像效果和交互体验,最好还是在真机上预览。

始终保持全屏体验: 确保背景延伸到显示区域的边缘,并且垂直可滚动的布局(如 tables 和 collections)一直延续到底部。

防止边缘内容被裁剪: 一般来说,内容应该是居中对称的,这样它在任何方向看起来都会很棒,不会被边角角或设备外壳夹住,或被主屏幕的指示器遮挡。 为了获得最佳效果,请使用标准的系统界面元素和 AutoLayout 构建界面。 所有 App 都应遵循 UIKit 定义的安全区域和布局边距,因为这些区域可以根据设备和上下文进行适当的填充。 安全区域还可以防止内容覆盖status bar, navigation bar, toolbar, 以及 tab bar.

注意 status bar 的高度: status bar 在iPhone X 上比在其他 iPhone上更高。 如果假定你固定 status bar 的高度用于将内容定位在 status bar 的下方,那么现在必须更新你的的 App,才能根据用户的设备动态定位内容。 特别需要注意,当背景任务(如录音和位置跟踪)处于活动状态时,iPhone X上的状态栏不会改变高度。

重新考虑隐藏 status bar: iPhone X 较之显示高度为4.7“iPhone 的显示屏提供了更多的内容垂直空间,status bar 占据的只是扩展出来的屏幕区域。况且 status bar 更直观的显示用户有用的信息,如果非要隐藏状态栏,那最好用与这些信息同等重要的内容替代。

注意长宽比差异**😗* iPhone X 具有不同于4.7“iPhone 的长宽比。因此,全屏4.7”iPhone 图形在iPhone X 上全屏显示时出现裁剪或 letterboxing 。同样,全屏iPhone X 图形全屏显示在4.7“iPhone 上时也会被裁剪或 pillarboxing ,因此要确保重要的视觉内容适配这两种尺寸。

避免交互式控件出现在屏幕底部和角落**😗* iPhone X 提供了显示屏底部的滑动手势来访问主屏幕和应用程序切换器的新交互方式,这些手势可能会取消在此区域中实现的自定义手势。 况且屏幕的两个角落过多复杂的交互也不是最佳体验的良好实践。

不要遮挡或者特别修饰显示特性来引起用户注意: 请勿尝试隐藏设备的圆角、传感器外壳,或者通过在屏幕顶部和底部放置控件来访问主屏幕的引导。也要特别注意不要试图使用像括号,边框或各种符号等视觉修饰这些特殊区域。

为了轻松访问主屏幕允许自动隐藏指示器: 当开启自动隐藏时,如果用户离开屏幕几秒钟,指示器将消失。 当用户再次触摸屏幕时,它会重新出现。 这种行为应该只能用于提升观看体验,如播放视频或照片幻灯片。

色彩

iPhone X 的显示器支持 P3 色彩空间,它可以产生比 sRGB 更丰富,更饱和的颜色。

可以使用 wide color 来增强视觉体验。 它可以让照片和视频更加逼真生动。

手势

想必大家都在发布会上看到了,iPhone X 上的显示屏可以使用屏幕边缘手势来访问主屏幕,应用程序切换器,通知中心和控制中心。适应这个新变化的同时,对于开发者要特别注意:避免干扰系统范围的屏幕边缘手势:用户依赖这些手势在每个 App 中操作,所以在极少数情况下,比如游戏这种强调沉浸式体验的 App 可能需要自定义的屏幕边缘手势,优先级高于系统的手势。 这种行为(称为边缘保护)应该谨慎使用,因为它使得用户难以访问系统级的操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值