iPhone 12 的圆角和圆角

12 mini 确实是 iPhone 12 系列中最完美的形态,要是搁两年前,还没拍视频时,我一定选 mini 的。但按我现在拿手机当 相机+半台电脑 来用的状况来说,大屏和摄像的需求让我只能退而求其次选择连圆角都对不齐的 PM 了。

6s 已经被我压榨尽,希望接下来也能好好压榨 PM 做点还看得过去的东西出来。

由于 iPhone 的 dock 栏轮廓是随屏幕和机身的弧线同心圆,可限于栅格系统规范和三款机型轮廓比例一致性,导致这届出现这种蛋疼情况:

明明上下左右间距是均等的,但因为圆角弧线幅度不一致,所以视觉上不再是之前的全同心圆关系。另,因刘海尺寸一样,所以三款机型两边区域信息布局都不一样。

群友余季的屏幕截图
栅格系统示意
dock 栏与 icon 细节

知乎问答:如何评价 iPhone X 的工业设计?

这个问题在知乎上的讨论有非常多的争议。

以下是我对 iPhone X 的关注点及一些看法:

 


在我看来,X 是 Apple 未来五到十年内的新起点。

先搁置各种美丑争议,我分享一下我对 X 的关注点,主要集中在以下四个关键词:

『纵深』『层』『内容』『取景器』

这四个词所代表的逻辑,是载体的弱化以及对内容的聚焦。

多数人的关注点在于屏幕上方那个『小小的空间』,但已经有许多朋友发现了,在官方发布的所有介绍里,给了这个圆角很多的镜头,乔纳森的旁白也在此处停留了不少时间。一个圆角而已,给那么多镜头,是想做什么?

我借用@Ami 的两张图给大家感受一下:

这是直角

这是圆角

仅仅一个圆角的改变,对内部的侵入,整个视觉重心都被引导收缩至这个『视窗』之内。交互的认知也就从这里开始发生了变化。这个变化就来自 Focus 的区别,前者是一张『画布』,而后者却成为了一个『视窗』或『层』。

同样是圆角,不同的弧度所呈现的结果是不同的:

左一形成了一个硬朗的实体,右一则是呈现出一个圆润的体块感,而中间这个区间就有其他可能性了。这种可能性往前再推进一步呢?

比方说,如果这是一个『视窗』?

是不是觉得很眼熟?

这恰恰就是 iOS 7的基础逻辑:

『层』

这一点在 iOS7开始加入的『摇晃效果』里可以看到比较直观的表现,即晃动手机时各『层』跟随晃动的视差动效。

X 额头上那一撇刘海可以说是向技术硬件妥协的表现,但这么一大堆东西,既可以放在上面,也可以放在下面,可以选择聚在一块,也可以分开来摆,可以选择凸一块出来,也可以拉平了做一道全黑,这时候,如何选择就取决于你究竟想要做什么事情了。

X 这一块『小小的空间』所带来的,不仅仅是整合了一大堆疯狂、前沿的 senso,我的看法主要集中在以下四点:

1、『取景器』与内容的纵深

在网上随便找了一张图,这是我对于 X 屏幕处理方式的感受。

人类对于『视野』的感受经验,往往是寄托于参照物的。一片开阔的海面,与一片有树木的沙滩,虽然主体没有发生变化,但是这两者之间的层级关系和纵深感是完全不同的。开阔海面所提供的感受,类似于闭上眼睛后那些血管的残影,星星点点却也模糊不清;而树木与草地的侵入则形成了一道前景,一个『取景器』,使得视野被引导至『前景→沙滩→海浪→海面→海平面→天空』这样一组层级关系里。

这样的感受同样也存在于我们日常摄影的经验里:

『树叶→建筑→天空』

『一座大门』

所以,我个人的看法是,这个『刘海』方案的选择实际上与 iOS7 的逻辑是一脉相承的,是在妥协的过程中对原有逻辑的延续或继承。

注意截图中箭头所指的位置,可以看到 UI 适配外形所做的变化。但这只是为了适配圆角所做的决定吗?再看看 iOS 的变化:

界面形态外部的圆角处理,来自『层』的逻辑需求。

反过来,既然形态内部圆角的侵入能提供由这头看向那头的『视野』,那么这个『视野』与『层』很自然地就形成了一组对偶的关系。

更进一步说,有变化的边缘特征,与完整的框相比,看起来更像『取景器』,里面是无边际的内容世界,而完整的框所呈现的就只是一个『画框』或者一张『画布』。『取景器』所呈现的内部无边际的感觉,需要『层』来明确内容的逻辑关系,与整个圆润的一体化融合在一起,视觉界面上的穿透感就结合得很自然了。其他家那类完整的框的方案,不能说不好,但是其实无论有没有曲面或者边缘多窄一点点,本质上都是一回事,没本质的区别,屏占比再高也就是一张没有纵深『画布』。

关于『层』,可以去看下 Apple 的官网、视频乃至包装、店面及新总部大楼的设计,iPhone X 的官网专页更甚,这不仅仅是前两年 iOS7 推出时大家议论的什么扁平化或者 style 的转变,要拉长时间维度来看,这是布局。

 

2、从隔离感到融入感

由『层』的概念延伸出来,自然会形成『屏幕这边』与『屏幕那边』。『这边』是我们的物理世界,『那边』是叠加了各种『层』的虚拟世界,两个世界之间需要一个明确的秩序感来确认边界,这个边界很自然地就由屏幕的边缘来承担。

为什么需要边界?

因为边界意味着『安全感』和『可控感』。

这种体验可以通过打电动游戏或者 VR 打僵尸的经验获得,对比一下那种真实扑面的僵尸游戏与带有各类 HUD 的射击类游戏,前者所提供的是惊险刺激的紧张感,后者却能让你觉得自己掌控了全局。对于 AR 而言,我们需要的是叠加更多的信息与内容到现实当中,掌控一切是 AR 需要强调的体验,所以边界的存在是有意义的。

把『取景器』的体验移植过来,是循序渐进推广 AR 的一种较为恰当的处理方案。这个方案思路,其实和 iPhone 早期的拟物化界面是类似的,也就是用熟悉的界面导入新的界面。

融入是需要代价的,学习成本和内容的重新设计都需要时间,但这个过程需要旧界面的引导来消除陌生感和紧张感。承担『取景器』的边界可以在这个时间过程里承担一个缓冲层的作用。

 

3、应该看向哪里

人的视觉注意力是有限的,目光集中的范围也是有限的,所以常常会有目光追踪视觉热力分布这样的设计研究。

当我们看向手机的时候,内侧镜头在上方的位置时,是视线范围内很自然的一个状态。由于下半部被手掌握持,以至于下角部的镜头既容易被手掌遮挡,又不在正常的视线范围内,也就意味着,需要调整早已习惯的姿态来使用。基于对注意力和视觉热力的考虑,看向『额头』是更为合理的。

但这又产生了新的问题,也就是凹形和凸形的观感不太好。

大家可以尝试随机问一下身边的人,不需要提前准备,问问他们,就在刚才,他们手机屏幕顶部那排小图标里都有哪些应用在提示,或者都有哪些图标在显示。几乎不会有人在日常的使用中会注意到那个位置。

我想说的是,这是一个注意力盲区,或者说是弱视觉关注区,当新手机在手上摆弄一两天之后,它就会渐渐成为一个边缘地带,而你的视觉中心会回到原本注意的那些地方。但我并不是说这个形状好看,而是因为现在新品发布,大家会关注所有细节,放大一切看得见的东西,然而如果把这个屏幕1:1打印出来拿在手上看上好一阵子,这个边缘也就渐渐后退了。

不论关注点在显示区域多出来的两个『角』,还是侵入屏幕的『刘海』,前者的显示内容无关紧要,后者在色彩上属于后退的角色,而两者都处于视觉边缘的弱关注区,那么,如果有更重要的产品需求,例如由深度感知系统所带来的Face ID,这个凹凸正负形也就没必要去纠结了。

但它仍然不是一个好看的东西对吧?是的。

 

4、放长线,布大局

大家都知道全面屏是未来的趋势,可是,为什么是全面屏?为什么不是正方形屏?不是电子墨水屏?全面屏之所以成为趋势,并不是因为什么屏占比高了会更漂亮这种肤浅的理由,而是这是内容与其载体之间关系的必然走向。

这意味着,所有细节都得为内容服务,所有的新增元素都得围绕着内容的生成、传播服务,而 X 则在大家关于屏占比的吵嚷声中,自顾自地继续往『容器』更进了一步。

深感镜头系统和双摄像带来更新更好的内容生产方式,3万个探测点能扫下并识别人类变化细微的脸部细节,还识别不出其他物体么?芯片对 AR 的倾斜使 X 成为极佳的实验平台,必将吸引大量开发者聚集,别家阵营不拼命追赶难道看着这个台风眼被独揽?无线充电一直缺少有力的推动,因为对于其他厂商而言这仅仅只是一个销售噱头,为什么要这么做缺少有力的动机支撑,但 Apple 从来就是追求拔掉一切线缆的,因为智能设备就应该是独立的、完整的、浑然天成的。

相比之下,侧弧面触屏和镜头放在下巴上,除了片面地一味追求屏占比外,还有什么必须的理由吗?没有。

对内容生产、用户体验以及交互认识能有机会产生质变的切入点,就算尚没做到理想中的成熟度也是需要立 Flag 来抢步争夺的,在这些长线的布局面前,快一步就是胜利,一个『小小的空间』就这么不能妥协吗?设计是一系列选择的结果,并不是目的。况且这一小片能致命吗?如果可以用一小片黑域换来更深更宽的护城河,让对手紧张兮兮地追赶下一步棋,何乐而不为呢?

造型只是工业设计最后呈现的结果,过分追求屏占比是歧途。

推了那么多年没推起来的QI终于要普及开了,大量开发资源将会向 AR 和 AI 倾斜,深感镜头和人脸识别也将成为其他厂商下一波猛追的标配,开发者又有了全新的舞台,还有更多有趣的变化将因此而来。

面对同样的全屏困局,选择『刘海』还是『下巴』,是立足点的区别,也是Vision和能力的差距。

护城河那么深,不被抛太远就偷笑了,就别谈什么超越和碾压了嘛。

 

*注:以上分析仅为个人观点,无任何利益相关,或有疏漏和谬误,欢迎指正和探讨。

 


以下为本文在知乎问答的原链接:

https://www.zhihu.com/question/65271057/answer/229572236

拓展阅读:

1、关于圆角与屏幕的关系以及设计手法上的分析,见@Rip Guo的回答。

2、对『刘海』的歧义和反对意见,见我在@张小凡回答评论区里的补充说明。

3、第四部分的观点可参考@张亮的回答及我在评论区内的留言。