10月13日,苹果召开年度发布会,发布了四款新iPhone。会议的亮点是介绍新设计和新功能。简单总结一下:我觉得这个设计是iPhone5/iPadPro机型的回归,我个人非常喜欢那个设计,喜欢它小巧的体积和功能。无线充电技术可以让未来的苹果笔记本电脑(基于ARM)也拥有快充方式。适配难度在变如果设计师做过移动应用或响应式网页设计,可能知道需要适配的苹果设备尺寸越来越多。下图是目前Sketch和Figma上预设的画板。但这些新iPhone使手机的尺寸变得更加复杂。您还记得乔布斯推出了配备视网膜屏幕的iPhone4吗?他当时特别提到的是,iPhone4的基本分辨率与其他iPhone相同。320×480,但像素密度高一倍。那是一个伟大而纯粹的时期。只需要设计一个320×480的设计稿,输出2x视网膜屏幕尺寸就可以满足要求。它非常“苹果”——一条清晰、容易遵循的路径,所有这些都是为了消除不必要的复杂性。来到2020年,看看上图中一堆复杂的尺寸。我什至没有包括第一代iPhoneSE(320×568)(点击查看大图),因为这些不同的分辨率,增加了很多复杂性,对吧?那么应该如何处理呢?对于iPhone12和12Pro,根据以下推特,我们获得了新的390宽度。但是iPhone12Mini的分辨率降到了375×812,和iPhoneX一样。这台的问题是它的实际分辨率不再是3x,而是2.88x。当然,对于较小的屏幕,这不会造成太大问题,因为大多数关于如何显示对象的实际计算都是在代码中完成的。△Ukiyo——我们正在开发一款为创意人士量身打造的应用,目前所有的iPhone都可以看到。那么你如何着手设计它呢?这是一个示例设计,它并不理想,尤其是顶部和底部间距需要单独调整。在某些手机上,主页按钮需要滚动,因此我们必须调整整个卡片和字体大小以使其在这些设备上也能正常工作。△针对具体的机器分辨率进行必要的调整。只放大左边的图片是不可取的。当然,对于程序员来说,直接使用Swift代码来调试UI会简单很多,但是在设计阶段,我们还是希望能够更直观的看到在不同设备上的样子。可以在手机上使用素描镜进行预览,其实可以在设计端做更多的工作。至此,我们需要制作2个尺寸的设计稿,分别是375×812的iPhoneX尺寸和更大的414×896尺寸。覆盖大部分手机,开发者只需调整布局即可适配其他少数设备上的更多内容。但是现在新尺寸390和428的宽度如何呢?我们应该简单地扩大这些手机的设计吗?答案取决于。在内容量相同的情况下,UI可以保持相同的大小,而内容本身可以放大,质量会更高。但是只是把每一个设计都放大可能会失去我们在图片中所做的布局设计,图片可能会失去平衡。设计元素可能开始看起来太大、太小、太宽。此外,一些放大和缩小可能会导致非常细的线条出现严重的锯齿,因为这都是基于像素近似,所以如果你使用非常细/浅的字体,你可能会失去一些易读性。Apple在iOS7之后通过引入更粗的字体并摆脱了大多数太细的字体来解决了这个问题。但有些设计师喜欢这些细字体,因为他们将它们理解为“精致”和“好的设计”。如果我们尝试将相同的“滚动高度”映射到这些手机,那么我们将获得一些未使用的空间,这不是最合适的策略。这么直接画对比有点夸张,因为有些手机长宽比不一样,这里只是展示一个通用的垂直适配原理。折叠线折叠线是一个更经典的概念,一条看不见的线,将我们通常在屏幕上看到的(没有滚动)与设计的其余部分分开。这个想法是所有最重要的元素都应该在“顶部”以便更容易看到。有观点认为“人不滚动”,这在现代听起来有点傻(统计显示我们每天平均在手机上滚动300米)。但可能会影响到一些电商项目,首屏需要精心设计,尽可能多的在一屏展示相关信息,提高购买率。当然,我们可以创建一个覆盖按钮,但这并不能解决特定手机上中断信息的问题。所以我想对于电子商务来说,通过将相同的设计放大到更大的尺寸实际上可能更容易测试体验,因为这会让我们对人们在所有设备上看到的内容有一个更一致的看法。高度为44pt(等于1@x处的44px高度)的按钮在2@x处的高度为88px,在320×480视口中以44pt均匀呈现。彩云注:我觉得这里需要解释一下单位pt的含义:pt是专门为苹果操作系统设计的单位。它与屏幕上的像素密度无关,只与屏幕上的内容量有关。在第一代iPhone到iPhone3GS的非Retina屏幕上,一个点等于一个像素,可以表示为@1x;而在iPhone4到iPhone4s的Retina屏幕上,一个点等于两个像素,可以表示为@2x。而以后发布的一些设备(如iPhone6Plus、iPhoneX)也会有一个等于三个像素的点,可以表示为@3x,这样的@1x、@2x、@3x可以称为“比例因子””。总而言之,我错过了基于同一视口的两个分辨率阶段。它使体验设计更容易,也更容易衡量。随着界面的碎片化,iOS正慢慢变成Android的样子——多种分辨率、宽高比和设备增加了复杂性。彩云注:我觉得随着iPhone12的到来,屏幕尺寸越来越碎片化,越来越难记。有两个关键点需要大家掌握。总结一下:苹果目前只有三种逻辑屏幕分辨率:320pt、375pt和414pt。适配规则有两种:一种是直接垂直边长,即垂直方向可以看到更多的内容(iPhone4s到iPhone5,从iPhone8到iPhoneX,从iPhone8Plus到iPhoneXR,iPhoneXsMax,从第一代iPhoneSE到iPhone12);另一种是比例缩放,即在横向界面直接泄露更多内容,比如现实中从2张卡片扩展到3张卡片。(iPhone5s到iPhone6、iPhone6Plus、从iPhoneX到iPhoneXsMax、iPhoneXR符合此规则)。
