[科技资讯] 如何适配iPhone X？来看QQ 音乐这个实战案例复盘总结

编者按:qq音乐团队的设计师们做了一些研究工作，从方案比较选择到改编方案的确定，都是希望让产品更好的适应iPhone X。

本文将和大家详细分享从了解iphone x到研究改编方案，最后实施方案的一切。

△ qq音乐界面

关于iphone x的信息

想尽最大努力的工人必须首先磨快他们的工具。卫灵公"

在我们开始构思任何解决方案之前，我们需要仔细理解事物的本质。比如iphone x的外观有哪些变化，交互手势有哪些不同，屏幕有多大，分辨率如何等等。

1.屏幕尺寸和分辨率

追求全屏的Iphone x启用了5.8英寸超级视网膜高清显示和每英寸458ppi屏幕像素。

屏幕垂直时像素分辨率达到1125px &倍；2436 px(375 pt & times；812pt @3x)，可以发现iphone x的宽度和iphone 7等原4.7寸屏幕一样，但是高度大了145pt，长宽比从16: 9变成了13: 6。

2.顶部传感器

在最大化屏幕的过程中，由于目前技术的问题，苹果采用了30pt高度的圆角黑条放置音箱、前置摄像头和各种传感器，江湖人士称之为“刘海儿”，也意味着原页面这里的内容可能会被屏蔽，导致显示不佳，从而影响用户体验。所以，这也是我们适应过程中的一个重点。

同时，在iphone x的不同状态下，顶部的状态栏也会呈现不同的信息内容:

锁屏状态:左边是操作员姓名，右边是信号网格和电量。

解锁状态:左侧变为时间信息，右侧还包含信号网格和电量。

App管理(按住桌面app图标，app处于晃动状态):右侧只显示“完成”按钮，用于退出app管理。

3.虚拟主页按钮

Iphone x取消了之前的物理回合home键，取而代之的是屏幕底部的134pt & times5pt的虚拟指示条。

原本点击实体主页按钮返回桌面、双击唤起多任务、长按启动siri等基本功能操作也转变为不同的手势操作或新的技术替代。具体的交互手势将在下一节详细描述。为了增强手势的操作感，整个虚拟home键还占据了34pt高度的预留区域。

但是，在未指定的条件下，该虚拟指示条将作为强制设计元素出现在水平和垂直屏幕的屏幕底部，这意味着在该设计中必须考虑周围元素与其的兼容性。所以，这是我们适应过程中的另一个顾虑。只有在需要身临其境的体验(比如播放视频、查看图片)时，建议开发者可以使用虚拟指示条“自动隐藏”功能。

至于虚拟指示条的样式，可惜只有亮/暗两种模式。满足不了女生心中的蜜糖指标，也满足不了孩子眼中的多彩指标。只能是黑色或者白色，尽可能的和周围的元素区分开来。

4.互动手势

由于取消了物理home键，iphone x的基本操作也随之改变，比如:

返回桌面:从底部向上滑动以返回桌面。

多任务处理:从底部向上滑动，滑动到中间，暂停显示所有打开的应用程序。

显示控制中心:从屏幕右上方向下滑动以打开控制中心siri:按住侧按钮询问siri问题。

Apple pay:双击侧面按钮，用apple pay安全支付。