本文譯自前蘋果設計師、Halide 相機創(chuàng)始人 Sebastiaan de With 的博文《物理性：UI 設計的新世代》，原文鏈接：Physicality: the new age of UI

作為曾經(jīng)的 iOS 設計師，現(xiàn)在是一個激動人心的時刻，我的職業(yè)世界正在因為神秘感而顫抖和轟鳴。關于 iPhone 操作系統(tǒng)即將進行大規(guī)模改版的傳聞甚囂塵上——據(jù)說是「長久以來規(guī)模最大的一次」。

只有一個時刻可以與此刻相比：2013 年春天。2013 年 6 月 10 日，蘋果發(fā)布了或許是 UI 設計史上最偉大的轉變：iOS 7。我清楚地記得當時的感受：無以言表的震撼。

如果蘋果今年真的對 UI 做重大改版，那它會在很多方面產(chǎn)生深遠的影響，甚至讓 iOS 7 的「巨變」都相形見絀。據(jù)傳，此次改版將全面涵蓋 iOS、macOS、iPadOS、tvOS、watchOS 和 visionOS。而從 iOS 7 發(fā)布至今的這些年里，iPhone 已經(jīng)從單純的流行設備發(fā)展成了人們生活中最重要的東西。iOS 的設計影響并啟發(fā)了我們身邊的方方面面，從網(wǎng)頁設計到平面設計，再到幾乎所有的軟件界面。

我認為應該利用這個傳聞方興未艾的時刻，趁著最終成品還在幕后的機會，去品味一些東西：因為對事物發(fā)展方向的完全未知，我就可以讓我的想象力自由馳騁。

如果我是蘋果的設計團隊，我會怎么做？我希望看到哪些變動，以及哪些是最有可能實現(xiàn)的？考慮到技術的發(fā)展方向，界面設計應該如何適應大改版的需求？

讓我們看看接下來會、或者可能會，發(fā)生什么吧。

最明智的做法就是以史為鑒。如果要對 iOS 設計的發(fā)展階段進行分類，我們可以粗略地將其分為「陰影時代」、「適應性時代」和「新時代」。

陰影時代（The Shaded Age）

iOS 的起點是 iPhone OS，一個（對于那時來說）全新的操作系統(tǒng)，其風格與 Mac OS X Tiger 中的儀表板（Dashboard）功能的設計語言非常相似：

via https://numericcitizen.me/what-widgets-on-macos-big-sur-should-have-been/

使用 macOS 儀表板圖標做 app 的早期 iPhone 原型機

iPhone OS 1 上的圖標布局明顯是擬物化的。

擬物化，你應該聽過這個詞。但擬物化并不單純意味著界面上有很多視覺效果，比如漸變、光澤和陰影。它的真正含義是：為了讓用戶更容易從他們習慣的東西（比如一小片塑料屏幕加上一排排按鈕的功能機）過渡到目前的形態(tài)（手機變得以屏幕為主，可以顯示任何你能想像出的按鈕或界面）。

在初代 iPhone 剛發(fā)布的那段時間，動畫里面的手機還是會被畫成左邊的樣子，按鍵的網(wǎng)格決定了操作模式和舒適區(qū)域

當然，從 iPhone OS 1 到 iOS 6，用戶界面中的確出現(xiàn)了大量的視覺效果。在 iOS 界面的陰影時代，我們可以看到從簡單界面元素中的漸變和陰影，到音頻應用程序中逼真的磁帶錄音機和麥克風，等等各種豐富的細節(jié)。

Facebook 的分享頁面真的有個回形針！iOS 地圖的路標真的是由幾百個小三角形組成的！

而我在蘋果工作期間，還參與過一些更有趣的表現(xiàn)形式。以我的經(jīng)驗來說，這個時期我們所做的工作，很大程度上是通過細致和廣泛的視覺效果來營造熟悉感。我們花了很多時間用 Photoshop 繪制逼真的陰影按鈕、虛擬木材、皮革以及更多材質。

因此 iPhone OS 1 到 iOS 6 這段時間稱為"擬物化設計"，我覺得這個詞用的不太恰當，但整體思路是沒錯的。

不過當然，麥克風的金屬材質實際上并非真正的金屬——它對光線的反射效果與現(xiàn)實中的金屬材質完全不沾邊，它的行為也與它所模仿的物體截然不同。它只是一種效果、一種純粹的視覺效果，幫助用戶理解語音備忘錄應用的工作原理，至于 iPhone OS 1 的整個用戶界面都遵循著這種設計，以盡可能方便用戶理解使用。

值得注意的是，這種理念同樣延伸到了 UI 中最小的元素：按鈕。iOS 中的按鈕會被設計成凸起或凹陷的視覺效果，使其看起來更像真的按鈕；禁用的項目通常會被處理得更簡潔（變灰、變透明），以降低其交互性。這些都通過大量的靜態(tài)位圖（bitmap）素材實現(xiàn)的。

漸漸的，一些更活潑的設計才開始顯現(xiàn)：在 iPad 上，部分金屬滑塊的光澤可以響應設備方向；刪除筆記或電子郵件的效果不是直接消失，而是被拖入回收站的圖標，垃圾桶甚至會先打開蓋子、在文檔被吸入后重新關上。

然而我們的全新的視網(wǎng)膜屏幕，即將見證一次應用程序和屏幕信息呈現(xiàn)方式的徹底轉變。

扁平的時代（The Flat Age）

iOS 7 為 iOS 帶來了一種全新的設計語言，當時有很多文章對此進行了探討。正如任何一次重大改版一樣，用戶社區(qū)的情緒也相當激動。我很少直接發(fā)表個人意見，但無論你對 iOS 7 的印象如何，不能否認的是，它是對 iOS 視覺設計的一次根本性反思。

iOS 7 在很大程度上取消了用于提示可交互性的視覺效果（比如一個凸起的按鈕），而是回歸了個人電腦上那種最原始的展示方式：「按鈕」只不過是白色背景上的藍色文字而已。

iOS 7 時代的設計風格也因此通常被稱為「扁平化設計"」。你可以理解為什么叫這個名字，因為就連計算器應用中的按鈕，在視覺上也沒有任何層次的凸起：

主屏幕曾經(jīng)所指代的就是功能機上面整齊排列的按鍵，但現(xiàn)在看起來也平坦了許多——部分是因為視效處理的更簡單，更主要的則是明顯減少了陰影的使用。

但為什么非要去掉陰影呢？畢竟，它們對于定義界面元素的「深度」起著重要作用。上面的截圖實際上并不直觀，因為圖中的陰影都是靜態(tài)的。事實上，iOS 7 上全新的主屏幕絕非看起來那么平。

iOS 7 引入了一種獨特的「視覺層」概念，用自適應或動態(tài)效果來區(qū)分界面深度和層級。那么，既然可以通過將圖標渲染在背景以外的層級來區(qū)分，為什么還要渲染無法匹配現(xiàn)實邏輯的高光和陰影呢？僅僅依靠視差效果，就已經(jīng)使圖標清晰地"漂浮"在壁紙上方了，而通知中心也可以簡化為主屏幕上方的一個磨砂窗格，模糊其背景以顯示上下文。

喬納森·艾維在 iOS 7 發(fā)布會上自豪地談：「簡單通過設置不同的壁紙」就可以影響許多界面的外觀，這在當年是一個非常新穎的體驗。

iOS 7 界面中的另一個新特點是 UI 框架（指除了主要元素之外的界面元素，比如按鈕外輪廓）具有相同的動態(tài)設計：標題欄和鍵盤等像是磨砂玻璃一樣，可以部分顯示下方被遮擋的內(nèi)容。

雖然在某些地方有些矯枉過正，iOS 7 的根本性改變最終還是在后續(xù)的 iOS 中保留了下來——盡管動效被大幅削弱（主屏幕的 app 圖標視差現(xiàn)在幾乎難以察覺），隨著時間的推移，iOS 的系統(tǒng) UI 逐漸收獲了更多的靜態(tài)效果。

圖標和字體都變得更厚重了，陰影也被加了回來，顏色則變得不像霓虹燈那樣鮮艷

時至如今，iOS 的主要變化之一是變得更圓潤了；隨著越來越圓的屏幕邊角和越來越圓的 iPhone 的出現(xiàn)，用戶界面也在隨之變化，甚至是根據(jù)運行設備的不同而動態(tài)地進行調(diào)整。

越來越多的界面元素開始通過不同類型的模糊效果（比如新的漸進模糊）與內(nèi)容融合，按鈕形狀也開始慢慢回歸。iOS 逐漸進入了穩(wěn)定狀態(tài)——但也略顯停滯。如果真的需要一次大的變革，則必須要進行一些根本的重塑才行。

新的 iOS 設計變革將不再是簡單的靜態(tài)位圖，它必須延續(xù)「自適應界面」的趨勢。

物理性時代（The Age of Physicality）

當蘋果的設計師們構思 visionOS 的界面時，收到的要求是「從零開始」。但是在增強現(xiàn)實中，應用程序應該是個什么樣子呢？

visionOS 設計語言的基本原則似乎是要求，界面元素始終由「真實」的材質構成，不能存在任何純二維的面板或者色彩。

這條原則也適用于 app 圖標，雖然它們具有單向的顏色漸變，但都擁有自己獨立的層次，從介紹視頻中也可以清楚地看出它們所模仿的真實材質：

Alan Dye（蘋果負責人機界面設計的副總裁）在介紹 visionOS 界面時表示：每個元素都經(jīng)過精心設計，具有豐富的物理感——它們具有維度、能夠對光線做出動態(tài)響應，并相互投射陰影。

這樣的設計在 Vision Pro 中至關重要，因為 app 的界面就該讓人感覺它能夠自然地融入你周圍的世界，并擁有與現(xiàn)實空間中物體一樣豐富的質感。與我們熟悉的界面相比，這種范式的轉變意義深遠，因為它會讓所有老舊、缺乏實體感的界面顯得過時。

甚至如果我們強行將一個普通的 UI 界面放置在 Vision Pro 環(huán)境中，結果看起來就很好笑：

因此我認為，visionOS 可以為 iPhone、iPad 和 Mac（以及其他潛在的新硬件平臺）帶來的東西，將遠遠不止上述靜態(tài)的視覺風格，而很可能是一套全新的設計原則，用來支撐下一個世代蘋果所有產(chǎn)品和品牌表達的風格。

這套設計原則必須比 Vision Pro 現(xiàn)有的更加微妙——畢竟界面不必與現(xiàn)實世界達到 100% 的契合，但新的動態(tài)效果和環(huán)境行為足以讓界面變得字面意義上「栩栩如生」。

聽起來很熟悉？其實現(xiàn)在 iPhone 上的一個 UI 已經(jīng)達到了這樣的高度：

蘋果近年來為 iOS 新增的功能與 UI 的其他部分相比有著顯著的不同，其中代表性的就是靈動島。

靈動島的界面全部是動態(tài)的，擁有與真實材料和物體相似的特性。從某種意義上說，靈動島其實回歸了擬物化界面——但不再是給所有元素都噴上高光漆，而是通過清晰與高度圖形化的界面，讓靈動島的行為類似我們在現(xiàn)實生活中熟悉的事物，或者「更有可能」存在于這個世界中——這就是新的擬物化，也就是一種物理性（physicality）。

靈動島是一個鮮明的圖形界面，動畫的行為就像一種可以用手指撥動的粘稠液體：

此外，當液體各部分相互接觸、融合在一起的時候，我們還能看到非常代表性的液體特性，比如表面張力。

而當它加速時，動畫也隨之有了慣性，就像 iPhone OS 第一次更新里面的滾動列表一樣，不過靈動島的交互動畫顯得更真實一些，因為它還有帶方向的動態(tài)模糊，以及畫面元素離開焦點之后的失焦。

與之相似的還有新的 Siri 動畫，繞屏幕一周的閃光更像是符合物理規(guī)律的真實發(fā)光效應——類似吸附在 iPhone 邊緣的熾熱氣體或薄霧發(fā)出的光，通過用戶按按鈕或者語音喚醒而閃耀出來。

更進一步又會變成什么樣呢？

我對新世代的看法：有生機的玻璃（living glass）

我打算試想一下接下來會發(fā)生什么——既通過我自己繪制的 UI 設計，同時也通過重新思考一下這個新世代的設計哲學。

蘋果比較合乎邏輯的下一步操作，有可能是將 vision OS 設計理念中的物理性擴展到所有的產(chǎn)品線。其實不需要過度處理，在現(xiàn)有的基礎上稍微調(diào)整一下，就可以讓界面擁有帶觸覺的真實感（inhabit a sense of tactile realism）。

從設計理念上來說，如果我是蘋果，我會將這套新的界面描述為一套「終于配得上我們精美硬件的界面」。畢竟蘋果最主要的產(chǎn)品都帶著玻璃屏幕，新的設計可以帶來與材質相匹配的界面，讓用戶感覺玻璃本身也煥然一新。

Wallpaper 網(wǎng)站專訪蘋果設計團隊時收到的 visionOS 設計稿細節(jié)

按鈕和其他 UI 元素可以擁有系統(tǒng)級的渲染處理，就像 visionOS 在真實環(huán)境的背景之上渲染窗口一樣。*

*就視覺效果而言，VisionOS 是一個非常有趣的平臺，因為為了確保隱私和安全，該操作系統(tǒng)從設備攝像頭獲取的數(shù)據(jù)非常少。我猜 UI 上負責合成磨砂玻璃的視覺效果的，實際上是負責處理透傳和攝像頭信號反饋的 R1 芯片——換句話說，理論上所有 Apple 設備都可以做到這一點，它們已經(jīng)針對背景虛化等功能進行了系統(tǒng)級效果合成。

我還花了一些時間來設計和構思新時代的系統(tǒng)外觀和工作原理。對于新的設計語言來說，就像在 visionOS 上一樣，交互介質采用玻璃也是合理的：

玻璃會受到環(huán)境的影響——比如屏幕顯示的內(nèi)容、其 UI 上下文等等。

由于它具有反射性，玻璃元素能夠映射周圍環(huán)境；在照片和視頻等內(nèi)容中非常明亮的高光，甚至可以直接以 HDR 去顯示。

玻璃元素在視覺上占據(jù)了一個明確的空間層級；但如果沒有明顯的分層，元素可以被嵌入（inlaid）進去：換句話說，變成顯示器或 UI 的玻璃層面的一部分。

就像 iPhone 背面磨砂玻璃上亮面的蘋果 logo 一樣，控件或者 UI 元素也可以用不同的材質處理或配色方式。這些處理甚至會對界面中其他發(fā)光元素或設備朝向產(chǎn)生相應——比如在光線照射下會略微變化，類似在 visionOS 中觀察窗口時那樣。

而控件的轉場動畫則可以從開始覆蓋內(nèi)容時開始。我們可以想象按鈕從背景中「浮起」并脫離的動態(tài)狀態(tài)，更清晰的展示出層級的變化。

這些效果可以由系統(tǒng)以微妙而動態(tài)的方式進行渲染。相比之下，傳統(tǒng)的靜態(tài)界面看起來就顯得呆板、缺乏生命力。

玻璃擁有一系列鮮明特性，使它與內(nèi)容區(qū)分開來。它可以模糊其下方的材質——比如我們在現(xiàn)有 iOS 控件中看到的那樣。它還能根據(jù)周圍環(huán)境呈現(xiàn)出明顯的、高動態(tài)的鏡面高光。

一種拖拽式曝光控制按鈕，是我們在 Halide app 中新版曝光調(diào)節(jié)的變種，你可以注意到按鈕的材質會反射周圍的高光

除了高光，磨砂玻璃還可能呈現(xiàn)出散焦效應，既通過投射光線（而非陰影）來展現(xiàn)自己與背景的互動，從而實現(xiàn)與環(huán)境的分離。

此外，它還能夠吸收并融合周圍界面的配色與主題。磨砂玻璃的作用不僅僅是模糊或折射背景，它還能反射。甚至這種處理并非沒有例子，我們在 WWDC25 的主視覺宣傳圖里實際上已經(jīng)看到了效果：

風格元素（Elements of Style）

在建立起統(tǒng)一的視覺標準之后，我們來看看新 iOS 可能會采用的具體元素。

標簽欄

首先，我認為「封閉式標簽欄」——那種橫跨整個屏幕的標簽欄——的時代即將結束。實際上，如果蘋果這次將所有遮擋式的 UI 元素都拋棄，我也不會感到驚訝。

這類靜態(tài)面板是 iOS 很早期遺留下來的設計。而新的設計應該可以「漂浮在」顯示內(nèi)容上：

像這樣的浮動控件更適合在滾動的時候從下層面板中「升起」，并在不需要時自動進入隱藏位置，從而避免遮擋內(nèi)容。

控件

但如果一個界面中所有元素都采用富材質處理，很可能會讓人感到視覺負擔過重。因此像前面提到的，我估計這種界面的「層次感」會按照不同的等級去應用。

比如郵件 app 中發(fā)送的主操作按鈕可能會被抬升到更高的 z 軸高度，而其他的操作（比如取消）則可以采用更低調(diào)的處理：

抬升的控件可能使用偏暖的色調(diào)，而背景元素則偏向冷色，以增強深度對比。

App 圖標

蘋果在 iOS 18 中對圖標進行了大量的自動化遮罩處理，我不認為這只是為了幫助第三方 app 適配暗黑模式或者給圖標批量施加色調(diào)。對于圖標背景的這種簡潔的深色處理，讓我覺得這可能是在為未來更動態(tài)的材質背景做準備。

暗色模式下的動態(tài)圖標背景——注意背景上與環(huán)境呼應的高光反射

更不用說，app 圖標本來就是那種交互性強、適合采用「有生機的玻璃」處理的漂浮元素。

新版動態(tài)渲染的圖標包含了「內(nèi)容層」、玻璃質感的效果以及對既有元素的優(yōu)化，背景圓角同樣有所增大

此外，我猜一些早該重繪的圖標會在這波中趁勢更新，比如很多自 iOS 7 以來就沒有變化的圖標。這會是蘋果對「核心品牌」圖標的一次重大變動，估計新圖標會在保留原有辨識度的同時融入新的視覺語言——比如可以參考新的 Safari 圖標處理。

此外，如果所有按鈕圖示都變得更圓了，我也不會感到驚訝。

主屏幕

整個主屏幕系統(tǒng)都可能會迎來首次重新構想。從 iOS 初期至今，主屏幕的復雜性和功能性都已經(jīng)大幅增加。如今我時常要在 App Library 中花時間尋找應用。

整體來說，我認為可以期待一種基于 AI、能夠進行上下文感知的滑出式界面，它可以與我們熟悉的網(wǎng)格式界面共存。只是我這次沒來得及畫出原型。

滑塊與托盤

作為 iOS 界面的基本交互組件，滑塊和托盤將獲得系統(tǒng)級的新材質處理，并對周圍的顯示環(huán)境做出響應。

簡而言之，可以想象 UI 界面變得更加圓潤柔和，呈現(xiàn)出半透明材質所帶來的美感。

更進一步

這看似「簡單」的材質更替——從色彩轉向動態(tài)的玻璃風格——其實具有深遠的影響。

蘋果是很特殊的一家公司——這種來自 2000 年左右的標志性界面風格一直都與它的品牌風格保持著緊密聯(lián)系。它的圖標同時還是 logo，而圖標的材質處理則是一種設計母題，遠遠超越了操作系統(tǒng)平臺本身。比如你從蘋果官網(wǎng)的導航欄中也能看出這種一致性：

蘋果官網(wǎng)的導航欄基本是與不同時代的設計風格相呼應的：2000 年以來 Aqua 風格的推出和成熟、2008 年 iPhone 與 Mac OS X 引入的柔和漸變，以及 2014 年以來的扁平化趨勢

我們可以合理預期它會采用某種更具動態(tài)性的新風格。而這本身也帶來了設計挑戰(zhàn)。

我自己非常喜歡那些富有創(chuàng)新性和趣味性的 UI ——現(xiàn)在的 iOS 早已不再是一個產(chǎn)品，而是一個完整的平臺。它的設計者要確保系統(tǒng)在各種非標準使用場景下依舊能保持美感，即便第三方開發(fā)者總是在提出各種出乎意料的界面需求。這就引發(fā)了一個問題：我們?nèi)绾斡右粋€更加復雜的新界面設計范式？

理想情況下，這將催生出全新的一套設計工具，用來構建比一堆圓角矩形和簡單陰影效果復雜得多的界面。

回想過去，我在「舊時代」設計各種出挑的界面時，主要還是靠 Photoshop —— 并非因為它專為 UI 設計而生。恰恰相反，是因為 Photoshop 足夠自由，從一個簡單按鈕到綠色絨面的牌桌都可以畫出來。

如果 WWDC 公布的內(nèi)容與我設想的相近，那這將是一次真正的巨變。隨著我們的設備變得更具「環(huán)境感知」，交互界面自然也會融入更多動態(tài)元素，我們的數(shù)字世界終于能變得與現(xiàn)實世界相契合。那些不透明、靜態(tài)、阻礙視線的 UI 元素，也許終將像命令行界面一樣成為一段歷史的標記，被多任務圖形界面所取代。

科幻與玻璃的科幻

未來的計算界面其實很容易想象。我們在未來到來之前就已在科幻作品中設想它們的存在：iPhone 類似于《星際迷航》中的三錄儀（Tricorder）的現(xiàn)代版；很多 AI 應用看起來像是電影《她》或《銀翼殺手 2049》中的設備。因此，各種技術概念展示中出現(xiàn)這種「玻璃的科幻」界面也就不足為奇了，比如微軟的概念視頻：

這是一套漂亮的、令人心馳神往的 UI，卻只存在于微軟廣告的幻想世界里

但現(xiàn)實中的界面，往往并沒有那么活靈活現(xiàn)。原因很簡單：一方面，視頻中的「活體玻璃」還是過于理想化了，另一方面，能夠真正在產(chǎn)品里實現(xiàn)軟件與硬件深度融合的界面渲染的企業(yè)寥寥無幾。

盡管如此，我們依舊希望界面能夠充滿生機與喜悅——正如現(xiàn)實世界一般，但我們的軟件界面大多仍然是死氣沉沉的。

這也將話題重新帶回了蘋果這兒。蘋果曾在發(fā)布會的一些特殊時刻反復強調(diào)：「只有蘋果能做到這件事」（Only Apple can do），這是一種設計與工程的完美結合，是技術與人文藝術的融合。、

這在今天依舊如此——只有蘋果能在硬件層面實現(xiàn)像素級抗鋸齒和流暢無中斷動畫，才能推出如靈動島和多任務手勢操作；只有蘋果能在 Vision Pro 上集成兩個芯片、兩個操作系統(tǒng)，以實現(xiàn) vision OS 中 UI 動態(tài)材質的合成。

也許，只有蘋果能夠將你的屏幕玻璃賦予生命，推進人機界面邁入下一時代。

我們將在 WWDC 上見分曉。至于我最期待的，還是或許只有蘋果能夠帶來的，那種深思熟慮、充滿靈感的設計與工程融合。

關于作者

Sebastiaan de With 是一位荷蘭設計師和攝影師，以其在科技產(chǎn)品界的工作和對攝影藝術的熱情而聞名。Sebastiaan 曾在蘋果公司擔任設計師，參與了 MobileMe（iCloud 前身）與 Find My 等項目，也曾為索尼、惠普、EA、甲骨文等等知名公司做過設計工作。

目前，他最廣為人知的身份是相機應用 Halide的聯(lián)合創(chuàng)始人和設計師，這款多功能專業(yè)相機軟件自從上架以來就屢獲嘉獎，幾乎成為了 iPhone 攝影的必備工具。