iPhone X官方人机交互指南 - 尺寸分辨率布局等_人机交互尺寸图-程序员宅基地
技术标签： iPhone-X 布局 iPhone-X适配 人机交互 适配 iOS
苹果十周年纪念款手机iPhone X已经发布，齐刘海成立当今的热门话题，但是作为开发者必须对最新的iPhone X有一个更全面的了解。
iPhone X
iPhone X包括一个大型，高分辨率，圆形的边缘到边缘的显示器，提供了一个沉浸式，内容丰富的体验，从未像以前那样。
屏幕尺寸
在纵向方向上，iPhone X上的显示屏的宽度与iPhone 6，iPhone 7和iPhone 8的4.7“显示屏的宽度相匹配。然而，iPhone X上的显示器比4.7”显示器高145个，导致大约20％的内容垂直空间。
**为您的应用程序中的所有图稿提供高分辨率图像。
iPhone X具有比例因子为@ 3x的高分辨率显示。
对于字形和其他平面的矢量图形，最好提供独立于分辨率的PDF。
对于光栅化图稿，您可以提供@ 3x和@ 2x版本的作品。**
请参阅图像大小和分辨率和自定义图标。
关于屏幕尺寸的个人补充
iPhone X的尺寸是1125x2436像素，可以看出来1125是750的1.51倍，375的3倍，那么就可以适配@3X。
从上图可知，iPhone X与Plus系列公用一套图，设计稿尺寸选750x1334px，对应输出@2X和@3X图即可。
布局
在设计iPhone X时，您必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或用于访问主屏幕的指示灯遮蔽。
大多数使用标准系统提供的UI元素（如导航栏，表格和集合）的应用程序会自动适应设备的新外形。背景材料延伸到显示器的边缘，并且UI元件被适当地插入和定位。
对于具有自定义布局的应用，支持iPhone X也应该比较容易，特别是如果您的应用使用自动布局并遵守安全区域和边距布局指南。
在iPhone X上预览您的应用程序。您可以使用Simulator（Xcode附带）来预览应用程序，并检查剪辑和其他布局问题。一些功能，如宽彩色图像，最好在实际设备上预览。
提供全屏体验。确保背景延伸到显示器的边缘，并且垂直可滚动的布局（如表格和集合）一直延续到底部。
插入必要内容以防止剪辑。一般来说，内容应该是居中对称的，所以它在任何方向看起来都很棒，不会被角落或设备的传感器外壳夹住，或被访问主屏幕的指示器遮挡。为获得最佳效果，请使用标准的系统提供的界面元素和自动布局构建您的界面。所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。
注意状态栏的高度。状态栏在iPhone X上比在其他iPhone上更高。如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方，则必须更新您的应用，才能根据用户的设备动态定位内容。请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。
如果您的应用程序目前隐藏状态栏，请重新考虑iPhone X上的决定。iPhone上的显示高度为4.7“iPhone的显示屏提供了更多的内容垂直空间，状态栏占据您应用程序可能赢得的屏幕区域状态栏还显示人们发现有用的信息，只能隐藏以交换附加值。
在重复使用现有图稿时，请注意长宽比差异。iPhone X具有不同于4.7“iPhone的长宽比，因此，全屏4.7”iPhone图形在iPhone X上全屏显示时出现裁剪或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按钮也自动显示在键盘的下方。
您的应用程序不能影响这些按钮，因此避免在键盘中重复这些按钮造成混乱。**请参阅自定义键盘。
资源
下载Photoshop和Sketch 资源中的 iPhone X UI设计模板。
智能推荐
jstl标签<c:url>查询分页时拼接参数的用法_jstl 标签输出内容拼接-程序员宅基地
文章浏览阅读1.5k次。先上代码:${ pageContext.request.contextPath }号码段管理 号码段管理 号码段管理 区域号
浅解比SQL更好用的SPL（二）-程序员宅基地
文章浏览阅读118次。从 SQL 到SPL基本查询语法迁移之多表操作上一篇我们针对单表的情形了解了如何把数据计算从 SQL 查询迁移到集算器，或者更准确地说，迁移到集算器所使用的SPL集算语言。这个迁移过程，既有相同的概念，也有不同的思路。接下来，我们一起针对多表的情况看一下集算器和SPL语言是如何发挥更大的..._sql常用比if更好用
国科大高级人工智能10-强化学习（多臂赌博机、贝尔曼）_国科大 强化学习-程序员宅基地
文章浏览阅读1.5k次。文章目录多臂赌博机Multi-armed bandit（无状态）马尔科夫决策过程MDP(markov decision process1.动态规划蒙特卡罗方法——不知道环境完整模型情况下2.1 on-policy蒙特卡罗2.2 off-policy蒙特卡罗时序差分方法强化学习：Reinforcement learning目标：学习从环境状态到行为的映射，智能体选择能够获得环境最大奖赏的行为..._国科大 强化学习
如何用 Visual studio 2003/2005 调试 ASP 应用程序、Javascript 代码(转)_visual studio 2003 asp 远程调试-程序员宅基地
文章浏览阅读1k次。如何用 Visual studio 2003/2005 调试 ASP 应用程序、Javascript 代码 在vs2005中调试ASP网站的错误信息：无法提供此类型的页。说明: 由于已明确禁止所请求的页类型，无法对该类型的页提供服务。扩展名“.asp”可能不正确。 请检查以下的 URL 并确保其拼写正确。 怎么解决这个问题呢？请看下文。 ASP.NET 已经很_visual studio 2003 asp 远程调试
MMO即时战斗：地图角色同步管理和防作弊实现_mmo城镇同步-程序员宅基地
文章浏览阅读1.3w次，点赞2次，收藏29次。一、前言 无论是端游、页游、手游如果是采用了MMO即时战斗游戏模式，基本都会遇到同屏多角色实时移动、释放技能、战斗等场景，于是自然也需要实现如何管理同屏内各种角色的信息同步：例如角色的位置、以及角色身上的装备、时装、buffer等状态的实时切换。同步在网络游戏中是非常重要的，它保证了每个玩家在屏幕上看到的东西大体是一样的，解决同步问题的最简单的方法就是把每个玩家的_mmo城镇同步
Android Studio JNI代码突然无法跳转_android studio jni 类无法自动跳转-程序员宅基地
文章浏览阅读4.5k次。Android Studio JNI代码突然无法跳转AndroidStudio3.2 + gradle 4.6 下突然无法是用 ctrl + 左键 跳转代码。选中代码点击时出现 “Cannot find declaration to go to” 提示. 经过了换 SDK 后比对发现，如果JNI 代码出现这个问题，一般就是 CMake 版本不对。我换成3.6.xxx就好用了。3.10.xxx不知..._android studio jni 类无法自动跳转
随便推点
高通USB 调试总结随笔_高通平台usb debug-程序员宅基地
文章浏览阅读3.5k次。高通USB 调试总结随笔1. 分析USB log2. 正常识别流程3. 修改为host 模式4. USB检测插入原理最近分析了个高通USB 1 通过 主板上的HUB芯片不能正常通信识别USB 外设的问题，注意分析时，一定要再三确认硬件工作正常 ，可以做个实验，剪开一根USB 线，飞线到HUB芯片DPDM 上，如果，USB 接在电脑上，USB 外设接在HUB口上，电脑能正常识别外设，说明HUB芯片正常工作。如下是对软件调试方面的一些方法，写个随笔备份下：1. 分析USB logecho ‘fi_高通平台usb debug
单片机控制PCB板设计的原则和细节说明_单片机下面能不能走线-程序员宅基地
文章浏览阅读679次。设计电路板最基本的过程可以分为三大步骤：电路原理图的设计，产生网络表，印制电路板的设计。不管是板上的器件布局还是走线等等都有着具体的要求。例如，输入输出走线应尽量避免平行，以免产生干扰。两信号线平行走线必要是应加地线隔离，两相邻层布线要尽量互相垂直，平行容易产生寄生耦合。电源与地线应尽量分在两层互相垂直。线宽方面，对数字电路PCB可用宽的地线做一回路，即构成一地网（模拟电路不能这样使用），用大面..._单片机下面能不能走线
携职教育：“涉税信息查询结果告知书”如何查询？_涉税信息告知书-程序员宅基地
文章浏览阅读313次。通过电子税务局【我要办税】—【其他服务事项】—【纳税人涉税信息查询申请】功能申请，待受理通过后，在【我要办税】—【其他服务事项】—【其他涉税事项】—【文书打印】打印涉税信息查询结果。我要查询“涉税信息查询结果告知书”，如何操作？二、其他服务事项—纳税人涉税信息查询申请。二、其他服务事项—其他涉税事项—文书打印。一、我要办税—其他服务事项。一、我要办税—其他服务事项。_涉税信息告知书
Android开发之实现搜索框搜索_android搜索框功能实现-程序员宅基地
文章浏览阅读1.6w次，点赞21次，收藏180次。最近自己在尝试做app开发，遇到搜索框功能，便查找了一下但是感觉自己想的或许更好理解和记住，便自己思考了一下。废话不多说，下面是实现代码，供大家参考，有待改进。先说一下我整体思路，因为刚开始写所以相关数据都没有上传服务器过。首先建立一个数据库，将可以搜索的相关内容存储到数据库当中，然后在搜索框中获取输入的第一个字符，..._android搜索框功能实现
【Java虚拟机】JVM垃圾回收机制和常见回收算法原理-程序员宅基地
文章浏览阅读1.8k次，点赞14次，收藏17次。JVM垃圾回收机制和常见回收算法原理_垃圾回收机制
全栈混合云综合架构方案研究和落地_混合云管纳管双活资源池-程序员宅基地
文章浏览阅读493次。经过一年多团队的刻苦攻坚，目前全栈混合云1.0版本的方案已经落地多个场景，包括（政务云，一城一池，企业云，能源云）等多个场景，已经有超过近百个客户的实践经验，未来全栈混合云将从“可纳管”到“智能纳管”全面迭代，整体架构将想云原生的方向进行全面转化。主要部署全栈混合云管理平台，全部采用虚机/容器化部署模式，包括前台web组件， 中台Java组件， 后台的混合云适配组件，缓存Redis组件，RabbitMQ 组件和数据库PXC集群组件等，每个组件采用多活的方式，对外提供服务，降低单点故障。_混合云管纳管双活资源池