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

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

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

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

• Familiar：如何讓你的應(yīng)用保持熟悉感，讓用戶易于學(xué)習(xí)和上手。
• Human-centered：如何打造以人為本的設(shè)計(jì)，更符合人因。
• Dimensional：如何利用維度來(lái)打造獨(dú)特的空間體驗(yàn)，讓界面更有層次感。
• Immersive：如何打造更具有沉浸感的應(yīng)用體驗(yàn)。
• Authentic：如何打造更真實(shí)的空間體驗(yàn)設(shè)計(jì)。

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

一、Familiar

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

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

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

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

1. Window

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

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

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

2. Sizing

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

比如為了讓用戶在瀏覽網(wǎng)頁(yè)時(shí)看到更多的內(nèi)容，Safari瀏覽器的窗口尺寸很高；為了更沉浸式的進(jìn)行全尺寸演示，Keynote的窗口被設(shè)計(jì)的很寬。

當(dāng)然，窗口也可以有其它靈活的形狀，窗口之外的區(qū)域還可以使用Tab bar和Tool bar。

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

或者，也可以使用分離式界面將控件與主要內(nèi)容分開，比如在safari中導(dǎo)航欄與網(wǎng)頁(yè)分開，讓頁(yè)面主內(nèi)容占據(jù)視覺(jué)焦點(diǎn)。

窗口也可以自動(dòng)改變大小，當(dāng)側(cè)邊欄在safari中打開時(shí)，窗口的會(huì)變大以顯示更多控件，而不會(huì)覆蓋網(wǎng)頁(yè)窗口，不受屏幕約束。

如果你需要一個(gè)更大的畫布，像其他平臺(tái)一樣，應(yīng)用可以有多個(gè)窗口，在某些情況下它們可以并排顯示內(nèi)容，比如一次查看多個(gè)網(wǎng)頁(yè)。

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

3. Points

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

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

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

二、Human-centered

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

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

1. Fied of view

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

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

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

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

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

2. Ergonomics

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

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

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

大部分時(shí)間，把內(nèi)容放在離人們遠(yuǎn)點(diǎn)的地方，比手臂更遠(yuǎn)一點(diǎn)，以鼓勵(lì)人們?cè)谶h(yuǎn)處進(jìn)行交互，避免將內(nèi)容放在人的后面或非常高或低，除非它是沉浸式體驗(yàn)的一部分。

不是每個(gè)人都會(huì)坐著使用你的應(yīng)用，他們可以四處走動(dòng)以使用， 所以避免將窗口錨定在用戶的視角中，這會(huì)讓事情感覺(jué)卡頓，并且會(huì)讓人迷失方向。

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

3. Movement

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

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

三、Dimensional

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

1. Space

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

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

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

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

2. Depth

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

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

讓我們?cè)倏纯闯两接霸褐械碾娨晳?yīng)用程序，播放控件可以很小，被放置在用戶附近，即使它們很小，它們?nèi)匀豢梢钥刂齐娪啊?/p>

如果它們被放置在電影屏幕上，它們看起來(lái)太大，就不太合適，像這樣的附近元素可以盡量讓它很小，而仍然優(yōu)先展示遠(yuǎn)處的大物體。

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

您應(yīng)用中的任何自定義對(duì)象也應(yīng)該投影，在大多數(shù)情況下，用戶更喜歡微妙的深度(Prefer subtle depth)。

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

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

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

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

3. Scale

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

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

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

四、Immersive

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

1. Immersion Spectrum

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

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

讓我們看一個(gè)主題演講中的示例，應(yīng)用程序在窗口中打開，但是當(dāng)播放此幻燈片時(shí)，我們使用調(diào)節(jié)亮度來(lái)使演示文稿更加聚焦。

營(yíng)造沉浸的環(huán)境氛圍當(dāng)排練演示的時(shí)候，我們可以把用戶帶到舞臺(tái)上，讓他們完全沉浸在劇院真人大小的體驗(yàn)中。

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

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

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

2. Essential tips

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

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

與現(xiàn)實(shí)融合（Blend thoughtfully with reality）如果你在一個(gè)完整的空間中使用應(yīng)用，你可以將應(yīng)用和現(xiàn)實(shí)環(huán)境進(jìn)行虛實(shí)融合，使用柔和的邊緣來(lái)平滑地集成你的應(yīng)用，這避免了突然的過(guò)渡，讓用戶專注于你的內(nèi)容。

讓事物感覺(jué)鮮活微妙(Make things feel alive)鮮活的動(dòng)畫可以給場(chǎng)景帶來(lái)活力，比如湖上蕩漾的水或漂浮在天空中的云微妙的運(yùn)動(dòng)可以將靜態(tài)體驗(yàn)轉(zhuǎn)化為生動(dòng)和動(dòng)態(tài)的體驗(yàn)，并通過(guò)空間音頻進(jìn)一步創(chuàng)造氛圍，您可以將聲音錨定在空間中的物體上，或創(chuàng)建完全圍繞人們的聲音場(chǎng)景。

少花錢多辦事（Do more with less）你可以在電影院里用小效果創(chuàng)造出巨大的視聽(tīng)感受，地板和天花板上反射的細(xì)微光線給人一種令人信服的空間感，你不需要渲染真實(shí)劇院的所有細(xì)節(jié)來(lái)傳達(dá)。

3. Comfort

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

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

五、Authentic

最后，讓我們談?wù)勅绾未蛟旄鎸?shí)的體驗(yàn)設(shè)計(jì)。

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

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

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

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

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

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

本文參考鏈接

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