在 WWDC 2023 大會的"One More Thing"環節上，蒂姆·庫克正式發布了蘋果的首款 MR 設備，名為 Apple Vision Pro，并宣布了即將開啟空間計算新時代的消息。不久之后，Apple 設計團隊推出了 VisionOS 的 Design for spatial user interfaces（空間用戶界面設計），這給我們設計師帶來了很多啟發。現在，讓我們從設計的角度來看看 VisionOS 有哪些令人矚目的設計亮點。

更多 VisionOS 的亮點：

一、圖標分層設計

在 visionOS 中，App 圖標采用了與 iOS 接近的風格，但最大的區別在于形狀從圓角矩形變成了圓形。這種設計變化的主要原因是為了讓注視點更準確地瞄準圖標。

除了形狀的變化，visionOS 的 App 標志還具有立體效果。當從側面觀察時，標志表面會凸起，呈現出一種立體感。更重要的是，這些標志還與用戶的注視點進行動態交互。當用戶盯著一個標志時，標志會展開，并顯示高光和陰影，以增強微妙的視覺層次。

這樣的設計變化使得 App 標志在視覺上更加吸引人，并為用戶提供了更加沉浸式的體驗。通過立體效果和動態交互，標志能夠吸引用戶的注意力，并呈現出更加生動和豐富的視覺效果。

簡單來說，visionOS 的 App 標志為了呈現更加逼真的深度效果，通常由三個平面的圖層組成：一個背景層和兩個表面層。這樣的設計旨在實現雙目視差效果，使得標志在視覺上具有更強烈的立體感。

除了三個平面的組成，系統還會疊加一個“玻璃層”效果，用于渲染深度、高光和陰影。這個玻璃層的加入進一步增強了標志的真實感，使得標志看起來更加立體、有質感。

需要強調的是避免使用大面積的半透明效果，因為 icon 的投影是系統底層自帶的，透明的圖層將會和投影混合在一起難以分辨。

二、磨砂玻璃材質

界面整體采用了磨砂玻璃的材質效果，這種材質會隨著環境的變化產生光影變化，比如當外界光線發生變化時玻璃邊緣光也會發生變化，蘋果指出，這種設計的好處是具有輕盈感、物理空間感，并可適應各種不同的使用場景，比如狹小的空間、夜間或明亮的日光下等等。

亮色

暗色

玻璃材質還可以通過明度變化及對比來表現信息層級。

在菜單上，做了流光的選擇效果

三、文字排版

為了提升文字的易讀性并增加與背景的對比度，visionOS 對 iOS 字體進行了加粗和加重的處理。盡管如此，即使在放大窗口的情況下，一些較小的說明性文字仍然難以辨別。因此，建議盡可能地增加字體的加粗和加重效果，以提高可讀性。此外，值得注意的是，蘋果還為 visionOS 引入了兩種全新的字體樣式，這些樣式的特點是基于較寬的編輯樣式布局。這樣的設計選擇為用戶提供了更好的閱讀體驗，使得文字更加清晰可見，并且更加符合視覺美感。

四、活力效果

VisionOS 通過突出文字的光線和色彩來提升其可讀性，并增加與背景的對比度。開啟該功能后，文字會呈現更亮的效果，從而提高其可讀性。考慮到 visionOS 菜單的窗口背景會根據周圍環境而改變外觀，文字的活力模式會實時調節亮度，確保文字清晰可見。除此之外，活力模式還提供了三種不同的亮度選項，以展現不同字符之間的層次結構。這種設計讓用戶能夠更好地識別和理解文字內容，同時提供更豐富的視覺層次感。通過活力模式，文字在不同背景下都能夠保持清晰可見，為用戶帶來更好的閱讀體驗。

未使用

已使用

五、色彩

蘋果建議開發者將文字色彩設為系統默認的白色，因為蘋果已經對白色文字的易讀性進行了校準。這樣的設定可以使文字動態適應背景窗口的色調和對比度，確保文字在各種情況下都能清晰可讀。

當在按鈕等元素上使用顏色時，開發者需要注意與背景做出明顯的區分。這是為了確保按鈕上的文字與背景之間有足夠的對比度，使用戶能夠清晰地辨認和理解其中的信息。通過正確的顏色選擇，開發者可以提升按鈕的可用性和易用性，為用戶提供更好的界面體驗。

結語

Apple VisionOS 的設計亮點包括直觀的交互方式、強調視覺體驗、3D 立體標志設計、漸變背景與動效以及簡潔與一致性。這些設計亮點使用戶能夠更自然地操作設備，提升文字易讀性和對比度，增加應用標志的立體感，創造豐富的視覺效果，同時保持界面簡潔和一致。

VisionOS 的設計以其創新性和精巧的細節成為了一次突破，為用戶帶來了沉浸式、智能化的體驗。通過突出直覺式交互、優化可讀性和引人入勝的視覺效果，VisionOS 在 UI 設計領域樹立了新的標桿。隨著其推出的不斷演進和創新，我們可以期待 VisionOS 將為未來的數字體驗開辟全新的可能性。

以上為我對 Apple VisionOS 空間設計規范一些亮點的提煉與總結，更詳細的介紹大家可以自行前往：https://developer.apple.com/videos/play/wwdc2023/10076

看英文原版講解。

文中配圖來自官方視頻：《Design spatial user interfaces》

歡迎關注「58UXD」的微信公眾號：