靈動島：欲蓋彌彰與巧奪天工

語言: CN / TW / HK

時間 2022-09-23 17:09:34 少數派

編注：本文是「 100小時後請叫我設計師」欄目「持續更新」模組的試讀文章。「持續更新」中的文章將帶你時刻了解最新的設計動向，輕鬆獲得前沿設計工具與資源。

「 100小時後請叫我設計師」希望不僅讓你多懂一點設計，更要全方位提升你的設計水平，讓你可以 像設計師一樣運用設計的力量 。

你好，歡迎來到新一期的持續更新。

:speech_balloon: 評論&漫遊

本次的評論，不好意思，又要聊蘋果… 因為 iPhone14 Pro 上的意外驚喜（沒有被爆料洩漏）靈動島（Dynamic Island）實在賺足了眼球和話題，當然還有大片的叫好聲。必須承認，靈動島確實是近年愈發無聊的手機行業中難得的創新之一。不過，在興奮與叫好之後，我想帶大家安靜下來仔細並理性地重新認識一下靈動島，並提出幾點理性的批判。這次的評論環節會和漫遊合併，因為在研究靈動島的過程中，發現了一些與之相關的老產品，我們開始吧。

印象：蘋果:ox::beer:

「太厲害了，這隻有蘋果能做出來」是我在觀看釋出會時的第一感受。說蘋果的互動動畫設計一直是行業頂尖的，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 螢幕等等。最令我印象深刻的是，靈動島的黑色區域使用了次畫素渲染的技術，以讓邊緣看起來更加銳利，讓靈動島看上去更像是硬體而非軟體。

所以，我對靈動島的第一感受就是:ox::beer:，靈動島的動畫可以實現這件事本身就是完全值得肯定的。不過，正如剛才所說，蘋果儘可能地「讓靈動島看上去是硬體而不是軟體」，這讓我產生了疑問：靈動島碰上感嘆號螢幕，那麼靈動島的出發點是否是遮蓋硬體的缺陷呢？

思考：靈動島解決了什麼問題？

要弄清楚靈動島是否是遮蓋感嘆號短板的設計，就要先放下靈動島美麗的外表和撩人的動畫，思考一下靈動島到底解決了什麼問題。在 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 彈窗… 而且「飛航模式」也要進入靈動島，那可愛的小飛機動畫豈不是要入土為安了:cry:。我能理解這背後的設計思路（靈動島將劉海屏機型中左上角的小膠囊、攝像頭/麥克風指示燈、劉海下彈出的白色膠囊、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）則是手機行業創新乏力愈發無聊的又一體現。

:eyes: 值得關注

【作品】Netflix 的第一版 Logo

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

Netflix 今年已經 25 歲，而它在 1997-2000 年使用的第一版 Logo 竟然長這樣。這版 Logo 明顯帶有向用戶解釋「我是幹啥的」的意味：除了具象的膠片圖案，Netflix 文字也被分為了 Net（代表網路）和 Flix（代表電影）兩個單詞。而下一代的 Logo 中則不再需要這樣的解釋，因為大家已經知道什麼是 Netflix。