刚刚过去的11月，不知道有多少小伙伴已经成功入坑苹果公司的新一代肾机iPhoneX了呢，作为苹果近几年来的突破之作，其外观及屏幕的变化也是让我们UED的设计师们虎躯为之一震。

　　本着全心全意为用户服务的心情(其实我们知道途牛用户都是土豪✧( •̀ ̫ •́ )，UED团队的小伙伴们早在iPhone X发售前就针对其操作特性进行了界面适配，来保障全面屏用户宝宝们的操作体验。

　　适配开始之前，我们首先需要了解iPhoneX新版系统中对于设计师界面设计的影响(有兴趣的小伙伴可以去苹果官网参阅官方的设计指南进行学习developer.apple.com)。以下仅将我们这次途牛APP适配中涉及到的几个要点进行简单的回顾。

　　✧ 屏幕尺寸&切图变化

　　1、屏幕尺寸

　　对于习惯用375x667尺寸作图的设计师而言，iPhoneX的到来并不会带来太大影响。在移除了主键和边框后，iPhoneX与苹果上一代相比增加了145pt的设计面积。

　　2、 切图

　　而由于屏幕分辨率的升级，iPhoneX的切图需要使用跟Plus一样的@3x大小来保证视觉元素在屏幕中的完美呈现。

　　✧ 安全区概念的引入原有苹果机型中，安全区默认代表除了状态栏以外的屏幕范围，而随着iPhoneX顶部刘海和底部Home indicator的出现，是的现今iPhoneX的安全域特指距上44pt，距下34pt的屏幕区域

　　对于途牛新上线直播项目中，横屏状态下的安全区域需要在左右留边的基础上，将Home indicator的位置置于屏幕下方居中放置。对于此种安排，苹果给出的官方解释是，由于无法预测用户在横向持握下会把「刘海」放在左边还是右边，如果安全区不是横向居中放置的，会造成界面中元素与手机边缘的相对位置不固定。他们认为，用户在使用手机时(尤其是玩游戏的时候)高度依赖手部的肌肉记忆，不对称的设计尽管空间利用率更高，但与用户的肌肉记忆相背，由此导致的失败操作容易让用户沮丧。

　　因此，对于需要在界面四周布置操作按钮的直播横屏界面需要特别注意在横屏状态下操作按钮的安全区域的适配。

　　✧ Home indicator

　　1、背景配置

　　置于屏幕最底部的Home indicator集成了原有Home退出&切换系统应用的功能，适配过程中添加方法可以控制此区域内背景的颜色/透明度/高度/出现与否。

　　2、虚拟Home条属性

　　Home indicator区域中的虚拟Home条目前仅支持黑白两色。不过这块区域也有一个鲜为人知的功能，开发可以设定隐藏虚拟Home条，让它在固定秒数后消失且消失不影响系统级操作(目前此功能仅淘宝iPhoneX部分页面中出现)

　　3、触碰区域

　　在此区域内的操作会优先响应系统级的操作功能，真机测试中发现虚拟Home条的有效触发区域其实略低于官方大大说明的34pt，因而即使页面底部的操作内容与Home indicator有所重叠，用户依旧可以进行点击操作，只是需要避免放置重要操作功能和功能文字的遮挡问题，毕竟官方还是推荐大家在有操作的情况留足34pt高度的。

　　✧ 全屏适配

　　由于iPhoneX整体高度增加，导致原有的全屏展示画面(如闪屏&活动页)无法兼容增高后的屏幕尺寸，裁切/留白的视觉效果都会影响用户的视觉体验，因此设计师们需要有针对性地为这些页面单独进行IPhoneX尺寸的比例设计。

　　得益于今年开始在全站推广的组件化设计系统，在适配开始后我们很快地根据组件系统中的几个模块进行了有针对性的适配方案规则设定。

　　✧ 顶部元素

　　1、顶部Bar

　　调整原有顶部组件统一吸附于距上44pt的状态栏下方，状态栏处背景色吸取顶部Bar背景色保持一致。

　　2、顶部带渐变/带画面元素Bar

　　当状态栏无法吸取顶部Bar的背景色或图片适配变形时，设计师主要有以下两种方法进行适配：