編者按：近期 VR 和 AR 相關的公司頻繁地拿到高額的投資，足見 Vision Pro 整個行業的推動效果。今天的這篇文章是系列文章的第三篇，如果要針對 Vision Pro 進行設計，UI和排版的視覺設計需要遵循以下規則。文章來自設計師 Hajira 的搜集整理，以下是系列文章的上2篇：

以下為正文。

這篇文章重點介紹了如何使用出色的 UI 設計來創建有突破性的空間計算 APP。

APP 圖標

APP 圖標應該是三位立體的，層與層之間要有視覺縱深，當用戶使用目光鎖定查看的時候，它們會膨脹展開細節。

如何創建 APP 圖標

所有的 APP 的圖標最多有 3 個平面層，一個背景層和兩個前景層。每個層都使用一個方形的圖像，大小為 1024 x 1024 px，并且兩個前景層都必須是帶有透明底的圖片。

然后所有的圖層都使用圓形的剪切蒙版來約束輪廓。當所有的圖層都匹配好了在一起的時候，會自動添加玻璃圖層效果，以及相應的視覺縱深、鏡面高光和對應的陰影，同時，所有的圖層都會自動對齊居中。

材質

Vision Pro 的窗口界面采用了一種全新的視覺語言，采用的是類玻璃材質的視覺風格，可以適應不同的光照條件。空間平臺沒有明顯的淺色和深色的設計，相反，當窗口界面分別被置于深色和淺色的背景下的時候，玻璃材質加持下的用戶界面會自然地適配環境，變得更亮或者更暗。

窗口界面存在于空間當中，就像周圍環境得一部分，界面內容被放置在虛擬得窗口內，以便用戶可以輕松地瀏覽內容。

設計熟悉的元素和窗口界面

空間計算 APP 中的界面設計必須和通常的 2D? APP 界面類似，這樣易于識別，具有熟悉感。

在下面的示例當中，音樂類空間 APP 的視覺元素和普通的音樂類應用的視覺設計是高度相似的。

2D 的應用和 空間應用在設計上的相似之處

如何設計清晰易讀的窗口界面

為了保持 APP 不同界面元素組件之間的對比度，請盡量使用深淺搭配，在淺色的背景上承載深色的內容，或者在深色的背景上放置淺色的元素。

比如，在下面的音樂 APP 上，窗口界面使用的淺色，那么其上的側邊欄就使用相對更深的顏色，確保整體的對比度，而側邊欄頂部的按鈕菜單，則使用的是更淺的顏色，這樣可以引起用戶對于這一元素的關注。而添加的諸如輸入框、UI 小組件的時候，可以使用更暗的色調，來確保對比度。

使用白色的文本和符號，確保它們始終清晰可見，如果必須使用色彩，也最好只在背景層中使用顏色，而文本和圖標依然使用白色，確保色彩的對比度。使用的顏色也盡量使用系統給定的配色。

在下面的示例當中，由于文本使用白色，并且搭配了淺色的按鈕，所以最好的處理機制，因此最好是在這些區域后面添加一個深色的底，增加對比度。

參考下方的范例，避免使用淺色的元素疊加在一起，會降低整體的易讀性，降低對比度。

字體版式

SF Pro 是 visionOS 中的系統默認字體，文本默認使用白色。

SF Pro 是一款動態字體，visionOS 使用當中相對更粗的字體應用到正文和標題里。

比如在正文中使用 medium 替代 regular 的粗細，在標題當中使用 bold 替代 semi-bold，這樣可以保證文本清晰。

此外，在 visionOS 當中還引入了超大標題1和超大標題2 兩個更大的字號，用于超寬的布局。

使用 2D 字體提高可讀性，避免使用 3D 文本，因為 3D 文本難以閱讀。

Vibrancy

注：Vibrancy 在英文中是通常被翻譯為「活力、精力、元氣」

Vibrancy 這一特性是保持整個視覺系統易讀性的最重要細節之一，考慮到整個空間環境一直在不斷變化，Vibrancy 加持下的文本能夠隨著環境變化而持續更新，確保始終清晰易讀。在下方的示例當中，可以看到 Vibrancy 打開和關閉時的顯示差異。

注意，Vibrancy 有3種等級，分別為 一級、二級和三級。可以將主要文本設置為一級，將輔助的解釋性文本和字幕設置為 二級。

在下一篇文章當中，我們將會探討的主題是，如何合理地調整 UI 元素的大小和空間關系。