本篇文章将分析 Apple Vision Pro 的空間設計，作者從五個基礎方向出發，詳細分析其中的設計原則，能給産品設計的夥伴們提供一些參考，希望本篇文章能對你有所幫助。
在本篇中，我們将介紹 Apple Vision Pro 中的空間設計原則，探索空間設計的基礎知識，了解如何從深度、尺寸、窗口和沉浸感進行設計，并應用最佳實踐來創造能夠改變現實的舒适、以人爲本的體驗。
Vision Pro 借助深度、尺度、自然輸入和空間音頻，創造了前所未有的空間設計體驗。
其核心的五大基礎設計原則，分别是：
Familiar：如何讓你的應用保持熟悉感，讓用戶易于學習和上手。
Human-centered：如何打造以人爲本的設計，更符合人因。
Dimensional：如何利用維度來打造獨特的空間體驗，讓界面更有層次感。
Immersive：如何打造更具有沉浸感的應用體驗。
Authentic：如何打造更真實的空間體驗設計。
下面，讓我們圍繞着五大核心設計原則展開介紹。
一、Familiar
在 ipad 平台上，我們可以看見許多熟悉的常見組件元素，比如側邊欄、選項卡、搜索欄等。
而在 Vision Pro 平台上，我們依然能使用用戶認知和已經熟悉的組件元素來設計你的應用。我們将用戶熟悉的界面放置在 Vision Pro 的窗口中，這樣用戶就可以看到它們并快速使用它們。
不同的是，在 Vision Pro 平台上，窗口隻是你周圍環境空間的其中一部分。
接下來，讓我們分别從 Window、Sizing、及 Points 三個維度分别進行介紹如何打造具有熟悉感的界面。
1. Window
在窗口側 Vision Pro 引進了一種全新的視覺語言窗口，即玻璃材質。用戶可以感知到他們周圍的環境，窗口也能适應不同的光照條件。
系統窗口提供移動，關閉和調整窗口大小的功能，人們可以捏住窗口移動欄将窗口移動至任何位置。
但不管如何移動，窗口的角度總是面對着用戶，以保持界面易于閱讀和易于使用。
2. Sizing
在窗口尺寸側，Vision Pro 給出了非常靈活的尺寸，建議開發者可以根據自己的内容來選擇舒适的窗口大小以更好适應于用戶的視野。
比如爲了讓用戶在浏覽網頁時看到更多的内容，Safari 浏覽器的窗口尺寸很高；爲了更沉浸式的進行全尺寸演示，Keynote 的窗口被設計的很寬。
當然，窗口也可以有其它靈活的形狀，窗口之外的區域還可以使用 Tab bar 和 Tool bar。
比如在音樂 app 中，這些控件位于主窗口上方，總是易于被用戶關注到，并爲内容提供更多可操作空間。
或者，也可以使用分離式界面将控件與主要内容分開，比如在 safari 中導航欄與網頁分開，讓頁面主内容占據視覺焦點。
窗口也可以自動改變大小，當側邊欄在 safari 中打開時，窗口的會變大以顯示更多控件，而不會覆蓋網頁窗口，不受屏幕約束。
如果你需要一個更大的畫布，像其他平台一樣，應用可以有多個窗口，在某些情況下它們可以并排顯示内容，比如一次查看多個網頁。
在播放演示文稿時，幻燈片在一個大而遠的窗口中，而演示者顯示在附近的一個較小窗口中，這可以讓人們将演示窗口放在他們想要的地方，同時保留幻燈片觀看的沉浸感。
3. Points
爲了确保用戶界面更好的伸縮性，我們用 Points 來進行設計，它是我們指定界面元素大小的方式。
當人們移動窗口時，界面會随着遠離用戶而縮放得更大；相反，當界面靠近用戶時，尺寸會變小，這保持了界面的易讀性和可用性。
因此，蘋果在 Vision Pro 上設計按鈕時，需要至少 60pt 的響應熱區，這就需要圖标形狀至少爲 44pt，且按鈕與按鈕之間有 16pt 的間距。
二、Human-centered
好的設計總是以人爲本，在設計應用時，需要結合用戶在自己空間中的可視區，來考慮用戶可以看到什麽，以及他們需要如何移動。
接下來我們将從 Fied of view、Ergonomics、Movement 分别來介紹如何進行以人爲本的設計。
1. Fied of view
佩戴設備時，用戶可以看到他們面前的世界，這是他們的可視區（Fied of view），用戶最容易看到視野中間的内容，所以把最重要的内容盡量放在中心，人的橫向視野更寬，所以很多界面窗口都使用橫向布局。
比如 Safari，當用戶想一次看到他們所有的窗口标簽時，我們就使用更寬的布局來匹配用戶的視野，将這些窗口标簽分散在用戶面前的畫布中。
兩邊側面的窗口以用戶爲中心向内轉向，讓用戶更容易閱讀。
但用戶不能完全保持頭部靜止，他們會環顧四周，這意味着我們可以進一步擴展内容以獲得身臨其境的體驗。
但總的來說，要将您的主要内容保持在視野内，否則很難閱讀或理解。
2. Ergonomics
以人爲中心的設計也意味着設計時要考慮到人體工程學（Ergonomics）。界面位置對用戶的身體姿态影響很大，所以我們要考慮在各個維度上舒适的放置窗口。
在默認情況下，窗口沿着自然視線放置，鼓勵用戶在放置窗口時保持健康和舒适的姿勢，比如在相對于人的頭部面對的方向，這有助于用戶更舒适的看到界面内容并進行交互。
同時也要考慮到不同高度和不同位置的人，比如躺在沙發上的姿态。
大部分時間，把内容放在離人們遠點的地方，比手臂更遠一點，以鼓勵人們在遠處進行交互，避免将内容放在人的後面或非常高或低，除非它是沉浸式體驗的一部分。
不是每個人都會坐着使用你的應用，他們可以四處走動以使用， 所以避免将窗口錨定在用戶的視角中，這會讓事情感覺卡頓，并且會讓人迷失方向。
相反，應該将窗口鎖定在用戶的空間中，這讓他們可以自由地環顧四周。
3. Movement
在使用設備時，用戶也可以站起來，四處走動，但我們建議創建需要最少移動的靜止體驗（Require minimal movement），這使您的應用程序更易于爲用戶使用。用戶應該能夠在不用移動的情況下就能使用你的應用。
有時用戶确實移動到新的位置和角度，但他們可以按住數字表冠，将内容重新移回他們面前，所以你的應用不需要提供一種特殊的方式來恢複窗口或重置場景，而是依靠此系統來重新定位您的應用程序内容。
三、Dimensional
接下來讓我們談談如何在應用中提供空間維度屬性，我們分别讨論從 Space、Depth 和 Scale 進行深入探讨。
1. Space
在用戶周圍，物理空間可能是有限的，但空間畫布是無限的，注意不要被有限的物理空間限制你的應用，讓我們看看這是如何與電視應用程序是如何工作的。
當窗口移動時，椅子仍然可見，以便于放置。當窗口被釋放時，内容變得可見，這樣用戶就可以看到和使用窗口 app，你不需要擔心他們如何适應用戶的空間，因爲系統會在其時爲你處理此問題。
觀看電影時，視頻占據整個窗口，周圍環境光線自動變暗，幫助用戶專注于内容，用戶可以感受到他們的周圍環境不受限制，并且在任何時候用戶都可以打開一個超越物理邊緣尺寸的環境。
如果你的應用程序需要更多空間來适應大窗口，你可以在這裏創建自己的超越現實的體驗，比如我們創建了一個沉浸式電影院以适應一個巨大的電影院。
2. Depth
深度是一個新的變量，它是讓界面變得更有層次感。讓我們看一些例子，深度影響我們如何與空間中的物體聯系起來，遠方的内容可以讓用戶的浏覽更沉浸，并鼓勵人們在遠處互動。
附近的物體會激發用戶互動，更容易從不同的角度觀察，微小的運動可以讓我們從各個角度看到物體，深度的一個很好的用途是創建層次結構（Create hierarchy with depth）。
讓我們再看看沉浸式影院中的電視應用程序，播放控件可以很小，被放置在用戶附近，即使它們很小，它們仍然可以控制電影。
如果它們被放置在電影屏幕上，它們看起來太大，就不太合适，像這樣的附近元素可以盡量讓它很小，而仍然優先展示遠處的大物體。
深度需要用光和影等視覺線索（Use light and shadow as cues）來加強，有些物體會像我們剛剛看到的電影屏幕一樣，在房間中有發光地闆和天花闆，任何出現在光下的物體都應該将顔色投射到附近的物體上，大多數物體應該像桌子上的窗口一樣投影，這使它們看起來更融入空間。
您應用中的任何自定義對象也應該投影，在大多數情況下，用戶更喜歡微妙的深度 ( Prefer subtle depth ) 。
很多時候，它容易過度，會使物體看起來分散注意力或不切實際，元素之間的微妙深度通常足以引導人們的注意力。
注意當一個模态出現時，窗口會稍微向後推以引起注意。深度是微妙的，但有效的。
并非所有東西都需要深度。
例如，3D 文本可能會令人分心且難以閱讀，尤其是在角度上。當用作界面元素時，保持文本扁平化。
3. Scale
尺寸是一種強調内容的新方法，小的物體會感覺個性化和輕量化，大的物體感覺令人印象深刻，就像湖面上的巨型電影，增加比例完全改變了電影的感覺。
有些物體最好以現實生活中的比例查看。
例如，購物應用中用戶可能希望以現實生活中出現的産品 的大小進行顯示。
四、Immersive
接下來讓我們談談如何讓您的應用程序更加沉浸。
1. Immersion Spectrum
動态的應用窗口它可以根據用戶在不同的沉浸式狀态之間流暢地過渡。
應用之間的所有内容都可以在共享空間的窗口中與其他應用程序一起運行，或者如果它需要更多空間，它可以在一個完整的空間中運行，其他應用被隐藏起來。
讓我們看一個主題演講中的示例，應用程序在窗口中打開，但是當播放此幻燈片時，我們使用調節亮度來使演示文稿更加聚焦。
營造沉浸的環境氛圍當排練演示的時候，我們可以把用戶帶到舞台上，讓他們完全沉浸在劇院真人大小的體驗中。
這樣的體驗需要更多的空間，應用将某人帶到一個他們可以看到周圍的新地方。
但是完整的空間時刻可能不會把某人帶到一個新的地方，他們依然可以存在于自己的空間裏，在這裏感覺就像你看着大海。而你仍然可以看到你周圍的房間，你可以設計豐富的沉浸式體驗，而不需要接管用戶的整個視野。
沉浸式應用也會感覺到與人們的物理環境有聯系，一個巨大的歡迎時刻在桌子上投下了陰影，讓你好感覺就像真的在那裏，如果你的體驗與某人的物理環境有關，記得保持你的設計靈活。
2. Essential tips
引導用戶的注意力（Guide People ’ s focus）用戶在設計沉浸式體驗時，還是可以環顧四周，關注不同的事情。但是如果太多的事情同時發生，他們可能會感到不知所措或不确定該怎麽做，這就是爲什麽在冥想應用中引導人們将注意力集中（Guide People ’ s focus）是很重要的。
例如在冥想場景中，你的注意力被引導到空間中的一個物體上。你的注意力通過運動、空間化的音頻和彩色材料被吸引到這裏，當深入思考的時候，我們輕輕地展開花朵，完全包圍你。要設計流暢，可預測的過渡，可以在你的體驗的不同狀态之間創造連續性，這将讓用戶感到舒适并意識到發生了什麽。
與現實融合（Blend thoughtfully with reality）如果你在一個完整的空間中使用應用，你可以将應用和現實環境進行虛實融合，使用柔和的邊緣來平滑地集成你的應用，這避免了突然的過渡，讓用戶專注于你的内容。
讓事物感覺鮮活微妙 ( Make things feel alive ) 鮮活的動畫可以給場景帶來活力，比如湖上蕩漾的水或漂浮在天空中的雲微妙的運動可以将靜态體驗轉化爲生動和動态的體驗，并通過空間音頻進一步創造氛圍，您可以将聲音錨定在空間中的物體上，或創建完全圍繞人們的聲音場景。
少花錢多辦事（Do more with less）你可以在電影院裏用小效果創造出巨大的視聽感受，地闆和天花闆上反射的細微光線給人一種令人信服的空間感，你不需要渲染真實劇院的所有細節來傳達。
3. Comfort
運動時淡出内容（Fade out content in motion）如果你需要移動你的沉浸式應用，要避免快速移動，這可能會讓人感到迷失方向。
因此我們建議在運動時淡出内容，這将使用戶感覺穩定。确保提供一個清晰的進出沉浸式體驗指南的方式，使用簡短，有用的标簽和可識别的符号，如展開和折疊箭頭。
五、Authentic
最後，讓我們談談如何打造更真實的體驗設計。
尋找關鍵時刻（Find a key moment）在設計出色的應用時，應該充分利用 XR 設備的獨特性。最好的應用應該是能讓用戶快速進入空間沉浸式體驗的。
想想你如何讓你的應用程序有足夠的吸引力和獨特性，以至于用戶會持續的使用你的應用。爲了做到這一點，試着找到一個隻能在空間上體驗的關鍵時刻（Find a key moment）。
讓我們看看 Vision Pro 是如何在照片應用程序中做到這一點的，我們研究了已經在現有平台上熟悉的照片應用程序的核心功能，浏覽你的照片庫，重新發現特殊的記憶，通過全景重溫一個地方。
當你找到那個特殊的照片時，照片會在你的空間裏變大，讓你的周圍環境變暗，這些都是你 iPhone 上同樣美好的回憶，但是以逼真的尺寸看到它們真的很驚喜。
當觀看全景的時候，我們有一個關鍵時刻帶你回到一個特殊的地方。
隻有在無限的空間中才有可能。通過專注于一個特殊功能來思考你自己應用程序中的關鍵時刻，你可以用你已經擁有的内容讓你的體驗變得獨特和難忘，你可以用深度和尺寸來增強一個時刻，或者改變某人的空間，幫助人們專注于一項任務，或者喚起一種感覺，你可以創造難忘的體驗。
本文參考鏈接
Vision Pro 空間設計原則篇：https://developer.apple.com/videos/play/wwdc2023/10072/
本文由 @Vicky。 原創發布于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
