從6個方面，總結 visionOS UI 元素和尺寸設計規范

編者按：近期 VR 和 AR 相關的公司頻繁地拿到高額的投資，足見 Vision Pro 整個行業的推動效果。今天的這篇文章是系列文章的第四篇，針對 Vision Pro 進行設計，UI 元素的設計應該遵循以下的尺寸和約束。文章來自設計師 Hajira 的搜集整理，以下是系列文章的前3篇：

這是這個系列的第四篇，其中主要涉及到的內容，是 visionOS 當中 UI 元素的設計尺寸的相關規范。

UI 元素大小和間距

在 visionOS 中，pt（points）被用作主要的測量單位，以此可以更加規范地控制元素的尺寸和間距。

交互元素必須具有至少 60pt 的空間尺寸作為觸發區域，以便用戶可以輕松選取這些元素。

這意味著 UI 元素在視覺上，其實可以比這個尺寸更小，就像標準的按鈕尺寸一樣是 44pt，只需要在周圍拓展出足夠大的觸發區域即可。而這也意味著，周圍起碼需要 8pt 的拓展空間，因為這樣才能滿足最低 60pt 的觸發區域最小值。

在設計多個按鈕并列排布的時候，請使用標準的系統按鈕，按鈕之間至少要有 16pt 的間距。

當設計視覺上較小的元素的時候，比如下拉菜單的按鈕，可以使用小至 28pt 的超小迷你按鈕。但是，它的周圍比要有 60pt 的觸發區域。

盡管在視覺上看起來不大，但是它的觸發還是非常方便的，易于選擇。

下面這個小按鈕周圍同樣有著 60pt 的觸發空間，因為它旁邊的文本并不是交互式的。（如下圖所示）

同樣的，使用大按鈕和超大按鈕的時候，它周圍的觸發區域邊緣無需太大，因為它們本身已經接近 60pt 的尺寸，它們本身不存在觸發困難的問題。

Ornaments 控件的放置

用來承載常用交互的 Ornaments 控件通常會放置在窗口界面的邊緣靠下的位置，它和整個窗口底部的重疊區域的高度為 20pt，這能讓它和整個窗口產生關聯感和一體感，但是又不會遮擋太多的信息。

無邊框按鈕

由于 Ornaments 控件通常是按鈕的集合，并且位于相對固定的玻璃質感容器內，因此其中按鈕最為適合以無邊框的形式來呈現。因為按鈕處在這種環境下，顯而易見是交互式的元素，當用戶在這個時候查看按鈕的時候，能夠帶來更加清晰的懸停觸發效果。

懸停效果觸發時的間距

在創建布局的時候，考慮懸停狀態觸發時的效果，是非常重要的。

比如，在創建列表菜單的時候，列表的條目之間，把你虛包含少量的間距填充，避免懸停狀態觸發之后，兩者出現重疊的情況。通常我們建議兩者之間留出 4pt 的間距。

鎖定控件（Lockups）的間距

在蘋果的人機交互指南當中，一個 Lockup 通常是一個由圖片內容+文本標題+輔助信息組成的內容信息組。當一個 Lockup 信息組被選中或者懸停觸發的時候，三者會同時一起擴展放大，當解除觸發狀態的時候，會縮小回原本大小。

這個控件會出現在 iOS、iPadOS 和 macOS 乃至 visionOS 當中。我們姑且將它翻譯成鎖定控件。每個鎖定控件都有一個虛擬的觸發區域，在 visionOS 當中，要清楚的顯示每個鎖定控件，務必在每個鎖定區域的周圍定義一個不可見的圖形，它也是這個控件的一部分，用來標記它所屬的區域。

在下方的案例當中，每個鎖定空間周圍都有不可見的形狀來約束它，當控件被觸發的時候會懸停，虛擬的形狀會變量呈現，這樣有助于用戶了解整個區域內的元素是關聯且可被選擇的。

保持嵌套元素同心

始終保持互相嵌套的元素的邊角半徑是彼此同心的。

為了幫助你快速確定嵌套的元素之間的邊角的尺寸，可以下面的公式簡單換算：

內部圓角的半徑+邊距=外部圓角的半徑

在整個系統當中，從窗口到內部控件的圓角，每個元素都是彼此同心的，因此，請記住這一原則，這樣的設計能讓整個設計都顯得彼此統一。

遵循尺寸和間距的規范，能夠幫你更好的標準化整個空間計算 APP 的交互和體驗，這些細節至關重要。

下一篇當中，我將會梳理總結空間計算中的人體工程學、視野控制等方面的內容。