发布时间:2019-5-15 分类: 电商动态
本文由Apple官方人机交互指南翻译,希望对您有所帮助。
iPhone X屏幕更大,更高分辨率,圆角,以及在屏幕边缘显示的能力,为我们提供了前所未有的身临其境,内容丰富的体验。
屏幕尺寸
在垂直尺寸方面,iPhone X屏幕的宽度与iPhone 6,iPhone 7和iPhone 8的宽度相同。不同之处在于iPhone X比4.7英寸屏幕高出145pt,这给出了垂直内容。空间增加20%。
iPhone X支持高分辨率应用程序图稿。 iPhone X具有高分辨率屏幕,比例因子为@ 3x。对于字体和其他平面样式矢量图形,最好提供高分辨率的PDF图稿。对于栅格化的艺术作品,最好同时提供艺术作品的@ 3x和@ 2x版本。请参阅“尺寸,分辨率”和“尺寸,分辨率”。和“自定义图标”各节详情。
布局
设计iPhone X应用程序时,请确保内容填满整个屏幕,同时确保设备的圆角,传感器外壳和其他屏幕指示器不会遮挡内容。
如果应用程序使用系统附带的UI元素(例如导航栏,表格和集合),这些元素将自动适应系统的新形状。延伸到屏幕边缘的背景材料和UI元素将自动放置在正确的位置。如下所示。
如果应用程序使用自定义布局,则与iPhone X兼容相对容易,特别是对于使用自定义布局并遵循安全区域和边缘布局指南的应用程序。
在iPhone X上预览您的应用程序。您可以使用Simulator(Xcode附带的软件)模拟iPhone X上的应用程序并检查大小和其他布局问题。某些功能(如宽色图像)最好在实际设备上预览,以确保没有问题。
提供全屏体验。确保背景位于屏幕之外,并且仍然可以将确保垂直滚动的布局(例如表格和集合)刷到屏幕底部。
插入额外内容以避免裁剪内容。一般来说,内容是对称居中的,从任何角度来看都不足为奇;它还确保由于屏幕的圆角而不会裁剪内容,并且内容不会被屏幕上的传感器外壳捕获。用指示灯阻挡。要获得最佳布局,请使用系统提供的标准界面元素和自适应布局来构建应用程序界面。所有应用程序都应遵循UIkit中定义的安全区域和布局边界,以确保设备和文本之间的合理填充。安全区还确保状态栏,导航栏,工具栏和标签栏不会遮盖内容。
请注意状态栏的高度。 iPhone X上的状态栏略高于其他iPhone上的状态栏。如果您的应用认为状态栏的高度已修复且内容位于状态栏下方,则您必须将应用内容的位置调整为用户的设备。另请注意,当正在进行录制和位置跟踪的任务时,iPhone X上状态栏的高度也会保持不变。
如果您的应用隐藏了状态栏,现在您需要重新考虑该计划。与4.7英寸iPhone相比,iPhone X的屏幕为内容提供了更多的垂直空间,iPhone X占用的区域可能无法被您的应用程序充分利用。状态栏还允许用户查找有用的信息。只有在交换其他值时才能隐藏状态栏。
使用现有图像时,请注意屏幕宽高比的差异。如图1所示。 iPhone X和4.7英寸iPhone具有不同的宽高比。当iPhone X全屏显示时,4.7英寸iPhone上的全屏图像将被裁剪或设置为letterboxed。同样,当iPhone X全屏图像显示在4.7英寸iPhone上时,也会出现裁剪或背包式显示屏。在两种不同的屏幕尺寸上显示时,请确保重要内容不会丢失。
不要将交互式控件放在屏幕的底部或角落。当人们位于屏幕底部时,他们会使用滑动手势来访问主屏幕和其他不在这些区域中互动的应用。同时,屏幕的远端角落的用户很难到达。
请勿掩盖或特别注意屏幕的按键显示功能。请勿在屏幕顶部和底部放置黑色条纹,以隐藏主屏幕上的设备圆角,传感器外壳或指示灯。不要使用括号,边框,形状或指示性文字等视觉装饰,不要特别注意这些区域。
允许自动隐藏灯光,以便轻松访问主屏幕。当自动隐藏灯打开时,如果用户在几秒钟内没有触摸屏幕,则隐藏灯光。如果用户再次触摸屏幕,指示灯将在此处亮起。此行为仅在播放视频或查看被动观看体验(如照片幻灯片)时有效。
颜色
iPhone X上的显示屏支持P3色彩空间,产生比sRGB更饱和的色彩。
使用更多颜色来增强视觉体验。使用更多颜色将使您的照片和视频看起来更逼真,并使您的视觉数据和状态指示器更加直观。
手势
iPhone X屏幕使用屏幕边缘手势来访问主屏幕,应用程序切换器,通知中心和控制中心。
不要影响系统层的屏幕边缘手势。人们在每个应用上都使用这些手势。在极少数情况下,像游戏这样的沉浸式应用需要自定义高于系统级别的屏幕边缘手势。例如,第一次滑动将唤起特定于应用的手势,第二次滑动将唤起系统级手势。应谨慎使用此行为(称为边缘保护),因为它可能使用户难以访问系统级操作。
其他设计考虑因素
设备认证方法准确。 iPhone X支持Face ID身份验证。如果您的应用程序与Apple Pay或其他系统身份验证功能集成,请不要在iPhone X上使用Touch ID。同样,应用程序不应在支持Touch ID的设备上使用Face ID。
请勿复制系统提供的键盘功能。在iPhone X上,即使您使用自定义键盘,Emoji/Globe按钮和Dictation按钮也会自动出现在键盘下方。您的应用不应影响这些按钮,因此请在键盘上使用
请勿重复系统提供的键盘功能。在iPhone X上,即使使用自定义键盘,Emoji/Globe按钮和Dictation按钮也会自动显示在键盘下方。您的应用程序不会影响这些按钮,因此请避免重复键盘上的这些按钮以引起混淆。