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

這是這個(gè)系列的第四篇，其中主要涉及到的內(nèi)容，是 visionOS 當(dāng)中 UI 元素的設(shè)計(jì)尺寸的相關(guān)規(guī)范。

UI 元素大小和間距

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

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

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

在設(shè)計(jì)多個(gè)按鈕并列排布的時(shí)候，請(qǐng)使用標(biāo)準(zhǔn)的系統(tǒng)按鈕，按鈕之間至少要有 16pt 的間距。

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

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

下面這個(gè)小按鈕周圍同樣有著 60pt 的觸發(fā)空間，因?yàn)樗赃叺奈谋静⒉皇墙换ナ降摹＃ㄈ缦聢D所示）

同樣的，使用大按鈕和超大按鈕的時(shí)候，它周圍的觸發(fā)區(qū)域邊緣無(wú)需太大，因?yàn)樗鼈儽旧硪呀?jīng)接近 60pt 的尺寸，它們本身不存在觸發(fā)困難的問(wèn)題。

Ornaments 控件的放置

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

無(wú)邊框按鈕

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

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

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

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

鎖定控件（Lockups）的間距

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

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

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

保持嵌套元素同心

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

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

內(nèi)部圓角的半徑+邊距=外部圓角的半徑

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

遵循尺寸和間距的規(guī)范，能夠幫你更好的標(biāo)準(zhǔn)化整個(gè)空間計(jì)算 APP 的交互和體驗(yàn)，這些細(xì)節(jié)至關(guān)重要。

下一篇當(dāng)中，我將會(huì)梳理總結(jié)空間計(jì)算中的人體工程學(xué)、視野控制等方面的內(nèi)容。