在过去的11月，我不知道有多少小伙伴成功进入了苹果的新一代iPhoneX iPhoneX。作为Apple近年来的突破，外观和屏幕变化也是我们UED的设计者。他们被老虎的身体震惊了。

在全心全意为用户服务的心情中（事实上，我们知道路上的用户都是本地的✧✧（•̫•），UED团队的朋友在iPhone X之前已经与他们的操作特性接口了发布。匹配，确保全屏用户宝宝的操作体验。

在改编开始之前，我们首先需要了解iPhoneX新系统对设计师界面设计的影响（感兴趣的合作伙伴可以到Apple的官方网站学习官方设计指南，以学习developer.apple.com）。以下是对我们采用这种方式所涉及的几个要点的简要回顾。

✧屏幕尺寸&切割图表更改

1，屏幕尺寸

对于习惯于以375x667尺寸绘图的设计师来说，iPhoneX的到来不会产生太大影响。移除主键和边框后，与Apple上一代产品相比，iPhoneX增加了145pt的设计空间。

2，剪切地图

由于屏幕分辨率的升级，iPhoneX的剪切地图需要使用与Plus相同的@ 3x尺寸，以确保在屏幕上完美呈现视觉元素。

✧安全区概念介绍在原始Apple型号中，安全区默认为状态栏以外的屏幕范围。随着iPhoneX顶部的刘海和底部家庭指示器的出现，当前iPhoneX的安全域是44pt。 ，34pt屏幕区域

对于Tuniu的新在线直播项目，需要将水平屏幕状态的安全区域放置在左侧和右侧，并且Home指示器的位置放置在屏幕的底部。对于这种安排，Apple的官方解释是，无法预测用户是否将“刘海”置于水平握持下的左侧或右侧。如果安全区域未水平放置，则会导致界面和手机边缘中的元素。相对位置不固定。他们认为用户在使用手机时（特别是在玩游戏时）高度依赖手的肌肉记忆。尽管空间利用率较高，但非对称设计与用户的肌肉记忆相反，导致操作失败。用户很容易感到沮丧。

因此，对于需要在界面周围布置操作按钮的实时水平屏界面，需要特别注意在水平屏幕状态下操作按钮的安全区域的适配。

✧主页指示灯

1，后台配置

放置在屏幕最底部的Home指示器集成了原始Home Exit& ;;的功能。切换系统应用。适应过程中的Add方法控制该区域中背景的颜色/透明度/高度/外观。

2，虚拟主页栏属性

Home指示区域中的虚拟Home条目前仅支持黑白。不过，这个区域还有一个鲜为人知的功能，开发可以设置隐藏的虚拟Home栏，让它消失并在固定的秒数后消失不影响系统级操作（目前此功能仅出现在淘宝iPhoneX中部分页面）p>

3.触摸区域

该区域的操作将优先考虑系统级操作功能。在真机测试中，虚拟Home栏的有效触发区域实际上略低于官方解释的34pt，因此即使页面底部的操作内容与Home指示器重叠。用户仍然可以执行点击操作，但是必须避免放置重要操作功能和功能词的遮挡问题。毕竟，官方仍建议每个人在行动时都保持在34pt的高度。

✧全屏改编

由于iPhoneX的整体高度，原始的全屏显示（例如闪屏和活动页面）无法与增加的屏幕尺寸兼容。切割/美白的视觉效果会影响用户的视觉体验，因此设计人员需要针对这些页面进行Targeted IPhoneX尺寸缩放设计。

由于今年全年推出的组件化设计系统，我们在调整开始后，根据组件系统中的几个模块快速制定了有针对性的适应规则设置。

✧顶级元素

1，顶栏

调整原始顶部组件，使其均匀吸附在44pt的状态栏下。状态栏顶部背景颜色的背景颜色是一致的。

2，带渐变/带屏幕元素Bar

当状态栏无法吸收顶栏的背景颜色或图像适应变形时，设计师主要有以下两种方法适应：

1使用两个剪切贴图来适应页面效果，以提供高度为24pt的背景图像进行替换。这种适应方法效果最好，但它会使我们的APP包文件太大，客观上不适合作为一种方式。牛适应标准

2使用剪切和修补程序自适应通过缩放完成页面自适应。这种适应方法将导致页面裁剪和消隐，无论是向上还是向下。对于会员中心，这种支持定制个性化皮肤替换的商业场景容易丢失屏幕关键内容的曝光或遮挡，并且可控性较弱。然而，在向下调整中仅切割顶部的方案需要设计者将图像元素定位到较低位置以确保适应小屏幕的效果。使用切割图时，此方法是更好的解决方案。但是，由于技术问题，我们目前无法实现这种类型的切割。

3使用剪裁和补丁调整来统一4.7英寸屏幕和iPhoneX屏幕中头部的高度，作为会员中心的最终选择。这种调整方法使iPhoneX上的背景高度不相等。缩放，但确保大小屏幕的双端的基本视觉呈现，是视觉效果和开发成本之间最不妥协的适应。

3，通过背景图

调整原始顶部组件库中底栏的位置被吸附在44pt的状态栏下方，图像根据页面模块的高度进行拉伸

4，通过操作位置的底部

横幅的操作广告图片在票，酒店和其他类别频道的主页中是共同的。适应方法的第二种方法是类似的。可以仅使用切割图的一种适应方法，因此广告图的高度用于适应。不同之处在于，这些页面在iPhoneX中使用白顶栏的单独配置进行了调整，以确保在操作横幅中正常显示文本信息，当然我们将继续探索更好的方式来表达这种情况。

底部底部元素

1，底部无操作

将Home indicaror背景颜色设置为透明，并将信息内容设置为填充屏幕显示

2，底部有操作

2.1底部标签栏，过滤器项目，输入框和浮在底部的半屏弹出窗口在34pt处吸附在Home indicaror上。 Home标记背景颜色与底部条形颜色一致。

2.2底部相邻操作按钮（例如：返回顶部，上传旅行通道中的照片等）在34pt Home indicaror上方向下吸附，并且与Home标记的距离与原始页面间距一致。

2.3底部是操作按钮

以牛为例。底部带有操作按钮的场景主要涉及与订单处理密切相关的详细信息，订单和页面。为了确保整个订单链接的顺畅流动以及与iPhoneX模型的完美契合，对于这个模块，我们还进行了一系列的探索和实践。为了配合页面按钮更加和谐，并与iPhone X物理圆角更加集成，我们最终选择了操作按钮的底部来适应规则：保持4.7”屏幕样式不变，修改iPhoneX的底部按钮样式是圆角，一个圆弧为4的计划。

✧全屏元素

1.全屏弹出窗口

调整安全区域中的文本内容，并从底部操作按钮底部增加Home indicaror34高度。 Home标记的距离与原始页面间距相同。

2，左右布局页面

当页面右侧的交互式内容被推出时，如果信息卡和主屏幕指示条是隔行扫描的，则信息会略微混淆。建议根据主屏幕指示条的位置调整抽屉导航的宽度，以完全暴露或完全阻挡指示条。 。

3，全屏（启动画面，全屏活动页面，全局默认等）

在iPhoneX界面中添加145pt会增加内容文本的曝光度，但是当面对诸如飞溅等全局页面时，增加的高度将导致全屏的视觉中心向上移动，因此设计人员需要解决此类问题。添加了iPhoneX大小/调整页面元素间距以完成拟合。

总之，适应规则只需要熟悉官方的基本限制。业务调整后，没有太大的困难。但是，在规则制定完成后，您如何启动不同的业务部门？如何控制各种研发团队？发展效果？如何提高人的效果来完成适应工作？这些问题在项目登陆过程中变得更加痛苦。

幸运的是，在此之前，我们的团队为页面中的基本模块构建并推广了组件系统，以下功能还减少了iPhoneX适应过程的麻烦。

1，自由组合，灵活兼容

以顶部条形组件为例，在制作顶杆组件的过程中，有必要综合考虑不同场景中各元素组合的布局，风格，响应状态，交互效果，兼容性方案等。多个组件。需要能够灵活地组合以构建不同的产品坑和功能模块。

组件开发完成后，需要配置一些可定义的元素以满足不同业务线产品的需求。例如，顶部条组件支持背景颜色调整，显示/隐藏分离线，动态图片等。

2，打开语言，实现统一

长期以来，大多数互联网公司的工作流程是界面设计师的输出界面视觉草案，开发工程师根据视觉草案编辑代码发布了代码。两种语言之间的障碍始​​终存在。每次启动新页面时，都需要为页面元素单独设计和开发。对于一些重复的页面，可以想象人类效果的丧失。组件系统最关键的一点是在开发和开发之间开辟语言。我们将根据组件而不是元素在接口中构建一些具有高重用率的模块，并根据需要调用业务线。该模块取代了业务，真正实现了整站的统一。对模块的任何后续修改都可以通过组件自动同步到每个业务线，从而大大降低了重复测试的成本。

3.单线协作以提高人们的效率

在Tuniu现有的设计框架中，每个设计师都对应自己的业务线，而工作方法更倾向于多线并行。这种形式允许设计人员更深入地设计自己的业务，但是从整体架构层。在大规模视觉修订或模块升级的情况下，这种多线并行方法需要所有业务设计人员参与每个修订过程，并且最终结果难以控制。依靠模块化系统代替页面构建方法，在模块升级/调整过程中，只有对接组件架构组的设计者和开发人员才能实现组件的可视化和可视化。代码升级和前期业务导入的门户将自动更新最新的更改。这种单线通信模式可以有效地减少重复工作中人为的磨损，并且还可以更有效地控制项目的质量。

写在最后

虽然新事物的出现总会引发许多问题，但好的工具和工作方法总是经得起时间的考验，有助于我们更好地进行设计工作。尽管在适应过程中仍然存在一些尚未完善的想法和细节，但仍留下一些遗憾，但正是这些不完善促使我们下一次一路走下去！全力以赴！