果粉们期待已久的iPhone X发布会终于结束了，真是有人欢喜有人忧啊，设计师和程序员们又该进修啦！于是我用自己不太理想的英语水平，阅读了Apple官网所提供的相关信息，接下来就是我对自己了解到的东西进行的我认为比较全面的总结了，真的是超干货，图比较多，字比较少，我知道大家还是更愿意看图的。希望对大家有帮助哦。（本文图片来源于Apple官网，fengsiyue编辑整理）

一、关于设计尺寸及适配

       这次发布的ipone8属于常规升级，屏幕与以往的iPhone6、6s、7系列相同，但是iPhone X的分辨率却发生了变化，变化也仅限于物理像素层面。但真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去的ipone6、6plus放大模式宽度相同，简而言之，iPhone X可看作是iPhone6/7/8的加长版。  

       之前我们设计的页面是基于iPhone6的2X倍率进行设计，以2X的基准做设计稿，也就是750×1334。然后切图输出2X、3X的图片资源给开发。而新的iPhoneX分辨率是1125px × 2436px (375pt × 812pt @3x), 比之前的 750px × 1334px（375pt x 667pt @2x）高出了一部分。所以从页面视觉来看，不会给我们的设计带来太大影响，我们可以沿用原来的办法，以@2x iPhone6为基准做设计稿，只是页面在细节方面会有一些变化，我会在后面详细说明。关于输出图片资源的使用，iPhone X和plus一样使用3倍图，而iPhone8和iPhone5/6/7 同样使用2倍图。

二、关于设计内容细节

1、导航栏

       iPhone X的特点是全屏幕超级视网膜显示器，提供更多的空间来显示内容，但是由于新一代iPhone由于全面屏的设计，在前置摄像头部分出现了齐刘海的造型，所以从iOS11开始，导航栏中间的文字，被挪到了下面，用了更大更粗的字体显示。所以设计风格的更替和硬件的变化是息息相关的。

       iPhone X 状态栏高度变高，在有电话和定位等后台任务时，高度不会变化，就是打电话和导航时，原先顶部彩色带，现在变成时间信息底部的彩色气泡，如下：

2、标签栏

       底部标签栏的高度相应的变高了，为了适应新的屏幕，视觉区域也相应加大。

       同时底部导航栏的图标也产生了微妙的变化。iOS 11之前是选中状态的图标为剪影风格，其他图标为线性风格，我们需要做两套图标，一套剪影，一套线性。而现在则统一为剪影，选中状态的图标则依靠颜色的变化来进行区分。但这个不是必要的，你也可以不遵循苹果的设计准则。

3、安全区域及合理的留白间距

       当为iPhone X设计时，必须确保布局填满屏幕，而不是被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。（官方语言）我的理解是不要试图用黑色掩盖，将iPhone X 变成你熟悉的样子，而是要确保填满整个屏幕。

      大多数app使用系统提供的UI元素，会自动适应iPhone X 的屏幕。Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。

        下图为全屏状态下的显示：

       下面是关于横竖屏安全内容区域及留白间距的展示，蓝色为安全区域，粉色为留白间距。

       在设计的过程中还要注意操作按钮的合理布局，尤其对于游戏设计师来说，一不小心就可能成为了下图的样子：

       交互元素不要靠近角落，屏幕边缘的视觉元素要移动位置，部分情况下需要重新设计。

       水平布局时，交互元素两侧距离应该相同，左侧右侧旋转时位置固定，方便用户记忆。

        iPhone X底部的指示器是系统的核心交互，会强制显示，针对浅色和深色背景会改变颜色。

       底部按钮要避开home指示器，home指示器不需要特殊强调，全屏模式时指示器自动隐藏，触摸屏幕会再次显示。

三、关于交互设计

       人们在显示器的下边缘使用刷卡手势来访问主屏幕和应用程序切换器，这些手势可能会取消在这个区域中实现的自定义手势。屏幕的遥远角落可能是难以到达的舒适区域。iPhone上的显示屏使用屏幕边缘的手势来访问主屏幕、应用程序切换器、通知中心和控制中心。

       因为实体的Home键的取消，交互的变化是非常大的。更多的运用到了扫屏幕这个操作，以及侧边实体按键的组合运用。因为交互的改变没涉及到关于设计的细节，我就不具体说了。

四、总结

       总的来说，对于平时以2X为基准做设计稿的伙伴们，iPhone X的改变不会给我们的设计带来太大影响，我们可以沿用原来的办法，以@2x iPhone6为基准做设计稿，只是注意一下一些细节的改变就好了，我认为其中最重要就是注意留白间距的控制。

      下图为最新的iPhoneX的PSD模板，你们如果有需要可以去官网下载，如果下载不成功可以去这个网盘下载呢——http://pan.baidu.com/s/1eSD18Sq

                  如果你觉得这篇文章或多或少对你有点用，就点个赞吧！