在为iPhoneX设计UI时，截然不同的屏幕和交互方式会让UI设计师面临一些新的挑战。当然，一个新的设计在很多时候会给设计师一些新的机会。在今天的文章中，我将分享一些针对iPhoneX设计的技巧和建议，可以让iPhoneX的UI设计更好。别忘了，明年9月将迎来新iPhone，设计师们离带Home键的iPhone会越来越远，刘海全面屏将是未来设计师们的主战场。A.屏幕显示iPhoneX拥有超高分辨率圆角SuperRetina显示屏，分辨率为1125x2436px，虽然为设计师留出了更多的显示空间，也能为用户提供更身临其境的体验。然而，在设计UI时，设计师仍然需要考虑以下问题：1.3x图像尺寸iPhoneX上使用的图像是3x比例。当您使用图像和其他视觉材料时，请确保包括2倍和3倍分辨率的素材。另外，对于高分辨率的字符和平面素材，矢量SVG素材是最好的，这样可以避免可能出现的分辨率问题。2.新的显示尺寸意味着更多的空间和内容。iPhoneX的屏幕显示尺寸宽375pt，高812pt。由于是3x显示，转换后的像素为1125x2436像素。在垂直方向上，iPhoneX的显示屏宽度与之前的iPhone6、iPhone7和iPhone8的4.7英寸屏幕相同。因此，在水平方向上显示的信息量应该是相同的与之前的其他型号一样。区别主要在于高度。812pt的高度比之前的非全面屏高了145pt，这让iPhoneX多了将近20%的空间。3.注意背景图片的宽高比与之前iPhone的屏幕尺寸比例不同。iPhoneX的纵横比不再是16:9，而是接近19.5:9。选择背景图片时在制作素材时，注意不要让画面中的视觉主体和关键信息被屏幕截断，注意关键信息能在这个屏幕比例下得到适当的显示（对于例如，不要在顶部和底部留出太多空白）。4.不要把控件和元素放在屏幕的边缘。全面屏的另一个问题是，用户在交互过程中可能会不小心触摸到屏幕边缘的元素。如果用户有佩戴手机壳的习惯，元素也可能偏大。离边缘太近而无法被用户有效快速触发的案例。简而言之，尽量让元素控件出现在屏幕上易于交互的主要区域。5.使用安全区域显示内容。在安全区域构建布局可以保证内容的交互性，避免系统组件和UI元素的重叠。在像iPhone8这样带有Home键的手机界面中，更宽的边框和Home键的存在让标准的矩形屏幕成为安全的交互区域。但iPhoneX不一样。底部有一个虚拟的HomeBar，顶部屏幕的“刘海”带有摄像头。中间的区域是安全的。当呈现内容时，有两个例外。一是较长的垂直滚动内容，可以通过滑动浏览的方式完整展示。另一个是背景图，因为不涉及交互，所以不会受到影响。.6.不用担心原生UI组件。如果你设计的应用都是官方设计素材中的原生UI组件（如导航栏、表格、标签栏等），那么你就不用担心它们与你的界面不匹配。它必须正确地应用于界面。B.HomeBar指示器从iPhoneX开始，iOS系统的基本交互随着硬件的更迭发生了翻天覆地的变化。Home键已经成为历史，交互方式开始更多地依赖手势交互的驱动。比如之前点击Home键返回首页的交互方式被手势操作所取代。用户只需从屏幕底部向上滑动即可返回首页。滑动是新的水龙头。虽然触发方式主要是通过屏幕底部边缘触发，但是HomeBar指示器的视觉加入会让人时刻意识到这个交互的存在，在设计UI和APP时需要考虑到这个控件。7、避免在HomeBar指示器周围放置交互元素前面提到过类似问题，避免在指示器周围放置交互组件，避免交互组件与HomeBar重叠，造成交互冲突。即使近在咫尺，也要保持适当的距离，以免误触。8.不要过分关注HomeBar指标。HomeBar是一个常用的组件。不要过分修饰，在设计上不要过分强调，不要隐藏，尽量不让用户特别注意。9.使用自动隐藏功能打造全屏体验。当显示视频或其他视觉强调的内容时，您可以使用自动隐藏HomeBar指示器的功能来创造更身临其境的体验。C.NotchArea苹果官方将屏幕顶部放置摄像头的位置称为NotchArea，但人们通常称其为屏幕“刘海”。这个表情非常形象。有些人觉得它很有魅力，有些人觉得它丑陋。但是作为设计师，我们可以合理的利用这个区域来进行设计。10.不要遮盖缺口区域。有些设计师会尝试用设计让这个区域看起来不那么显眼，让iPhoneX看起来就像没有刘海一样。例如，在背景的顶部添加一条黑色背景，使顶部栏看起来全黑。这种强迫症审美，未必合所有人的胃口。尽量避免，因为另一方面，它会让你在iPhoneX上的体验感觉像是降级到了iPhone8上，与其他app的体验不一致。你设计的应用程序和游戏应该完全填满整个屏幕。11、不要隐藏状态栏APP中的状态栏为用户提供了很多基本信息，这对用户来说非常重要。虽然状态栏比之前版本的iOS系统高了（之前是20pt高，现在是44pt），隐藏后确实可以显示更多的内容，但是相对于整个界面的尺寸来说，提升是不明显。除非是在特定需求下（创造非常有深度的沉浸式体验），否则尽量不要隐藏状态栏。再引用爱范儿的一句话：今年的新iPhone不会命名为“iPhone9”，而是一款名为“iPhone”的产品。具体来说，新三款iPhone中最新款将命名为iPhoneXSPlus，5.8英寸机型为iPhoneXS，均为初代iPhoneX的S系列。而6.1英寸iPhone将更便宜型号，将被命名为iPhone，作为该系列的入门级产品。距离每年9月初的发布会只有30天，新iPhone离我们已经很近了。以iPhoneX为代表的新iPhone将彻底实现基于手势的新交互，开启下一个交互时代。对于设计师和用户来说，这是一个非常重要的转变，所以请做好准备。
