灵动岛：欲盖弥彰与巧夺天工

灵动岛：欲盖弥彰与巧夺天工
2022-9-23 17:9:34 Author: sspai.com(查看原文) 阅读量:16 收藏

编注：本文是「100小时后请叫我设计师」栏目「持续更新」模块的试读文章。「持续更新」中的文章将带你时刻了解最新的设计动向，轻松获得前沿设计工具与资源。

「100小时后请叫我设计师」希望不仅让你多懂一点设计，更要全方位提升你的设计水平，让你可以像设计师一样运用设计的力量。

你好，欢迎来到新一期的持续更新。

💬 评论&漫游

本次的评论，不好意思，又要聊苹果… 因为 iPhone14 Pro 上的意外惊喜（没有被爆料泄漏）灵动岛（Dynamic Island）实在赚足了眼球和话题，当然还有大片的叫好声。必须承认，灵动岛确实是近年愈发无聊的手机行业中难得的创新之一。不过，在兴奋与叫好之后，我想带大家安静下来仔细并理性地重新认识一下灵动岛，并提出几点理性的批判。这次的评论环节会和漫游合并，因为在研究灵动岛的过程中，发现了一些与之相关的老产品，我们开始吧。

印象：苹果🐂🍺

「太厉害了，这只有苹果能做出来」是我在观看发布会时的第一感受。说苹果的交互动画设计一直是行业顶尖的，iPhoneX 的手势操作动画至今也没有人能出其右，而这次的灵动岛的动画又上了一个台阶。

灵动岛延续了 iOS 动画的设计理念和手法，比如动画运动是现实的延伸、动画应保持惯性和动能、长度应该由动能和阻尼决定、带有弹性和过冲（Overshoot）、停滞是不可察觉的等等…… 这些手法都在 2018 年的 WWDC 视频 Designing Fluid Interfaces 有所讲解，常看常新。灵动岛的动画是这些理念和手法的集中体现，它用细节的堆叠呈现出了一种类似气泡和水的感觉，仿佛有了生命力，相比之下其他交互动画都显得死板了些。

灵动岛的动画有多少细节呢？我们以 The Verge 拍摄的片段「计时器缩放进入灵动岛」为例，逐步分析：

步骤一：计时器开始向缩到灵动岛的过程中，灵动岛变大的同时向上位移。

步骤二：计时器界面完全消失后，灵动岛才开始回到正常高度并开始向两侧扩张。

步骤三：计时器图标和数字在出现的时候不仅有向两侧的位移，横向尺寸也是拉长变形的。

步骤四：动画结束之前，黑色区域、计时器图标和时间数字都有一定的过冲。

正是这些细节，甚至说有些浪费时间的小动作，赋予了灵动岛动画的生命力。有趣的是，这些手法并非苹果原创，迪士尼动画师 Ollie Johnston 与 Frank Thomas 在 1981 年出版的 The Illusion of Life: Disney Animation 一书中就已经有了所谓「动画十二原则（The Twelve Basic Principles of Animation）」（如果感兴趣的话可以去看这篇文章和这个视频），而上文提到的灵动岛细节也可以在十二原则中找到对应的手法。比如步骤一中的灵动岛变大同时向上，对应十二原则的「预期动作」。

意思是说物体从静止到开始动作前会有所谓的预期动作，可让观众能预知下个动作，好比一记有力的直拳是先要向后蓄力再打出去的，缺了想后蓄力的预期动作会很突兀。那么灵动岛的「预期动作」是尺寸变大，准备把手指推上去的那个 App 「装进去」。类似的细节还有非常多，我就不一一展开了，这里放一个「灵动岛集锦」供大家欣赏。

视频来自 @JonyIveParody

灵动岛的动画设计无可挑剔，实现这个效果的开发人员更是功不可没，这些动画效果不仅步骤复杂，还涉及到了很多物理效果的模拟，我十分怀疑苹果给 iOS 的平面动画开发了某种物理引擎。除此之外，我们也不能忽略让灵动岛变为可能的其他努力，比如缩小的原深感摄像头、A16强大的渲染和抗锯齿能力、黑色足够黑的 OLED 屏幕等等。最令我印象深刻的是，灵动岛的黑色区域使用了次像素渲染的技术，以让边缘看起来更加锐利，让灵动岛看上去更像是硬件而非软件。

所以，我对灵动岛的第一感受就是🐂🍺，灵动岛的动画可以实现这件事本身就是完全值得肯定的。不过，正如刚才所说，苹果尽可能地「让灵动岛看上去是硬件而不是软件」，这让我产生了疑问：灵动岛碰上感叹号屏幕，那么灵动岛的出发点是否是遮盖硬件的缺陷呢？

思考：灵动岛解决了什么问题？

要弄清楚灵动岛是否是遮盖感叹号短板的设计，就要先放下灵动岛美丽的外表和撩人的动画，思考一下灵动岛到底解决了什么问题。在 iPhone 官方的介绍页面中，灵动岛是将「通知」「提醒」和「实时活动」整合再来一起。

通知+提醒+实时活动的整合确实是灵动岛的能力所在，而在我看来，之所以要整合这些进来，是为了优化用户进行前后台多任务操作的体验。注意，我所说的「前后台多任务」并不是说电脑上的并行多任务操作（比如使用浏览器的同时编辑文档），而是指在手机上做一件主要事情的时候另一件次要的事情也在后台进行中，比如前台在用微信聊天的同时后台打车软件在等车、前台在看照片的同时后台在Airdrop、前台在浏览音乐的同时后台在导航等等这样的主次（或者说前后台）分明的场景。在 iOS16 之前，前后台多任务场景下会有三个值得优化的问题，也就是灵动岛解决的问题：

主任务下，无法展示次任务的信息（没有界面）
主任务下，进入次任务有点麻烦（尤其是两个以上来回切换的时候）
主任务下，次任务的操作成本高（因为要进入次任务再跳回主任务）

进一步看，这三个问题也有各自的细节。比如第一个问题所说的「无法展示次任务信息」，大多时候用户不需要展示次任务的全部信息，只要一个最关键的信息即可（外卖到大距离、出租车抵达时间、计时器剩余时间…）；再比如第三个问题所说的「次任务操作成本高」，原因是次任务要进行的操作并不多但却需要我切进去再切回来，投入（切进去又切回来）产出（只是换了首歌）的不平衡。灵动岛的解决方法是：

单独用一小块区域展示次任务的重要信息，也就是灵动岛的黑色区域；
直接点击即可进入次任务；
可以不进入次任务，操作可以在展开面板中完成。

整体来看，这样的方案和实现已经几近完美。不过我更愿意称之为一个更好更完整的方案，而不是「全新」的，因为在之前几个版本的 iOS 种，我们能看到试图解决这些问题的尝试，比如苹果地图 app 就有一个独家功能，在任何界面上层展示导航信息。再比如可以通过点击屏幕左上角的胶囊跳转到正在导航/使用麦克风/录制的 app 中。第三方开发者也会有些办法曲线救国，比如叫车app会在司机到达上车点前 2 分钟发一个通知，让你做好准备。

你或许会感受到了，叫车 App 的例子是灵动岛的绝佳使用场景，它要比「司机还有 2 分钟到达直观的多」这是因为「等车来」这件事没有明确的时间节点，车是逐步到来的，乘车人与车的距离是程度的关系，而这种关系并不适合用一过性的推送通知进行展现。

回看 iOS 的历史，通知信息被逐步细分成了很多种：最开始仅有阻断式的对话框，逐步扩展出来了常用的推送通知、屏幕底部出现的面板（连接 AirPods 和 AirTag 会出现）和刘海下面的白色胶囊（靠近 HomePod 以控制）。但这些通知都是一过性的，最多可以触发一系列操作（比如连接 AirTag 的弹窗）。

不过一过性的通知并不适合展示状态，那么可以常驻的灵动岛则补充了这个缺憾，这也是灵动岛最大的功能意义——展示状态。对于叫车 App，如果使用推送通知，只能在司机即将达到之前的一个合适时间点（比如到达前 2 分钟）通知一下乘车人；而如果使用灵动岛（也就是状态），则可以一直展示司机的距离状态，或许是比通知更好的选择。所以灵动岛同样适用于其他需要展示状态的场景，比如比赛的比分和 AirDrop 的进度等等。

小结一下：灵动岛的本质是解决「前后台多任务操作」的体验问题；从通知的角度来讲，灵动岛扩展了一种展示状态的功能，补充了一过性推送通知无法解决的一些场景。为了验证我的观点同时更深入了解灵动岛，我去找了一份灵动岛支持列表，看看灵动岛到底会展示那些信息，望从中一窥究竟：

通话来电（包括Callkit）
AirPods 连接
Face ID
Apple Pay
CarKey
AirDrop
Watch 解锁
低电量模式
充电
静音开关
NFC 交互
AirPlay
聚焦模式
快捷指令
飞行模式
SIM 卡提醒
配件连接
Find My
正在进行的通话
SharePlay
正在播放的 apps
计时器
地图导航
语音备忘录
屏幕录制
个人热点
麦克风/摄像头指示

让我些许迷茫的是，这份列表中有不少用一过性推送通知也可以解决的情况，比如：AirPods连接、CarKey、Apple Pay… 也有不少本在 iOS15 中存在的，比如：摄像头/麦克风指示灯、AirPlay、Watch 解锁、正在进行的通话、Face ID 弹窗… 而且「飞行模式」也要进入灵动岛，那可爱的小飞机动画岂不是要入土为安了😢。我能理解这背后的设计思路（灵动岛将刘海屏机型中左上角的小胶囊、摄像头/麦克风指示灯、刘海下弹出的白色胶囊、FaceID 弹窗以及部分系统通知等等整合在了一起，统一样式），不过部分合理性值得质疑，比如 FaceID 验证的时候人脸正对屏幕的准确性更高，但灵动岛的 FaceID 却容易引导向上抬头。再比如「正在播放」已经在控制中心存在并且还蛮方便，灵动岛常驻专辑封面是否有些干扰了，灵动岛的正在播放和控制中心的正在播放是否有些重复了？

这些质疑或许有些吹毛求疵，但也令人思考：是否有为了加入灵动岛而加入灵动岛的嫌疑？

除了已经存在的功能和一过性通知之外，灵动岛的重头戏还是上文中分析的「状态」，比如计时器、Find My、AirDrop 都是不错的使用场景。但前后台多任务操作和展示状态这个场景本身的频次又有多高呢？我相信一定没有到「不解决就很难用」的程度，毕竟在用 iOS15 的时候也没有感到多么难用。

这并不是否认灵动岛的优秀设计，而是对于发布会和舆论中对于灵动岛的过度宣传和注意提出质疑，因为在实际使用过程中，可能一天都用不到灵动岛，剩下的只有一个黑色的胶囊，或者说感叹号挖孔。如果把灵动岛作为软件脱离感叹号挖孔单独来看呢？灵动岛会有更好的呈现吗？我想到了几个灵动岛出现之前再尝试解决同样问题的产品：

考古：灵动岛的前辈们

让我们先来考考古，看下在灵动岛出现之前，其他设计者是如何解决「前后台多任务操作」和「状态展示」问题的。

上一版的微信浮窗

大家最熟悉的，甚至用过的，应该就是上一版的微信浮窗。在上一版的微信浮窗中，进入浮窗的公众号或小程序会吸附在屏幕边缘，类似悬浮球，最多可以悬浮5个。微信之所以要做浮窗，是为了解决公众号、小程序、视频号等功能和主要的聊天功能跳转的问题，其实和操作系统面临的问题很接近。

这版微信浮窗的优点是动作十分自然，阅读公众号时来了信息，最自然的动作就是从公众号返回聊天页，浮窗的动作只需要在滑动退出的同时稍加留意，就可以保存你离开的这个「标记点」，点击屏幕边缘的小球便随时可以回来。遗憾的是后来浮窗悬浮球设计被取消，变为了负一屏，回溯变得麻烦了，并且 iOS 不允许小程序加入浮窗，使用频率也随之下降了。

Smartisan OS 图钉

Smartisan OS 也曾试图解决这个问题，Smartisan OS 3.7 中加入的「图钉」就是一个例子。通过长按状态栏，可以将一个 App 钉在锁屏界面上，不解锁手机就可以查看并操作被钉住的 app。

图钉的办法简单粗暴，给了用户最大的自由，呼出也是纯手动的。虽然有效且可用，但很多时候用户并不需要完整的 App 信息，整个 App 出现在锁屏有些多余。图钉只能把 App 钉在锁屏界面上，按照 Smatisan OS 的逻辑，或许一步才是解锁手机后更好的前后台操作方案。考虑到 Android 的生态和锤子科技的体量，图钉或许已经是能拿出来的最佳方案。

ColorOS 闪回键

ColorOS 的闪回键是我认为考古中发现的最完善的解决方案。还是以叫车 App 为例，闪回键会在叫车 App 置于后台时自动出现一个悬浮球，悬浮球中有状态信息的展示（司机到达时间），点击即可返回。同理也支持地图导航和王者荣耀复活倒计时。而这个功能目前已经升级为闪回窗，可以展示多个 App 的状态，并且支持简单操作。

闪回窗同样解决了灵动岛想要解决的几个问题，并且要比灵动岛早很久出现。从交互和功能上来说，闪回窗和灵动岛是不相上下的。但有两点不同让闪回窗没有收到和灵动岛一样级别的关注，一闪回窗并没有开放给第三方所用，所以使用场景上大打折扣；二是闪回窗的界面设计没有和硬件结合，没有灵动岛来的惊艳，不过这也要辩证来看，闪回窗的位置可能比灵动岛更容易点击一些。

LG V10 的副屏

我还发现，在非全面屏时代也出现过一个将软件与摄像头硬件结合的设计：LG V10 的副屏。这块屏幕位于主屏幕的上方，屏幕左侧是前置摄像头，屏幕和摄像头的融合非常自然。

这块副屏的功能非常多，它可以进行 App 切换、固定联系人或应用、锁屏时可以作为 AOD 显示时间，最重要的是它还可以展示通知。我想如果不是安卓生态和 LG 手机爱尝试却不坚持的产品特点，这块 2015 年面市的副屏可以实现灵动岛一模一样的功能，使 2022 年的灵动岛平平无奇。不过不得不说 V10 的这块副屏虽然做到了和旁边的摄像头一样漆黑，但非全面屏下确实显得多余了一些，把摄像头模组挪到听筒旁边再将副屏融入主屏或许是当年更多人愿意看到的设计。

结论：掩盖缺陷的设计，却是现阶段的好方案

经过了一顿分析、思考、考古。我们已经承认灵动岛是美感与实用并存的，虽然也有一些前辈做过类似的设计，但灵动岛却是最完整最讨喜的那个（这很苹果）。但对于弄清楚「灵动岛是否是为了掩盖缺点而设计的？」这事还有一个问题：如果灵动岛不在感叹号屏幕上，会不会更好？

我的答案是肯定的，不仅是因为考古阶段我发现了同样功能的方案，也因为感叹号挖孔其实阻碍了灵动岛的发挥：由于听筒和摄像头的位置原因，灵动岛实际可用的显示区域并不大，如果感叹号中的元件可以完全做到屏下，灵动岛可以展示更多信息或更小，最重要的是不用的时候可以消失。比如这样：

况且，感叹号挖孔在带来灵动岛的同时也带来了一点其他问题：挖孔和屏幕边缘多了一条不太有用的缝隙、推送通知横幅又下移了一点点等等。不过以上猜想都是基于感叹号屏幕可以隐藏在屏幕下面而做的，但现实并非如此。

当灵动岛的诞生恰好遇上了感叹号挖孔，无论是感叹号在先灵动岛作为掩盖，还是灵动岛在先恰巧融合感叹号，都无法否认灵动岛确实掩盖了感叹号屏的美中不足（所谓美中不足不是造型的丑陋，毕竟造型是仁者见仁的，更重要的是它并没有比刘海屏更有优势），但于此同时感叹号也限制了灵动岛，使其无法达成最终形态。

可以预见的是，如果 iPhone 真正实现了所谓「无限游泳池」理念的正面，灵动岛的呈现方式必然和今天的不一样且更好。当我们回到现实，目前的灵动岛却是最佳方案。虽然出发点可能是遮盖缺陷，但巧妙结合加上优秀的设计与实现，灵动岛便被大家吹上了天，拿到了它本不应该有的关注度。至此，灵动岛是否是欲盖弥彰已经不重要，毕竟它功能上解决了实际问题，形式上足够好看，完成度也足够高，足够讨喜。

感叹：当卖点只有灵动岛

说了半天灵动岛，作为母体的 iPhone 14 Pro 却早已被我抛在脑后。是的，灵动岛只是 iPhone 14 Pro 的一个特性而已，但仔细回想 iPhone 14 Pro，除了相机和处理器的常规升级，对手持 iPhone 13 mini 的我来说唯一的吸引力就只有灵动岛了。灵动岛确实是手机行业近些年让人眼前一亮的创新之一，但是如果一款旗舰手机的最大卖点，只是一个遮盖硬件短板、解决痒点问题、包装过度的小创新，那么这座船坞（Dock）对面的岛（Island）则是手机行业创新乏力愈发无聊的又一体现。

👀 值得关注

【作品】Netflix 的第一版 Logo

https://www.businessinsider.com/netflix-original-logo-looked-nothing-like-current-design-2022-8

Netflix 今年已经 25 岁，而它在 1997-2000 年使用的第一版 Logo 竟然长这样。这版 Logo 明显带有向用户解释「我是干啥的」的意味：除了具象的胶片图案，Netflix 文字也被分为了 Net（代表网络）和 Flix（代表电影）两个单词。而下一代的 Logo 中则不再需要这样的解释，因为大家已经知道什么是 Netflix。