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

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

UI 元素大小和間距

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

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

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

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

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

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

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

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

Ornaments 控件的放置

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

無邊框按鈕

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

懸停效果觸發(fā)時的間距

在創(chuàng)建布局的時候，考慮懸停狀態(tài)觸發(fā)時的效果，是非常重要的。

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

鎖定控件（Lockups）的間距

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

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

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

保持嵌套元素同心

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

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

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

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

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

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