隨著VR、AR等技術(shù)的進(jìn)步，相關(guān)的設(shè)計思考也被提上了日程，比如空間設(shè)計。這篇文章里，作者就結(jié)合Apple Vision Pro，探索了空間界面設(shè)計背后的用戶體驗原則和相關(guān)的設(shè)計策略，一起來看看吧，或許會對想了解空間設(shè)計的同學(xué)有所幫助。

一、為用戶設(shè)計

為了確保我們使用這種技術(shù)設(shè)計的平臺有絲滑的用戶體驗，取得創(chuàng)新和熟悉度之間的平衡非常關(guān)鍵。

用戶之前非常熟悉的元素，例如側(cè)邊欄、標(biāo)簽欄和搜索欄時，需要在設(shè)計上讓用戶輕松導(dǎo)航并找到內(nèi)容，就像他們之前做過一樣。

保持根據(jù)空間環(huán)境適應(yīng)界面的可識別性和用戶友好非常重要。

二、設(shè)計窗口

在空間設(shè)計的操作系統(tǒng)中，窗口設(shè)計采用了一種全新的視覺語言，加強(qiáng)了用戶體驗。

在這些關(guān)鍵功能中，我們發(fā)現(xiàn)玻璃質(zhì)感背景能讓用戶通過透明度感知后面的空間，給用戶一種在真實空間里有漂浮窗口的感覺。

另外，在窗口管理中，有各種 UI 元素可以讓用戶去：

• 移動
• 關(guān)閉
• 調(diào)整大小

三、窗口尺寸和可拓展性

這種元素和 UI 組件組合的交互可以讓界面流暢和引人入勝。

窗口可以適配成不同的尺寸，具有高度的靈活性和可擴(kuò)展性。

用戶可以選擇他們想要的尺寸并對此完全掌控。

然而，用戶體驗設(shè)計師應(yīng)該基于被看到的內(nèi)容設(shè)置標(biāo)準(zhǔn)尺寸。

舉個例子，打開一個 Safari 上的網(wǎng)站時的彈窗應(yīng)該是垂直方向的窗口，因為用戶習(xí)慣從上到下查看網(wǎng)站內(nèi)容。另一方面，在 Keynote 或 Slides 上打開的幻燈片演示文稿，則需要有一個更水平方向的尺寸。

四、窗口里的控制管理

基于 Apple 的空間設(shè)計技術(shù)，窗口的選項和控制應(yīng)該要放在窗口本身之外。

五、基于pt單位設(shè)計來適應(yīng)窗口

在空間設(shè)計中，讓界面適配不同的屏幕非常重要。

Apple 介紹了 pt 在設(shè)計中作為標(biāo)準(zhǔn)單位的概念，它可以讓界面元素基于用戶的距離來適配和縮放。

通過基于 pt 單位來設(shè)計，用戶體驗設(shè)計師們可以確保在任何用戶距離都有可閱讀性和可用性，創(chuàng)造一致的用戶體驗。

六、視角、人體工程學(xué)、運動

當(dāng)基于空間設(shè)計用戶體驗來設(shè)計應(yīng)用時，我們必須考慮以下與用戶相關(guān)的方面：

• 周圍環(huán)境
• 眼部交互和手部交互
• 人體工程學(xué)

界面的設(shè)計應(yīng)該能讓用戶從不同的位置查看內(nèi)容。比如不管是躺下還是坐著，用戶都可以看到界面內(nèi)容。

考慮到基礎(chǔ)人體工程學(xué)原則，界面不應(yīng)該設(shè)計得離用戶太近或設(shè)計在用戶后面。

應(yīng)該要想象一個視覺操作區(qū)域，在這個區(qū)域內(nèi)不應(yīng)設(shè)計任何內(nèi)容，并且在設(shè)計過程中應(yīng)該設(shè)置最基礎(chǔ)的距離。

Apple 的設(shè)計指南也提到了最小限度的移動。

空間設(shè)計指南也推薦了最小限度的移動甚至重新就位。用戶可能需要換房間或者移動并轉(zhuǎn)向所處空間的另一部分。在這些場景中，用戶可以通過按下查看器中的重置按鈕來重制中心視野。

七、空間、縱深和規(guī)模

1. 空間管理：指南

關(guān)于空間管理，Apple 研究出了可以讓兩種環(huán)境共存的最佳方式：

• 數(shù)字環(huán)境，例如網(wǎng)站、窗口、音樂 app 等等
• 真實環(huán)境，例如墻壁、吊燈、沙發(fā)、椅子等等

雖然向用戶展示真實環(huán)境的元素可以為用戶提供與現(xiàn)實的連接感，但這些元素也可能令人注意力、妨礙放松。

對此的解決方案是一個混合解決方案，考慮到兩種情景：

• 主動用戶
• 消極用戶

對于主動交互操作，例如移動窗口或放置元素和細(xì)微移動，可以使用透明度來同時顯示兩個環(huán)境。

如果我們談?wù)摲e極交互操作，例如移動窗口、放置元素、和細(xì)微運動，那么可以使用透明度來同時顯示兩個環(huán)境。

在這個例子里，用戶正在拖動一個窗口到右側(cè)。

真實環(huán)境元素（如椅子），在此主動操作過程中可見，因為窗口在挪動時是半透明的。

當(dāng)結(jié)束窗口拖拽，且用戶所需的音樂開始播放時，窗口的不透明度將會消失，為用戶提供最大的沉浸感。

接下來讓我們聊一聊用戶消極交互階段，這個階段用戶很放松，他們的操作非常少、或甚至不存在。

在此情況下，空間設(shè)計指南推薦能讓用戶通過頭戴設(shè)備上的按鈕來選擇他們的沉浸感等級。

在上圖，背景上的真實元素仍然可見；但是在下圖，這些元素被隱藏了，并已經(jīng)過渡到完全沉浸。

2. 縱深管理：指南

當(dāng)設(shè)計周圍空間環(huán)境中的用戶體驗時，很有必要使用縱深技術(shù)避免設(shè)計出又大又繁瑣的 UI 。

通過這種技術(shù)的支持下，即使在遠(yuǎn)離用戶眼睛的環(huán)境里，也可以設(shè)計出層級結(jié)構(gòu)并和對內(nèi)容的關(guān)注。

縱深很明顯影響著我們對物品在空間里的認(rèn)知，我們應(yīng)對縱深進(jìn)行有效的設(shè)計。

在下面示例中，我們能看到和視頻本身相比，視頻控制元素（能控制聲音的調(diào)整、視頻暫停、快進(jìn)等）離用戶更近，保持了比例。

如果視頻控制元素是放在視頻內(nèi)的，那么它會變得更大、并且對用戶來說更不可用。

另外一種用來創(chuàng)建縱深的 UI 元素是光影。比如當(dāng)你在看視頻的時候，你可以看到上下反射出的光影，創(chuàng)造出令用戶愉悅的縱深感。

八、沉浸感

沉浸式體驗代表著空間設(shè)計的巔峰。

使用 Apple 的空間設(shè)計指南來設(shè)計用戶體驗，可以讓我們設(shè)計出在關(guān)注到周邊真實環(huán)境的同時，也能從共享空間窗口到全屏體驗都能吸引用戶注意力的應(yīng)用。

通過這種方式，我們可以創(chuàng)造和真實環(huán)境混合的數(shù)字體驗。

為了確保用戶保持參與，我們必須引導(dǎo)用戶將注意力集中在沉浸式體驗中。

引導(dǎo)注意力的推薦技巧包括：

• 動作
• 動畫
• 空間音頻
• 材質(zhì)的小心應(yīng)用

九、設(shè)計界面

在此小節(jié)，我們將根據(jù) Apple 的空間設(shè)計原則討論 UI 設(shè)計。

（Apple）的開發(fā)視覺語言結(jié)合了連貫性和熟悉性，來適應(yīng)沉浸式的空間體驗。

該視覺語言有 5 項基礎(chǔ)：

• 應(yīng)用圖標(biāo)
• 材質(zhì)
• 排版
• 亮度
• 顏色

1. 空間設(shè)計UI：應(yīng)用圖標(biāo)

通過空間設(shè)計，Apple 公司將屏幕上主頁圖標(biāo)的概念提到更逼真和三維的水平。

當(dāng)用戶注視具體的圖標(biāo)時，系統(tǒng)會通過鏡面反射和陰影來突出該圖標(biāo)的深度層級。

2. 應(yīng)用圖標(biāo)：多圖層

對于空間設(shè)計里的圖標(biāo)，推薦使用多個圖層來實現(xiàn)三維效果。

每個應(yīng)用的圖標(biāo)最多由三個圖層構(gòu)成

• 背景層
• 前景層（最多兩層）

設(shè)計你的圖層就像就像設(shè)計正方形圖片那樣，記住要讓內(nèi)容居中來獲得最佳的視覺關(guān)注。

系統(tǒng)會自動應(yīng)用圓形裁剪，并將圖標(biāo)渲染成 3D 。另外在圖層上也不建議使用不透明度和透明度。

3. 空間設(shè)計UI：玻璃材質(zhì)

當(dāng)設(shè)計空間界面時，考慮使用的材質(zhì)非常關(guān)鍵。

應(yīng)用需要適應(yīng)不同的燈光環(huán)境，并在不同的環(huán)境下都很容易放置和查看。

玻璃材質(zhì)因為視覺效果好、適應(yīng)性好，非常適合適合上述用途。它可以悄無聲息地和現(xiàn)實物理世界融為一體，讓現(xiàn)實的周圍環(huán)境光和虛擬內(nèi)容交互。

甚至在深色效果下，例如在夜晚昏暗燈光的房間，玻璃材質(zhì)效果依然優(yōu)秀。

使用玻璃材質(zhì)，你可以創(chuàng)造輕量且迷人的界面，這些界面還具有縱深和具體感。

需要考慮的一條指南是如何在淺色和深色圖層之間交替。

舉個例子，在下圖界面中，就像在視覺上像卡片設(shè)計一樣，正確的做法是在淺色層之上使用深色層來突出顯示元素。

與之相反的，比如在淺色圖層上再放一個淺色的，視覺上并沒有像淺色圖層上疊深色圖層效果那樣好，而且視覺可讀性也存在問題。

4. 空間設(shè)計UI：排版

正如我們在視覺和界面設(shè)計課程中所學(xué)的，文本在界面中起著至關(guān)重要的作用，并且應(yīng)該具有可訪問性、可讀性和對不同的情況良好的適應(yīng)性。同樣的原則也適用于空間設(shè)計，但是在設(shè)計技巧上我們建議稍微增加一點厚度。

在 iOS 系統(tǒng)，建議正文使用“常規(guī)”字重，標(biāo)題使用“中粗體”字重；在空間設(shè)計中，建議增加厚度：

• 正文使用“中黑體”字重
• 標(biāo)題使用“粗體”字重

另外，為了改進(jìn)可閱讀性，提高了跟蹤，并引入了針對泛編輯風(fēng)格布局的新的字符樣式。

5. 空間設(shè)計UI：亮度

亮度是另一個保持可讀性的重要方面。

通過亮度，我們可以點亮前景內(nèi)容并動態(tài)適應(yīng)背景變化，同時確保了前景文本清晰可讀。

Apple 公司使用了不同亮度的層級：一級、二級、三級等。

6. 空間設(shè)計UI：顏色

也要考慮顏色的使用。

所有網(wǎng)絡(luò)的無障礙規(guī)則依舊適用，但是在空間設(shè)計上，我們需要對所有的對比度小心翼翼，特別是在使用例如玻璃這種不平坦背景的時候。

如果我們想使用顏色，那么強(qiáng)烈建議應(yīng)用在整體元素中，而不僅在文本里使用。否則，更推薦使用白色的文本和圖標(biāo)。

7. 空間設(shè)計：布局

為了在空間設(shè)計中創(chuàng)建符合人體工程學(xué)的布局，我們必須要考慮到用戶的舒適和安全。

為了達(dá)到這個目的，我們肯定要牢記我們之前看到的這些關(guān)于窗口設(shè)計、圖標(biāo)間距的規(guī)則，為了在設(shè)計階段將設(shè)計的內(nèi)容放置在用戶視野之內(nèi)，我們還需要考慮用戶的視野、眼距以及脖部運動。

空間設(shè)計設(shè)計指南傾向于使用更寬的元素和居中放置的信息。

注意確?？山换サ脑氐倪x擇熱區(qū)至少有 60pt 大小。視覺上更小的元素甚至可以在四周加上足夠的空間來達(dá)到可交互選擇熱區(qū)的大小標(biāo)準(zhǔn)。

最后，利用視覺焦點來暗示 UI 組件的可交互性，并考慮為懸停效果加一下背景填充。

十、輸入

在空間界面中，人們通過使用他們的眼睛、手和聲音進(jìn)行交互。

同時也可以通過在空間中創(chuàng)造一個鍵盤讓用戶使用手指打字，就像在現(xiàn)實物理環(huán)境下一樣。

當(dāng)然，也可以連接藍(lán)牙鍵盤或者觸控板，并正常書寫和交互。

設(shè)計直觀的體驗必須要理解輸入模式。

通過使用系統(tǒng)組件，你可以快速創(chuàng)建絲滑響應(yīng)用戶操作的界面。

對于裝飾元素，例如導(dǎo)航元素或選項，建議使用無邊框或無背景的簡單設(shè)計，因為用戶眼睛注視或其他交互方式選中時，才需要添加效果。

對于更大的如窗口大小的元素，這些裝飾應(yīng)放置在窗口的邊緣（如底部、側(cè)邊或者頂部）。

在下列的“播放器”欄例子中，推薦將播放器欄放在比主控制窗口底部高 20pt 的位置。

熟悉諸如窗口、標(biāo)簽欄和側(cè)邊欄的例子有助于我們設(shè)計用戶體驗并優(yōu)化內(nèi)容結(jié)構(gòu)。

十一、眼和手

空間設(shè)計向我們介紹了全新和用戶界面（UI）交互的方式 —— 使用眼和手。通過空間設(shè)計，用戶既可以通過注視 UI 元素也可以使用手勢來輕松地控制他們的設(shè)備。這實現(xiàn)了一種更、舒適且精準(zhǔn)的用戶體驗。

1. 為眼設(shè)計

作為主要的定位機(jī)制，眼睛在空間設(shè)計中起到了重要的作用。為了確保舒適的交互，必須要把 UI 元素放置在用戶視野之內(nèi)，并將最重要的內(nèi)容放在最中間。

剩下的空間區(qū)域可以放更不常用的內(nèi)容，例如次級操作，注意同時要保持主要內(nèi)容居中和讓它容易訪問。

在空間設(shè)計里也要考慮縱深。保持所有的可交互內(nèi)容在同一縱深上可以讓 UI 元素輕松轉(zhuǎn)化過渡。通過使用細(xì)微的縱深變化，設(shè)計師可以在減輕用戶眼部疲勞的同時有效地展現(xiàn)信息層級。

為了有效利用眼部定位，設(shè)計師可以使用圓潤的形狀，例如圓形和矩形，它們可以自然引導(dǎo)用戶的目光到中心區(qū)域。

另外，在元素和文本之間充足的間距可以加強(qiáng)眼睛定位的準(zhǔn)確性和可用性。

就像我們之前提到的，保持至少60pt的定位熱區(qū)對于以眼為基礎(chǔ)的交互必不可少。即便系統(tǒng)提供的標(biāo)準(zhǔn)組件有助于輕松定位，但是在設(shè)計自定義元素時，遵守尺寸規(guī)范非常重要。

可以通過細(xì)微的懸停效果來加強(qiáng)眼部交互，標(biāo)明用戶的凝視正在推動交互。懸停的效果需要很謹(jǐn)慎、要和內(nèi)容協(xié)調(diào)，從而加強(qiáng)對 UI 元素的響應(yīng)力。

2. 為手設(shè)計

手勢是另一種強(qiáng)大的與空間輸入交互的方式。

手勢能實現(xiàn)直觀的控制，可以帶來流暢且吸引人的用戶體驗。

手勢應(yīng)該直觀和自然。使用常見手勢（比如捏住縮放或拖拽移動）可以讓用戶舒服并在快速學(xué)會交互。

在設(shè)計組件的大小和間距時，必須考慮到用戶手的大小。如果元素太小，就很難碰到；如果元素太大，交互到具體界面上的一部分將會非常困難。

決定最佳的元素尺寸關(guān)鍵在于測試和迭代優(yōu)化。

空間設(shè)計最令人激動的體驗之一就是眼部手部交互的結(jié)合。比如在下圖例子中，在屏幕上用戶可以在窗口圖片上用眼聚焦一個區(qū)域的同時，用手對這個區(qū)域進(jìn)行放大。

參考：Apple Developers