IOS14UI设计规范全解

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权不使用原创授权
165 0 2 2020-10-17

iphone12手机终于来了,作为设计师我们最关心的是IOS14系统内的UI设计规范问题,让我们共同学习一下吧。

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

全部评论:0

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票