iPhone 12来了，设计师如何提前做好准备？

10月13日，苹果召开年度发布会，发布了四款新iPhone。新闻发布会的亮点是新设计和新功能的介绍。以下是一个简短的总结： 我认为这个设计是对iPhone5/iPad Pro机型的回归。我个人非常喜欢这个设计，而且我喜欢它的紧凑性和功能性。无线充电技术可以让未来的苹果笔记本电脑（基于ARM）也具备快速充电方式。 适应难度正在改变 如果设计师曾经做过移动应用或者响应式网页设计，你可能知道苹果设备尺寸越来越多需要适配。下图是Sketch和Figma上当前预设的画板。 但这些新iPhone让手机的尺寸变得更加复杂。您还记得史蒂夫·乔布斯 (Steve Jobs) 推出配备视网膜屏幕的 iPhone 4 吗？ 他当时特别提到的一件事是，iPhone 4的基本分辨率与其他iPhone相同，都是320×480，但像素密度却高了一倍。 那是一个伟大而纯洁的时期。您只需设计一个 320×480 的设计稿并输出 2 倍视网膜屏幕尺寸即可满足要求。 它非常“苹果”——一条清晰、易于遵循的路径，旨在消除不必要的复杂性。 来到2020年 看看上图中复杂的尺寸。我什至没有包括第一代iPhone SE（320×568）（点击查看大图） 因为你有这些不同的分辨率，所以它增加了很多复杂性，对吧？ 那么我们应该如何处理呢？ 对于 iPhone 12 和 12 Pro，根据下面的这条推文，我们得到了新的 390 宽度。 但iPhone 12 Mini的分辨率降低至375×812，与iPhone x相同。这里的问题是它的实际分辨率不再是3x，而是2.88x。当然，对于较小的屏幕，它不会造成太大的问题，因为大多数如何显示对象的实际计算都是在代码中完成的。 △ Ukiyo - 我们正在开发一款专为创意人士量身定制的应用程序，目前所有 iPhone 上都可以看到该应用程序。 那么如何设计呢？ 作为下面的设计示例，它并不理想，特别是因为顶部和底部的间距需要单独调整。在某些手机上，主按钮需要滚动，因此我们必须调整整个卡片和字体大小以使其与这些设备兼容。△ 针对具体机器分辨率进行必要的调整。不建议只放大左图 当然，对于程序员来说，直接使用Swift代码来调试UI会简单很多，但在设计阶段，我们还是想更直观地看到它在不同设备上会是什么样子。你可以使用草图镜在手机上预览，实际上你可以在设计方面做更多的工作。 到目前为止，我们需要制作两种尺寸的设计稿，分别是iPhone X尺寸的375×812和更大的414×896。它覆盖了大多数手机，并且通过简单调整布局，就可以适应其他少数设备上的更多内容。 但是现在新尺寸 390 和 428 的宽度又如何呢？ 我们是否应该简单地扩大这些手机的设计规模？ 答案是视情况而定。相同数量的内容，UI可以保持相同的尺寸，而内容本身可以放大，质量会更高。 但仅仅放大每个设计可能会失去我们在图片中所做的布局设计，并且图片可能会失去平衡。设计元素可能开始看起来太大、太小或太宽。 此外，一些放大和缩小可能会导致非常细的线条产生不良的锯齿效果，因为这全部基于像素近似，因此如果您使用非常细/浅的字体，您可能会失去一些易读性。 苹果在 iOS 7 之后解决了这个问题，引入了更粗的字体，并去掉了大部分太细的字体。但一些设计师喜欢这些细字体，因为他们将它们理解为“精致”和“良好的设计”。 如果我们尝试将相同的“滚动高度”映射到这些手机，我们最终会得到一些未使用的空间，这当然不是最合适的策略。这样直接画比较有点夸张，因为有些手机的长宽比是不一样的。这只是为了展示垂直适应的一般原理。 折线 折叠线是一个经典的概念，一条看不见的线，将我们通常在屏幕上看到的内容（无需滚动）与设计的其余部分分开。我们的想法是，所有最重要的元素都应该位于“顶部”，以便更容易看到。 有一些观点认为“人们不会滚动”，这在现代听起来有点愚蠢（统计数据显示，我们平均每天在手机上滚动300米）。 但它可能会影响一些电商项目，这些项目的首屏需要精心设计，在一个屏幕上显示尽可能多的相关信息，提高购买率。当然，我们可以创建一个覆盖按钮，但这并不能解决中断特定电话上的信息的问题。 因此，我认为对于电子商务商家来说，通过将相同的设计升级到更大的尺寸实际上可能更容易测试体验，因为这将使我们能够更一致地了解人们在所有设备上看到的内容。 。44pt 高的按钮（相当于 1@x 时的 44px 高）在 2@x 时的高度为 88px，在 320×480 视口中统一渲染为 44pt。 彩云注：我想这里有必要解释一下单位pt的含义： pt是专门为Apple操作系统设计的单位。它与屏幕上的像素密度无关，只与屏幕上的内容量有关。在第一代iPhone到iPhone 3GS的非Retina屏幕上，一个点等于一个像素，可以表示为@1x；而在iPhone 4到iPhone 4s的Retina屏幕上，一个点等于两个像素，可以表示为@2x。未来发布的一些设备（例如iPhone 6 Plus、iPhone”。 总结 我缺少基于同一视口的两个分辨率纪元。它使体验设计变得更加容易，而且也易于衡量。 随着界面的碎片化，iOS 正在慢慢变得像 Android——大量的分辨率、宽高比和设备增加了复杂性。 彩云笔记：我觉得随着iPhone 12的到来，屏幕尺寸越来越碎片化，越来越难记。有两个关键点是大家需要掌握的。总结一下： Apple 目前只有三种逻辑屏幕分辨率：320pt、375pt 和 414pt。 适配规则有两种方式：一是直接垂直边长，即垂直方向可以看到更多的内容（符合该规则的包括iPhone 4s到iPhone 5，从iPhone 8到iPhone X，从iPhone 8 Plus到iPhone XR、iPhone卡（符合此规则的包括iPhone 5s到iPhone6和iPhone 6 Plus，以及从iPhone X到iPhone Xs Max和iPhone XR）。