本篇文章將具體分析VisionOS的設(shè)計規(guī)范，作者將從三個方面具體分析其設(shè)計規(guī)則，能給產(chǎn)品設(shè)計的伙伴們提供一些設(shè)計思路及參考，希望本篇文章能對大家有所幫助。

在蘋果WWDC2023中，發(fā)布了一款XR設(shè)備：Apple Vision Pro。蘋果也在后續(xù)陸續(xù)發(fā)布了VisionOS的SDK和設(shè)計規(guī)范了。開發(fā)者也可以正式開始VisionOS的開發(fā)了。不會編程的小伙伴，也可以自己下載一個模擬器試著玩玩嘗嘗鮮。

我們可以看到很多蘋果對于新一代的計算設(shè)備是如何理解的。也許我們一線互聯(lián)網(wǎng)從業(yè)者，絕大部分還在從事傳統(tǒng)的UI設(shè)計。但至少我們可以從Vision Pro的設(shè)計規(guī)范中，學習到一些蘋果的設(shè)計思路，并融入我們?nèi)粘５脑O(shè)計之中。

一、容器

雖然在發(fā)布會上，蘋果為我們展示了各種眼花繚亂的能力，但是歸根到底，蘋果為我們總結(jié)了，其實就只有3種界面容器：Windows、Volumes、Spaces。

所有你在Vision Pro中看到的應用形態(tài)或者窗口形態(tài)，都萬變不離其宗。

1. 窗口Windows

其實從一開始，在生態(tài)的建設(shè)上，蘋果就想好了要VisionOS綁定上iOS的生態(tài)。因為iOS的實在是太繁榮了。如果一個開發(fā)者，目前已有一個iOS的app，他就可以通過簡單的項目遷移，把自己的app遷移到VisionOS上，成本非常低。

蘋果為我們演示了Apple Music從iOS應用直接遷移到VisionOS中。可以說，這對于開發(fā)者來說，省心。對于用戶來說，熟悉（甚至在模擬器中，還有幾款iPad應用）。

在窗口中，蘋果重新設(shè)計了“拖動窗口”、“關(guān)閉窗口”的按鈕。以便用戶執(zhí)行一些系統(tǒng)級的操作。這些操作也讓iOS用戶十分熟悉，并且可以輕松上手。

雖然看起來熟悉，不過在控件和容器材質(zhì)上，蘋果還是做了相當多的創(chuàng)新的。這塊我們后面來聊聊。但是僅僅憑借著極低成本，讓用戶擁有了無界大屏感受的同時，開發(fā)者卻不需要有過多的適配工作。已經(jīng)足以讓VisionOS的生態(tài)逐漸繁榮起來。

2. 空間容器Volumes

當平面的展示無法滿足用戶需求時，就會催生出3D展示的需求。當然，手機內(nèi)本身就有3D查看的能力。但是如果讓產(chǎn)品和現(xiàn)實結(jié)合，會讓你的體驗感更強、更身臨其境。

VisionOS也提供了這種沉浸式查看3D模型的能力。再結(jié)合上簡單的2D UI，可以有很多的場景結(jié)合。其中包括了電商中的商品，可以有更好的展示；新買的電器，說明書也可以讓用戶有更好的理解等等。

另外，在界面設(shè)計中，將空間容器與玻璃材質(zhì)的窗口做融合，可以達到更讓人印象深刻的的效果。

最后，3D展示的功能確實很好。但是建模不是很費勁嗎？這樣的內(nèi)容生態(tài)可如何搭建呢？蘋果其實在過去就發(fā)布了專門用于支持AR內(nèi)容創(chuàng)作的工具：Reality Composer。

本次WWDC更新后，新增了粒子發(fā)射器以及Shader的設(shè)置，支持了更強大的效果。并且也支持照片建模，大大的降低了3D內(nèi)容產(chǎn)生的門檻。

3. 場景容器Spaces

這就是一個真正的“全屏”功能。而且能帶給用戶最沉浸的體驗，也是VisionOS的終極殺手級場景。這里可能更多的是游戲場景。除了剛才提到的Reality Composer Pro，VisionOS支持使用Unity來創(chuàng)建沉浸式體驗。

這樣一來，一些已經(jīng)使用Unity創(chuàng)建游戲的開發(fā)者，可以以極低的成本做項目遷移，做一個更沉浸的VisionOS版。

但是需要注意的是：并非所有場景都越沉浸越好，需要把沉浸感留給有意義的場景。

例如說，當用戶辦公時，此時IM、會議以及文檔會頻繁的切換進行。這個時候一個過于沉浸的體驗也許就會對我的整體辦公體驗造成不便。

而假設(shè)用戶正在觀看電影或者玩游戲的時候，用戶有更高可能性會需要斷絕來自其他App的干擾，此時就需要更為沉浸的體驗。

二、熟悉的部分

1. 圖標

當我們在應用界面，我們會發(fā)現(xiàn)一個熟悉又充滿的空間感的App啟動桌面。當你的目光注視時，展開為一個三維的對象。

所有的App圖標都是圓形的，由一個背景層和一到兩個上層組成。為了讓圖標看起來更立體，系統(tǒng)會添加陰影來表現(xiàn)不同層之間的深度關(guān)系。同時，還會利用視差效果來制造凸出的感覺，讓圖標更加生動。

因為高光和陰影都是VisionOS在渲染圖標時提供的，因此需要注意：避免在背景層中添加看起來像孔洞或凹面區(qū)域的形狀，因為系統(tǒng)添加的陰影可能會讓圖標看起來是內(nèi)凹的。

并且不要使用半透明圖層，否則聚焦的時候產(chǎn)生的陰影，會使圖標的觀感反而變暗。以此來確保圖標和界面元素的三維外觀和深度感。

2. 窗口

不像iOS或者macOS會給窗口一個指定的固定色值，VisionOS使用了一個固定定義好的的玻璃材質(zhì)，用戶現(xiàn)實環(huán)境和空間中的光線和對象可透過這種材質(zhì)顯示。

為什么蘋果強烈推薦使用玻璃材質(zhì)呢？

我認為是蘋果在設(shè)計Vision Pro，并且對比競品的時候發(fā)現(xiàn)，其實用戶并不一定需要一個特別沉浸的XR設(shè)備。蘋果認為用戶在窗口模式下，大概率還是需要一個環(huán)境上下文的。這個設(shè)計概念貫穿整個VisionOS的設(shè)計規(guī)范中。

并且通常也沒有淺色和深色效果。玻璃有高光有陰影。并且在各種情況下的燈光都可以看的比較清晰。VisionOS中的渲染引擎會自動根據(jù)環(huán)境光線，調(diào)整材質(zhì)的深淺。

這種材質(zhì)在不同光照下具有自適應效果。在深色條件下，會自帶一些光讓用戶看清界面。你可以在Xcode的模擬器中，直接模擬各種光線效果來驗證自己的材質(zhì)是否清晰。

白天環(huán)境下：

夜晚環(huán)境下：

在設(shè)計規(guī)范中，蘋果強調(diào)需要避免使用純色不透明背景。否則在實際使用中，用戶會感覺非常壓抑，并且對周圍的感知力會降低。這對于設(shè)計和工程團隊，對于設(shè)計素材的Token化提出了更高的要求。

最后，對于那種側(cè)邊欄、不同容器層級的場景，蘋果是提供了好幾種淺茶色、深茶色毛玻璃嗎？

其實不是的…用的其實是一個深色的蒙層。

總之對于窗口的設(shè)計，為了讓用戶更好的感知環(huán)境上下文，蘋果自己定義了一種玻璃材質(zhì)，并且花了比較大的力氣在這個材質(zhì)的基礎(chǔ)上做文章。

那字體可讀性怎么辦？

3. 字體可讀性

由于玻璃材質(zhì)會導致一些字體可讀性的問題，并且由于用戶可能遇到的背景也蘋果官方也提供了一些指引。

1）加重字號

首先，在普通UI上的字重，如果遷移到VisionOS上，都建議加粗一號。

例如說，普通UI中的Regular字重，在VisionOS上也建議使用Medium字號。為此，他們還為SF Pro開發(fā)了Extre Large的字重。

2）動態(tài)背景

其次，在毛玻璃上使用動態(tài)背景，會讓字體更具有可讀性，也具有更好的排版美感。當動態(tài)關(guān)閉時，有時候需要去檢查圖片的對比度，可能會讓字體顯得不那么好辨認。

動態(tài)開：

動態(tài)關(guān)：

3）避免使用自定義顏色文字

如果要用自定義顏色，盡量不要使用在字上，而是直接用在容器或按鈕上，不然可能會造成對比度問題。

4. 新控件

VisionOS目前可看到的也和主流操作系統(tǒng)的沒有差別。不過一個叫做“Ornaments”的控件十分有趣。Ornaments提供了一個十分重要的容器，官方翻譯是“裝飾”，不過感覺它更是一個“懸浮活動區(qū)”。

當然…當你打開了蘋果官方提供的Figma UIKit，你會發(fā)現(xiàn)它本質(zhì)上還是…（笑

類似于過去的懸浮按鈕，但是這個還有所不同。鑒于VisionOS中的窗口可以是異形窗口，懸浮工具欄可以更容易的放置重要的工具，并且和內(nèi)容區(qū)產(chǎn)生一定的互動。

通過滾動內(nèi)容區(qū)，懸浮工具欄可以產(chǎn)生十分迷人的毛玻璃效果。和手機類似，它通常置于底部，原因是目光在頻繁穿梭在屏幕中時，注視底部的元素會比注視頂部的東西更輕松。

其他案例：

三、新鮮的部分

VisionOS引入了了全新的交互體驗。因此，無論是交互方式，還是人因工程，都帶來了全新的課題。我們來看看蘋果是如何系統(tǒng)性的解決這些問題，并且與現(xiàn)有的平臺產(chǎn)生聯(lián)系的。

1. 交互方式

我們在VisionOS中看到熟悉的方式包括了虛擬鍵盤、語音輸入、以及鍵盤鼠標觸摸板。這些都是大家目前已經(jīng)在使用的交互方式了。

當然，在VisionOS上使用虛擬鍵盤，可以看到效率并不是很高。語音輸入目前也難以成為交互方式的主流。實體鍵盤和觸控板雖然高效，應該會成為生產(chǎn)力的必備，但是面對輕量的家庭娛樂場景，也過于繁冗。

這一次，蘋果也帶來的新東西。就是眼動交互和手勢交互。

1）眼動交互

用戶看向交互式對象時，VisionOS 會高亮標記它以提示用戶，此對象已經(jīng)獲得焦點。意味著用戶可使用輕點等非直接手勢與其交互。

其實對應到現(xiàn)有的交互模式，眼神交互就類似于鼠標懸停。由于利用眼動交互不如鼠標那么精準，因此交互區(qū)域至少60pt的大小。

另外，在VisionOS中可交互對象，一般都會使用比較大的圓角。用戶的視線常常會被形狀中的角吸引，因此難以保持專注于形狀的中心。項目形狀的角越圓，用戶越容易專注于該項目。

另外就是讓眼睛看到的主體距離一致。例如當出現(xiàn)模態(tài)界面的時候，原窗口需要退后，而模態(tài)窗口替換了原窗口退后前的位置。

也就是說，用戶需要聚焦的窗口距離并沒有發(fā)生改變。這樣在觀感上更為舒適，無需在窗口變換是反復聚焦。

2）手勢

① 間接手勢

VisionOS定義了一套系統(tǒng)級的間接手勢，并且也建議用戶在默認情況下使用間接手勢。

間接手勢包括了以下6個：

單擊 / 雙擊 / 長按 / 拖動 / 縮放 / 轉(zhuǎn)動

為什么會有間接手勢？直接手勢不好嗎？

在VisionOS中，由于被交互對象可能距離用戶大約2m距離，如果長時間的進行直接交互會導致使用者的疲勞。并且一般界面的寬度拉大后會有數(shù)米寬，直接手勢會導致一些例如縮放、滾動的手勢的行程可能會需要非常的長，導致用戶使用起來非常的低效。

因此，如果能無視用戶手所處的位置，無論是放在腿上、還是桌上都能準確操作，才能確保用戶長時間且不疲勞的使用。

總之，在visionOS上使用直接交互，體驗無異于使用一臺150寸的觸屏電視。而間接交互，就是給了你遙控器，好處就在于舒適和快捷。

仔細觀察這些手勢，你會發(fā)現(xiàn)和手機或者觸控板上的手勢幾乎可以一一對應。無論是單擊、雙擊、還是長按、拖動都毫無學習成本，無需學習即可上手。

② 直接手勢

你也可以自己定義一個手勢。你的 App 必須在空間中運行，且必須請求用戶許可來訪問其手部權(quán)限后，才能在 App 中提供自定義手勢。

正常來說，需要符合用戶的使用習慣，或者與現(xiàn)實中有所對應。然后就可以天馬行空的發(fā)揮了。例如拖動一個空中的物體、搓碟打碟、切水果、比心之類的…

2. 用戶中心

當在虛擬世界中，用戶那是真正的，可視化的“用戶中心”。為幫助保持舒適，系統(tǒng)會自動相對于佩戴者的頭部放置內(nèi)容，無論用戶的身高如何或者是坐著、站著還是躺著。

VisionOS 會將內(nèi)容帶到用戶眼前，而非讓用戶移動來觸及內(nèi)容。因此用戶正常情況下，可在保持靜止不動的狀態(tài)下與 App 和游戲交互。

1）視場

用戶的視場是無需移動頭部就能看到的空間。

個人佩戴 Apple Vision Pro 時視場的維度因各種因素而異，例如用戶配置光密封性的方式以及邊緣視敏度的范圍等等。

將重要內(nèi)容居中放在視場內(nèi)。VisionOS 默認會直接在用戶面前啟動 App，將其放在用戶的視場中。當用戶需要長時間與內(nèi)容交互時，你應該將內(nèi)容舒適地放在其視場內(nèi)。

此外，人的視覺取向總體來說更偏橫向，建議更多的使用橫向的窗口來讓用戶更有沉浸感。當需要超大型沉浸式體驗時，建議借助使用地面來放置。

盡量把所有的內(nèi)容展示區(qū)域放到中間，大約視角60°的范圍內(nèi)。如果有一些切換和導航類的UI，可以把它們放在相對周邊的位置。對于一些相對頻繁操作的功能，可以放到偏下的位置。因為眼神向下看比向上看更不容易疲勞。

2）人因工程

首先，建議視角距離用戶不可以太遠，大概在手能觸及到的位置。這樣讓用戶感覺是可以交互的。一般來說，visionOS會把這個距離設(shè)定為2米左右。

另外，避免將內(nèi)容錨定到佩戴者的視角。雖然通常想要 App 保留在視場內(nèi)，但如果錨定的內(nèi)容在用戶面前保持靜止，這會讓用戶感到卡頓、受限且不舒服，尤其是當內(nèi)容遮擋了很多穿透且降低了用戶周圍的明顯穩(wěn)定性。

如果用戶換了坐姿，只需要長按數(shù)碼表冠，就可以重新定位視角中心。

3）三維與縮放

既然目前所有的窗口都在三維空間中，那失焦的窗口和聚焦的窗口，因為遮擋關(guān)系，本質(zhì)上的空間關(guān)系是不同的嗎？如果失焦后的窗口會被后置的同時還會被縮小，會不會體驗上過于不穩(wěn)定？

這里蘋果提供了2種窗口縮放的方式：動態(tài)縮放和固定縮放。

默認情況下，使用動態(tài)縮放。動態(tài)縮放的意思是，當一個窗口被移走，它的距離變的更遠的同時，它的實際尺寸會相應的變大，以確保它在正面可視尺寸并不會發(fā)生改變。蘋果也同樣提供了固定縮放的選項，以滿足一些比較特殊的需要。

動態(tài)縮放：

固定縮放：

這樣可以確保在幾個窗口前后騰挪時，看到的體驗足夠穩(wěn)定。

4）進入沉浸

剛才說了很多如何讓用戶覺得舒適，但是在XR設(shè)備中，讓用戶獲得沉浸感當然是一件最重要的事情了。通過VisionOS，我們可以通過多種方式讓用戶獲得沉浸感。

首先，最為熟悉的方式，你可以直接進入一個沉浸式查看的頁面，把環(huán)境用蒙層蒙上，類似我們網(wǎng)頁上常見的圖片查看器。甚至你也可以把整個用戶環(huán)境都替換成你想要替換成的那個環(huán)境，這樣的切換也是感覺很自然的。

除此以外，也有一些其他的設(shè)計可以嘗試參考：

總之，進入沉浸的方式有很多，但是要自然，要漸進且有可控感。為更改可看到周圍的多少，用戶使用數(shù)碼旋鈕調(diào)整穿透量。

例如，在想要徹底的沉浸于某個世界時，可能會減少穿透；在想要看一眼現(xiàn)實世界的人，或者突然要切出與現(xiàn)實世界溝通時，用戶可能會增加穿透。

3. 眩暈與疲倦

VR眩暈是一件過去常常被提及的問題。VisionOS也做了相關(guān)的研究。在其中也給了很多關(guān)于設(shè)計的建議。

1）合理的透視與音效

人的眼睛會從平面中找到空間的線索，并且大腦會自行建立空間感。例如遮擋關(guān)系、近大遠小、原處的模糊等…但是當這樣的感官出現(xiàn)沖突時，就會產(chǎn)生不適感。因此在設(shè)計VisionOS的應用時，要給用戶足夠合理的透視關(guān)系。

此外，在人體的各種感官中，眼睛和耳朵都會產(chǎn)生運動的感知。但是如果視覺感官與聽覺感官發(fā)生沖突，或者視覺感知不足或特別強，就會導致眩暈感和惡心。

因此，我們發(fā)現(xiàn)，在蘋果的設(shè)計中，并不是很強調(diào)那種游戲場景，總體都是比較平緩的動畫、輕柔的音效，盡可能避免目前普遍存在的VR眩暈。

2）合理的動效設(shè)計

當用戶佩戴 Apple Vision Pro 并與虛擬內(nèi)容交互時，他們會使用數(shù)碼表冠調(diào)整自己的沉浸程度，來查看現(xiàn)實環(huán)境。

因為周圍和 App 內(nèi)容可能同時可見，如果虛擬內(nèi)容的移動讓用戶感覺他們自己或周圍在移動，這會讓其感到不適。一般而言，移動的虛擬對象越大，維持穩(wěn)定感就越難。

因此建議：

1. 盡量避免在用戶視場的邊緣顯示動態(tài)效果。用戶對于發(fā)生在邊緣視覺處的動態(tài)效果尤其敏感。邊緣動態(tài)效果除了會分散用戶注意力外，甚至還會引起不適，因為它會讓用戶感到自身或周圍在移動。
2. 避免顯示持續(xù)振蕩的對象。尤其應避免顯示頻率為 0.2 赫茲左右的振蕩，因為人體對于此頻率非常敏感。
3. 考慮為用戶提供靜態(tài)參考系。在不會移動的區(qū)域內(nèi)包含視覺移動時，用戶會更容易接受。相比之下，如果看起來周圍的一切對象都在移動，用戶會感到不舒服。

3）合理的視覺動線設(shè)計

研究表明，眼睛在觀看偏下的內(nèi)容時，會更加省力一些。在VisionOS設(shè)計時，特意把TabBar以及較少操作的控件，布置在視場的邊緣。在相對目光中心偏下的位置，放置Ornaments。這是因為當用戶需要經(jīng)常用目光去聚焦某個特定按鈕時，會減少疲勞。

此外，在較大尺度下，目光在對角線之間穿梭也會導致眼睛疲勞。需要避免這樣的動線設(shè)計。

四、設(shè)計解讀

當時在看完發(fā)布會后，有很多人覺得，這實在是太驚艷了，真是一款劃時代出產(chǎn)品！也有不少人覺得，這不過是另一款失敗的XR產(chǎn)品。其實從商業(yè)角度，我們很難去判斷這款產(chǎn)品到底會成功還是失敗。

但是可以看到從蘋果的新人機交互設(shè)計指南到開發(fā)者生態(tài)，蘋果在開發(fā)者端VisionOS中下了不少功夫。這也是蘋果認為的新平臺的發(fā)展之路：先生態(tài)后平臺。

看過這么多的VisionOS的細節(jié)設(shè)定，發(fā)現(xiàn)蘋果在走一條和過去所有廠商的頭顯設(shè)備都不同的路，也大概理解了為什么這么些科技博主在體驗了Apple Vision Pro之后激動的心情。確實是和過去的產(chǎn)品非常不一樣。

過去我們常常說，VR和AR是兩條不同的路。我們看到了很多嘗試者。AR主打的是信息隨身。類似HoloLens，還有曾經(jīng)的Google Glass。他們曾經(jīng)給我們描繪過一個美好的未來：未來的信息無需現(xiàn)實設(shè)備，它會直接投射在我們的視網(wǎng)膜上。

在我看來是一種計算設(shè)備的普世。他們或多或少因為自己的問題，或許是隱私，或許是體驗，或許是成像視覺效果。在用戶眼中，始終是一個高價卻沒太大用處的玩具。

VR主打的是沉浸體驗，走的比那些AR設(shè)備更久一些。我們也看到了很多VR的酷炫應用，也有很多運動類的應用。但是好像始終沒有成為一個主流消費品。

Apple Vision Pro和他們都不太像。在我看來，這是一臺最AR的VR設(shè)備。他有沉浸式的體驗，但是卻總是告訴用戶，現(xiàn)實是什么樣子的，并且如何快速的回到現(xiàn)實，或者至少能看到一點現(xiàn)實的樣子。

其實這也許是蘋果多年以來對這類設(shè)備用戶的洞察，他看清了他的設(shè)備除了做一款眼鏡以外，他到底要解決的最關(guān)鍵的問題是什么。

因為當初我第一次戴上FPV飛行眼鏡的時候，我也遇到了同樣的問題。眩暈只是最嚴重的反應，本質(zhì)上是現(xiàn)實中的方向感與參考系的缺失。

縱觀蘋果的一整套設(shè)計規(guī)范，可以看到幾個要點：

1. 穩(wěn)定的參考系：穩(wěn)定的告知用戶環(huán)境，作為參考系。
2. 溫和的畫面：避免讓人感覺眼花繚亂、不和諧、過快、猛烈的動態(tài)效果。
3. 裸手手勢：讓用戶癱坐著也能直接操作的裸手手勢，無需攜帶手柄，也無需抬起手。
4. 沉浸安全感：當用戶沉浸時，避免過多的移動，同時也能方便的感知到環(huán)境。

從這樣來看，如果把過去的VR和AR設(shè)備比作戰(zhàn)斗機和滑翔機，那這次的Apple Vision Pro好像有點我們?nèi)粘Ｗ目蜋C的感覺了。

以上就是關(guān)于Apple Vision Pro設(shè)計規(guī)范與生態(tài)建設(shè)的全部解讀了。喜歡記得收藏轉(zhuǎn)發(fā)。

參考資料

https://developer.apple.com/visionos/

https://www.ifanr.com/1551759

https://developer.apple.com/news/?id=765ce4l3

https://developer.apple.com/videos/play/wwdc2023/10076/

https://developer.apple.com/cn/design/

https://developer.apple.com/videos/play/wwdc2023/10072/

https://developer.apple.com/videos/play/wwdc2023/10073/

https://developer.apple.com/videos/play/wwdc2023/10078/