iphone分辨率_iPhone分辨率越来越多，UI设计师应如何应对？

本文由静Design翻译小组出品 译者：Winterbure / 没有心的无心菜      原文： Michal Malewicz https://uxdesign.cc/iphone-12-vs-designers 静Design翻译小组持续招新中，有兴趣的小伙伴请加静电微信Hixulei报名 10月13日，Apple举行了年度发布会，并且推出了四款新iPhone。大部分讨论显然是关于新设计和新功能的，因此让我们将他们排除在外： 回到iPhone 5/iPad Pro设计风格是一个不错的选择，个人很喜欢这种设计。我也喜欢它的专业功能并且拥有一个更小的iPhone。磁吸无线充电也带回了人们对以同样方式充电的未来的苹果笔记本电脑(ARM)的希望。(这里是指苹果电脑的之前的magsafe，即磁吸充电方式，后被砍掉换成USB连接。笔者这里的意思是指iPhone12的磁吸充电方式的“复活”，为磁吸充电方式再次应用于未来的苹果电脑带来了希望。) 但是在华丽的有着玻璃和金属的“艺术品”的背后，对于设计师来说，却有着非常棘手的问题需要处理。 如果你是从事手机app(或是响应式网站)的UI设计师，会有越来越多的苹果机型可供选择。到目前为止，这是Sketch和Figma中画板尺寸的预设。 但是新的iPhone12让这种情况变得更复杂。还记得史蒂夫·乔布斯(Steve Jobs)推出配有Retina显示屏的iPhone 4吗？ 他特别提到iPhone4的实际分辨率与所有其他iPhone的实际分辨率完全相同，都是320 x480px，只是像素密度是原来的2倍。 那是一个对于UI设计来说简单又美好的时期。你把所有内容设计成320*480px，再为Retina屏(640x960px)导出一套@2x图作为资源就可以了。这种方式非常“苹果”，即清晰而又易于遵循的方法，就是消除不必要的复杂性。 那360x780和390x844分辨率来自哪里呢？好吧，它们只是这些手机的实际分辨率的1/3。虽然是这样，但是分辨率确实是多了起来。 那么如何处理现在这种情况呢？ 根据这篇推文，关于iPhone12和iPhone12pro，我们有了个新的390pt的宽度。 但是，iPhone 12 Mini的分辨率降低了375 x 812，与iPhone X相同。这种情况的问题在于，它不再是3x的比率，而是2.88x。当然，如果在较小的屏幕上使用也不会造成太多像素上的损耗(比如变虚等等)。因为有关如何显示对象的大小，实际计算都是通过代码来完成的。 那该如何设计呢？ 上面你可以看到我们目前正在开发设计的 HYPE4 应用实例。正如你所看到的那样，它并不理想，因为需要在不同手机之间进行调整才能看起来不违和，特别是顶部和底部的间距。在一些手机上，主按钮需要滚动，所以我们必须调整整个卡片和字体大小，让这些设备仍然能够与它相适配。(这种情况在开发过程中经常发生) 左侧为直接拉伸的效果，右侧为适配布局后的效果 当然Swift UI和其他所有代码方面的改进让它变得更简单一些，但在设计阶段，我们还是想看看它在大屏设备上的表现到底如何。我们也经常使用Sketch Mirror来在这些设备上预览，但这样无疑加大了我们的工作量。 在这之前，我们为iPhone X设计了375 x 812的视图，当然还有更大的414x896界面。这样的尺寸覆盖了几乎全系机型，并且开发者还调整了布局，适配其他少数设备，以显示更多内容。 但是390 X 428的新尺寸该怎么设计呢？ 将设计元素放大就可以么？ 答案是，具体情况具体对待。对于内容展示型应用，UI可以保持相对不变的大小，而对于内容本身需要扩大的情况(图片较多，依赖图形的应用，比如游戏等)，可以提升图片质量(以像素为单位)。 但是，只是将每个设计都放大，可能会失去我们在特定尺寸中设置的字体的良好平衡。我们所做的设计可能会显得太大，太小，或太宽。 此外，在非常细的线条中，一些向上或向下的缩放可能会导致很不友好的抗锯齿情形，因为它完全基于像素近似值，所以如果你使用非常细/浅的字体，就会牺牲可读性。 苹果在iOS 7之后推出了更大/更粗的字重，并去除大部分 "极细"字体，进而决了这个问题。但一些设计师(甚至更多的用户)喜欢那些轻巧的字体，因为他们出于某种原因将其视为 "极简 "和 "好的设计"。 如果我们在这些手机上设置相同的 "滚动高度"，那么最终会有一些闲置的空间，这样显然不好。虽然有点夸张，因为其中一些手机的长宽比不同--这里只想说明普遍原则。 分隔栏(首屏) 分隔栏(首屏)是一个相当古老的概念，它是一条看不见的线，将我们通常在一个屏幕上看到的东西(不需要滚动)和其他设计区分开来。这个概念是，所有最重要的元素都应该在 "分隔栏之上"，以便于访问。 有些人认为“用户通常不会去滚动屏幕” ，现在这种观点听起来有点愚蠢(考虑到我们平均每天滚动屏幕的距离大约300米)。 但它可能会影响到一些电商项目，因为在这些项目中，我们在屏幕上精心设计了尽可能多的相关信息和一个 "立即购买 "按钮。当然，我们可以创建一个悬浮按钮，但这并不能解决在特定手机上某些信息无法显示的问题。 所以我想，对于电商APP来说，实际上可能更容易测试和体验，只需要把同样的设计放大到更大，因为这样可以让人们在所有设备上看的东西一模一样。 一个44PT高(1x也是44px高)的按钮在2x时只是88像素高，在320x480视图下会呈现出相同的44像素。 结论 我很怀念只有两种分辨率的时代，它们是基于同一个视图的。它以一种很好衡量的方式让体验设计变得更容易。 在目前碎片化的情况下，iOS慢慢变成了Android的样子--有大量的分辨率、宽高比和设备，这些都增加了系统的复杂性。 所以，各位设计师做好准备了吗？你需要更多的按照机型进行特别的适配，一种分辨率打天下的时代已经结束了，不管是375还是390或者414，要适配的内容更多了。iPhone的碎片化时代也来临了。不过不用担心，之前您怎么适配安卓的，现在拿适配它们的方法适配iPhone即可。 ▼ 往期精彩回顾 ▼ 有这20款Sketch插件，大幅提升设计效率不用愁 本周优秀UI作品赏析(作品展示页面解析)-No.16 晕~Adobe CC 2020还没捂热，2021版就来啦 干货福利！iPhone 12 超高清Mockup素材来袭 一篇文掌握iOS 14小组件(Widget)设计技巧 UI设计稿/作品集 迷惑英文标题大赏(附正确使用方法) 干货福利！iPhone 12 超高清Mockup素材来袭 静电的UI设计教室 秋季班开始报名啦 新增C4D课程 3D设计内容 目前优惠插班名额接受报名中 系统指导   决战金秋求职季 ↓↓长按二维码咨询老师↓↓ 我就知道你“在看”