編者按:近期 VR 和 AR 相關的公司頻繁地拿到高額的投資,足見 Vision Pro 整個行業的推動效果。今天的這篇文章是系列文章的第一篇,如果要針對 Vision Pro 進行設計,需要知道的相關的 12 個關鍵的設計概念。文章來自設計師 Hajira 的搜集整理,以下為正文。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

雖然蘋果的 Vision Pro 明年才會正式開賣,但是隨著開發與設計文檔的公開,持續的關注就沒有停過。整個領域正在蓬勃發展,對于多數設計師而言,Vision Pro 所涉及到的用戶體驗和設計規則和以往有著根本性的區別,從基礎知識開始學習和理解個領域是非常合理的。

空間設計指的是在 3D 的空間環境下進行用戶界面和體驗設計,提供更加身臨其境和直觀的方式與數字內容交互。」

在開始學習規范之前,有必要先弄清楚涉及的 Vision Pro 的 12 個核心概念。

更多Vision Pro 干貨:

1、窗口(Windows)

  • 窗口作為承載內容的容器,可以顯示 2D 和 3D 的內容。
  • 窗口可以單獨存在也可以多窗口同時操作,并且窗口的比例可以做任意調整。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

單窗口

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

多窗口

2、體塊(Volumes)

  • 可以從任何角度隨意查看的 3D 內容和對象就是體塊。比如在線購買商品之前,可以在電商網站上直接多角度查看商品的細節,了解它的整體外觀。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

  • 對于體塊類的內容和對象,并不會在它的周圍顯示窗口和框架。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

3D 的體塊對象,可以放置在 2D 的窗口旁邊

3、配飾(Ornaments)

  • 配飾是一個用來承載和窗口相關的操作控件和信息的
  • 配飾可以是工具欄、選項卡欄,也可以是視頻播放組件這與的控件載體。比如,當視頻在窗口中播放的時候,控制播放的暫停、快進、后退等按鈕,可以放置在配飾控件當中。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

4、工具欄(Tool Bars)

  • Vision Pro 中所提供的工具欄一般都是水平放置的,它們通常被放置于配飾控件當中,在三維空間當中,它們通常在Z軸方向上(垂直于窗口)更加靠前的位置。
  • 工具欄承載常用的按鈕控件,和當前窗口相關。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

5、標簽欄(Tab Bars)

  • 標簽欄的選項卡都是垂直排列,浮動在窗口靠前的位置
  • 標簽欄的主要功能是提供導航功能,方便用戶在應用的不同功能之間快速跳轉切換。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

6、側邊欄(Side Bars)

  • 當選中側邊欄的選項卡的時候,側邊欄會向前移動,展開現實更多的附加的導航選項。
  • 比如在上圖當中,在側邊欄當中選擇 Library 圖標下的選項卡時,相應的選項卡下屬的菜單會相應展開。

7、菜單和彈出框

  • 菜單和彈出框可以拓展到窗口之外
  • 被選中的按鈕,按鈕的背景變為白色,其中的圖標變為黑色,這可以幫助用戶了解和彈出框關聯的是哪個按鈕,而菜單也無需使用箭頭標識關聯圖標的位置,更加優雅。
  • 作為平臺的通用規則,按鈕的背景要避免使用白色,除非當它被選中的時候。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

8、工作表(Sheets)

  • 工作表是一個模態的懸停彈出表單窗口,它通常會向前懸浮于它的父窗口之前。當用戶向界面請求特定的信息、交互的時候,工作表會彈出,呈現出相應的詳細信息,或者承載簡短的交互。比如當用戶請求訂閱音樂服務的時候。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

9、空間(Spaces)

  • 共享空間:默認的空間范疇,多個應用的窗口可以并排存在,用戶可以將它們重新放置在任何自己喜歡的位置。
  • 全空間:為了獲得更加身臨其境的體驗,用戶可以將單個窗口擴展到全空間,占據整個空間范疇,其他的 APP 會隱藏,只有被選中的這個程序會呈現。此外,在全空間還支持更強的沉浸式體驗,比如打開一個全新虛擬世界的門戶進入其中,沉浸于完全不同的場景中。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

10、沉浸光譜(Immersion Spectrum)

  • 窗口(可以位于共享空間和全空間)
  • 全境視圖(全空間)
  • 環境(全空間)

APP 在 Vision Pro 內可以的呈現是動態的,并且可以絲滑地在不同的沉浸狀態之間流暢地轉換,而這也成就了光譜式的沉浸狀態切換。不同的 APP 可以以窗口的形式,在共享空間內共存。如果它需要更多的空間,那么它可以隱藏其他 APP,它可以獨占盡可能多的空間。默認情況下,窗口會在共享空間模式下打開,這是沉浸度最低的狀態,用戶也可以輕松控制沉浸的程度。

在下面的范例當中,Keynote 在共享空間中以窗口模式打開,當需要播放幻燈片時,它會切換到全空間模式,并且默認情況下,會調低環境光,讓目光盡可能集中在幻燈片內容上。

調光是一種增加內容和環境對比度的有效技巧,無需將用戶帶出環境即可創造出更高的沉浸度。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

在排練演講的時候,周圍可以形成一個舞臺環境,讓人沉浸在這樣的環境中。像這樣的沉浸式的體驗需要更大的空間,這個時候唯有 Keynote 位于畫面當中,而其他的 APP 則被隱藏起來了。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

下面顯示的案例則是照片庫,當你瀏覽器照片的時候,周圍的環境會變暗,以這種聚焦而栩栩如生的方式瀏覽回憶是非常神奇的。當查看全景照片的時候,它會以全空間的模式展開,讓人身臨其境感知到拍攝時的場景。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

11、通透(Passthrough)

  • 通透功能讓用戶在佩戴 Vision Pro 的時候,能夠通過設備外部的攝像頭,實時看到周圍的物理環境。
  • 轉動數字表冠能夠調整通透的程度,改變周圍環境可見的范疇大小,從而控制整體的沉浸感。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

  • 增加通透度,能夠讓真實環境的可見程度標高,減少通透度,能夠帶來更強的沉浸感。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

12、過渡和微妙的動畫

  • 設計平滑、可預測的過渡,可以增加不同體驗狀態之間的連續性。
  • 與現實世界有效地融合:當用戶準備進入一個全新的沉浸空間場景的時候,周圍的物理環境逐漸淡出,請確保 APP 使用柔和微妙的邊緣動畫,避免使用突兀的過渡,讓用戶盡量專注于內容本身。
  • 最鼓舞人心的經歷能夠讓人感覺充滿活力,而微妙的動畫則能夠給整個場景注入活力。

想掌握Vision Pro空間設計?先掌握這12個基礎概念!

還有很多東西值得探索。下一篇文章,將會詳細探索用戶使用手和眼睛在空間中的交互。

收藏 53
點贊 32

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