iPhoneX适配分享

fruit

　　点击蓝字关注这个神奇的公众号～

　　号外
　　在适配开始之前，我们首先需要了解iPhoneX新版系统中对于设计的影响（有兴趣的同学可以去官网参阅官方的设计指南进行学developer.apple.com。
　　屏幕尺寸&切图变化
　　01
　　屏幕尺寸
　　对于习惯用375x667尺寸作图的设计师而言，iPhoneX的到来并不会带来太大影响。在移除了主键和边框后，iPhoneX与苹果上一代相比增加了145pt的设计面积。

　　02
　　切图
　　而由于屏幕分辨率的升级，iPhoneX的切图需要使用跟Plus一样的@3x大小来保证视觉元素在屏幕中的完美呈现。
　　安全区概念的引入
　　原有苹果机型中，安全区默认代表除了状态栏以外的屏幕范围，而随着iPhoneX顶部刘海和底部Home indicator的出现，iPhoneX的安全域特指距上44pt，距下34pt的屏幕区域。

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

　　02
　　虚拟Home条属性
　　Home indicator区域中的虚拟‘Home条’目前仅支持黑白两色。不过这块区域开发可以设定隐藏虚拟Home条，让它在固定秒数后消失且消失不影响系统级操作（淘宝和微信iPhoneX页面中已出现）
　　03
　　触碰区域
　　在此区域内的操作会优先响应系统级的操作功能，真机测试中发现虚拟‘Home条’的有效触发区域其实略低于官方大大说明的34pt，因而即使页面底部的操作内容与Home indicator有所重叠，用户依旧可以进行点击操作，只是需要避免放置重要操作功能和功能文字的遮挡问题，毕竟官方还是推荐大家在有操作的情况留足34pt高度的。
　　全屏适配
　　由于iPhoneX整体高度增加，导致原有的全屏展示画面（如闪屏&活动页）无法兼容增高后的屏幕尺寸，裁切/留白的视觉效果都会影响用户的视觉体验，因此需要有针对性地为这些页面单独进行IPhoneX尺寸的比例设计。
　　适配规则
　　顶部元素
　　01
　　顶部Bar
　　调整原有顶部组件统一吸附于距上44pt的状态栏下方，状态栏处背景色吸取顶部Bar背景色保持一致。

　　02
　　顶部带渐变/带画面元素Bar
　　当状态栏无法吸取顶部Bar的背景色或图片适配变形时，有两种方法进行适配：
　　①使用两张切图适配，根据页面效果提供向上加高24pt的背景图片进行替换。这种适配方法呈现效果最佳，但是会使得我们的APP包文件量过大，客观上不适合作为途牛适配的标准
　　②使用一张切图适配，通过缩放来完成页面的适配。这种适配方法无论是向上适配还是向下适配都会产生页面的裁切与留白，对于会员中心这种支持自定义个性化皮肤替换的业务场景，容易丢失画面关键内容的露出或遮挡，可控性较弱。
　　而向下适配中仅裁切顶部的方案需要设计师将画面元素至于偏下的位置来保证适配小屏时的画面效果，这种方式是使用一张切图适配时较好的方案，但是鉴于技术问题，我们暂时也无法实现此种裁切方式。
　　③使用一张切图适配，统一4.7寸屏与iPhoneX屏幕中头部的高度作为最终应用于适配方案，这种适配方式虽然使得iPhoneX上的背景高度没有做到等比例的缩放，但是保证了大小屏双端的基本视觉呈现，是在视觉效果和开发成本中最为折中的适配方式。
　　03
　　透底背景图
　　调整原有顶部组件库中透底Bar的位置吸附于距上44pt的状态栏下方，图片根据页面模块高度进行等比例拉伸
　　04
　　透底运营位
　　通栏的运营广告图片常见于机票、酒店等品类频道，其适配方式前面第二点的方式类似，只能采用一张切图的适配方法，因此用保持广告图高度来进行适配。
　　不同的是此类页面在iPhoneX中呈现使用单独配置白色顶部Bar的方案进行适配，以保证运营banner中文本信息的正常露出。
　　底部元素
　　01
　　底部无操作
　　设定Homeindicaror背景色为透明，信息内容撑满屏幕展示
　　02
　　底部有操作
　　2.1　　底部Tab bar（筛选项、输入框、底部浮出的半屏弹窗等）
　　吸附于距下34pt的Homeindicaror之上，Home indicaror背景色与底部Bar底色保持一致。
　　2.2　　底部邻近操作按钮（如：返回顶部、旅图频道中的上传照片等）
　　向下吸附于距下34pt的Homeindicaror上方，距离Home indicaror的间距与原页面间距保持一致。

　　全屏元素
　　01
　　全屏弹窗
　　调整文本内容于安全区域内，底部有操作按钮的距下增加Home indicaror34高度，距Home indicaror间距与原页面间距保持一致。
　　02
　　左右布局页面
　　当页面中右侧交互内容推出后，如果信息卡片和主屏幕指示条交错叠加，就会稍显信息混乱，建议抽屉导航的宽度根据主屏幕指示条的位置进行调整，完整露出或完全遮挡指示条。
　　03
　　全屏画面（Splash、全屏活动页、全局缺省等）
　　iPhoneX界面中增加的145pt增加了对于内容文本的露出，但是当面对如splash这类的全局页面是，增加的高度会使得全屏画面的视觉中心上移，所以需要针对此类问题进行新增iPhoneX尺寸/　　调整页面元素间距来完成适配。