編者按：近期 VR 和 AR 相關(guān)的公司頻繁地拿到高額的投資，足見 Vision Pro 整個(gè)行業(yè)的推動(dòng)效果。今天的這篇文章是系列文章的第三篇，如果要針對(duì) Vision Pro 進(jìn)行設(shè)計(jì)，UI和排版的視覺設(shè)計(jì)需要遵循以下規(guī)則。

以下為正文。

這篇文章重點(diǎn)介紹了如何使用出色的 UI 設(shè)計(jì)來創(chuàng)建有突破性的空間計(jì)算 APP。

APP 圖標(biāo)

APP 圖標(biāo)應(yīng)該是三位立體的，層與層之間要有視覺縱深，當(dāng)用戶使用目光鎖定查看的時(shí)候，它們會(huì)膨脹展開細(xì)節(jié)。

如何創(chuàng)建 APP 圖標(biāo)

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

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

材質(zhì)

Vision Pro 的窗口界面采用了一種全新的視覺語(yǔ)言，采用的是類玻璃材質(zhì)的視覺風(fēng)格，可以適應(yīng)不同的光照條件。空間平臺(tái)沒有明顯的淺色和深色的設(shè)計(jì)，相反，當(dāng)窗口界面分別被置于深色和淺色的背景下的時(shí)候，玻璃材質(zhì)加持下的用戶界面會(huì)自然地適配環(huán)境，變得更亮或者更暗。

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

設(shè)計(jì)熟悉的元素和窗口界面

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

在下面的示例當(dāng)中，音樂類空間 APP 的視覺元素和普通的音樂類應(yīng)用的視覺設(shè)計(jì)是高度相似的。

2D 的應(yīng)用和 空間應(yīng)用在設(shè)計(jì)上的相似之處

如何設(shè)計(jì)清晰易讀的窗口界面

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

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

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

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

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

字體版式

SF Pro 是 visionOS 中的系統(tǒng)默認(rèn)字體，文本默認(rèn)使用白色。

SF Pro 是一款動(dòng)態(tài)字體，visionOS 使用當(dāng)中相對(duì)更粗的字體應(yīng)用到正文和標(biāo)題里。

比如在正文中使用 medium 替代 regular 的粗細(xì)，在標(biāo)題當(dāng)中使用 bold 替代 semi-bold，這樣可以保證文本清晰。

此外，在 visionOS 當(dāng)中還引入了超大標(biāo)題1和超大標(biāo)題2 兩個(gè)更大的字號(hào)，用于超寬的布局。

使用 2D 字體提高可讀性，避免使用 3D 文本，因?yàn)?3D 文本難以閱讀。

Vibrancy

注：Vibrancy 在英文中是通常被翻譯為「活力、精力、元?dú)狻?/p>

Vibrancy 這一特性是保持整個(gè)視覺系統(tǒng)易讀性的最重要細(xì)節(jié)之一，考慮到整個(gè)空間環(huán)境一直在不斷變化，Vibrancy 加持下的文本能夠隨著環(huán)境變化而持續(xù)更新，確保始終清晰易讀。在下方的示例當(dāng)中，可以看到 Vibrancy 打開和關(guān)閉時(shí)的顯示差異。

注意，Vibrancy 有3種等級(jí)，分別為 一級(jí)、二級(jí)和三級(jí)?？梢詫⒅饕谋驹O(shè)置為一級(jí)，將輔助的解釋性文本和字幕設(shè)置為 二級(jí)。

在下一篇文章當(dāng)中，我們將會(huì)探討的主題是，如何合理地調(diào)整 UI 元素的大小和空間關(guān)系。