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

一、為用戶設計

為了確保我們使用這種技術設計的平臺有絲滑的用戶體驗，取得創新和熟悉度之間的平衡非常關鍵。

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

保持根據空間環境適應界面的可識別性和用戶友好非常重要。

二、設計窗口

在空間設計的操作系統中，窗口設計采用了一種全新的視覺語言，加強了用戶體驗。

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

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

• 移動
• 關閉
• 調整大小

三、窗口尺寸和可拓展性

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

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

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

然而，用戶體驗設計師應該基于被看到的內容設置標準尺寸。

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

四、窗口里的控制管理

基于 Apple 的空間設計技術，窗口的選項和控制應該要放在窗口本身之外。

五、基于pt單位設計來適應窗口

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

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

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

六、視角、人體工程學、運動

當基于空間設計用戶體驗來設計應用時，我們必須考慮以下與用戶相關的方面：

• 周圍環境
• 眼部交互和手部交互
• 人體工程學

界面的設計應該能讓用戶從不同的位置查看內容。比如不管是躺下還是坐著，用戶都可以看到界面內容。

考慮到基礎人體工程學原則，界面不應該設計得離用戶太近或設計在用戶后面。

應該要想象一個視覺操作區域，在這個區域內不應設計任何內容，并且在設計過程中應該設置最基礎的距離。

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

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

七、空間、縱深和規模

1. 空間管理：指南

關于空間管理，Apple 研究出了可以讓兩種環境共存的最佳方式：

• 數字環境，例如網站、窗口、音樂 app 等等
• 真實環境，例如墻壁、吊燈、沙發、椅子等等

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

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

• 主動用戶
• 消極用戶

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

如果我們談論積極交互操作，例如移動窗口、放置元素、和細微運動，那么可以使用透明度來同時顯示兩個環境。

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

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

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

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

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

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

2. 縱深管理：指南

當設計周圍空間環境中的用戶體驗時，很有必要使用縱深技術避免設計出又大又繁瑣的 UI 。

通過這種技術的支持下，即使在遠離用戶眼睛的環境里，也可以設計出層級結構并和對內容的關注。

縱深很明顯影響著我們對物品在空間里的認知，我們應對縱深進行有效的設計。

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

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

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

八、沉浸感

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

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

通過這種方式，我們可以創造和真實環境混合的數字體驗。

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

引導注意力的推薦技巧包括：

• 動作
• 動畫
• 空間音頻
• 材質的小心應用

九、設計界面

在此小節，我們將根據 Apple 的空間設計原則討論 UI 設計。

（Apple）的開發視覺語言結合了連貫性和熟悉性，來適應沉浸式的空間體驗。

該視覺語言有 5 項基礎：

• 應用圖標
• 材質
• 排版
• 亮度
• 顏色

1. 空間設計UI：應用圖標

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

當用戶注視具體的圖標時，系統會通過鏡面反射和陰影來突出該圖標的深度層級。

2. 應用圖標：多圖層

對于空間設計里的圖標，推薦使用多個圖層來實現三維效果。

每個應用的圖標最多由三個圖層構成

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

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

系統會自動應用圓形裁剪，并將圖標渲染成 3D 。另外在圖層上也不建議使用不透明度和透明度。

3. 空間設計UI：玻璃材質

當設計空間界面時，考慮使用的材質非常關鍵。

應用需要適應不同的燈光環境，并在不同的環境下都很容易放置和查看。

玻璃材質因為視覺效果好、適應性好，非常適合適合上述用途。它可以悄無聲息地和現實物理世界融為一體，讓現實的周圍環境光和虛擬內容交互。

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

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

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

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

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

4. 空間設計UI：排版

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

在 iOS 系統，建議正文使用“常規”字重，標題使用“中粗體”字重；在空間設計中，建議增加厚度：

• 正文使用“中黑體”字重
• 標題使用“粗體”字重

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

5. 空間設計UI：亮度

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

通過亮度，我們可以點亮前景內容并動態適應背景變化，同時確保了前景文本清晰可讀。

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

6. 空間設計UI：顏色

也要考慮顏色的使用。

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

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

7. 空間設計：布局

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

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

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

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

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

十、輸入

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

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

當然，也可以連接藍牙鍵盤或者觸控板，并正常書寫和交互。

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

通過使用系統組件，你可以快速創建絲滑響應用戶操作的界面。

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

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

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

熟悉諸如窗口、標簽欄和側邊欄的例子有助于我們設計用戶體驗并優化內容結構。

十一、眼和手

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

1. 為眼設計

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

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

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

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

另外，在元素和文本之間充足的間距可以加強眼睛定位的準確性和可用性。

就像我們之前提到的，保持至少60pt的定位熱區對于以眼為基礎的交互必不可少。即便系統提供的標準組件有助于輕松定位，但是在設計自定義元素時，遵守尺寸規范非常重要。

可以通過細微的懸停效果來加強眼部交互，標明用戶的凝視正在推動交互。懸停的效果需要很謹慎、要和內容協調，從而加強對 UI 元素的響應力。

2. 為手設計

手勢是另一種強大的與空間輸入交互的方式。

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

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

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

決定最佳的元素尺寸關鍵在于測試和迭代優化。

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

參考：Apple Developers