2020年6月23日凌晨1点，苹果在线上举办了今年的WWDC大会，这次还破天荒的在国内网站上进行了直播。这次发布关于苹果新系统IOS14的消息就铺天盖地的涌来，可以说这回iOS 14是近几年来更新比较“颠覆”的一次，但是此次发布会并没有发布苹果手机iphone12系列，但ios14的体验感，让我们对iphone12系列手机充满了期待。

2020年10月14日凌晨1点，伴随着世界新冠疫情，苹果手机第二场秋季发布会终于拉开了帷幕，与大家见面。此次发布会引起了世界一大批苹果粉的追随，熬夜看了苹果发布会，不负众望苹果公司一口气发布了2020年的四款iPhone手机：iPhone 12、iPhone 12 mini、iPhone 12 Pro和 iPhone 12 Pro Max，结合了乔布斯时代的边框，又融入新的设计理念，质感、大屏、交互、视觉融为一身的产品，迎合了5G时代又一大亮点科技产品。

话不多说，先上图，一睹为快

然而，作为UI/UX设计师来说，更关注的是界面设计以及交互体验设计。也就是我们常说的User interface and User interaction。

本周搜集了一些关于iphone12的一些资料，结合自己的一些项目经验，分享大家学习使用，运用到各自的项目中去。

（一）  iphone12系列显示屏

1.iPhone 12 mini：超视网膜 XDR 显示屏，5.4 英寸 (对角线) OLED 全面屏，2340 x 1080 像素分辨率，476 ppi。iPhone 12 mini在体积上甚至比第二代SE更小，但因为采用了全面屏设计，屏幕可视面积反而更大。适合小尺寸爱好者并且预算不多的果粉爱好者。iPhone 12 mini 显示屏采用曲线优美的圆角设计，四个圆角位于一个标准矩形内。按照标准矩形测量时，屏幕的对角线长度是 5.42 英寸 (实际可视区域较小)。

2.iPhone 12 ：超视网膜 XDR 显示屏，6.1 英寸 (对角线) OLED 全面屏，2532 x 1170 像素分辨率，460 ppi。iPhone 12 显示屏采用曲线优美的圆角设计，四个圆角位于一个标准矩形内。按照标准矩形测量时，屏幕的对角线长度是 6.06 英寸 (实际可视区域较小)。

3.iPhone 12 Pro ：超视网膜 XDR 显示屏，6.1 英寸 (对角线) OLED 全面屏，2532 x 1170 像素分辨率，460 ppi。iPhone 12 Pro 显示屏采用曲线优美的圆角设计，四个圆角位于一个标准矩形内。按照标准矩形测量时，屏幕的对角线长度是 6.06 英寸 (实际可视区域较小)。

注：iPhone 12与iphone12 Pro两者最大的区别在于尼特最大亮度（典型）上，前者为625，后者为800。（当然价格也有所不同）

iPhone 12 Pro Max ：超视网膜 XDR 显示屏，6.7 英寸 (对角线) OLED 全面屏，2778 x 1284 像素分辨率，458 ppi。iPhone 12 Pro Max 显示屏采用曲线优美的圆角设计，四个圆角位于一个标准矩形内。按照标准矩形测量时，屏幕的对角线长度是 6.68 英寸 (实际可视区域较小)。

（二）  UI设计如何适配

目前我们在设计UI界面时，一般是基于iPhone7或者iphone8来进行设计（分辨率750*1334px，在Sketch中作图尺寸为375*667pt），也有以iPhone 11 Pro为设计基准的做法（分辨率1125*2436px，在Sketch中作图尺寸为375*812pt），我一般在ps的话基于iphone7或者iphone8来进行设计时750*1334px，然而基于iphone11pro时则采用750*1624px进行设计。然后提供切图给到前端或者安卓或者IOS开发人员。目前大屏时代来说，一般都是@2x和@3x的切图。

首先，我们要明确一点：手机适配采用几倍图与PPI有关系，这就是为什么iPhone4、5、6之间分辨率和屏幕尺寸不一样，但是同样采用@2x二倍图的原因，因为它们有同样的PPI（326ppi）。

我们先看新发布的iphone12系列：

iPhone 12 mini屏幕尺寸为5.4英寸，分辨率为1080*2340px，

iPhone 12和iPhone 12 Pro屏幕尺寸均为6.1英寸，分辨率1170*2532px，

iPhone 12 Pro Max屏幕尺寸为6.7英寸，分辨率为1284*2778px。

然后我们再看上次发布的iphone11系列：

iPhone11屏幕尺寸为6.1英寸，分辨率为1792*828px，

iPhone11Pro屏幕尺寸为5.8英寸，分辨率为2436*1125px，

iPhone11Pro Max屏幕尺寸为6.5英寸，分辨率为2688*1242px。

从页面宽高比例来看：

iPhone 12 Pro的逻辑像素宽度是1170/3=390pt，高度是2532/3=844pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt，高度是2436/3=812pt。其实就是iPhone 12 Pro宽度比iPhone 11 Pro多15pt，垂直方向上的显示内容多了32pt，有些类似于iPhone 5和iPhone 6的适配方式。

同理，iPhone 12 mini（1080*2340px）的PPI是476ppi，与iPhone 11 Pro（三倍图）的458ppi相差不大，同样都采用了超视网膜 XDR 显示屏，我们可以推论出它们使用的也都是三倍图@3x。

从页面宽高比例来看：

iPhone 12 mini的逻辑像素宽度是1080/3=360pt，高度是2340/3=780pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt，高度是2436/3=812pt。iPhone 12 mini宽度比iPhone 11 Pro少15pt，垂直方向上的显示内容少了32pt。 

最后是6.7英寸的iPhone 12 Pro Max（1284*2778px）的PPI是458ppi，与iPhone 11 Pro（三倍图）的458ppi相同，都采用了超视网膜 XDR 显示屏，我们可以推论出它们使用的都是三倍图@3x。（也可以用iPhone 11 Pro Max与之对比） 

从页面宽高比例来看：

iPhone 12 Pro Max的逻辑像素宽度是1284/3=428pt，高度2778/3=926pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt，高度是2436/3=812pt。iPhone 12 Pro Max宽度比iPhone 11 Pro多53pt，垂直方向上的显示内容多了114pt。

所以，Phone 12 mini、iPhone 12、iPhone 12 Pro、iPhone 12 Pro Max使用的均是三倍图@3x；我们做设计的时候使用Sketch的情况下，设计尺寸应为390*844pt，如果使用ps进行设计时建议设计尺寸780*1688px。（以iphone12或iphone12 pro为基准做适配就可以），这和iphone11pro类似。

（三）  新的交互效果

1.  淘宝基于iOS14新特性的Widgets组件设计

在widgets设计要求中，为了让用户的桌面具备更加一致性和统一的视觉观感，我们依旧延续iOS自身的设计标准，同时秉承淘宝自身的设计基因来完成手淘widgets的设计准则。

2.  3D触摸

3D触摸可以说是为触摸交互方式提供了另一个维度的交互，在支持3D触摸的设备上，用户可以通过对屏幕施加不同程度的压力来唤醒不同的功能，例如：可以触发菜单，显示更多的内容甚至是播放动画，而以上均无需用户去学习新的手势操作即可使用。当其轻压屏幕且获得相应响应的同时，便意味着其发现了一个新的交互维度。这也是物联网时代的一个趋势，我们可以在自己的硬件产品中借鉴使用。

3.敲一敲

设置 辅助功能 触控 轻点背面

而每台手机，可以设两种情况：敲两下、敲三下。

以前 iPhone 截屏，需要同时按下两个实体按键才能截。现在升级 iOS 14 之后，快速敲两下手机背面，截屏就完成了。

是不是很6，其实华为也有类似功能，就是轻巧手机屏幕截屏。新出的华为手机应该都有这个功能。

4.空间音频

苹果官方的解释定义：

具备动态头部追踪功能的空间音频，可将环绕声道精准置于合适的方位，即便你转动头部或移动设备也没问题。简单的说是可以理解为固定音频。

AirPods Pro模拟

当我们我们摇头时，不会因为摇头而改变屏幕声音的方向。

普通耳机模拟

但如果用的是普通耳机，在头部方向改变时，音频的方向也会改变。

除了这些之外，IOS14还有很多生理上的交互和业务逻辑上的交互设计创新，尽管有些会遭到一些质疑的声音或者被吐槽，但是实践是检验真理的唯一标准，让我们拭目以待吧。如果想体验一些关于手机的功能，建议可以到城市苹果专卖店去体验一番。做为设计者来说，学习别人的长处，打造自己精致、精细、精准的设计创新才会让我们走的更远。

设计源于生活，科技服务大众。今天就到这里，我们下期见吧。

Powered by Froala Editor