前言

關(guān)鍵詞：空間設(shè)計原則、Apple Vision Pro、WWDC 2023、visionOS、窗口 window、空間 space、沉浸immersive。

本文寫于2023/06/13，共3500字，預計閱讀時長

WWDC2023 Principal of Spatial Design 翻譯整理版，內(nèi)容按照個人理解進行了一定的刪減，僅供學習交流使用。本課程為 WWDC 2023 中關(guān)于空間設(shè)計的一部分，后續(xù)我將繼續(xù)更新 WWDC 上 visionOS 的內(nèi)容。感興趣的同學可以關(guān)注等待更新，或去查看原視頻內(nèi)容。

Principles of spatial design 空間設(shè)計的原則

探索空間設(shè)計的基礎(chǔ)知識。學習如何運用深度、縮放、窗口和沉浸感進行設(shè)計，并應用最佳實踐來創(chuàng)造舒適、以人為中心的體驗，用這種體驗改變現(xiàn)實。了解如何利用這些空間設(shè)計原則來擴展您現(xiàn)有的應用程序或?qū)⑿碌南敕ǜ吨T實踐。

Familiar 熟悉的界面和交互

這一章節(jié)討論的是 visionOS 如何給用戶帶來用戶界面的熟悉感。

這是一個正常 iPad 版本上的 Apple Music 應用，它由側(cè)邊欄（Side Bars）、側(cè)邊欄選項（Tabs）、搜索框（Search Fields）等組件來讓用戶找到音樂。

那么在 visionOS 這個空間交互平臺上，人們應該能同樣可靠的找到音樂。用戶應該了解這些界面的元素并且知道如何使用。

蘋果選擇使用窗口為媒介放置界面，因為用戶可以舒適的看到并使用窗口。

人們對應用窗口（App Windows）很熟悉，但是在 visionOS 這個平臺中，窗口放置于你的空間中，像是你周圍環(huán)境的一部分。

Windows

Windows窗口

全新的視覺語言

毛玻璃材質(zhì)，提供了與背景世界的對比，讓人們也能更多的注意到周圍的環(huán)境。

毛玻璃材質(zhì)會針對不同的環(huán)境進行自適應變換。

值得一提的是，這種毛玻璃效果將是系統(tǒng)原生提供的，不需要開發(fā)者進行調(diào)整，只需要調(diào)用即可，不過目前尚未知道第三方是否強制使用這種面板材質(zhì)。

窗口基礎(chǔ)操作：移動窗口、關(guān)閉窗口、調(diào)整窗口大小

移動窗口的提示條（window bar）位于窗口正下方居中的位置，形態(tài)上類似于 iOS 和 iPadOS 上的全面屏導航條。

拖動窗口提示條（window bar）可以移動窗口到任何位置（如上下左右），但是窗口總會調(diào)整角度來朝向你，這樣讓界面易于使用和閱讀。

關(guān)閉窗口的提示在激活前是一個小圓點，激活后則變換為關(guān)閉圖標。

調(diào)整窗口大小和 iPadOS 上臺前調(diào)度的調(diào)整方式類似，激活時在窗口邊緣會顯示小圓角線條。

Sizing 尺寸

如何為空間的窗口選擇合適的尺寸。

窗口的設(shè)計目標是舒適的適配人們的視野，但是窗口是非常靈活的，可以拉伸成任何尺寸。

基于內(nèi)容選擇合適的窗口大小。

以 visionOS 中的 Safari 為例，它的窗口高度是為了讓人們看到更多網(wǎng)頁。

而 Keynote 很寬，適配全尺寸的演講。

在窗口外使用選項卡欄（tab bars ）和工具欄（tool bars）

就像這里在 Apple music 中一樣。這些控件總是可以隨時使用，并且為內(nèi)容讓出了更多的顯示空間。

或者使用多個部分將控件和內(nèi)容分開，就像 Safari 一樣，將導航欄（Navigation bar）和網(wǎng)頁內(nèi)容分開，讓網(wǎng)頁成為焦點。

窗口也可以改變大小，Safari 的側(cè)邊欄（Side bar）可以從左側(cè)擴大窗口顯示。窗口大小改變最好基于上下文交互設(shè)計。

同一個 App 可以打開多窗口

這種多窗口可以是一次查看多個網(wǎng)頁，可以是顯示要一起用的不同功能。

如 keynote 使用演講者模式播放時的設(shè)計，幻燈片在一個又大又遠的窗口中，而演講者的控制視圖在一個比較小但近的窗口中，這個窗口還可以任意移動位置。

在理想情況下，App 應該還是存放于一個窗口中。因為窗口快速增多會增加人們對窗口的管理和認知負擔。

Points

為了讓我們的界面能夠在縮放時表現(xiàn)良好，需要使用點(point)來設(shè)計。

點是設(shè)計中界面元素大小的基本單位，用來適配其他屏幕大小和平臺。

在 visionOS 中也是一樣的，用點設(shè)計讓Ui可以在任何距離上工作。

Human-centered 以人為本的

Field of view 視角

把重要內(nèi)容放在視角中心。

使用景觀布局 (Landscape layout)

Safari的例子，查看全部網(wǎng)頁時，使用了一個網(wǎng)格布局。這個布局很寬，以配合人們的視野。

Ergonomics 工效學

在各個維度上恰當?shù)姆胖梦矬w。

默認情況下，窗口沿著自然視線放置。

大多數(shù)時候，需要把內(nèi)容放在離人們遠一點的地方。

內(nèi)容錨定在人們的空間中而不是跟隨人的視角移動。

movement 移動

建議創(chuàng)造需要最少運動的靜止體驗。

除非這是你應用的核心體驗，否則應該能在靜止狀態(tài)下體驗一切。

用戶移動到一個新位置或按住數(shù)字表冠重新進入時，重新定位應用程序的內(nèi)容全部依靠系統(tǒng)能力。

Dimensional 多維的

Space

設(shè)計你的App適應任何空間大小。

你不用擔心界面如何融入空間，系統(tǒng)會自動處理。這里右下角的椅子系統(tǒng)做了一些微妙的處理。

暗色調(diào)光是一種簡單而強大的方法來最大化空間。

你也可以創(chuàng)造超越生活的體驗，如創(chuàng)建一個沉浸式的電影院。

Depth

深度是一個新的變量，它是一個強大的工具，用來區(qū)分層次結(jié)構(gòu)和焦點。

如播放控件，這樣距離人近的元素可以保持較小的尺寸，但在視覺上仍然優(yōu)先于遠處的大物體。

使用光和影作為線索來強化深度。

如發(fā)光的物體應該在附近的其他物體上反光。如這里的地面被正在播放的視頻照亮了

App 中的任何自定義對象也應該投下陰影。

輕微的深度能更好的表現(xiàn)空間感

并不是所有元素都適合深度，比如文本就應該保持平坦。

Scale

小物體感覺個性化和輕量級。

大物體令人印象深刻

有些物體最好在真實生活的尺度上觀看，更符合人們的一貫認知，如鞋子。

Immersive 沉浸感

immersive spectrum 沉浸光譜

Shared Space，在共享空間中與其他App共享空間。如圖第一種。

Full Space，隱藏其他應用程序的完整空間。如圖示后兩種。

建議App首先從共享空間中啟動，讓人們控制他們想要的沉浸程度。

例如Keynote，有三種沉浸模式同時存在。第一種是共享空間中的默認瀏覽模式。

聚焦模式：使用調(diào)光來凸顯幻燈片主體。

幻燈片排練模式：來到了完整空間，來到一個沉浸的大劇院。

完整空間也可以不把人帶到一個新地方，也可以是存在于本身的空間中。如圖片的查看

沉浸的應用程序也可以感覺到人和物理環(huán)境的聯(lián)系。如下方的hello投下的陰影。

Essential tips

引導人們的注意力

正念App通過運動和調(diào)光吸引你的注意力。結(jié)合空間化的多樣材質(zhì)、音頻，更好的引導你的注意。

深思熟慮的與現(xiàn)實進行融合

把整個場景融入某人的空間時，需要柔和邊緣的平滑過度。

讓事情活靈活現(xiàn)具有活力

添加微妙的運動，可以把靜態(tài)的東西轉(zhuǎn)化為有生命力和動態(tài)的體驗

用聲音烘托氣氛

Do more with less 化繁為簡

你可以用很小的效果來創(chuàng)造很大的影響。如這個電影院的上下微妙光線和反光，沒有必要追求過于真實的細節(jié)，而是去還愿場景的給人帶來的感覺。

Comfort

退出時使用淡出效果

提供進入和退出沉浸模式要提供清晰的方法。如可識別的符號和文字。

Authentic

找到一個關(guān)鍵的時刻

一個空間或沉浸式的，只能在空間上體驗的關(guān)鍵時刻

以照片為例，找到照片應該很容易。

但當你找到這張圖片，并聚焦于此時。在這個逼真的尺度上看到它們真的很神奇。

對于全景照片，還有一個關(guān)鍵時刻可以帶你回到那個特殊的地點。

為自己的應用程序中思考一個關(guān)鍵時刻。

利用人們周圍的空間來創(chuàng)造真實的沉浸體驗。

感謝你看到最后

相信你一定對 Apple Vision Pro 和 visionOS 很感興趣，我創(chuàng)建了一個微信群叫 Byte Zone，供大家對這些超 cool 的產(chǎn)品硬件和軟件進行交流，如果你感興趣，可以微信掃碼進群。相信有你的加入，事情會變得更有意思。

或者添加我的微信 mepolizhan 備注知乎～，拉你進群。

關(guān)于我

我是一名設(shè)計師，這里是我的一些介紹。

https://www.yuque.com/lizhan-vutje

相關(guān)鏈接

我的視頻：

Developerdeveloper.apple.com/visionos/learn/

Principles of spatial design - WWDC23 - Videos - Apple Developerdeveloper.apple.com/videos/play/wwdc2023/10072/