iPhone X 适配指南 (官方翻译版)iPhone X官方人机交互指南 – 尺寸分辨率布局等。

by admin on 2018年10月5日

广告

接大家一块儿交流 QQ群 139852091 公众号

我是jpg

苹果十周年纪念款手机iPhone
X已经颁布,齐刘海成立当今之热门话题,但是当开发者必须对新星的iPhone
X有一个双重健全的了解。

iPhone X

iPhone
X包括一个重型,高分辨率,圆形的边缘到边缘的显示器,提供了一个沉浸式,内容丰富的感受,从未像以前那样。

亚洲必赢手机入口 1

苹果官方地址

屏幕尺寸

以纵向方向亚洲必赢手机入口上,iPhone X上的显示屏的增长率和iPhone 6,iPhone 7和iPhone
8的4.7 寸显示屏的小幅相兼容。然而,iPhone X上的显示器比4.7
寸显示器高145只,导致约20%之情垂直空间。

亚洲必赢手机入口 2

肖像尺寸 1125px×2436px(375pt×812pt @ 3x)

亚洲必赢手机入口 3

景观尺寸 2436px×1125px(812pt×375pt @ 3x)

为汝的应用程序中的保有图稿提供高分辨率图像。iPhone X具有比例因子为@
3x的高分辨率显示。对于字形和外平面的矢量图形,最好提供单身于分辨率的PDF。对于光栅化图稿,您可以供@
3x和@
2x版本的创作。请参见图像大小及分辨率和于定义图标。

iPhone X

iPhone
X包括一个巨型,高分辨率,圆形的边缘到边缘的显示器,提供了一个沉浸式,内容丰富的经验,从未像以前那样。

亚洲必赢手机入口 4

布局

以统筹iPhone
X时,您必须确保布局填满屏幕,并且不见面被装备的圆角,传感器外壳或用来访问主屏幕的指令灯遮蔽。

亚洲必赢手机入口 5

亚洲必赢手机入口 6

大部以专业体系提供的UI元素(如导航栏,表格和聚众)的应用程序会自行适应设备的初外形。背景材料延伸至显示器的边缘,并且UI元件被正好地插入和永恒。

亚洲必赢手机入口 7

4.7寸 iPhone

亚洲必赢手机入口 8

iPhone X

对此拥有从定义布局之应用,支持iPhone
X也应于好,特别是如果您的采用使用电动布局并遵照安全区域及边距布局指南。
当iPhone
X上预览您的应用程序。您可利用Simulator(Xcode附带)来预览应用程序,并检查剪辑和其余布局问题。一些效益,如松彩色图像,最好以事实上设备及预览。

供全屏体验。确保背景延伸到显示器的边缘,并且垂直可滚动的布局(如表格和集聚)一直延续至脚。

亚洲必赢手机入口 9

亚洲必赢手机入口 10

安插必要内容因预防剪辑。一般的话,内容应当是身处中对如之,所以其当其余方向看起都大硬,不会见为角或配备的传感器外壳夹停,或于拜主屏幕的指示器遮挡。为获得最佳效果,请以专业的网提供的界面元素和自动布局构建而的界面。所有应用程序都应遵循UIKit定义之安区域及布局边距,这些区域可以根据设备以及上下文进行适量的填写。安全区域还可以防范内容覆盖状态栏,导航栏,工具栏和标签栏。

注意状态栏的冲天。状态栏在iPhone
X上较在另外iPhone上更强。如果你的使用假定固定状态栏的莫大用于将内容定位于状态栏的江湖,则要创新您的采用,才会根据用户之装置动态定位内容。请小心,当背景任务(如录音与位置跟踪)处于活动状态时,iPhone
X上的状态栏不会见转高度。

若你的应用程序目前隐藏状态栏,请重新考虑iPhone
X上之控制。iPhone上的显示高度为4.7
寸iPhone的显示屏提供了又多的情垂直空间,状态栏占据您应用程序可能赢得的屏幕区域状态栏还亮人们发现中之音,只能隐藏以交换附加值。

亚洲必赢手机入口 11

全屏4.7 寸设备图像

亚洲必赢手机入口 12

在iPhone X上裁剪

亚洲必赢手机入口 13

iPhone X上之邮箱

亚洲必赢手机入口 14

全屏iPhone X图像

亚洲必赢手机入口 15

于4.7 寸配备上剪

亚洲必赢手机入口 16

当4.7 寸配备及展开Pillarboxing

于重复使用现有图稿时,请小心长宽比差异。iPhone X具有不同于4.7
寸iPhone的长宽比,因此,全屏4.7 寸iPhone图形在iPhone
X上全屏显示时出现裁剪或letterboxed。同样,全屏iPhone
X图稿在亮时叫推或让柱状显示全屏显示在4.7
寸iPhone上,确保重点之视觉内容保持在片栽显示尺寸及。

免将交互式控件明确放置在屏幕底边同角落。人们用显示屏底部的滑行手势访问主屏幕和应用程序切换器,这些手势可能会见收回你在这区域被贯彻的自定义手势。屏幕的有数只角或是艰难的地方被众人舒适地到达。

绝不挂或特别注意关键显示力量。请不尝试隐藏设备的圆角,传感器外壳或透过在屏幕顶部和底放置黑色条来访问主屏幕的指示器。不要采用像括号,边框,形状或教学文字等视觉装饰,也只要特别注意这些区域。

容自动隐藏指示灯,以便轻松访问主屏幕。当启用自动隐藏时,如果用户并未动屏幕几秒钟,指示灯将一去不返。当用户更触动屏幕时,它会更出现。这种行为应该只能用于被动观看体验,如播放视频或者照片幻灯片。
请参阅适应性和布局。

屏幕尺寸

当纵向方向及,iPhone X上的显示屏的小幅与iPhone 6,iPhone 7和iPhone
8的4.7“显示屏的宽窄相兼容。然而,iPhone
X上之显示器比4.7”显示器高145只,导致大约20%之情垂直空间。

亚洲必赢手机入口 17

**为公的应用程序中的保有图稿提供高分辨率图像。
iPhone X具有比例因子为@ 3x的高分辨率显示。
对此字形和任何平面的矢量图形,最好提供单身于分辨率的PDF。
于光栅化图稿,您得供@ 3x和@ 2x版本的著述。**
请参阅图像大小和分辨率和打定义图标。

颜色

iPhone X上的显示器支持P3色彩空间,可以发于sRGB更增长,更饱满的颜料。
利用大的水彩来增长视觉感受。使用宽颜色的影以及视频更是栩栩如生,使用宽色的视觉数据与状态指示器更产生影响力。请参见颜色管理。

亚洲必赢手机入口 18

有关屏幕尺寸的私家补充

iPhone
X的尺码是1125×2436像素,可以扣押下1125凡是750之1.51倍,375的3倍,那么尽管足以适配@3X

亚洲必赢手机入口 19
从上图可知,iPhone
X与Plus系列公用一拟图,设计稿尺寸选750x1334px,对承诺输出@2X和@3X图即可。

手势

iPhone
X上之显示屏采用屏幕边缘手势来做客主屏幕,应用程序切换器,通知中心及操纵中心。

布局

在筹划iPhone
X时,您得管布局填满屏幕,并且不会见于装置的圆角,传感器外壳或用来访问主屏幕的指示灯遮蔽。
亚洲必赢手机入口 20
大多数利用规范体系提供的UI元素(如导航栏,表格和聚集)的应用程序会活动适应设备的新外形。背景材料延伸至显示器的边缘,并且UI元件被恰当地插和定位。

亚洲必赢手机入口 21

对于持有从定义布局之运用,支持iPhone
X也理应比较易于,特别是设您的运使用机关布局并遵守安全区域和边距布局指南。

以iPhone
X上预览您的应用程序。
你可以采用Simulator(Xcode附带)来预览应用程序,并检讨剪辑和任何布局问题。有作用,如松彩色图像,最好当实际设备及预览。

供全屏体验。确保背景延伸到显示器的边缘,并且垂直可滚动的布局(如表格和集合)一直持续到脚。

亚洲必赢手机入口 22

栽必要内容因防止剪辑。一般的话,内容应当是坐落中对如之,所以它在其他方向看起都生过硬,不会见让角或配备的传感器外壳夹停,或为访问主屏幕的指示器遮挡。为获得最佳效果,请以规范的系提供的界面元素以及电动布局构建而的界面。所有应用程序都许诺遵循UIKit定义的安全区域与布局边距,这些区域可以因设备与上下文进行适宜的填。安全区域尚好防内容覆盖状态栏,导航栏,工具栏和标签栏。

瞩目状态栏的高度。状态栏在iPhone
X上比在其它iPhone上重复胜。如果你的施用假定固定状态栏的可观用于将内容定位于状态栏的下方,则须创新您的运,才会因用户之设施动态定位内容。请留意,当背景任务(如录音与职务跟踪)处于活动状态时,iPhone
X上的状态栏不会见转移高度。

要你的应用程序目前隐藏状态栏,请重新考虑iPhone
X上之决定。iPhone上的来得高度为4.7“iPhone的显示屏提供了再度多之内容垂直空间,状态栏占据您应用程序可能得的屏幕区域状态栏还显示人们发现中的音讯,只能隐藏以交换附加值。

亚洲必赢手机入口 23
于重复使用现有图稿时,请留心长宽比差异。iPhone
X具有不同让4.7“iPhone的丰富宽比,因此,全屏4.7”iPhone图形在iPhone
X上全屏显示时出现裁剪或letterboxed。同样,全屏iPhone
X图稿在显示时为剪或吃柱状显示全屏显示在4.7“iPhone上,确保重点之视觉内容保持在片种植显示尺寸上。

避免以交互式控件明确放置在屏幕底边同角落。人们采取显示屏底部的滑手势访问主屏幕以及应用程序切换器,这些手势可能会见取消你于这个区域中落实的自定义手势。屏幕的鲜个角或是困难的地方吃众人舒适地到。

甭挂或特别注意关键显示力量。请不尝试隐藏设备的圆角,传感器外壳或经当屏幕顶部和脚放置黑色条来访问主屏幕的指示器。不要采用诸如括号,边框,形状或教学文字等视觉装饰,也使特别注意这些区域。

同意自动隐藏指示灯,以便轻松访问主屏幕。当启用自动隐藏时,如果用户并未动手屏幕几秒钟,指示灯将不复存在。当用户更捅屏幕时,它会更出现。这种作为应当只能用于被动观看体验,如播放视频或像幻灯片。

请参阅适应性和布局。

免惊动系统范围之屏幕边缘手势。人们因这些手势在每个应用程序中劳作。在极少数状况下,像娱乐如此的沉浸式应用程序可能用从定义之屏幕边缘手势,优先受系统的手势

率先只滑动会调用特定于下的手势,而第二破滑动则会调用系统手势。这种行为(称为边缘保护)应该当心实施,因为其让用户难以访问系统级的操作。见手势。

颜色

iPhone X上的显示器支持P3色彩空间,可以来于sRGB更增长,更饱满的颜料。

**动大规模的水彩来增进视觉体验。
采取宽颜色的肖像和视频更是栩栩如生,使用宽色的视觉数据以及状态指示器更发出影响力。**请参阅颜色管理。

亚洲必赢手机入口 24

叠加设计注意事项

参考认证方式准确。iPhone X支持Face
ID进行身份验证。如果你的应用程序与Apple
Pay或外系统身份验证功能并,请不以iPhone X上引用Touch
ID。同样,请确保您的应用程序在支持Touch ID的设备上未引用Face
ID。请参考验证。
并非再次系统提供的键盘功能。在iPhone X上,即使采用自定义键盘,Emoji /
Globe按钮和Dictation按钮也自动显示在键盘的下方。您的应用程序不克影响这些按钮,因此避免以键盘中另行这些按钮造成杂乱。请参见从定义键盘。

手势

iPhone
X上的显示屏采用屏幕边缘手势来走访主屏幕,应用程序切换器,通知中心以及控制中心。

免惊动系统范围的屏幕边缘手势。
人人赖以这些手势在每个应用程序中劳作。

资源

下载Photoshop和Sketch
资源面临的
iPhone X UI设计模板。

初稿链接

**在极少数状况下,像娱乐如此的沉浸式应用程序可能用从定义之屏幕边缘手势,优先受系统的手势

率先只滑动会调用特定于用的手势,而第二蹩脚滑动则会调用系统手势。*这种行为(称为边缘保护*)应该当心实施,因为其让用户难以访问系统级的操作。见手势。

外加设计注意事项

**参照认证方式准确。iPhone X支持Face ID进行身份验证。
如若您的应用程序与Apple Pay或其它系统身份验证功能集成,请无以iPhone
X上引用Touch ID。同样,请保管您的应用程序在支撑Touch
ID的设施上不引用Face
ID。**请参阅验证。

**甭再次系统提供的键盘功能。在iPhone X上,即使以于定义键盘,Emoji
/ Globe按钮和Dictation按钮也自动显示在键盘的人间。
你的应用程序不克影响这些按钮,因此避免在键盘中更这些按钮造成混乱。**请参阅打定义键盘。

资源

下载Photoshop和Sketch 资源遭受的 iPhone
X UI设计模板。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图