10月13日，Apple召开了年度发布会，并推出了四款新iPhone。大部分的讨论显然是关于新设计和功能的，我们先把它们放在一边：
我认为回到iPhone 5 / iPad Pro的风格是一个不错的选择，我个人很喜欢这种设计。我喜欢Pro的功能，并且我也有一个小一点的iPhone。磁充电可以让未来的Apple笔记本电脑（基于ARM）以同样的方式进行充电。
但是很少会有人去谈论这个问题。
如果你是从事移动应用程序（或响应式网站）的设计师，你可能会知道，有越来越多的Apple移动设备可供选择。这就是到目前为止，Artboard预设在Sketch和Figma中的外观。
但是这些新的iPhone正在使情况变得更加复杂。还记得Steve Jobs推出配备Retina显示屏的iPhone 4吗？
他特别提到，这款手机的基本分辨率与其他所有Apple手机的基本分辨率完全相同——320 x480，仅仅只是像素密度高出了2倍。
那是一个绝佳且简单的UI设计时代。你将所有内容设计为320 x 480p，并为Retina导出@2x资源（640 x 960）。
这非常“Apple”——清晰且易于遵循的途径，就是消除不必要的复杂性。
01
欢迎来到2020
视口大小。我甚至没有包括第一代iPhone SE（320x568）
那360x780和390x844的分辨率来自哪里呢？好吧，它们只是这些手机主要分辨率的1/3。但这会增加很多复杂性，对吧？
那么如何处理呢？
根据这条推特，以iPhone 12和12 Pro为例，我们获得了新的390宽度。
但是，iPhone 12 Mini的分辨率缩小到了与iPhone X一样——375 x 812。这种方法的问题在于，它不再是3倍的比例，而是2.88倍。当然，使用较小的屏幕并不会造成太大的麻烦，因为大多数关于如何显示对象的实际计算都是用代码完成的。
Ukiyo——我们正在开发的创意应用程序——显示在目前所有可用的iPhone上。
02
如何应用到界面设计？
在上图，你可以看到我们目前在HYPE4上开发的应用程序的设计示例。如你所见，这并不理想，尤其是顶部和底部的间距需要调整才能正确显示。在一些手机上，主按钮需要滚动，因此我们必须调整整个卡片和字体大小，以便这些设备能够使用和适应它。（这发生在开发过程中）
仅向上缩放图像（左）；为每种不同的分辨率进行必要调整（右）
当然，Swift UI和所有其他编码方面的进步使它变得更加简单，但是在设计阶段，我们仍然希望看到它在更大的设备上会是什么样子。我们经常使用Sketch Mirror在这些设备上进行预览，所以这使得我们要做的工作比我们想做的要多。
到目前为止，我们为375 x 812的iPhone X和更大的414x896设计了视口。它涵盖了大多数人的手机，且开发人员调整了布局，以在其他少数设备上适应更多的内容（或仅仅只是放大）。
但新的390和428宽度呢？
我们是否应该简单地为这些手机增加设计？
答案是，要视情况而定。在消耗内容的情况下，UI可以保持相对不变的大小，而内容本身可以被放大并具有更高的质量（以像素为单位）。
但是仅仅是把每一个设计都放大，可能会失去我们为特定大小设置的字体之间的平衡。它们可能会看起来太大、太小，或是太宽。
另外，一些放大或缩小比例可能会导致非常细的线条出现不好的边缘柔化情况，因为它们都是基于像素近似值的，所以如果你使用的是非常细或浅的字体，那么可能会丢失一些易读性。
Apple在iOS7之后解决了这个问题，它引入了更粗和更深的字体，并去掉了大多数“浅色”字体。但是有些设计师（甚至更多的产品所有者）喜欢这些浅色字体，出于某些原因，他们认为这是“简约”和“好的设计”。
如果我们尝试将相同的“滚动高度”设置到这些手机上，那么我们最终会得到一些未使用的空间。显然，这有些夸张，因为其中一些手机具有不同的宽高比。
03
折叠
折叠是一个很早的概念，即用看不见的线条将我们在一个屏幕（无需滚动）上看到的内容与设计的其余部分区分开来。其理念是，所有最重要的元素都应该“在折叠上”以便访问。
有一些争论点是“人们不会滚动屏幕”，这在现在听起来有点傻（鉴于我们平均每天滚动屏幕300米）。
但是，这可能会影响某些电子商务项目。在这些项目中，通过精心设计使一个屏幕上显示尽可能多的相关信息和立即购买按钮。当然，我们可以创建一个覆盖按钮，但这并不能解决特定手机上切断信息的问题。
因此，我想对于电子商务而言，通过将相同的设计放大到更大的尺寸来测试体验实际上可能会更容易，因为这将使我们对人们在所有设备上看到的内容更加一致。
一个高44p（在1x时也是44像素高）的按钮在2x时仅为88像素高，从320x480视口中的渲染出的同样的44p。
04
结论
我错过了基于同一视口的两种分辨率的时代。它以一种易于评估的方式使体验的设计变得容易得多。
在当前的碎片化时代下，iOS逐渐变得与Android一样——具有多种分辨率、宽高比和设备，这增加了复杂性。
原文链接：
作者：Michal Malewicz
译者：设计小菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
我 们
服务.体验.交互设计传道者
公众号
「yizhizhaojun」
一只朝菌设计学园
联络微信
平菇老师
「zhaojundesign」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。