
為一個全新的平臺構建應用,先從了解應用形態開始。本篇介紹了空間計算平臺中的基礎應用形態-Windows、Volumes、Space,并介紹其設計原則及最佳實踐,快來構建你的第一個空間計算應用吧。
更多Vision Pro干貨:
在蘋果的 WWDC 視頻中,我們可以看到蘋果將所有應用形態分為窗口型(Windows)、體積型(Volumes)、空間型(Space)。他們可以為開發者開發 AVP App 提供一套靈活的工具套件,不僅作為內容承載容器,還可作為調節沉浸模式的工具。

要想知道為什么是這三種承載類型,讓我們一起回溯一下 Apple 的其他跨設備類型。
在目前的 Apple 設計官方文檔規范中,Windows 作為呈現方式的組件之一,被列舉在其中,窗口作為 iOS、Apple tvOS、watchOS、iPad OS 及 macOS 界面內容的主要承載容器,用來呈現應用中用戶界面的視圖和組件。—“A window contains the views and components that present the user interface of your app or game.”

在 iOS、Apple tvOS、watchOS 中,默認是全屏的體驗,用戶將更多注意力聚焦在窗口中的內容,而并不是窗口本身。因此三方開發者不需要考慮 App 或游戲中設計窗口(Windows)或場景(Scenes)本身的外觀,而可直接調用 SwiftUI 中定義好的 Scene 和 UIWindow。
與 iOS、Apple tvOS、watchOS 不同,VisionOS、iPadOS 和 MacOS 中,用戶通常可以打開、關閉和查看單個/多個窗口,調整窗口的大小和位置等,因此,用戶會察覺到窗口是一個具有獨特視覺特質的交互對象。
綜上,2D 窗口作為跨全端側最為基礎的界面內容承載容器,也無疑會成為 Vision Pro 中基礎的應用形態之一。
2D 窗口(Windows)具有良好的跨端兼容性,通過 SwiftUI 來構建,包含傳統 SwiftUI 中模式和空間,這讓傳統端側的應用更方便低成本移植到 Vision Pro 中。除此之外,2D 窗口類型界面不但能保證用戶在空間計算平臺操作應用時的基本效率還能保持用戶操作熟悉感,因為這些窗口和其他平臺中的布局和交互行為都比較類似,能讓用戶更輕松適應空間計算平臺的基本操作方式。
而從移動、PC 設備跨端側到空間計算平臺,為了體現無限畫布及 3D 內容展示的特性,Volumes 和 Space 應空間應用場景而生。接下來,讓我們一起聊聊在空間計算平臺中如何使用 Windows、Volumes 及 Space 來構建你的第一個空間計算應用。
在 Vision Pro 中,不論是 Shared Space 還是 Full Space,一切需要 2D 內容承載的應用都可以用 Window 組成,每個應用可以由一個或多個窗口組成。當然也可以包含 3D 內容(Volumes),支持 2D 和 3D 混合界面的呈現。

即使系統會定義用戶打開的每個窗口的初始位置,用戶仍然可以對窗口進行基本的操控,把窗口移動到空間中的任何位置,縮放窗口大小到舒適的尺寸,像在 Mac 一樣可以同時打開或關閉多個窗口應用。

窗口的默認窗口大小為 1280x720pt。窗口首次打開時,系統會將其放在佩戴者前方約兩米的位置,并看起來約有三米寬,這是符合人因較為舒適的瀏覽距離及視場角的尺寸和深度距離。
除此之外,visionOS 窗口采用了毛玻璃的背景材質,一方面可以讓光線及現實和虛擬對象透過顯示,給用戶一種界面內容與周圍背景融為一體的感覺,同時使用鏡面反射和陰影來傳達窗口的縮放和位置。另一方面,也保持了蘋果在品牌視覺上的一致性,繼承了 Apple 全家桶的毛玻璃效果。

在 Xcode 中,你可以通過創建 WindowGroup 組來創建你的個人窗口應用界面。

當然,如果你希望在窗口界面中加入 3D 物體內容,讓界面體驗更加立體,可以通過調用 Model3D 來呈現你的 3D 內容。

Volumes 是 Vision Pro 平臺獨有的應用形態,為了體現虛擬現實下 3D 內容的特性體驗,Volumes 應場景而生。Volumes 可以支持應用在一定邊界內展示 3D 內容,如果你有 3D 內容想要展示,那 Volumes 是絕佳的選擇。

Volumes 是 Windows 的擴展性形態,可以獨立存在于 Space 中,也可以與 Windows 混合融入其中,展示一定邊界內的 3D 物體。即使也可以被用在 Full space 中,但蘋果推薦還是用于 Share space。
與 Windows 類似,在 Share Space 中,系統都會確定 Volumes 和 Windows 的初始位置,但可以被用戶移動到任何位置,并以不同的視角來觀看。Volumes 也會提供類似 Windows 的管理控件與用戶用于調整窗口位置或關閉窗口。在材質方面,Volumes 也是用了相同的毛玻璃背景材質。
有所不同的是在縮放方式上,Windows 自動使用動態縮放,而為 Volumes 使用固定縮放。具體原因也在我的 Apple Vision Pro 設計規范之空間輸入篇提到過,Windows 使用動態縮放是為了保證最小控件的熱區一直可以符合眼手的操作精度;而為了保證 3D 物體大小貼合更自然真實的物理環境,Volumes 則推薦使用固定縮放方式模式。

在具體實現上,可以在窗口類型中引入.volumestric,并設置默認的長寬高尺寸。

最后,讓我們來了解一下元素內容的承載容器-Space。
類似 Mac OS 中的 2D 桌面,Space 將 2D 桌面解放至 360 度的空間中,成為空間計算平臺中承載元素內容的“空間桌面”。Windows、Volumes 都需要被管理及承載在 Space 中。Vision Pro 在空間模塊中的應用管理方式包含了 Shared Space、及 Full Space。

默認情況下,應用是在 Shared Space 中運行,就像 Mac 桌面上的不同應用窗口一樣,用戶仍然可以和現實空間保持聯系和透視關系。通過 VST 顯示 MR 實景,在此 MR 空間內,用戶可以同時開啟多個場景。
有些場景下,你可能想調整應用的沉浸模式,比如看電影或玩游戲時,這時你可以使用 Full Space 模式。Full Space 是指僅允許一個 App 運行的狀態,這就意味著你 app 中所有的 Windows、Volumes 和 3D 物體,只能有一個展示在可視區域內。在 Full Space 中也同樣支持 ARkit 相關功能,比如平面檢測,自定義手勢等,都只能在一個應用全開的模式下進行。
Full Space 有以下特點:
- 營造獨占的沉浸感,可以讓用戶深度聚焦在你的應用上
- 無限畫布,可以將 APP 內元素放置在任何地方
- 同樣支持 ARkit 相關功能,可以與你周圍環境進行互動、創建自定義的手勢交互等
- 有不同等級的沉浸模式,來滿足用戶對沉浸感體驗的不同訴求
在 Full Space 中開發者可以調節沉浸度來改變應用的沉浸度體驗感。其中 Passthrough(.mixed)的模式可以讓用戶與現實世界保持聯系,但你也可以選擇一個完全沉浸的空間,即 Fully immersive(.full)。但你也可以結合這兩種沉浸度,即 Progressive Immersive(.progressive)。

蘋果開發者文檔中是這么定義沉浸模式類型的:
- Automatic Immersion style:默認的沉浸模式。
- Mixed Immersion style:將元素內容混合在 VST 透視中,在無邊界的場景下顯示內容,VST 可見。
- Progressive Immersion style:顯示環繞型窗口內容應用,用戶仍然可以和現實世界進行互動。
- Full Immersion style:在無邊界的場景下只顯示內容,遮蓋除了手部以外其它所有內容的 VST 透視,讓你進入一個完全虛擬的新世界。

除了應用自定的沉浸式程度外,在 Share Space 中,用戶還可以通過旋轉頭顯上的表冠來切換三種空間沉浸模式。

但是,在 Full Immersion 應用中,數碼表冠只能用于退出應用,是無法用來調節沉浸度的。當然,如果想退出沉浸式應用,除了數字表冠,也可以通過 Control center 中應用管理功能來完成。

在 Vision OS 的平臺上,一個應用程序可以動態的切換它的形態,在不同沉浸程度之間流暢過渡。
講了這么多,讓我們來舉個例子深刻的了解一下 Space 具體的應用。
比如在 keynote 中,應用首先在窗口里打開,但仍然可以保持用戶和現實世界的聯系。當播放幻燈片時,系統將會調節周圍光線,讓演示更加聚焦。當用戶想要排練演講時,把用戶帶入一個全屏空間。這就是一個應用在不同沉浸度下的應用。

讓我們用官方實際案例來深入應用一下 Windows、Volumes 和 Space。
進入主頁面時,Hello World 在 Share Space 中打開了一個主 Windows,該 Windows 是由 WindowGroup 構建而來,是應用中出現的第一個場景。該 Windows 呈現了應用程序的主頁內容,同時定義了該 Wwindows 的類型為.plain,即我們說的平面窗口。

進入二級頁面,我們可以看到一個二級 Windows 中包含了一個可交互的 3D 內容形態。該 3D 物體是混合于 Windows 中的。在這里使用了 Model3D 來定義其形態,視圖縮放和定位模型以適應可用空間,并應用可選的方向調整 ItemView。當然我們在將 3D 內容添加到 2D 窗口時,要注意以下幾點:
- 尺寸不要做得太大。雖然 3D 內容增加了用戶的觀看興趣,但當人們從不同方向查看窗口時,可能會無意中掩蓋重要的控件或信息。
- 確保 3D 內容不超過可用深度。深度過大會導致元素被剪裁。
- 避免模型與背襯玻璃相交及重合,同時考慮初始放置后的潛在移動。

打開模型后,我們可以看到立體的地球,這是創建了一個 Volumes 形態,使用了.volumetric 窗口形態,并定義了默認的體積尺寸和深度尺寸。Volumes 形態與 Windows 形態類似,都可以通過底部操控條來進行移動和關閉行為。

為了讓用戶直觀地看到衛星如何繞地球運行,我們可以在沉浸式的空間中來展示地球和衛星之間的關系。我們可以通過創建一個具有沉浸式風格的場景中的顯示視圖 Orbit 來承載該 3D 內容模式。在該場景中,就是定義了一個.mixed 沉浸類型的 3D 模型展示視圖場景。

與 Volumes 窗口形態不同的是,OrbitToggle 是用了空間環境特性而不是一種窗口類型,在這種情況下,沒有明顯的關閉操作,因為在 Full space 下,用戶一次只能打開一個空間,即便是跨應用程序也是這樣。如果想關閉該 3D 模型,可通過旋轉數字表冠或 Control center 進行應用關閉。
除了半沉浸模式,我們還可以使用完全沉浸式的方式從太空觀察太陽系,即 Full Immersion 的模式,在這種模式下,用戶可以通過 UI 窗口上的 Exit 按鈕退出全沉浸式的模式,也可以通過旋轉表冠來關閉當前打開的沉浸式空間。

Vision Pro 中基礎應用形態是 Windows、Volumes 和 Space。其中 Windows 是應用的基礎形態,Volumes 是窗口的擴展形態,而 Space 是元素內容的承載容器。它們相輔相成構成了空間計算平臺的基礎構成形態。
那在你的應用里是如何利用 Windows、Volumes 和 Space 來構建空間計算應用的,不如留言和作者一起分享和探討一下~
歡迎關注作者微信公眾號:Vicky Design Studio

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。




發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
MJ+SD智能設計
已累計誕生 772 位幸運星
發表評論 為下方 3 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓