【问题标题】:Avoid symmetrical safe area when designing with iPhone X in mind使用 iPhone X 进行设计时避免对称安全区域
【发布时间】:2018-04-08 22:09:06
【问题描述】:

考虑横向拿着 iPhone X。

由于安全区域似乎是对称的,因此安全区域的插图在左侧和右侧一样大,无论凹槽在哪一侧。

假设我们希望安全区域进一步延伸到没有缺口的一侧的屏幕边缘。任何人都有一个好的方法吗?我假设我们会想要一些适用于自动布局的东西。

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

【问题讨论】:

    标签: autolayout iphone-x


    【解决方案1】:

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

    插入基本内容以防止剪辑。一般来说,内容 应该居中并对称插入,所以它看起来很棒 方向并且不会被角落或设备的传感器夹住 外壳,或被用于访问主屏幕的指示灯遮挡。 为获得最佳效果,请使用标准的、系统提供的界面元素和 自动布局来构建您的界面。所有应用程序都应遵守 UIKit 定义的安全区域和布局边距,确保 根据设备和上下文进行适当的插入。安全区 还可以防止内容覆盖状态栏、导航 栏、工具栏和标签栏。

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

    在尝试理解 HIG 的这一部分时,让我们这样说:如果你有一个横向观看的游戏,控件应该是对称的,以便用户是否在 @987654323 中拿着游戏@ 或landscapeRight,按钮的插入量相同。如果您以不对称方式实现控件,则用户的肌肉记忆在一个方向与另一个方向上将不匹配。

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

    【讨论】:

    • 谢谢。我看过那个视频。我确实有一个用例,我相信大多数人都会同意。可能是。无论如何,我们在横向应用程序中有一个聊天 - 聊天是一个从上到下运行的表格视图,并绑定到屏幕的右侧。空间是有限的,所以直到现在,我们让聊天文本几乎一直运行到屏幕的右边缘,然后折叠到下一行。为了在 iPhone X 上看起来不错,我们需要取消选中表格视图的“Insets To Safe Area”。在横向右侧效果很好,但在横向左侧,凹口向右,凹口..
    • 当然会遍历表视图行。所以我们需要检查“Insets To Safe Area”,这样它在左边的风景中看起来不错。但是横向右侧是可怕的插入,在我们的布局中造成了巨大的空白浪费。不想分支我们的设计,我想在这种情况下能够拥有不对称的自动布局或其他东西会更好。我确实鄙视 iPhone X,但是是的:-P
    • 多年后...我忘了我应该勾选这个。基本内容当然应该在几乎所有情况下都在安全区域内,否则就不是基本内容。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-23
    • 2018-04-04
    相关资源
    最近更新 更多