Apple Vision Pro 四千字干貨!一文帶你吃透Windows、Volumes和Space
為一個全新的平臺構建應用,先從了解應用形態(tài)開始。本篇介紹了空間計算平臺中的基礎應用形態(tài)-Windows、Volumes、Space,并介紹其設計原則及最佳實踐,快來構建你的第一個空間計算應用吧。
一、空間計算的應用基礎形態(tài)
在蘋果的 WWDC 視頻中,我們可以看到蘋果將所有應用形態(tài)分為窗口型(Windows)、體積型(Volumes)、空間型(Space)。他們可以為開發(fā)者開發(fā) AVP App 提供一套靈活的工具套件,不僅作為內(nèi)容承載容器,還可作為調(diào)節(jié)沉浸模式的工具。
要想知道為什么是這三種承載類型,讓我們一起回溯一下 Apple 的其他跨設備類型。
在目前的 Apple 設計官方文檔規(guī)范中,Windows 作為呈現(xiàn)方式的組件之一,被列舉在其中,窗口作為 iOS、Apple tvOS、watchOS、iPad OS 及 macOS 界面內(nèi)容的主要承載容器,用來呈現(xiàn)應用中用戶界面的視圖和組件?!癆 window contains the views and components that present the user interface of your app or game.”
在 iOS、Apple tvOS、watchOS 中,默認是全屏的體驗,用戶將更多注意力聚焦在窗口中的內(nèi)容,而并不是窗口本身。因此三方開發(fā)者不需要考慮 App 或游戲中設計窗口(Windows)或場景(Scenes)本身的外觀,而可直接調(diào)用 SwiftUI 中定義好的 Scene 和 UIWindow。
與 iOS、Apple tvOS、watchOS 不同,VisionOS、iPadOS 和 MacOS 中,用戶通??梢源蜷_、關閉和查看單個/多個窗口,調(diào)整窗口的大小和位置等,因此,用戶會察覺到窗口是一個具有獨特視覺特質(zhì)的交互對象。
綜上,2D 窗口作為跨全端側(cè)最為基礎的界面內(nèi)容承載容器,也無疑會成為 Vision Pro 中基礎的應用形態(tài)之一。
2D 窗口(Windows)具有良好的跨端兼容性,通過 SwiftUI 來構建,包含傳統(tǒng) SwiftUI 中模式和空間,這讓傳統(tǒng)端側(cè)的應用更方便低成本移植到 Vision Pro 中。除此之外,2D 窗口類型界面不但能保證用戶在空間計算平臺操作應用時的基本效率還能保持用戶操作熟悉感,因為這些窗口和其他平臺中的布局和交互行為都比較類似,能讓用戶更輕松適應空間計算平臺的基本操作方式。
而從移動、PC 設備跨端側(cè)到空間計算平臺,為了體現(xiàn)無限畫布及 3D 內(nèi)容展示的特性,Volumes 和 Space 應空間應用場景而生。接下來,讓我們一起聊聊在空間計算平臺中如何使用 Windows、Volumes 及 Space 來構建你的第一個空間計算應用。
二、Windows-應用的基礎形態(tài)
在 Vision Pro 中,不論是 Shared Space 還是 Full Space,一切需要 2D 內(nèi)容承載的應用都可以用 Window 組成,每個應用可以由一個或多個窗口組成。當然也可以包含 3D 內(nèi)容(Volumes),支持 2D 和 3D 混合界面的呈現(xiàn)。
即使系統(tǒng)會定義用戶打開的每個窗口的初始位置,用戶仍然可以對窗口進行基本的操控,把窗口移動到空間中的任何位置,縮放窗口大小到舒適的尺寸,像在 Mac 一樣可以同時打開或關閉多個窗口應用。
窗口的默認窗口大小為 1280x720pt。窗口首次打開時,系統(tǒng)會將其放在佩戴者前方約兩米的位置,并看起來約有三米寬,這是符合人因較為舒適的瀏覽距離及視場角的尺寸和深度距離。
除此之外,visionOS 窗口采用了毛玻璃的背景材質(zhì),一方面可以讓光線及現(xiàn)實和虛擬對象透過顯示,給用戶一種界面內(nèi)容與周圍背景融為一體的感覺,同時使用鏡面反射和陰影來傳達窗口的縮放和位置。另一方面,也保持了蘋果在品牌視覺上的一致性,繼承了 Apple 全家桶的毛玻璃效果。
在 Xcode 中,你可以通過創(chuàng)建 WindowGroup 組來創(chuàng)建你的個人窗口應用界面。
當然,如果你希望在窗口界面中加入 3D 物體內(nèi)容,讓界面體驗更加立體,可以通過調(diào)用 Model3D 來呈現(xiàn)你的 3D 內(nèi)容。
三、Volumes-窗口的擴展性形態(tài)
Volumes 是 Vision Pro 平臺獨有的應用形態(tài),為了體現(xiàn)虛擬現(xiàn)實下 3D 內(nèi)容的特性體驗,Volumes 應場景而生。Volumes 可以支持應用在一定邊界內(nèi)展示 3D 內(nèi)容,如果你有 3D 內(nèi)容想要展示,那 Volumes 是絕佳的選擇。
Volumes 是 Windows 的擴展性形態(tài),可以獨立存在于 Space 中,也可以與 Windows 混合融入其中,展示一定邊界內(nèi)的 3D 物體。即使也可以被用在 Full space 中,但蘋果推薦還是用于 Share space。
與 Windows 類似,在 Share Space 中,系統(tǒng)都會確定 Volumes 和 Windows 的初始位置,但可以被用戶移動到任何位置,并以不同的視角來觀看。Volumes 也會提供類似 Windows 的管理控件與用戶用于調(diào)整窗口位置或關閉窗口。在材質(zhì)方面,Volumes 也是用了相同的毛玻璃背景材質(zhì)。
有所不同的是在縮放方式上,Windows 自動使用動態(tài)縮放,而為 Volumes 使用固定縮放。具體原因也在我的 Apple Vision Pro 設計規(guī)范之空間輸入篇提到過,Windows 使用動態(tài)縮放是為了保證最小控件的熱區(qū)一直可以符合眼手的操作精度;而為了保證 3D 物體大小貼合更自然真實的物理環(huán)境,Volumes 則推薦使用固定縮放方式模式。
在具體實現(xiàn)上,可以在窗口類型中引入.volumestric,并設置默認的長寬高尺寸。
四、Space-元素內(nèi)容的容器
最后,讓我們來了解一下元素內(nèi)容的承載容器-Space。
類似 Mac OS 中的 2D 桌面,Space 將 2D 桌面解放至 360 度的空間中,成為空間計算平臺中承載元素內(nèi)容的“空間桌面”。Windows、Volumes 都需要被管理及承載在 Space 中。Vision Pro 在空間模塊中的應用管理方式包含了 Shared Space、及 Full Space。
默認情況下,應用是在 Shared Space 中運行,就像 Mac 桌面上的不同應用窗口一樣,用戶仍然可以和現(xiàn)實空間保持聯(lián)系和透視關系。通過 VST 顯示 MR 實景,在此 MR 空間內(nèi),用戶可以同時開啟多個場景。
有些場景下,你可能想調(diào)整應用的沉浸模式,比如看電影或玩游戲時,這時你可以使用 Full Space 模式。Full Space 是指僅允許一個 App 運行的狀態(tài),這就意味著你 app 中所有的 Windows、Volumes 和 3D 物體,只能有一個展示在可視區(qū)域內(nèi)。在 Full Space 中也同樣支持 ARkit 相關功能,比如平面檢測,自定義手勢等,都只能在一個應用全開的模式下進行。
Full Space 有以下特點:
- 營造獨占的沉浸感,可以讓用戶深度聚焦在你的應用上
- 無限畫布,可以將 APP 內(nèi)元素放置在任何地方
- 同樣支持 ARkit 相關功能,可以與你周圍環(huán)境進行互動、創(chuàng)建自定義的手勢交互等
- 有不同等級的沉浸模式,來滿足用戶對沉浸感體驗的不同訴求
在 Full Space 中開發(fā)者可以調(diào)節(jié)沉浸度來改變應用的沉浸度體驗感。其中 Passthrough(.mixed)的模式可以讓用戶與現(xiàn)實世界保持聯(lián)系,但你也可以選擇一個完全沉浸的空間,即 Fully immersive(.full)。但你也可以結(jié)合這兩種沉浸度,即 Progressive Immersive(.progressive)。
蘋果開發(fā)者文檔中是這么定義沉浸模式類型的:
- Automatic Immersion style:默認的沉浸模式。
- Mixed Immersion style:將元素內(nèi)容混合在 VST 透視中,在無邊界的場景下顯示內(nèi)容,VST 可見。
- Progressive Immersion style:顯示環(huán)繞型窗口內(nèi)容應用,用戶仍然可以和現(xiàn)實世界進行互動。
- Full Immersion style:在無邊界的場景下只顯示內(nèi)容,遮蓋除了手部以外其它所有內(nèi)容的 VST 透視,讓你進入一個完全虛擬的新世界。
除了應用自定的沉浸式程度外,在 Share Space 中,用戶還可以通過旋轉(zhuǎn)頭顯上的表冠來切換三種空間沉浸模式。
但是,在 Full Immersion 應用中,數(shù)碼表冠只能用于退出應用,是無法用來調(diào)節(jié)沉浸度的。當然,如果想退出沉浸式應用,除了數(shù)字表冠,也可以通過 Control center 中應用管理功能來完成。
在 Vision OS 的平臺上,一個應用程序可以動態(tài)的切換它的形態(tài),在不同沉浸程度之間流暢過渡。
講了這么多,讓我們來舉個例子深刻的了解一下 Space 具體的應用。
比如在 keynote 中,應用首先在窗口里打開,但仍然可以保持用戶和現(xiàn)實世界的聯(lián)系。當播放幻燈片時,系統(tǒng)將會調(diào)節(jié)周圍光線,讓演示更加聚焦。當用戶想要排練演講時,把用戶帶入一個全屏空間。這就是一個應用在不同沉浸度下的應用。
五、官方案例-Hello Wold
讓我們用官方實際案例來深入應用一下 Windows、Volumes 和 Space。
進入主頁面時,Hello World 在 Share Space 中打開了一個主 Windows,該 Windows 是由 WindowGroup 構建而來,是應用中出現(xiàn)的第一個場景。該 Windows 呈現(xiàn)了應用程序的主頁內(nèi)容,同時定義了該 Wwindows 的類型為.plain,即我們說的平面窗口。
進入二級頁面,我們可以看到一個二級 Windows 中包含了一個可交互的 3D 內(nèi)容形態(tài)。該 3D 物體是混合于 Windows 中的。在這里使用了 Model3D 來定義其形態(tài),視圖縮放和定位模型以適應可用空間,并應用可選的方向調(diào)整 ItemView。當然我們在將 3D 內(nèi)容添加到 2D 窗口時,要注意以下幾點:
- 尺寸不要做得太大。雖然 3D 內(nèi)容增加了用戶的觀看興趣,但當人們從不同方向查看窗口時,可能會無意中掩蓋重要的控件或信息。
- 確保 3D 內(nèi)容不超過可用深度。深度過大會導致元素被剪裁。
- 避免模型與背襯玻璃相交及重合,同時考慮初始放置后的潛在移動。
打開模型后,我們可以看到立體的地球,這是創(chuàng)建了一個 Volumes 形態(tài),使用了.volumetric 窗口形態(tài),并定義了默認的體積尺寸和深度尺寸。Volumes 形態(tài)與 Windows 形態(tài)類似,都可以通過底部操控條來進行移動和關閉行為。
為了讓用戶直觀地看到衛(wèi)星如何繞地球運行,我們可以在沉浸式的空間中來展示地球和衛(wèi)星之間的關系。我們可以通過創(chuàng)建一個具有沉浸式風格的場景中的顯示視圖 Orbit 來承載該 3D 內(nèi)容模式。在該場景中,就是定義了一個.mixed 沉浸類型的 3D 模型展示視圖場景。
與 Volumes 窗口形態(tài)不同的是,OrbitToggle 是用了空間環(huán)境特性而不是一種窗口類型,在這種情況下,沒有明顯的關閉操作,因為在 Full space 下,用戶一次只能打開一個空間,即便是跨應用程序也是這樣。如果想關閉該 3D 模型,可通過旋轉(zhuǎn)數(shù)字表冠或 Control center 進行應用關閉。
除了半沉浸模式,我們還可以使用完全沉浸式的方式從太空觀察太陽系,即 Full Immersion 的模式,在這種模式下,用戶可以通過 UI 窗口上的 Exit 按鈕退出全沉浸式的模式,也可以通過旋轉(zhuǎn)表冠來關閉當前打開的沉浸式空間。
總結(jié)
Vision Pro 中基礎應用形態(tài)是 Windows、Volumes 和 Space。其中 Windows 是應用的基礎形態(tài),Volumes 是窗口的擴展形態(tài),而 Space 是元素內(nèi)容的承載容器。它們相輔相成構成了空間計算平臺的基礎構成形態(tài)。
那在你的應用里是如何利用 Windows、Volumes 和 Space 來構建空間計算應用的,不如留言和作者一起分享和探討一下~
歡迎關注作者微信公眾號:Vicky Design Studio
作者:Vicky。
想了解更多網(wǎng)站技術的內(nèi)容,請訪問:網(wǎng)站技術