不会适配 iPhone X 的设计师不是好设计师，本专题既有 iPhone X 的交互方式分析，也有 iPhone X 适配指南，更有超多适配案例经验分享。学会收藏，适配不难！
2019-11-01更新
Riceman：发布会谢幕了，媒体们也发完了新闻稿，朋友圈也热闹过了，接下来的工作该轮到设计师了。iPhone X 11月才发货，但你也许已经接到做适配设计的任务了。在这之前，让我们先来看看这个 iPhone X，对 UI 设计师的日常工作有什么影响。
@__WATERS ：iPhone X 作为一台全面屏的设备，和上一代的 iPhone 7 还是有着很大的区别，这些区别不仅体现在材质和工业设计上，在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」（同为 375pt），但在高度方面就比原先多出了 145 pt ，再加上 iPhone X 去掉了最为标志性的 Home 键，这两点直接导致的就是界面的布局和交互会发生相应的变化。△ 图 / Apple接下来我们来看看在 iPhone X 上...
iPhone X 搭载了超大，高清晰度，大圆角，无边框的显示屏，又一次刷新了我们对内容优先的沉浸式体验的认识。——翻译自《Human Interface Guiidelines》屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！
编者按：基于很多文章都只是翻译了官方的原文，并没有加入自己的想法和见解，所以我决定自己试着适配 iPhone X，如果出现了失误或者问题，请多指教。毕竟写文章的初衷是为了跟大家一起进步和探讨呢~熟悉 iPhone X这里用 iPhone 6 举例子是因为大部分设计师都用 iPhone 6 来做设计稿，方便大家理解，其实 iPhone 8也是这个分辨率。iPhone 6 ：750×1334px（375×667px @2x）iPhone X ：1125×2436px (375×812px @3x)在逻辑...
有什么方法可以极速适配iPhone X ？今天这篇好文腾讯设计师以QQ空间H5的项目为例，给大家分享最快的适配方法！一. iPhone X适配方案2017年9月苹果发布了iPhone X机型，对于它的「刘海儿」和底部Home Indicator，QQ空间H5也在第一时间做了兼容适配。
编者按：QQ 音乐团队设计师们做了一些研究工作，从方案对比选型到确定适配方案，都是希望能让产品更好地适配 iPhone X。本文将与大家详细分享从了解 iPhone X、到适配方案研究、最后方案实施的点点滴滴。△ QQ音乐界面关于 iPhone X 的信息工欲善其事必先利其器——《论语 · 卫灵公》在着手构思任何解决方案之前，我们都需要先仔细了解事物的本质。
编者按：腾讯的设计师用王者荣耀的H5 页面案例，帮你学会给iPhone X 做适配。腾讯ISUX ：目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：一. 通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。
发表评论
Wo~本文的评论还空着，快来抢沙发
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓