iPhone X 设计适配指南（含 iOS 11 新特性）
iPhone X 设计适配指南（含 iOS 11 新特性）
9 月 13 日凌晨发布会之后，Apple 更新了 iOS 的 Human Interface Guidelines，在 Overview 部分新增了「iPhone X」和「What's New in iOS 11」两个内容。饿了么 UED 的小伙伴也加班加点进行了翻译，希望设计师朋友们可以根据最新的指南规范快速适配 iPhone X 和 iOS 11 。iPhone X 设计适配指南原文链接：翻译：王永全iPhone X 采用了一款高分辨率圆角全面屏，这给用户带来了前所未有的沉浸式阅读体验。屏幕尺寸iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同，即 375pt。垂直高度上增加了 145pt，这意味着增加了 20% 的可视空间。竖屏规格：1125px × 2436px
( 375pt × 812pt @3x ) 横屏规格：2436px × 1125px
( 812pt × 375pt @3x ) 请为你的应用提供高分辨率的设计素材。iPhone X 有非常高的分辨率，请提供 @3x 的设计素材。对于图形类或其他扁平化图像素材，最好使用一倍尺寸下的 PDF 格式。更多信息请查看和。布局在你为 iPhone X 设计界面时，请必须保证所有设计内容不能被屏幕圆角、上方传感器区域、下方返回主页指示器所遮挡。大部分应用都使用了系统提供的标准组件，如导航栏、表单等…这些系统部件会自动适配 iPhone X 的屏幕，部件的背景将会向上拉伸至屏幕边缘，状态栏中的元素将会按照规则重新摆放。对于使用自定义布局的应用，如果想要适配 iPhone X 也比较容易，特别是当应用使用了响应式布局（Auto Layout）时，请参考下方提供的安全区和边距布局规范。在 iPhone X 上预览你的应用。你可以 Simulator（Xcode 附属应用 ）来预览你的应用。请注意检查应用元素是否被屏幕切割、布局是否正常等。对于一些新特性，比如广色域显示，使用实体设备才能起到最好的预览效果。提供全屏使用体验。 确保背景能够延伸到屏幕边缘，垂直滚动布局，如表单或集合页需一直延续至屏幕底部。插入必要内容以防止被裁切。一般来说，内容应该是居中对称的，这样在任何方向上都能获得比较好的观感，也不会被屏幕圆角、传感器区域和主屏幕支持器所影响。为了保证最佳效果，请使用系统提供的标准控件和响应式布局来构建您的页面。所有的应用都应该遵循 UIKit 定义的安全区域和布局边距，这些区域可以根据设备的上下文进行适当的填充。同时，安全区可以防止你的内容覆盖状态栏、导航栏、工具栏和标签栏。注意状态栏的高度。iPhone X 的状态栏比其他 iPhone 上要更高一些。如果您的应用元素尺寸是根据状态栏高度来判断，或是元素位置处于状态栏下方，则必须更新您的应用，请跟据用户的设备来动态定位内容。请注意，当后台任务（如录音和位置跟踪）处于活动状态时，iPhone X 上的状态栏不会改变高度。如果您的应用目前是隐藏状态栏，请根据 iPhone X 屏幕特点重新考虑。iPhone X 的屏幕比 4.7 英寸 iPhone 的屏幕高很多，省去状态栏占据的内容区域可能并不会得到很好的利用。状态栏还展示了人们觉得有用的一些信息，请思考当你将它隐藏时换来的价值要高于显示。在重复使用现有图稿时，请注意长宽比差异。iPhone X 与常规 iPhone 的屏幕长宽比不同，因此，全屏的 4.7 寸屏图像在 iPhone X 上会出现裁切或适配宽度显示。同理 iPhone X 的图片在 4.7 寸屏上也会出现此情况。所以，重要的视觉稿请根据设备型号做相应的调整。避免将可交互控件放在屏幕底部和角落。屏幕底部可以通过手势进入主屏幕和多任务页面，这些手势可能会覆盖您在此区域中实现的自定义手势。屏幕角落可能无法让人们舒适地触达。不要遮盖或引导关注屏幕新特性的关键位置。不要使用放置黑色栏在屏幕上下区域等方式来试图隐藏设备的圆角、传感器区域和主页指示器，也不要使用类似括号、轮廓、形状和教学文案等视觉元素来引导用户关注这些区域。允许自动隐藏回到主屏幕指示器。当自动隐藏开启时，用户几秒钟不触碰屏幕指示器便会渐隐消失。用户触碰屏幕后指示器再次显示。此特性只能用于沉浸式预览样式，比如视频播放或幻灯片样式。更多信息请查看。颜色iPhone X 屏幕支持 P3 色彩空间，这意味着它将可以显示更多的色彩，比 sRGB 要更加艳丽。使用广色域来提高视觉体验。使用了广色域的图片和视频会更加生动，使用广色域的数据图表和状态指示器会更加有冲击力。更多信息请查看。手势iPhone X 使用屏幕边缘手势来访问主屏幕、应用切换、通知中心和控制用心。避免干扰到系统级别的屏幕边缘手势。人们使用这些手势来使用所有应用，在极少数情况下，像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势。优先于系统的手势：第一次滑动会调用自定义手势，而第二次滑动则会调用系统手势。这种自定义行为（称为边缘保护）应该谨慎使用，因为它使得用户难以访问系统级的操作。更多信息请查看。其他设计注意事项检查认证方法的正确性。 iPhone X 支持 Face ID 进行身份验证。如果您的应用程序与 Apple Pay 或其他系统身份验证功能集成，请勿在 iPhone X 上引用 Touch ID。同样，请不要在支持 Touch ID 的设备上引用 Face ID。更多信息请查看。不要重复定义系统提供的键盘功能。 在 iPhone X 上，Emoji、语言切换和语音识别按钮会自动显示在键盘的下方（即使使用自定义键盘）。 您的应用程序不能影响这些按钮，为了避免造成困扰，请不要在键盘中重复定义这些按钮。更多信息请查看。资源在下载 Photoshop、Sketch 模板文件。iOS 11 新特性原文链接：翻译：Fishpaw有了 iOS 11，你能够创作出比以往任何时候都要强大、对用户友好的应用。：利用 AR 增强现实，可无缝融合虚拟对象与真实世界，提供浸入感十足的愉悦体验。：在浏览和搜索时，使用含更大字号、更粗字重标题的导航栏，页面结构会更清晰，场景感知会更强烈。更简洁的图标：填充图形和厚重的笔触使得图标更小，还能增强对比度。参见和。：仅用一根手指，就能将图片、文字等内容从一个地方移到另一个地方。在 iPad 上，甚至能在 App 间拖放。：可为应用集成系统级的生物识别安全特性，以提供人们信任的、安全且熟悉的身份验证。：在支持的设备上运行的 App 能无线读取实物上的电子标签的信息。：遵循布局指南，确保正确地在安全区内插入内容，防止内容与状态栏、导航栏、工具栏或标签栏重叠。：更大的字号和更粗的字重有助于整个系统的可读性。另外，考虑到对辅助功能有需求的用户，除了标准的动态字号，系统也提供了一系列更大的字号。延伸阅读关于 iOS 11 的「导航设计」和「排版变化」，可参阅《》关于 iOS 11 的新交互和应用变化，可参阅《》致谢本文作者为王永全和 Fishpaw，也感谢 icojump、张鹏、梓非徐三位的帮助。版权说明本文翻译自 Apple 官网，如有遗漏或错误还请指正；如需转载需注明出处。原网页已经由 ZAKER 转码以便在移动设备上查看
大家都在看苹果要求开发者调整界面，适应 iPhone X 那块形状独特的屏幕
iPhone X 被库克描述成“未来的手机”，不过对许多应用开发者来说，迎接这个“未来”的第一步是修改应用。
为了实现正面的“全面屏”而又不缺失关键组件，iPhone X 顶部有一条 1/2 屏幕宽度的黑色窄条，依次排列着放着：红外摄像头、泛光灯、距离传感器、环境光传感器、听筒、麦克风、正面摄像头和光点投射器。
再加上显示区域的圆角设计，整块屏幕不再是长方形，而是种一个诡异的异形。按照库克在发布会上的演示，iPhone X 顶部的两端会显示时间、电量和信号格。运营商的名称也不见了，需要滑动时间才能看到。
可能你平时不怎么在意屏幕最上方会显示什么，但缺了一个口子之后，应用开发者需要做一些界面调整的工作。
苹果在发布会后更新了 UIkit 和 XCode 开发工具，以及新的人机界面指南（Human Interface Guidelines），还发布了一个“为 iPhone X 搭建应用”的页面，用视频向开发者介绍怎么对应用做 iPhone X 优化。
指南文件描述到，iPhone X 的屏幕比 4.7 寸的 iPhone 7 高了 145 个像素，使得屏幕显示区域增加 20%，被“额头”分割成左右两块的屏幕区域，也会跟随应用显示内容。
大部分情况下，竖屏显示都不会出现太大问题，应用顶端会显示状态栏也就是放着时间和信号格的横幅，但横屏情况下的“额头”会影响显示区域。
苹果给出的视频展示了苹果认为“理想情况下”适配 iPhone X 的应用应该怎样设计。基本的思路是，调整排版让关键信息不在顶部以及圆角处显示，也不能被底部用于返回主界面的 Dock 窄条影响。
比如用 Safari 浏览网页的时候，界面虽然填充至整个异形屏幕，但左右两边都需要留有空白，文字的排版集中在中间位置。
联系人应用也是一样，当你横屏滑动列表的时候，应用开发者要确保文字不会顶到“额头”的位置。
不过好像有一些情况还是不能解决，比如全屏播放视频和图片，画面铺开在整个屏幕上，但“额头”的区域永远缺了一大块。
对开发者来说，倘若原本的设计利用到了屏幕边边角角的位置，那么现在需要调整整个界面的排版。
有不少应用为了产生“沉浸感”的体验，会在某些情况下隐藏顶部状态栏。很多阅读类应用都利用这种方式尽量让一页展示更多的文字。
但现在他们要改一改设计了，苹果在界面指南中直接说“如果你的应用目前隐藏状态栏，重新考虑这个决定在 iPhone X 上的样子。”
这些调整让开发者开心不起来。Twitter 账号为 @Marcel Wichmann 的界面交互设计师在看了视频之后说：“这种情况下的主要问题不是缺口本身，而是根本没有应用能够做到充分利用（这块异形屏幕）。”
对用户来说可能也是如此，尽管苹果提供了解决方案要求开发者做优化，但无论如果你的屏幕都缺了一块东西，怎么看左右都不对称。
苹果有数量庞大的开发者数量，今年 WWDC 公布的数字是迄今 App Store 已经有超过 1800 亿次下载，分给开发者的钱有 700 亿美元。
所以每一个细微的变动都可能需要庞大的工作量来推动开发者修改。理论上苹果应该给出一个解决方案，让应用开发者不做任何改动就能适应新的形状。如果开发者想要利用那部分区域，再调整自己的应用，而不是反过来。
但现在来看，这些复杂的事情要开发者自己去做了。
题图来自现场拍摄
此新闻来源于好奇心日报
主办:重庆市总工会
国内统一连续出版社:CN50-0012
地址:重庆市南岸区南城大道249号
邮编:40060
广播电视节目制作经营许可证:（渝）字第336号
网络出版服务许可证:(总)网出证(渝)字第001号
公安备案号：01
网站备案许可证号：渝ICP备号-6
投诉举报电话：96128
时报APP二维码扫描下载点击阅读原文
iOS11/iPhoneX最新适配指南 | DragonFly的博客
9月25日 发布，来源：
iPhone发布会前，就隐隐感觉到一波适配工作要袭来的赶脚，果然不出所料。新版iPhone的适配工作主要集中在iPhoneX上，相信大家已经对iPhoneX的刘海记忆深刻了，除了吐槽，留给我们的还有比较麻烦的适配工作。下面简单分享下在整理过程中发现的适配注意点。(适配工作主要在UI方面，后续发现的适配点会陆续补充到该文档中)
上下黑边问题
运行新版Xcode的iPhoneX模拟器，你可能发现之前的APP在iPhoneX屏幕没填充满，上下有黑色区域，应该是你的app之前未用LaunchScreen.Storyboard作为启动页面，可以使用LaunchScreen来当做入场页面，这样APP才会自动适配为iPhoneX的大小。或者修改Assets中的LaunchImage，添加iPhoneX的Launch图如下()。
iOS11新增版本判断API
iOS11版本现在有了简单的API，OC也开始支持swfit的@available语法，不用再手写iOS版本判断了。
if (@available(iOS 11.0, *)) {
// 版本适配}// 或者#ifdef __IPHONE_11_0
目前没发现有iPhoneX的机型判断API，暂时可以使用size来做代替判断。
#define kDevice_iPhoneX CGSizeEqualToSize(CGSizeMake(375, 812), [[UIScreen mainScreen] bounds].size)// 或者if (UIScreen.mainScreen.bounds.size.height == 812) {
NSLog(@"this is iPhone X");}
导航栏适配
iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡，所以需要注意原有这部分内容的设计。iOS11前导航栏的高度是64，其中statusBar的高度为20，而iPhoneX的statusBar高度变为了44，如果是自定义的NaviBar，这部分需要做相应的适配。
iPhoneX的底部增加了虚拟Home区，由于安全区域的原因默认tabBar的高度由49变为83，增高了34，所以自定义的底部TabBar也需要需改其适配方案。可能有部分APP使用了RN来实现页面，不要忘了在RN中修改相应NaviBar/TabBar的高度。
安全区域定义了view中可视区域的部分，帮助我们将view放置在整个屏幕的可视的部分。即使把navigationbar设置为透明的，系统也认为安全区域是从navigationbar的bottom开始的。这样保证不被系统的状态栏、或父视图提供的view如导航栏覆盖。
iOS11的UIViewController和UIView新加了-(void)viewSafeAreaInsetsDidChange方法，当安全区域改变后该方法会被调用。然后在该方法中根据safeAreaInses属性更新子视图中控件的布局位置。当然如果你要改变一个UIViewController的safeAreaInsets值, 可以通过设置addtionalSafeAreaInsets属性来实现, 例如你要自定义一些特殊的样式时。需要注意的是viewSafeAreaInsetsDidChange在UIViewController中第一次调用的时间是在-(void)viewWillAppear:(BOOL)animated调用之后, 在- (void)viewWillLayoutSubviews调用之前。所以可以在viewWillAppear里设置受影响的页面的addtionalSafeAreaInsets属性。
- (void)viewSafeAreaInsetsDidChange{
[super viewSafeAreaInsetsDidChange];
if (@available(iOS 11.0, *)) {
NSLog(@"safeAreaInset list= %@",NSStringFromUIEdgeInsets(self.view.safeAreaInsets));
NSLog(@"safeAreaLayout list= %@",self.view.safeAreaLayoutGuide);
UIScrollView & UITableView
测试过程中发现tableView会有20pt/64pt的偏移，其原因是由于iOS 11废弃了UIViewController的automaticallyAdjustsScrollViewInsets属性，新增了contentInsetAdjustmentBehavior属性，所以当超出安全区域时系统自动调整了SafeAreaInsets，进而影响了adjustedContentInset，在iOS11中决定tableView内容与边缘距离的是adjustedContentInset，所以需要设置UIScrollView的contentInsetAdjustmentBehavior属性。
1.手动适配如果你使用了UITableView、UIScrollView，可以直接使用以下代码做适配，这样系统就不会主动为你设置边缘距离，但是你可能需要手动适配UITableView的contenteInset。
12345678910
#ifdef __IPHONE_11_0
// 单独作用与某个tableViewif ([tableView respondsToSelector:@selector(setContentInsetAdjustmentBehavior:)]) {
tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentN}// 作用与所有的UIScrollViewUIScrollView.appearance.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentN// 设置view的宽高tableView.contentInset = UIEdgeInsetsMake(0, 0, 34, 0);#endif
2.自动适配设置contentInsetAdjustmentBehavior属性为UIScrollViewContentInsetAdjustmentAutomatic，则系统会自动计算contentView的偏移量。
3.设置安全区域的addtionalSafeAreaInset某些情况下，你需要顶部区域，比如广告区域覆盖Status，则可以设置相应页面的addtionalSafeAreaInset属性，这样系统不会将safeArea上调到从status开始。这样可以提供更好的用户体验。例如如果你的SafeAreaInset值为(44,0,0,0)，则需要设置相应的additionalSafeAreaInsets值为(-44,0,0,0)。
if (@available(iOS 11.0, *)) {
self.additionalSafeAreaInsets = UIEdgeInsetsMake(-44, 0, 0, 0);} else {
// Fallback on earlier versions}
4.iOS11开始UITableView开启了自动估算行高，estimatedRowHeight estimatedSectionHeaderHeight estimatedSectionFooterHeight三个高度估算属性由默认的0变成了UITableViewAutomaticDimension，所以heightForHeaderInSection和viewForHeaderInSection应该一起使用，不然tableView顶部滑动的时候会有空白。在适配过程中发现UITableView会在Header/Footer返回size为负值的情况下会(之前遗漏的bug)崩溃，这块可以自查下，而iOS11之前的版本不会。
其他方案……
另外有人对iPhoneX整个UIWindow做了内容的调整，只是UI还是有点丑，感兴趣的同学可以去看看，不过可能这样的设计方案不会通过APPLE的审核。
LocalAuthentication 本地认证
本地认证框架提供了从具有指定安全策略(密码或生物学特征)的用户请求身份验证的功能。例如，要求用户仅使用Face ID或Touch ID进行身份验证，可使用以下代码：
123456789101112131415161718
let myContext = LAContext()
let myLocalizedReasonString = &#String explaining why app needs authentication#&
var authError: NSError?
if #available(iOS 8.0, macOS 10.12.1, *) {
if myContext.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &authError) {
myContext.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: myLocalizedReasonString) { success, evaluateError in
if success {
// 用户验证通过
// 用户验证失败，处理失败信息
// 不能执行策略验证，处理验证错误信息
// Fallback on earlier versions}
LAContext新增API如下：
biometryType属性返回当前设备支持的生物学特征验证方式，他的值可以分别为typeFaceID、typeTouchID或者none。
localizedReason需要验证时展示在弹框上的提示信息
iPhone X 侧边按钮的使用方式：
按一下锁屏；
按两下 Apple Pay；
按三下辅助功能快捷键（比如 VoiceOver）；
按五下 SOS；
短按 Siri；
长按关机；
按一下+Volume Up 截屏。
我要该，理由是：
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）iPhone X适配没那么复杂，但也不是看上去这么简单 - 简书
iPhone X适配没那么复杂，但也不是看上去这么简单
全世界都在转发iPhone X的测评报告和HIG，我可能没有真的看懂...iPhone X 搭载了超大，高清晰度，大圆角，无边框的显示屏，又一次刷新了我们对内容优先的沉浸式体验的认识。——任性地翻译自《Human Interface Guiidelines》屏幕尺寸我们熟知的iphone 系列开发尺寸概要如下：
图1-1：iPhone各机型的开发尺寸
转化成我们熟知的像素尺寸：
图1-2：每个机型的多维度尺寸
倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现；
倍图核心的影响因素在于PPI(DPI)，了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：
8在本次升级中，屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统；然而iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，看看到底iPhone X的适配 我们要怎么考虑。我们看看iPhone X尺寸上的变化：
图1-3：iPhone 8与X 开发尺寸比对
开发尺寸上可以发现X和8的宽度一致，然而在垂直方向上多了145 pt，这就意味着首屏可以展示更多的内容，多出20%的垂直空间。对于京东淘宝而言这应该就意味着更高的商品曝光率或者是更高的运营位价值。从整体设计尺寸看：iPhone 8的像素尺寸是750*1334 px(@2X)，而iPhone X的像素尺寸是 px(@3X)，同样的宽度 一个用@2X图，一个用@3X图，表现出了更高的清晰度。
图1-4：不同倍图在表现区域一致时的效果——来自HIG
iPhone X的屏幕密度为458ppi。有一种说法：认为肉眼可识别的最高密度为300ppi。而iPhone X的458ppi在手机屏幕历史可能仅次于HTC one的468ppi(2013年)， 所以完全可以认为X 是今天市面上最清晰的手机^_^ 无论我这个凡人的肉眼能不能看得出区别来，都不能影响它的傲娇。经@ 小伙伴提醒 三星galaxy系列的PPI都到522了，真是鄙人孤陋寡闻，看样子iPhone X连最清晰的手机 也不能吹嘘了。布局我们再来看看设计师和移动端开发工程师要考虑到的布局：
1-保证你的设计布局能够填充整个屏幕；
2-注意你的核心内容不要被设备的大圆角、传感器(齐刘海)、以及底部访问主屏幕的指示灯遮挡；
图2-1：iPhone X设计应当填充整个屏幕
图2-2：注意X的大圆角和传感器
设计布局要填充整个屏幕，这里有两块区域需要额外考虑：①屏幕顶部，即StatusBar部分，这条状态栏本来并没有可发挥的空间，但是iphone的StatusBar与NavigationBar(以下简称NavBar)背景是可以通栏的，以达到一种完全沉浸式体验的设计。大部分的APP应该也是没有影响的（主流NavBar都采用纯色背景，StatusBar背景沿用NavBar的背景），但是对于那些做了NavBar视觉效果的设计师就要考虑了，你的渐变色背景、或者带底纹的北背景、还包括电商平台商品图是通栏展示的商品图，多少会对实际效果产生一些影响。比如，NavigationBar是渐变色背景的，由于X的Status+Nav高度增加，我们X)的背景图会被等比例拉伸至这两块区域并且剪辑多余部分。如图2-2
图2-3：NavBar与StatusBar背景图适配上的表现
②屏幕底部
图2-4：访问主屏幕的指示灯区域——来自WWDC
屏幕底部的虚拟区，替代了home键，高度为34pt。指示灯区域是一个带着系统功能的内容显示区域，这就意味着它可以展示你内容；同时如果你的底部是TabBar，那么指示灯区域背景会来自于TabBar背景的延伸；如果我们是一个feed流的页面，底部则会展示次屏feed流的局部。
图2-5：指示灯区域——来自WWDC
鉴于圆角、传感器、指示灯区域的影响，iPhone X给出了设计布局的安全区意见：
图2-6：以iPhone8作为参考的安全区
图2-7：iPhone X全屏的安全区（375*734 pt）
再考虑必要的NavBar、TabBar，主题内容显示的安全区需要根据设计需求进行考虑。根据实际需要，我们添加的所有控件都应当在安全区内，如各类型的Button、Edit Menu、Pickers、Sliders等等。
图2-8：所有的控件应当放置在安全区域内
图2-9：安全区域内控件的示范
注意你的内容不要被裁切：建议内容为居中对称已不被圆角或传感器等遮挡。也建议使用系统提供的的元素以及自动布局来构建页面获得更好的适配效果。
注意StatusBar的高度：X的状态栏高度会更高，如果有开发伙伴对NavgationBar的位置是通过固定值进行位置的定位的，建议进行APP升级。
如果你的APP是隐藏StatusBar的，建议重新考虑：X为用户在垂直空间上提供了更多展示余地，且状态栏中也包含了用户需要知道的信息，除非能通过隐藏状态栏带给用户额外的价值，否则苹果建议大家将状态栏还给用户。
——任性地翻译自《Human Interface Guiidelines》
如果看到新的知识点，不定期更新。
我宝宝说的都是对的