宅中地 - 每日更新
宅中地 - 每日更新

贊助商廣告

X

前蘋果設計師無意「曝光」了iPhone的新軟體設計

2025年06月05日 首頁 » 熱門科技

本文譯自前蘋果設計師、Halide 相機創始人 Sebastiaan de With 的博文《物理性:UI 設計的新世代》

作為曾經的 iOS 設計師,現在是一個激動人心的時刻,我的職業世界正在因為神秘感而顫抖和轟鳴。關於 iPhone 作業系統即將進行大規模改版的傳聞甚囂塵上——據說是「長久以來規模最大的一次」。

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

如果蘋果今年真的對 UI 做重大改版,那它會在很多方面產生深遠的影響,甚至讓 iOS 7 的「巨變」都相形見絀。據傳,此次改版將全面涵蓋 iOS、macOS、iPadOS、tvOS、watchOS 和 visionOS。

而從 iOS 7 發布至今的這些年裡,iPhone 已經從單純的流行設備發展成了人們生活中最重要的東西。iOS 的設計影響並啟發了我們身邊的方方面面,從網頁設計到平面設計,再到幾乎所有的軟體界面。

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

如果我是蘋果的設計團隊,我會怎麼做?我希望看到哪些變動,以及哪些是最有可能實現的?考慮到技術的發展方向,界面設計應該如何適應大改版的需求?

讓我們看看接下來會、或者可能會,發生什麼吧。

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

陰影時代(The Shaded Age)

iOS 的起點是 iPhone OS,一個(對於那時來說)全新的作業系統,其風格與 Mac OS X Tiger 中的儀錶板(Dashboard)功能的設計語言非常相似:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

在初代 iPhone 剛發布的那段時間,動畫裡面的手機還是會被畫成左邊的樣子,按鍵的網格決定了操作模式和舒適區域

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

然而我們的全新的視網膜螢幕,即將見證一次應用程序和螢幕資訊呈現方式的徹底轉變。

扁平的時代(The Flat Age)

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

但為什麼非要去掉陰影呢?畢竟,它們對於定義界面元素的「深度」起著重要作用。上面的截圖實際上並不直觀,因為圖中的陰影都是靜態的。事實上,iOS 7 上全新的主螢幕絕非看起來那麼平。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

雖然在某些地方有些矯枉過正,iOS 7 的根本性改變最終還是在後續的 iOS 中保留了下來——儘管動效被大幅削弱(主螢幕的 app 圖標視差現在幾乎難以察覺),隨著時間的推移,iOS 的系統 UI 逐漸收穫了更多的靜態效果。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

時至如今,iOS 的主要變化之一是變得更圓潤了;隨著越來越圓的螢幕邊角和越來越圓的 iPhone 的出現,用戶界面也在隨之變化,甚至是根據運行設備的不同而動態地進行調整。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

新的 iOS 設計變革將不再是簡單的靜態位圖,它必須延續「自適應界面」的趨勢。

物理性時代(The Age of Physicality)

當蘋果的設計師們構思 visionOS 的界面時,收到的要求是「從零開始」。但是在增強現實中,應用程序應該是個什麼樣子呢?

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

甚至如果我們強行將一個普通的 UI 界面放置在 Vision Pro 環境中,結果看起來就很好笑:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

聽起來很熟悉?其實現在 iPhone 上的一個 UI 已經達到了這樣的高度:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

更進一步又會變成什麼樣呢?

我對新世代的看法:有生機的玻璃(living glass)

前蘋果設計師無意「曝光」了iPhone的新軟體設計

我打算試想一下接下來會發生什麼——既通過我自己繪製的 UI 設計,同時也通過重新思考一下這個新世代的設計哲學。

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

Wallpaper 網站專訪蘋果設計團隊時收到的 visionOS 設計稿細節

按鈕和其他 UI 元素可以擁有系統級的渲染處理,就像 visionOS 在真實環境的背景之上渲染窗口一樣。*

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

我還花了一些時間來設計和構思新時代的系統外觀和工作原理。對於新的設計語言來說,就像在 visionOS 上一樣,交互介質採用玻璃也是合理的:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

玻璃會受到環境的影響——比如螢幕顯示的內容、其 UI 上下文等等。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

由於它具有反射性,玻璃元素能夠映射周圍環境;在照片和影片等內容中非常明亮的高光,甚至可以直接以 HDR 去顯示。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

而控制項的轉場動畫則可以從開始覆蓋內容時開始。我們可以想像按鈕從背景中「浮起」並脫離的動態狀態,更清晰的展示出層級的變化。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

玻璃擁有一系列鮮明特性,使它與內容區分開來。它可以模糊其下方的材質——比如我們在現有 iOS 控制項中看到的那樣。它還能根據周圍環境呈現出明顯的、高動態的鏡面高光。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

風格元素(Elements of Style)

在建立起統一的視覺標準之後,我們來看看新 iOS 可能會採用的具體元素。

標籤欄

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

這類靜態面板是 iOS 很早期遺留下來的設計。而新的設計應該可以「漂浮在」顯示內容上:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

像這樣的浮動控制項更適合在滾動的時候從下層面板中「升起」,並在不需要時自動進入隱藏位置,從而避免遮擋內容。

控制項

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

比如郵件 app 中發送的主操作按鈕可能會被抬升到更高的 z 軸高度,而其他的操作(比如取消)則可以採用更低調的處理:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

抬升的控制項可能使用偏暖的色調,而背景元素則偏向冷色,以增強深度對比。

App 圖標

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

暗色模式下的動態圖標背景——注意背景上與環境呼應的高光反射

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

新版動態渲染的圖標包含了「內容層」、玻璃質感的效果以及對既有元素的優化,背景圓角同樣有所增大

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

主螢幕

整個主螢幕系統都可能會迎來首次重新構想。從 iOS 初期至今,主螢幕的複雜性和功能性都已經大幅增加。如今我時常要在 App Library 中花時間尋找應用。

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

滑塊與托盤

作為 iOS 界面的基本交互組件,滑塊和托盤將獲得系統級的新材質處理,並對周圍的顯示環境做出響應。

前蘋果設計師無意「曝光」了iPhone的新軟體設計

簡而言之,可以想像 UI 界面變得更加圓潤柔和,呈現出半透明材質所帶來的美感。

更進一步

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

蘋果是很特殊的一家公司——這種來自 2000 年左右的標誌性界面風格一直都與它的品牌風格保持著緊密聯繫。它的圖標同時還是 logo,而圖標的材質處理則是一種設計母題,遠遠超越了作業系統平台本身。比如你從蘋果官網的導航欄中也能看出這種一致性:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

我們可以合理預期它會採用某種更具動態性的新風格。而這本身也帶來了設計挑戰。

我自己非常喜歡那些富有創新性和趣味性的 UI ——現在的 iOS 早已不再是一個產品,而是一個完整的平台。它的設計者要確保系統在各種非標準使用場景下依舊能保持美感,即便第三方開發者總是在提出各種出乎意料的界面需求。這就引發了一個問題:我們如何迎接一個更加複雜的新界面設計範式?

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

科幻與玻璃的科幻

未來的計算界面其實很容易想像。我們在未來到來之前就已在科幻作品中設想它們的存在:iPhone 類似於《星艦奇航記》中的三錄儀(Tricorder)的現代版;很多 AI 應用看起來像是電影《雲端情人》或《銀翼殺手 2049》中的設備。因此,各種技術概念展示中出現這種「玻璃的科幻」界面也就不足為奇了,比如微軟的概念影片:

前蘋果設計師無意「曝光」了iPhone的新軟體設計

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

但現實中的界面,往往並沒有那麼活靈活現。原因很簡單:一方面,影片中的「活體玻璃」還是過於理想化了,另一方面,能夠真正在產品里實現軟體與硬體深度融合的界面渲染的企業寥寥無幾。

儘管如此,我們依舊希望界面能夠充滿生機與喜悅——正如現實世界一般,但我們的軟體界面大多仍然是死氣沉沉的。

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

這在今天依舊如此——只有蘋果能在硬體層面實現像素級抗鋸齒和流暢無中斷動畫,才能推出如靈動島和多任務手勢操作;只有蘋果能在 Vision Pro 上集成兩個晶片、兩個作業系統,以實現 vision OS 中 UI 動態材質的合成。

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

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

關於作者

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

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

前蘋果設計師無意「曝光」了iPhone的新軟體設計

宅中地 - Facebook 分享 宅中地 - Twitter 分享 宅中地 - Whatsapp 分享 宅中地 - Line 分享
相關內容
Copyright ©2025 | 服務條款 | DMCA | 聯絡我們
宅中地 - 每日更新