途牛iPhoneX适配揭秘：组件化系统下的动态设计

底部元素

1、底部无操作

设定Home indicaror背景色为透明，信息内容撑满屏幕展示

2、底部有操作

2.1 底部Tab bar、筛选项、输入框、底部浮出的半屏弹窗等

吸附于距下34pt的Home indicaror之上，Home indicaror背景色与底部Bar底色保持一致。

2.2 底部邻近操作按钮（如：返回顶部、旅图频道中的上传照片等）

向下吸附于距下34pt的Home indicaror上方，距离Home indicaror的间距与原页面间距保持一致。

2.3 底部为操作按钮

以途牛为例，底部有操作按钮的场景主要涉及详情、订单此类与下单流程强相关的页面之中，为了保证用户整个下单链路的流畅及与iPhoneX机型的完美适配，针对此模块，我们也进行了一系列的探索与实践。

本着页面按钮与iPhone X物理圆角兼容更和谐、更整体的初衷，我们最终选定底部为操作按钮的适配规则为：保持4.7”屏样式不变，修改iPhoneX中底部按钮样式为圆角，圆角弧度为4的方案。