5000字干貨！Apple Vision Pro設計規范之空間設計原則篇

引言

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

更多Apple Vision Pro 的干貨：

Vision Pro 借助深度、尺度、自然輸入和空間音頻，創造了前所未有的空間設計體驗。其核心的五大基礎設計原則，分別是：

1. Familiar：如何讓你的應用保持熟悉感，讓用戶易于學習和上手。
2. Human-centered：如何打造以人為本的設計，更符合人因。
3. Dimensional：如何利用維度來打造獨特的空間體驗，讓界面更有層次感。
4. Immersive：如何打造更具有沉浸感的應用體驗。
5. 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 中打開時，窗口的會變大以顯示更多控件，而不會覆蓋網頁窗口，不受屏幕約束。

如果你需要一個更大的畫布，像其他平臺一樣，應用可以有多個窗口，在某些情況下它們可以并排顯示內容，比如一次查看多個網頁。

在播放演示文稿時，幻燈片在一個大而遠的窗口中，而演示者顯示在附近的一個較小窗口中，這可以讓人們將演示窗口放在他們想要的地方，同時保留幻燈片觀看的沉浸感。

三、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

最后，讓我們談談如何打造更真實的體驗設計。

1. 尋找關鍵時刻（Find a key moment）

在設計出色的應用時，應該充分利用 XR 設備的獨特性。最好的應用應該是能讓用戶快速進入空間沉浸式體驗的。想想你如何讓你的應用程序有足夠的吸引力和獨特性，以至于用戶會持續的使用你的應用。為了做到這一點，試著找到一個只能在空間上體驗的關鍵時刻（Find a key moment）。

讓我們看看 Vision Pro 是如何在照片應用程序中做到這一點的，我們研究了已經在現有平臺上熟悉的照片應用程序的核心功能，瀏覽你的照片庫，重新發現特殊的記憶，通過全景重溫一個地方。當你找到那個特殊的照片時，照片會在你的空間里變大，讓你的周圍環境變暗，這些都是你 iPhone 上同樣美好的回憶，但是以逼真的尺寸看到它們真的很驚喜。當觀看全景的時候，我們有一個關鍵時刻帶你回到一個特殊的地方。

只有在無限的空間中才有可能。通過專注于一個特殊功能來思考你自己應用程序中的關鍵時刻，你可以用你已經擁有的內容讓你的體驗變得獨特和難忘，你可以用深度和尺寸來增強一個時刻，或者改變某人的空間，幫助人們專注于一項任務，或者喚起一種感覺，你可以創造難忘的體驗。

本文參考鏈接：

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

歡迎關注作者微信公眾號：Vicky Design Studio