发布时间：2019-7-2 分类： 电商动态
QQ音乐团队的设计师们做了一些研究工作，从节目选择的比较到适应计划的确定，都希望能让产品更好地适应iPhone X.
本文将与您分享从了解iPhone X到适应项目研究和最终实施的所有内容。
△QQ音乐界面
有关iPhone X的信息
工人必须首先磨练他们的工具——《论语 · 卫灵公》
在着手解决任何问题之前，我们需要仔细了解事物的本质。例如，对iPhone X的外观进行了哪些更改，交互式手势有何不同，屏幕有多大，分辨率是多少？
1.屏幕尺寸，分辨率
全屏iPhone X的追求使得5.8英寸超视网膜高清显示屏具有458ppi的屏幕像素密度。
在垂直屏幕中，像素分辨率达到1125px&次; 2436px（375pt&次; 812pt @ 3x），你会发现iPhone X的宽度与原来的4.7英寸屏幕（如iPhone 7）的宽度相同，但高度为145pt，长度宽度比率也发生了变化从原来的16: 9到13: 6.
2.顶部传感器
在最大化屏幕的过程中，由于当前的工艺问题，Apple使用黑色30pt黑色圆形条带放置扬声器，前置摄像头和各种传感器。这条河的名字叫做“刘海尔”，这意味着这里原始页面的内容可能会被遮挡，导致显示效果不佳，影响用户体验，因此这也是我们适应过程的重点。
同时，在iPhone X的不同状态下，顶部的状态栏也会显示不同的信息内容：
锁定屏幕状态：左侧的操作员名称和右侧的信号网格和电源。
解锁状态：左侧成为时间信息，右侧与信号网格和电源相同。
应用程序管理（长按桌面应用程序图标，应用程序处于抖动状态）：右侧仅显示“完成”按钮以退出应用程序管理。
3.虚拟主页
iPhone X取消了之前的实体圆形主页按钮，并将其换成134pt&次; 5pt虚拟栏位于屏幕底部。
原始Home键的原始功能返回桌面，双击唤起多任务，长按启动Siri等，也成为不同的手势操作或新技术替代，具体互动手势将在下一节中详述。为了增强手势的操作，整个虚拟Home键也占据高度为34pt的保留区域。
在非特定条件下，此虚拟指示条将是在水平和垂直屏幕中出现在屏幕底部的强制性设计元素，这意味着必须将周围元素视为与此设计兼容，因此这又是另一个重点。我们的适应过程。建议开发人员仅在需要沉浸式体验（例如播放视频或查看图片）时才使用虚拟栏“自动隐藏”功能。
不幸的是，关于虚拟指示条的样式，只有Light/Dark模式。它不能满足女孩的心形指示条，也不能满足孩子眼中彩色指示条的要求。它只能是黑色或白色，以尽可能地区别于周围的元素。
4.交互式手势
由于实体Home键已被取消，因此iPhone X的基本操作也已相应更改，例如：
返回桌面：从底部向上滑动以返回桌面。
多任务处理：从底部向上滑动并向中间滑动以暂停以显示所有打开的应用程序。
显示控制中心：从屏幕右上方向下滑动以打开控制中心siri：按住侧面按钮询问Siri。
Apple Pay：双击侧面按钮以使用Apple Pay安全付款。
值得一提的是，虚拟指示条的干预及其手势要求我们在设计阶段更仔细地考虑屏幕底部和底部之间的相互作用，以避免误操作。
5.安全区域
安全区域，熟悉且不熟悉的单词。
熟悉是因为在图形设计中，由于印刷和切割过程中的错误，设计者需要为设计草案保留“流血”位置，以确保设计内容处于安全区域;陌生，因为互联网设计中提到的很少。
这一次，由于iPhone X的设计理念和流程问题，Apple还推出了“安全区”的概念。
根据上述顶部传感器和虚拟主页键的不同要求，Apple在水平和垂直屏幕状态下提供了安全区域的可视规范。
垂直屏幕：当屏幕垂直时，从44pt的底部移除屏幕底部，底部高达34pt，中间部分被视为安全区域。
水平屏幕：水平屏幕相对复杂，因为虚拟指示条通常出现在屏幕的底部，因此不仅44pt空白位置在屏幕上左右，而且21pt位置将留在屏幕屏幕下方。
至于为什么没有“刘海尔”方面也会留下一个空白的位置，那是苹果认为，“刘海尔”出现在左侧或右侧不确定，以便安全区内的内容显示，你可以避免因屏幕旋转而导致UI元素位置的变化。
适应方案的预研究，比较和选择
在了解了iPhone X的基本情况后，我们可以大致掌握需要调整的要点。它是安全区域的布局，全屏图像的缩放以及边界的交互式手势。那么，可以使用哪些解决方案来进行这些调整？
1.安全区域布局
选项1：
对于iPhone X的新安全区域，特别是如果具有最佳效果的页面内容可能被遮挡，我们可能首先想到一个解决方案——通过添加适配器栏，将页面内容移动到某个位置即使我们可以将适配器栏定义为我们产品品牌的颜色，这似乎可以满足用户的心理吸引力。
但是如果你考虑一下，这种简单而粗鲁的方法并不符合Apple想要传达的综合屏幕设计概念。该官员还建议不建议以这种方式实施改编。否则，我真的添加了一个黑色适配器。谁能发现您使用的是iPhone X？
选项2：
由于iPhone X的安全区域，页面内容仅限于安全区域，在水平屏幕中更明显，在安全区域外更白。
Apple也知道这个令人尴尬的显示，因此它引入了元标记的视点扩展属性—— perspective-fit。在iOS 11中，视点匹配也正式添加到CSS Round Display规范中。
视口拟合可用于设置可见窗口的大小。它有三个属性值：
自动：默认值。此值不会影响初始布局窗口，并且整个网页都可见。
包含：初始布局窗口和可视布局窗口设置为最大的矩形。
封面：初始布局窗口和可视布局窗口设置为设备物理屏幕的已定义矩形。
因此我们可以通过perspective-fit=cover来解决问题，并使页面内容跳出安全区域。
跳出安全区域框架后，第二步当然需要设置动态边距以避免屏幕圆角，顶部传感器和虚拟指示条。 IOS11提供了一个新的css变量——常量（safe-area-Inset-※）。
常量（safe-area-inset- *）提供四个方向的值：
常量（safe-area-inset-top）：设置视口顶部安全区域的数量。
常量（安全区域插入底部）：设置视口底部安全区域中的数量。
常量（safe-area-inset-left）：设置视口左侧安全区域的数量。
常量（safe-area-inset-right）：设置视口右侧安全区域的数量。
值得一提的是，变量constant（）已经开始标准化，现在可以在css属性中使用，例如margin，padding，top，bottom，left和right，并且不会在不支持的环境中生效。此外，在iOS 11中，为iPhone X型号获取以下值，并且iPhone X获得其相应的设置。当iPhone X Plus于明年推出时，也可以获得相应的设置量，这也符合要求。未来模型的规模有无穷无尽的趋势。
2.全屏改编
对于全屏，我们将使用很多场景，如闪屏，全屏旋转木马H5等。在不同尺寸比例的移动电话的屏幕上，不可避免地裁剪全屏图像。为了适应它，我们的目标是确保完整显示图像的主要内容和图像信息的有效传输。
因此，还有两种适应方法：基于宽度适应或基于高度适应。
3.边界手势操作
如上所述，对于屏幕圆角，顶部传感器和虚拟条形效果，Apple建议避免在屏幕底部或角落处使用交互式元素。因为iPhone X自己的手势会自动阻止您在此区域设置的手势，并且屏幕的角落难以触摸。
如安全区域所述，为了更好地适应和良好的布局，建议所有核心内容和操作都需要嵌入安全区域，以避免状态栏，导航栏，工具栏和标签栏。重合。
如何适应QQ音乐经典场景
QQ音乐移动终端的改编主要分为无处。有playbar，没有top·没有上杆，顶部和中间;有playbar，top·没有playbar四个场景。
以下是这款iPhone X的QQ音乐移动终端的一些经典场景的改编过程。整个改编解决方案基于上述方案—— viewport-fit=cover和constant（）。
1.顶部通行证
为了给用户提供更好的沉浸式体验，QQ音乐移动终端中的许多页面都具有顶级效果。
你可以看到普通的iPhone有一个128px的工具栏区域，而iPhone X有一个176px的工具栏区域，Android有一个136px的工具栏区域。我们建议设计师在设计顶级效果页面时，在顶部保留至少136px实体或无主要内容区域。
根据不同的应用场景，QQ音乐移动终端的网络效果也分为两种：
第一种：顶部有横幅图片或深色背景。下拉页面后，标题栏区域显示黑色蒙版，可以自定义标题栏标题动画效果。
第二种类型：有整页背景或深色背景。标题下方的内容部分滚动，可以自定义标题栏标题动画效果。
除了metaport标签加上viewport-fit=cover之外，通过将样式名称page_downright添加到body dom，使用命名空间来指示这是一个顶级效果页面，然后使用常量（safe-area-inset-※）来设置安全区域的距离。由于iOS 11支持此变量，因此除iPhone X之外的其他iOS 11型号上的当前值为0.为了解决此问题，使用css的原始计算函数calc（）。
2.底部虚拟指示条
长页底部
如Apple的设计规范中所述，如果页面是一个长滚动页面，那么我们可以安全地在页面上传播页面内容。您会注意到页面内容可能与虚拟栏重叠，但这没关系，就像Apple自己的页面一样，只需在页面底部留下一个安全的空白设置。
底栏
有一些带有底栏的页面，例如底部的下载指南栏和个人资产显示栏。您可以使用底部导航栏参考iPhone X自己的应用程序效果。发现底杆总是悬挂并固定在屏幕的底部。根据设计规范为虚拟指示条留出空间。
3.音乐杂志
音乐杂志是近期音乐音乐内容QQ音乐移动终端的新篇章。它由cp设计提供，以提供组合成音乐杂志封面的ui元素。
适应性思路主要是平铺背景，调整缩放逻辑，并接近安全比例，以实现iPhone X的完美显示。
4.全屏操作类
全屏操作类的设计主要是为了避免对主题素材进行边缘修剪。通过根据高度进行调整，可视草稿输出背景宽度为860px，但主要内容安全区域限制为750px。
5.水平屏幕直播
对于横屏直播，主要问题点出现在直播信息中，操作按钮不在正确的位置，并被阻止。因此优化的想法是平铺预览并将视频拉伸到全屏，同时确保左侧和右侧以及下方的主要内容在安全区域内。
6.多样化播放器
通过寻找不同时代的音乐表演形式，您可以选择令人印象深刻的乙烯基，收音机，录音机，磁带和其他物品进行视觉重新设计。这些项目的核心元素经过精炼，结合当前的设计风格，突出每个项目的特点，设计出具有情感和现代美学的各种玩家。
之前的实现是根据iPhone 6的设计对Variety Player的UI元素进行分类和分层，并根据坐标系定位逐个添加组件。
但是当我在iPhone X下展示时，我发现了几个问题：
背景图像大小未调整。
一些元素组件放错了地方。
一些元素组分拉伸太多。
安全区被入侵。
通过比较和比较几种情景的优缺点，我们最终选择了“固定高度”解决方案。经过测试，它解决了大多数综艺玩家的适应问题。只有变形金钢和小黄人等变形误差才有复杂的优化问题。
信息参考：
Drafts.csswg
Github.com
developer.Apple
