考虑 iPhone X 设计时避免对称安全区域

Avoid symmetrical safe area when designing with iPhone X in mind

考虑横向持有 iPhone X。

由于安全区看起来是对称的,因此无论缺口在哪一侧,安全区的插图都在左侧和右侧一样大。

假设我们希望将安全区域进一步延伸到没有刘海的那一侧的屏幕边缘。有人对此有好的方法吗?我假设我们想要一些与自动布局一起工作的东西。

此处缺口在左侧。我们希望另一边的边距小一些,因为感觉那里可以显示更多的内容。

虽然可以这样做,但 Apple 建议您不要在 Human Interface Guidelines:

中这样做

Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation and isn't clipped by corners or the device's sensor housing, or obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

就是说 - 我完全理解想要使用额外的 space!

为了理解 HIG 的这一部分,让我们这样说吧:如果你有一款横向观看的游戏,控件应该是对称的,这样用户无论是在横向观看游戏时landscapeLeftlandscapeRight,按钮插入相同的量。如果您不对称地实施控件,那么用户的肌肉记忆将不会在一个方向与另一个方向上匹配。

您可以在 2017 年秋季标题 "Designing for iPhone X" 的 WWDC 视频中听到 Mike Stern(Apple 的设计传播者)谈论这个概念。 (这个 link 有一个时间戳,迈克在其中详细讨论了景观对称性。)