发布时间：2019-7-22 分类： 电商动态
自从iPhone X正式亮相以来，“齐六海”一直被群众的创造力所打破。作为一名专业设计师，我们当然必须从设计的角度分析设计〜以下是由DUBEST（百度地图服务）Eco-UE团队）iPhone X设计指南翻译：
iOS11标志着iPhone X的诞生，iPhone X是一款具有更高且几乎没有边框的新一代iPhone。 5.8英寸的OLED屏幕比iPhone 8 Plus的5.5英寸屏幕大，但机身的尺寸与iPhone 8相同。对于设计师来说，这意味着更自由的设计空间。
更高的屏幕
如下图所示，高145磅可能意味着添加一行内容，或添加我们认为太窄的菜单。虽然分辨率不同，但这部分的额外空间也适用于iPhone 8和8 Plus，因为它们的比例相同。
更多内容空间
如果与原始iPhone相比，iPhone X增加了332磅的高度，相当于7个导航栏的高度。未来在新iPhone上展示的内容看起来会更好，汉堡包菜单也会被削弱。
当我们将来自不同时代的两部iPhone放在一起时，我们可以注意到内容空间几乎翻了一番。通常，这意味着当前应用程序需要包括以下字段：状态栏，导航栏，选项卡和用于访问主屏幕的主页指示器。消除这些列不仅会使用户体验变得更糟，而且还会使您的应用程序与本机iOS程序不一致。
“齐柳海“
也许最具争议的新设计前10％是“齐六海”。最初的深度感应摄像系统也被称为凹槽（国内形象称为“齐刘海”），它充当分割元素，使iPhone X的屏幕真正“从屏幕边缘到手机边缘” ”。从技术角度来看，由于面部ID，相机和耳机的集成，不可能移除凹槽。从设计的角度来看，这是近年来苹果公司最大的妥协之一。然而，很难说在谈到其他手机制造商如何解决这个问题时，他们没有妥协，无论是“高额头”还是“低下巴”或两者兼而有之。
Apple不建议使用黑色状态栏隐藏此凹槽。他们的理由是，尽管这个地方令人头疼，但它仍然为状态栏和其他内容提供了宝贵的空间。它使上下文内容连贯，同时让人们对屏幕有更大的感受。当通过圆角和凹槽修剪时，诸如壁纸，地图和颜色的背景元素不会受到很大影响。通过隐藏此空间，您的应用程序将感觉更小并且与其他应用程序不一致。
标题
在iOS 11中，屏幕标题通常为34pt（点），并且是粗体黑色字体。有趣的是，当您向上滑动屏幕时，标题会自动转换为导航栏的位置，为我们提供宝贵的空间。在水平屏幕状态下，只剩下导航栏的一小部分，这为设计人员提供了非常清晰的信息。首先，你应该更合理地利用这个额外的空间。其次，你需要让你自己设计是自动适应的，因为它可能在垂直屏幕上有额外的空间，并且景观模式中不存在空间。https://designcode.io/cloud/ios11/Design-LargeTitle.mp4
更大的状态栏
状态栏的高度从20pt增加到44pt，增加了一倍多。现在可以通过向下滑动左侧状态栏来唤醒通知栏，同时通过右侧导航栏的滑动动作唤醒控制中心。当操作快速完成时，用户只需轻扫屏幕的下边缘即可轻松返回主屏幕。但是，如果要查看导航栏，则必须中断滑动。https://designcode.io/cloud/ios11/iPhoneX-Gestures.mp4
安全区布局指南当我们为iPhone X进行设计时，我们应该始终注意并尽量避免设计内容被圆角和凹槽裁剪的情况。我怎样才能更好地避免这种情况？使用安全区域可以帮助您确保不裁剪内容。通常，背景的使用不受安全区域的限制，并且文本，图像和按钮需要在安全区域中设计。
横向模式的iPhone X
在横向模式中，隐藏状态栏以最大化内容的空间。 iOS 11的导航栏减少到32pt，标签栏为30pt，虚拟主页按钮为23pt。虽然在大多数情况下用户不会在iPhone X上切换到横向模式，但有一些更重要的使用场景使用横向模式。例如，当我们查看水平照片，全屏视频或阅读带有大文本的文章时，我们将使用水平屏幕模式。当用户完成使用后，他将直观地切换回肖像模式。然后，我们必须确保切换的内容可以正常显示给用户，尤其是当设备处于横向时处于舒适的位置时。时间。
如果您的应用程序可以适应iPad，为什么不在iPhone上进行良好的横向屏幕调整？大多数应用程序已开始采用响应式布局设计概念，以最大限度地降低成本。为了获得最大的利益。
iPhon X横屏状态页
如果您是产品设计师，则可能正在处理网页。在横向模式的iPhone X上，您的网页左侧和右侧将有一个大的空白区域。这是因为安全区域会自动将内容部分的不良结果切除到安全区域之外。为了避免这种尴尬，Apple引入了一套规范来指导您的网页在横向模式下适合iPhone X.这基本上允许网页在水平屏幕状态下水平扩展背景以填充屏幕，同时确保在安全区域中完整显示网页内容。
圆角
在iPhoneX屏幕的四个角落也会出现剪辑内容。除非您隐藏状态栏和底部的触摸区域，否则您将不会遇到此问题，因为它们会覆盖屏幕的四个角。但是，对于大多数全屏应用，例如相机，重要的是确保四个角中有足够的空白。建议您将按钮半径设置为16pt，以完全遵循圆角规则。
在iOS模拟器上预览您的应用
发布后，iPhone X可能会很快售罄，因此我们大多数人都无法立即使用它。手头没有设备，唯一的方法是通过iOS模拟器。您可以通过安装Xcode来预览您的应用和代购源码网站。
汉堡菜单的死亡
十年来，设计师一直在努力使内容适应原始的iPhone屏幕，许多设计师已经彻底消除了它，因为标签栏占用了太多的屏幕空间。其他人相对富有创意，他们放了一个从左边滑出的按钮。这是原始的汉堡菜单。虽然起初它非常有趣，但它最终被发现是可用性的噩梦。因为在使用时，用户需要更多点击。这意味着将减少使用辅助标签。人们常常忘记隐藏更多内容。
随着屏幕变大，单手操作开始受到影响。 Apple甚至设计了一个双击主页按钮，可以向下滑动整个用户界面手势，以便手指可以到达导航栏。汉堡菜单通常放在屏幕的左上角，用户需要额外双击才能进入菜单。这也使用户更难以操作此菜单。随着屏幕的延长，设计人员不再需要纠缠占用多少屏幕空间。所以现在设计将选择使用标签栏来替换汉堡菜单。对于iPhone X尤其如此，这意味着如果您的应用有两个以上的部分，我们强烈建议您使用标签栏，iOS11标签栏占用的屏幕空间更少。
汉堡菜单在网页设计中非常普遍，可以说手机上移动网页的设计体验不如基于手机的设计体验。虽然一些适应手机的网页目前使用原生控件，但这是一种很好的网页设计方式，但在iOS设计中，特别是iPhone X，你仍然应该使用标签栏而不是汉堡。菜单。https://designcode.io/cloud/ios11/iPhoneX-Hamburger.mp4
自适应布局和多任务处理
随着越来越多的屏幕分辨率需要调整，调整页面布局更有意义。使用Sketch的Constraints和Xcode的Auto Layout等工具，您需要在设计时保持灵活性，并且可以在需要时扩展额外的菜单。
堆栈视图
在Xcode中，您还可以找到Stack Views，这是一个神奇的工具，可以帮助您的布局更加灵活。一些元素和组可以动态堆叠在一起，您只需要编辑元素之间的间距和框中的内容填充。然后您可以使用自动布局来完成剩下的工作。 Apple的建议是在使用自动布局之前使用堆栈视图。
点（pt）和像素（px）
开发人员使用点值，因此了解点值和像素之间的差异非常重要。当iPhone首次推出时，两个单元是相同的：1pt等于1px。然后，当视网膜的屏幕出现时，1pt变为2px。因此，将pt视为第一代iPhone中物理区域的标准尺寸，px是该物理区域中存在的实际像素的密度（iPhone 4,5,6,7,8=@ 2x，iPhone 8另外，iPhone X=@ 3x）。
iPhone解决方案
iPhone有五种主要分辨率：320x480 pt（iPhone 4），320x568 pt（iPhone 5），375x667 pt（iPhone 8），414x736 pt（iPhone 8 Plus）和375x812 pt（iPhone X）。布局未缩放，但可以根据屏幕的分辨率进行扩展。例如，导航栏仅调整宽度，但保持相同的高度，内部元素的大小保持不变。
iPhone 8 Plus是唯一一款更像横向模式iPad的iPhone。换句话说，可能会出现左侧导航而不是标签栏。
