摘要：iPhone12手机屏幕尺寸影响UI设计

关键词：UX设计，iPhone12，苹果公司

全文共1450字，阅读大约需要4分钟。

UED观察 报道 | 公众号 uedsee 

10月13日，Apple推出了四款新iPhone。大部分讨论显然是关于新设计和功能的，因此让我们将其排除在外：

我认为回到iPhone 5/iPad Pro风格是一个不错的选择，我个人很喜欢这种设计。我也喜欢它的专业功能，以及拥有更小的iPhone。

不必要的复杂性

如果您是从事移动应用程序（或响应式网站）的设计师，可能会知道有越来越多的Apple移动设备可供选择。到目前为止，这是Artboard预设在Sketch和Figma中的外观。

iPhone12正在使情况变得更加复杂。还记得史蒂夫·乔布斯（Steve Jobs）推出配备Retina显示屏的iPhone 4吗？

他特别提到手机的基本分辨率与所有其他iPhone的基本分辨率完全相同320 x480，仅像素密度高出2倍。

那时做UI设计很方便，您将所有内容设计为320x480p，并以2x的资源为Retina导出图片（640×960）。

这非常“Apple”-清晰，易于遵循的途径，就是消除不必要的复杂性。

不同宽高比的iphone手机

对于iPhone 12和12 Pro，我们获得了新的390宽度。

但是，iPhone 12 Mini的分辨率降低了375 x 812，与iPhone X相同。问题在于，它不再是3x的比例，而是2.88。可以肯定的是，使用较小的屏幕并不会带来太大的伤害，因为有关如何显示对象的大多数实际计算都是通过代码完成的。

如何设计？

因为顶部和底部的间距需要调整手机外观才能正确显示。在某些手机上，主按钮需要滚动，因此我们必须调整这些设备的整个卡片和字体大小，才能适配屏幕。

当然，Swift UI和所有其他编码方面的改进使适配变得更加简单，但是在设计阶段，我们仍然希望看到它在大型设备上的视觉效果。我们还经常使用Sketch Mirror在这些设备上进行预览，因此这使我们要做的工作比预想的要多。

目前为止，我们为375 x 812的iPhone X和更大的414×896设计。它涵盖了大多数个人电话，开发人员调整布局以在其他少数设备上容纳更多内容（或更大）。但是新的390和428宽度呢？

是否应该简单地为这些手机增加设计？

这取决于UI可以保持相对不变的大小，而内容本身可以被放大并具有更高的质量（以像素为单位）。

但是仅仅升级视觉设计可能会失去我们为特定屏幕设置字体之间的平衡。事物可能开始看起来太大，太小，太宽。

同样，某些放大或缩小比例可能会导致视觉效果变差，因为它们全部基于像素近似值，因此，如果您使用的是非常细/轻的字体，则可能会损失一些易读性。

iOS 7之后苹果通过引入更粗的字体解决了这个问题。但是有些设计师（甚至更多的产品所有者）喜欢这些浅色字体，因为某些原因，他们将它们理解为“最小”和“良好设计”。

折叠

折叠是一个非常古老的概念，它用不可见的线条将我们通常在一个屏幕上看到的内容（无需滚动）与其余设计分开。这个概念是，所有最重要的元素都应该“折叠起来”，以便于访问。

有一些论点是“用户不喜欢滚动屏幕”，现在听起来有点愚蠢（鉴于目前用户平均每天滚动屏幕300米）。

但是，这可能会影响某些电子商务项目，这些项目经过精心创建以显示尽可能多的相关信息，并在一个屏幕上显示立即购买按钮。当然，我们可以创建一个叠加按钮，但这不能解决在特定手机上删除信息的问题。

因此，我想对于电子商务而言，通过将相同的设计升级到更大的尺寸来测试体验实际上可能会更容易，因为这将使我们对人们在所有设备上看到的内容更加一致。

一个高44点（在1x时也是44像素高）的按钮在2x时仅是88像素高。

结论

随着屏幕尺寸的不断增加，iOS越来越像安卓，大量的设备，不同的高宽比和分辨率增加了复杂性。

参考资料