iPhone 8/8 plus和iPhone X已经发布了几天，iOS 11的设计规格也已更新。 UI设计师很忙。关于iPhone X的互联网UI设计文章也是一大浪潮。今天，我们将聚集每个家庭的董事并进行系统总结。

首先来到一波iPhone家族，初步了解。

由于使用iPhone 5/5c/5s/SE的用户数量越来越少，4英寸屏幕对于大屏幕手机时代来说太小了，所以它们的尺寸不是ios的设计尺寸，所以我不会在这里详述。它是。

详细的屏幕尺寸分解是另一波。

应该有一个大约7加上物理尺寸：1080和次; 1920px，基本上没用过，所以我不会详细介绍，我不会赘述。 iPhone 8/8 Plus与iPhone 7/7 plus的显示屏相匹配，外观没有太大变化。它只增加了无线充电和处理器增强等功能。 iPhone X是我们设计的重点。它首次使用OLED屏幕，分辨率为1125次; 2436px @ 3x，PPI达到458ppi。所以当我们设计时，iPhone X的尺寸是多少？事实上，iPhone X可以看作是iPhone 7的扩展版本，曾经是750x1334px的设计师。 iPhone X的到来不会产生太大影响。所以我们继续在@ 2x模式下使用设计尺寸：750x1624px。

下面我们比较和分析iPhone X的设计尺寸和iPhone 7：

1.页面顶部和底部的比较

状态栏40px VS 88px

在标签栏98px VS 98px + 68px（Home Indicator）的比较中，iPhone X的顶部状态栏和底部标签栏都增加了，并且在设计时，如果顶部和底部具有背景颜色，它可以执行。扩展，Apple禁止将两种背景颜色设置为黑色以隐藏这两个部分。如下图所示：在@ 1x尺寸下，iPhone X总共比iPhone 7多了145个，顶部44pt比iPhone 7多24个，底部是34个。额外高度为：145-24-34=87pt，1pt=2px，即174px，可以自由使用。

来自网络的图片

2.安全区域比较

从上面的绿色区域，您可以一目了然地看到设计时需要注意的安全区域。控制元件应放置在安全区域内，并且不会被设备屏幕上的圆角，传感器和指示器遮挡。安全区域外没有任何信息，但没有重要的文本信息或交互信息。另外需要注意的是，除了安全区之外，还需要在设计的左侧和右侧留出间隙（布局边距），如上面的红色区域所示，两侧通常在20-30px之间，不太近。另外需要注意的是，水平屏幕周围的安全区域需要88px，Apple特别提到您不应在全屏底部放置任何交互式控件，这将影响被调用的主页指示器。

对渲染图有一个很好的理解，当你看它时你应该明白。

来自网络的图片

3.底部主页指标

iPhone X已移至全屏，移除物理主页按钮，使用全屏设计，添加主页指示器，从底部滑动的交互方式成为全局操作，因此在设计时，底部需要离开。部分空间用于在应用程序之间切换并返回主屏幕，无法自定义颜色，系统将自动确定颜色，背景较暗时变白，背景较亮时变黑。与此同时，Apple的官方设计也指出，如果应用程序的底部是可滚动的内容，建议是：文本和Home Indicator可以重叠！ （如下图所示）

来自网络的图像为了让用户获得身临其境的体验，在播放视频或玩游戏时，底部的主页指示器应启用自​​动隐藏，再次出现点击屏幕。

IV。剪切图表比较

当UI设计人员使用iOS应用程序时，最常用的是@ 2x和@ 3x大小的图像。 iPhone5/6/6s/7/8都使用@ 2x尺寸的图像，但iPhone X的屏幕分辨率得到了提升。 1125X2436px（375ptX812pt），尺寸为5.8英寸，所以你必须使用@ 3x尺寸的图片，视觉效果会更精致，实际上它是切割图的加号。

来自网络的图片

五。全屏图像调整

图片来自网络，如上所示。对于需要在单个屏幕上显示的界面，例如：新手指南页面，欢迎页面等，可能需要重新排列。 iPhone X具有与其他iPhone不同的宽高比，因此全屏显示其他iPhone图像将在iPhone X上全屏显示。同样，全屏iPhone X图像也会在其他iPhone上裁剪。

第六，手势交互的变化首先要看一波交互式手势的操作。

退出移动应用程序并返回主屏幕

在应用程序之间切换

呼叫通知中心并在左上角向下滑动

呼叫控制中心并在右上角向下滑动

（还有其他一些未引入的手势交互。如果您想知道，请发布链接：https://www.zhihu.com/question/31540516/answer/230014384）

在iPhone X设计中，这种涉及在屏幕底部上下滑动的交互需要更仔细的思考和更严格的测试。为了响应上述手势交互，我们必须在设计时与开发人员沟通，以启用边缘保护，即：第一次调用应用程序的手势，第二次将调用系统手势，许多目前的应用程序就是这样。

最后，从Apple下载这套官方UI KIT材料，包括Photoshop，Sketch和Adobe XD版本，这样每个人都可以快速理解并完成APP设计。下载地址：链接:https://pan.baidu.com/s/1dFaUz9f密码: 2bng

« 基础小科学！国内外3种最常见的响应式网格 | Qibo cms最新SQL注入代购源码网站漏洞远程可执行代码解除权限 »