iPhoneX 设计适配原则拆解&iPhoneX到底有多神?


iPhone十周年,Apple 不负众望拿出了一款重量级产品iPhone X。

“FaceID、全面屏、无线充电、ARKit”等这些新技术都给了消费者们一些新鲜期待感,也直接导致iPhone8&8Plus 开售时门庭零落。

就在消费者们翘首以待之时,设计圈却为止一“震”!无论你是否喜欢,iPhone
X的“刘海儿”(头帘)如早期爆料一样横空出现。 适配问题降临到每一位无线设计师身上,而 Apple Developer
官网发布的设计规则又比较简约泛泛,iPhone X 的适配之路到底怎么走?


1、尺寸分配

经过精细的推算以及与 iOS 开发大哥谨慎研讨后,总结出了一套iPhone X设计布局规则及注意事项 Share给大家,下面开始逐一解读:


Apple 官方标准中仅标注了 iPhone X 比 4.7寸 iPhone 多出 145 points。多出的这部分是如何分配给 Navigation bar & Bottom bar ?



通过上图对比可以发现:

1、在顶部的 Navigation bar 增加了 44给了“刘海儿”传感器区域);

2、底部 Bottom bar 增加了 34给了 Home indicator区域,即可以理解成屏幕内的“Home按钮”);

3、中间 Safe Area 信息展示区增加了 67即 iPhone X 在一屏内可以看到比4.7寸屏更多的信息);

这些均为常规尺寸,有些个性的无线设计师喜欢自定义APP头、尾区域高度,如果在不低于安全区限制的距离即可。

同时 iPhone X 的分辨率是 1125x2436,458ppi,所以需要 @3x 的切图,与iPhone Plus切图可以通用(没有传言中的 @4x 切图,视觉设计师可以长出一口气...)



2、刘海儿问题

“刘海儿”区域是因为需要放置多种传感器而暂时做出的妥协。虽然目前看起来有些怪,但是相信包容很强的果粉们会快速习惯,也要相信未来技术不断发展,某一天这个小刘海会被“剪掉”,那时的我们也会笑谈今天的 “刘海儿式” iPhoneX…


设计师在考虑界面布局时对“刘海儿”要格外注意避让,常规做法:

1、不要在刘海儿区内或者叠加操作动作,否则会与系统属性区域产生视觉冲突或者交互互压情况;

2、沉浸式页面,对以往的头图或者头部底色区域进行拉伸或者按照新增尺寸增加对应的尺寸,否则会出现上中图的尴尬;

3、长页面向上滑动时,时间bar变成纯底色,保证页面的以规整矩形展示; Time bar 再支持颜色定制,也能解决一些个性 App Navigation bar主题色不同的问题……



3、圆角弧度

说完屏幕的高度变化,再看看 iPhone X 的另一个颠覆性属性,全面屏后的“圆角弧度”成了适配中的又一个坑!

Navigation bar 因为有系统 bar 的阻隔还好,但是底部 Bottom bar 有可能成为自动适配一个重灾区,如下:



自定义 Bottom bar 的App会问题比较严重,或如上左图悬浮中间下面漏出页面,或如上中图紧贴屏幕底部,交互操作与 Home indicator (屏幕内的“Home”横线)完全重合;

所以底部 Bottom bar一定要避让开 Home indicator,留好足够高度;


4、安全区域(横竖屏)

上面解答了一些“刘海儿”&“圆角弧度”的注意事项和设计规则,那么刨除这两个关键因素后屏幕边缘后安全区域 (Safe Area) 到底是多少???

详见下图,我做了详尽的数值拆解,红色为安全区域,绿色为主要注意不要含有有效信息和交互行为的边缘区域;



备注: 文章里给出的都是单倍数值。 不同团队的设计师习惯不同(有喜欢直接使用@2x画布,有喜欢使用@1x画布)。 这里我推荐用单倍数值画设计稿,Sketch导出时无论是整个页面还是单个元素都可以方便快捷的生成@2x、@3x图片;



5、再聊聊 iPhone X 各种新属性

* Face ID

很多朋友质疑苹果炒冷饭,“脸部识别”已不是新鲜词,Android机上早有实现,包括我们支付宝也早早探索了脸部识别技术。

但是今年iPhone X的 Face ID 跟我们早期接触的脸部识不一样,技术上做了更多“黑科技”的升级;

国内支付软件的人脸识别在今年
3.15
晚会就被吐槽安全度太低,简单的PS甚至做成GIF动效都可以通过眨眨眼、扭扭脖的识别。。。所以说目前市面上流行的人脸识别只是二维视角上初级识别技术。
而 iPhoneX 这次推出的 Face ID 是从立体脸部轮廓去做更精细的识别。

不过因为没有真机无法真实对比,无法准确判断它到底有多精准?!



详细描述: Face ID在解锁时,会先拍摄你脸部的照片,同时投射超过30,000个肉眼不可见的光点在你脸上,通过红外镜头会读取点阵图案,并对它们进行分析,为你的脸部绘制精确细致的深度图。然后通过这两张图片构建出你的脸部模型来,和你以前的脸部模型确认是否匹配。而且通过泛光感应元件,iPhone
X在黑暗中也能识别你的脸。与此同时,iPhone X还具备眼球追踪功能,在你面对屏幕,但是眼睛没有看着它的时候,也是不会解锁的。

PS,我也比较关心邻邦那些 “易容术高手” 或者国内网红美女们 能否击败 Face ID...

其实技术是一方面,人脸识别的交互体验也是关键。试想滑动解锁、指纹解锁都是动作幅度很小的操作。而人脸识别则需要手机屏幕与人脸形成一定角度的面积纳入。说的再简单点就是 Face ID 解锁的动作幅度要比Touch ID 大很多...

So,这种大幅度的交互行为是否在生活中有些特定环境会不适用;又或者是否又会像 早期Siri 用户不愿“哗众取宠”的尴尬而放弃使用... 可以等到 iPhone X 真正发行后大家真实体验后再去讨论;



* 备受瞩目的AR技术

这次 iPhone X 通过深感摄像头&ARKit 打造的动态 Emoji 比较惊艳,这项技术需要对人脸轮廓的多角度的细致立体定点捕捉,才可以把复杂的脸部变化实时传递给 Emoji 立体模型做同步还原。

不知道会不会又一次把猎奇心较强的那部分用户拉回 iMessage,并且只有iPhoneX上支持… 这是逼“科技弄潮儿”们下手这台最贵iPhone。

不过 ARKit 对AR领域的影响远不止这点表情的小新意,拭目以待!

比如发布会上演示的体育比赛时每个选手的信息展示,仰望天空时不同的星座标示、以及各种AR游戏应用等等;




* 无线充电& 全面屏

姗姗来迟的功能,没什么好炫耀的! 充电速率倒是可以关注下。



* 双面玻璃

iPhone X 的外形质感貌似精细了很多,据说上手手感很好。自从 iPhone
4s
以后双面玻璃又一次回到大众视野,虽然苹果强调这次的玻璃如何提升工艺采用更耐划定制玻璃,强化层的厚度增加了50%,覆有防油渍涂层,可以轻易抹去污迹和指纹,实现微米级别的防尘防水功能。

但是早年iPhone 4 几个月掉地一次,频繁换前后屏的伤心事还是触动了我的辛酸记忆! 耐划不代表耐摔!



最后,不管大家是否在吐槽 iPhone X 的“刘海儿”丑陋! 11月它将如期将至,让我们换个角度去看也许会有的惊喜,比如...

iPhoneX 的 “刘海儿” 让热爱天猫的小伙伴们产生了无限遐想,我也不例外!

设想当可爱的猫头与iPhoneX 结合后会产生什么样的奇妙反应,So 做了一些概念性尝试......