本篇文章將分析 Apple Vision Pro 的空間設(shè)計，作者從五個基礎(chǔ)方向出發(fā)，詳細(xì)分析其中的設(shè)計原則，能給產(chǎn)品設(shè)計的伙伴們提供一些參考，希望本篇文章能對你有所幫助。

在本篇中，我們將介紹 Apple Vision Pro 中的空間設(shè)計原則，探索空間設(shè)計的基礎(chǔ)知識，了解如何從深度、尺寸、窗口和沉浸感進(jìn)行設(shè)計，并應(yīng)用最佳實踐來創(chuàng)造能夠改變現(xiàn)實的舒適、以人為本的體驗。

Vision Pro 借助深度、尺度、自然輸入和空間音頻，創(chuàng)造了前所未有的空間設(shè)計體驗。

其核心的五大基礎(chǔ)設(shè)計原則，分別是：

(相關(guān)資料圖)

Familiar：如何讓你的應(yīng)用保持熟悉感，讓用戶易于學(xué)習(xí)和上手。

Human-centered：如何打造以人為本的設(shè)計，更符合人因。

Dimensional：如何利用維度來打造獨特的空間體驗，讓界面更有層次感。

Immersive：如何打造更具有沉浸感的應(yīng)用體驗。

Authentic：如何打造更真實的空間體驗設(shè)計。

下面，讓我們圍繞著五大核心設(shè)計原則展開介紹。

一、Familiar

在 ipad 平臺上，我們可以看見許多熟悉的常見組件元素，比如側(cè)邊欄、選項卡、搜索欄等。

而在 Vision Pro 平臺上，我們依然能使用用戶認(rèn)知和已經(jīng)熟悉的組件元素來設(shè)計你的應(yīng)用。我們將用戶熟悉的界面放置在 Vision Pro 的窗口中，這樣用戶就可以看到它們并快速使用它們。

不同的是，在 Vision Pro 平臺上，窗口只是你周圍環(huán)境空間的其中一部分。

接下來，讓我們分別從 Window、Sizing、及 Points 三個維度分別進(jìn)行介紹如何打造具有熟悉感的界面。

1. Window

在窗口側(cè) Vision Pro 引進(jìn)了一種全新的視覺語言窗口，即玻璃材質(zhì)。用戶可以感知到他們周圍的環(huán)境，窗口也能適應(yīng)不同的光照條件。

系統(tǒng)窗口提供移動，關(guān)閉和調(diào)整窗口大小的功能，人們可以捏住窗口移動欄將窗口移動至任何位置。

但不管如何移動，窗口的角度總是面對著用戶，以保持界面易于閱讀和易于使用。

2. Sizing

在窗口尺寸側(cè)，Vision Pro 給出了非常靈活的尺寸，建議開發(fā)者可以根據(jù)自己的內(nèi)容來選擇舒適的窗口大小以更好適應(yīng)于用戶的視野。

比如為了讓用戶在瀏覽網(wǎng)頁時看到更多的內(nèi)容，Safari 瀏覽器的窗口尺寸很高；為了更沉浸式的進(jìn)行全尺寸演示，Keynote 的窗口被設(shè)計的很寬。當(dāng)然，窗口也可以有其它靈活的形狀，窗口之外的區(qū)域還可以使用 Tab bar 和 Tool bar。

比如在音樂 app 中，這些控件位于主窗口上方，總是易于被用戶關(guān)注到，并為內(nèi)容提供更多可操作空間。

或者，也可以使用分離式界面將控件與主要內(nèi)容分開，比如在 safari 中導(dǎo)航欄與網(wǎng)頁分開，讓頁面主內(nèi)容占據(jù)視覺焦點。窗口也可以自動改變大小，當(dāng)側(cè)邊欄在 safari 中打開時，窗口的會變大以顯示更多控件，而不會覆蓋網(wǎng)頁窗口，不受屏幕約束。如果你需要一個更大的畫布，像其他平臺一樣，應(yīng)用可以有多個窗口，在某些情況下它們可以并排顯示內(nèi)容，比如一次查看多個網(wǎng)頁。在播放演示文稿時，幻燈片在一個大而遠(yuǎn)的窗口中，而演示者顯示在附近的一個較小窗口中，這可以讓人們將演示窗口放在他們想要的地方，同時保留幻燈片觀看的沉浸感。3. Points

為了確保用戶界面更好的伸縮性，我們用 Points 來進(jìn)行設(shè)計，它是我們指定界面元素大小的方式。

當(dāng)人們移動窗口時，界面會隨著遠(yuǎn)離用戶而縮放得更大；相反，當(dāng)界面靠近用戶時，尺寸會變小，這保持了界面的易讀性和可用性。

因此，蘋果在 Vision Pro 上設(shè)計按鈕時，需要至少 60pt 的響應(yīng)熱區(qū)，這就需要圖標(biāo)形狀至少為 44pt，且按鈕與按鈕之間有 16pt 的間距。

二、Human-centered

好的設(shè)計總是以人為本，在設(shè)計應(yīng)用時，需要結(jié)合用戶在自己空間中的可視區(qū)，來考慮用戶可以看到什么，以及他們需要如何移動。

接下來我們將從 Fied of view、Ergonomics、Movement 分別來介紹如何進(jìn)行以人為本的設(shè)計。

1. Fied of view

佩戴設(shè)備時，用戶可以看到他們面前的世界，這是他們的可視區(qū)（Fied of view），用戶最容易看到視野中間的內(nèi)容，所以把最重要的內(nèi)容盡量放在中心，人的橫向視野更寬，所以很多界面窗口都使用橫向布局。

比如 Safari，當(dāng)用戶想一次看到他們所有的窗口標(biāo)簽時，我們就使用更寬的布局來匹配用戶的視野，將這些窗口標(biāo)簽分散在用戶面前的畫布中。

兩邊側(cè)面的窗口以用戶為中心向內(nèi)轉(zhuǎn)向，讓用戶更容易閱讀。

但用戶不能完全保持頭部靜止，他們會環(huán)顧四周，這意味著我們可以進(jìn)一步擴(kuò)展內(nèi)容以獲得身臨其境的體驗。

但總的來說，要將您的主要內(nèi)容保持在視野內(nèi)，否則很難閱讀或理解。

2. Ergonomics

以人為中心的設(shè)計也意味著設(shè)計時要考慮到人體工程學(xué)（Ergonomics）。界面位置對用戶的身體姿態(tài)影響很大，所以我們要考慮在各個維度上舒適的放置窗口。

在默認(rèn)情況下，窗口沿著自然視線放置，鼓勵用戶在放置窗口時保持健康和舒適的姿勢，比如在相對于人的頭部面對的方向，這有助于用戶更舒適的看到界面內(nèi)容并進(jìn)行交互。

同時也要考慮到不同高度和不同位置的人，比如躺在沙發(fā)上的姿態(tài)。

大部分時間，把內(nèi)容放在離人們遠(yuǎn)點的地方，比手臂更遠(yuǎn)一點，以鼓勵人們在遠(yuǎn)處進(jìn)行交互，避免將內(nèi)容放在人的后面或非常高或低，除非它是沉浸式體驗的一部分。不是每個人都會坐著使用你的應(yīng)用，他們可以四處走動以使用， 所以避免將窗口錨定在用戶的視角中，這會讓事情感覺卡頓，并且會讓人迷失方向。

相反，應(yīng)該將窗口鎖定在用戶的空間中，這讓他們可以自由地環(huán)顧四周。

3. Movement

在使用設(shè)備時，用戶也可以站起來，四處走動，但我們建議創(chuàng)建需要最少移動的靜止體驗（Require minimal movement），這使您的應(yīng)用程序更易于為用戶使用。用戶應(yīng)該能夠在不用移動的情況下就能使用你的應(yīng)用。

有時用戶確實移動到新的位置和角度，但他們可以按住數(shù)字表冠，將內(nèi)容重新移回他們面前，所以你的應(yīng)用不需要提供一種特殊的方式來恢復(fù)窗口或重置場景，而是依靠此系統(tǒng)來重新定位您的應(yīng)用程序內(nèi)容。

三、Dimensional

接下來讓我們談?wù)勅绾卧趹?yīng)用中提供空間維度屬性，我們分別討論從 Space、Depth 和 Scale 進(jìn)行深入探討。

1. Space

在用戶周圍，物理空間可能是有限的，但空間畫布是無限的，注意不要被有限的物理空間限制你的應(yīng)用，讓我們看看這是如何與電視應(yīng)用程序是如何工作的。

當(dāng)窗口移動時，椅子仍然可見，以便于放置。當(dāng)窗口被釋放時，內(nèi)容變得可見，這樣用戶就可以看到和使用窗口 app，你不需要擔(dān)心他們?nèi)绾芜m應(yīng)用戶的空間，因為系統(tǒng)會在其時為你處理此問題。

觀看電影時，視頻占據(jù)整個窗口，周圍環(huán)境光線自動變暗，幫助用戶專注于內(nèi)容，用戶可以感受到他們的周圍環(huán)境不受限制，并且在任何時候用戶都可以打開一個超越物理邊緣尺寸的環(huán)境。

如果你的應(yīng)用程序需要更多空間來適應(yīng)大窗口，你可以在這里創(chuàng)建自己的超越現(xiàn)實的體驗，比如我們創(chuàng)建了一個沉浸式電影院以適應(yīng)一個巨大的電影院。

2. Depth

深度是一個新的變量，它是讓界面變得更有層次感。讓我們看一些例子，深度影響我們?nèi)绾闻c空間中的物體聯(lián)系起來，遠(yuǎn)方的內(nèi)容可以讓用戶的瀏覽更沉浸，并鼓勵人們在遠(yuǎn)處互動。

附近的物體會激發(fā)用戶互動，更容易從不同的角度觀察，微小的運(yùn)動可以讓我們從各個角度看到物體，深度的一個很好的用途是創(chuàng)建層次結(jié)構(gòu)（Create hierarchy with depth）。

讓我們再看看沉浸式影院中的電視應(yīng)用程序，播放控件可以很小，被放置在用戶附近，即使它們很小，它們?nèi)匀豢梢钥刂齐娪啊?p>如果它們被放置在電影屏幕上，它們看起來太大，就不太合適，像這樣的附近元素可以盡量讓它很小，而仍然優(yōu)先展示遠(yuǎn)處的大物體。

深度需要用光和影等視覺線索（Use light and shadow as cues）來加強(qiáng)，有些物體會像我們剛剛看到的電影屏幕一樣，在房間中有發(fā)光地板和天花板，任何出現(xiàn)在光下的物體都應(yīng)該將顏色投射到附近的物體上，大多數(shù)物體應(yīng)該像桌子上的窗口一樣投影，這使它們看起來更融入空間。您應(yīng)用中的任何自定義對象也應(yīng)該投影，在大多數(shù)情況下，用戶更喜歡微妙的深度 ( Prefer subtle depth ) 。

很多時候，它容易過度，會使物體看起來分散注意力或不切實際，元素之間的微妙深度通常足以引導(dǎo)人們的注意力。

注意當(dāng)一個模態(tài)出現(xiàn)時，窗口會稍微向后推以引起注意。深度是微妙的，但有效的。

并非所有東西都需要深度。

例如，3D 文本可能會令人分心且難以閱讀，尤其是在角度上。當(dāng)用作界面元素時，保持文本扁平化。

3. Scale

尺寸是一種強(qiáng)調(diào)內(nèi)容的新方法，小的物體會感覺個性化和輕量化，大的物體感覺令人印象深刻，就像湖面上的巨型電影，增加比例完全改變了電影的感覺。

有些物體最好以現(xiàn)實生活中的比例查看。

例如，購物應(yīng)用中用戶可能希望以現(xiàn)實生活中出現(xiàn)的產(chǎn)品 的大小進(jìn)行顯示。

四、Immersive

接下來讓我們談?wù)勅绾巫屇膽?yīng)用程序更加沉浸。

1. Immersion Spectrum

動態(tài)的應(yīng)用窗口它可以根據(jù)用戶在不同的沉浸式狀態(tài)之間流暢地過渡。

應(yīng)用之間的所有內(nèi)容都可以在共享空間的窗口中與其他應(yīng)用程序一起運(yùn)行，或者如果它需要更多空間，它可以在一個完整的空間中運(yùn)行，其他應(yīng)用被隱藏起來。

讓我們看一個主題演講中的示例，應(yīng)用程序在窗口中打開，但是當(dāng)播放此幻燈片時，我們使用調(diào)節(jié)亮度來使演示文稿更加聚焦。營造沉浸的環(huán)境氛圍當(dāng)排練演示的時候，我們可以把用戶帶到舞臺上，讓他們完全沉浸在劇院真人大小的體驗中。

這樣的體驗需要更多的空間，應(yīng)用將某人帶到一個他們可以看到周圍的新地方。

但是完整的空間時刻可能不會把某人帶到一個新的地方，他們依然可以存在于自己的空間里，在這里感覺就像你看著大海。而你仍然可以看到你周圍的房間，你可以設(shè)計豐富的沉浸式體驗，而不需要接管用戶的整個視野。

沉浸式應(yīng)用也會感覺到與人們的物理環(huán)境有聯(lián)系，一個巨大的歡迎時刻在桌子上投下了陰影，讓你好感覺就像真的在那里，如果你的體驗與某人的物理環(huán)境有關(guān)，記得保持你的設(shè)計靈活。

2. Essential tips

引導(dǎo)用戶的注意力（Guide People ’ s focus）用戶在設(shè)計沉浸式體驗時，還是可以環(huán)顧四周，關(guān)注不同的事情。但是如果太多的事情同時發(fā)生，他們可能會感到不知所措或不確定該怎么做，這就是為什么在冥想應(yīng)用中引導(dǎo)人們將注意力集中（Guide People ’ s focus）是很重要的。

例如在冥想場景中，你的注意力被引導(dǎo)到空間中的一個物體上。你的注意力通過運(yùn)動、空間化的音頻和彩色材料被吸引到這里，當(dāng)深入思考的時候，我們輕輕地展開花朵，完全包圍你。要設(shè)計流暢，可預(yù)測的過渡，可以在你的體驗的不同狀態(tài)之間創(chuàng)造連續(xù)性，這將讓用戶感到舒適并意識到發(fā)生了什么。

與現(xiàn)實融合（Blend thoughtfully with reality）如果你在一個完整的空間中使用應(yīng)用，你可以將應(yīng)用和現(xiàn)實環(huán)境進(jìn)行虛實融合，使用柔和的邊緣來平滑地集成你的應(yīng)用，這避免了突然的過渡，讓用戶專注于你的內(nèi)容。讓事物感覺鮮活微妙 ( Make things feel alive ) 鮮活的動畫可以給場景帶來活力，比如湖上蕩漾的水或漂浮在天空中的云微妙的運(yùn)動可以將靜態(tài)體驗轉(zhuǎn)化為生動和動態(tài)的體驗，并通過空間音頻進(jìn)一步創(chuàng)造氛圍，您可以將聲音錨定在空間中的物體上，或創(chuàng)建完全圍繞人們的聲音場景。少花錢多辦事（Do more with less）你可以在電影院里用小效果創(chuàng)造出巨大的視聽感受，地板和天花板上反射的細(xì)微光線給人一種令人信服的空間感，你不需要渲染真實劇院的所有細(xì)節(jié)來傳達(dá)。3. Comfort

運(yùn)動時淡出內(nèi)容（Fade out content in motion）如果你需要移動你的沉浸式應(yīng)用，要避免快速移動，這可能會讓人感到迷失方向。

因此我們建議在運(yùn)動時淡出內(nèi)容，這將使用戶感覺穩(wěn)定。確保提供一個清晰的進(jìn)出沉浸式體驗指南的方式，使用簡短，有用的標(biāo)簽和可識別的符號，如展開和折疊箭頭。

五、Authentic

最后，讓我們談?wù)勅绾未蛟旄鎸嵉捏w驗設(shè)計。

尋找關(guān)鍵時刻（Find a key moment）在設(shè)計出色的應(yīng)用時，應(yīng)該充分利用 XR 設(shè)備的獨特性。最好的應(yīng)用應(yīng)該是能讓用戶快速進(jìn)入空間沉浸式體驗的。

想想你如何讓你的應(yīng)用程序有足夠的吸引力和獨特性，以至于用戶會持續(xù)的使用你的應(yīng)用。為了做到這一點，試著找到一個只能在空間上體驗的關(guān)鍵時刻（Find a key moment）。

讓我們看看 Vision Pro 是如何在照片應(yīng)用程序中做到這一點的，我們研究了已經(jīng)在現(xiàn)有平臺上熟悉的照片應(yīng)用程序的核心功能，瀏覽你的照片庫，重新發(fā)現(xiàn)特殊的記憶，通過全景重溫一個地方。

當(dāng)你找到那個特殊的照片時，照片會在你的空間里變大，讓你的周圍環(huán)境變暗，這些都是你 iPhone 上同樣美好的回憶，但是以逼真的尺寸看到它們真的很驚喜。

當(dāng)觀看全景的時候，我們有一個關(guān)鍵時刻帶你回到一個特殊的地方。

只有在無限的空間中才有可能。通過專注于一個特殊功能來思考你自己應(yīng)用程序中的關(guān)鍵時刻，你可以用你已經(jīng)擁有的內(nèi)容讓你的體驗變得獨特和難忘，你可以用深度和尺寸來增強(qiáng)一個時刻，或者改變某人的空間，幫助人們專注于一項任務(wù)，或者喚起一種感覺，你可以創(chuàng)造難忘的體驗。本文參考鏈接

Vision Pro 空間設(shè)計原則篇：https://developer.apple.com/videos/play/wwdc2023/10072/

本文由 @Vicky。 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

標(biāo)簽：