?Apple Vision Pro的出現(xiàn)為建立新的視覺語言帶來了可能性，那么在設(shè)計(jì)中，我們要如何才能適應(yīng)新的視覺語言，并搭建適合空間體驗(yàn)設(shè)計(jì)的交互界面？本篇文章里，作者聚焦于空間用戶界面，闡述了幾點(diǎn)設(shè)計(jì)規(guī)范，一起來看一下。

引言

在上篇文章《Apple Vision Pro設(shè)計(jì)規(guī)范之空間設(shè)計(jì)原則篇》中，我們了解到了Vision Pro的核心設(shè)計(jì)原則。本篇我們將介紹Vision Pro中如何設(shè)計(jì)UI界面，并探索設(shè)計(jì)規(guī)范中的UI組件、材質(zhì)、字體等UI元素設(shè)計(jì)指導(dǎo)。

Vision Pro建立了一種新的視覺語言，即可以保持與現(xiàn)有平臺的一致性，同時也增加了一些元素來適應(yīng)沉浸式的空間體驗(yàn)設(shè)計(jì)。

本篇文章將聚焦空間用戶界面來介紹Vision Pro以下三點(diǎn)設(shè)計(jì)規(guī)范：

• 用戶界面的基礎(chǔ)設(shè)計(jì)原則（UI foundations)）：包含UI基礎(chǔ)設(shè)計(jì)的設(shè)計(jì)原理、可讀性和可用性等。
• 布局設(shè)計(jì)（Layout）：如何創(chuàng)建符合人體工學(xué)和易于用戶定位的布局。
• 從屏幕到空間中去（From screen to spatial）：如何將2D屏上應(yīng)用組件帶入空間設(shè)計(jì)平臺中。

一、UI foundations

Vision Pro中大部分UI系統(tǒng)組件都是我們已經(jīng)熟知的，但有些也是全新的，現(xiàn)在讓我們深入了解Vision Pro用戶界面的基礎(chǔ)控件。

1. App icons

在App圖標(biāo)的設(shè)計(jì)上，Vision Pro進(jìn)一步將圖標(biāo)在空間中變得立體和逼真，當(dāng)用戶看向它們時，圖標(biāo)的層級會擴(kuò)展，系統(tǒng)通過添加高光和陰影來增強(qiáng)這種空間效果，以加強(qiáng)圖層間的微妙縱深。

1）使用多個圖層

Vision Pro上真正三維的圖標(biāo)最多有三層，一個背景層和最多兩個前景層。每個圖層都是1024*1024像素的矩形圖像，兩個前景層包含透明通道?？梢詫⒛愕谋尘皩釉O(shè)計(jì)為正方形圖像，然后所有層再裁剪為圓形蒙版，最后系統(tǒng)會為圖標(biāo)自動添加深度，高光和陰影。

2）保持圖標(biāo)圖形居中

嘗試保持圖形居中，如果它們太靠近邊緣，在展開時可能會偏離中心，同時避免使用大范圍的半透明像素。

2. Materials

1）應(yīng)用應(yīng)該易于在任何空間中放置、使用和閱讀

用戶可能會在任何地方使用設(shè)備，比如白天亮光下的房間，或夜間的小空間中，所以應(yīng)用需要適應(yīng)不同的照明條件或新環(huán)境，它們應(yīng)該易于放置在你周圍任何的空間中（Apps should be easy to place），易于在任何距離使用（Apps should be easy to use），并且易于在任何照明條件下閱讀（Apps should be easy to view），這就是為什么我們設(shè)計(jì)了一種新的視覺語言玻璃材質(zhì)，這種效果就像物理世界的一部分。

另外，鏡面高光和陰影增強(qiáng)了它在空間中的大小和位置，而玻璃材質(zhì)也可以作為畫布來承載UI內(nèi)容，讓界面感覺更輕盈，并增加一種物理質(zhì)感。這種輕質(zhì)感材料也讓人們感覺到窗口后可能有什么。比如其它應(yīng)用或人。

2）避免使用不透明窗口

假設(shè)你要設(shè)計(jì)一個這樣的卡片，你想添加一個更亮的按鈕。把它放在玻璃材質(zhì)上是非常易讀的。但如果你想增加對比度，可以在后面使用一個較暗的單元格背景，盡量不要把較亮的元素重疊在一起，這樣會影響可讀性并降低對比度。

3. Typography

1）增加字重以提升閱讀性

字體在我們的PointBase Unix系統(tǒng)經(jīng)過調(diào)整，確保在任何距離都可以清晰地可見，我們還修改了一些字體的字重來提高易讀性。例如在iOS上正文使用的regular字體，需在Vision Pro上使用Medium。對于標(biāo)題Vision Pro使用Bold而不是Semibold，以保持字體清晰。

即使窗口可以擴(kuò)大到非常大的尺寸，較小或細(xì)字重的字體仍然難以閱讀，因此考慮增加重量（Use Bolder font weights）或使用系統(tǒng)字體從而為優(yōu)化可讀性。

4. Vibrancy

這是保持整個系統(tǒng)可讀性的最重要細(xì)節(jié)之一。Vibrancy使顯示前景內(nèi)容變亮，并通過將光線和顏色發(fā)揮作用。在Vision Pro上，由于背景可以不斷變化，Vibrancy也會實(shí)時更新，以確保您的文本始終清晰地顯示。Vibrancy在玻璃材料中發(fā)揮作用，增強(qiáng)易讀性，使系統(tǒng)材料感覺更豐富和復(fù)雜。

可以利用Vibrancy表示文本、符號的層次。Vision Pro提出三種模式：一級（Primary）、二級（Secondary）、三級（Tertiary）。正文使用一級，二描述文本、備注和字幕使用二級。

5. Colors

顏色上，我們通常使用白色的文字或符號以保證它們清晰可見。如果你需要使用其他顏色，請?jiān)诒尘皩踊蛘麄€按鈕中使用它，以便人們更容易注意看到它。盡可能使用系統(tǒng)顏色而不是自定義顏色，因?yàn)樗鼈円呀?jīng)被校準(zhǔn)為易讀性，并能自適應(yīng)玻璃材質(zhì)上的色調(diào)和對比度。

二、LayOut

在布局設(shè)計(jì)上，我們要考慮基于人因的最舒適布局方法，在元素大小上保證給予用戶最易于操作的點(diǎn)擊尺寸，以及在響應(yīng)時基于眼球追蹤來提供視覺反饋。

1. Ergonomics

在Vision Pro上，用戶主要用眼睛和雙手互動，所以對于設(shè)計(jì)考慮符合人因的，舒適和安全的體驗(yàn)比以往任何時候都更加重要，你需要確保內(nèi)容的排布是有意圖的，不會導(dǎo)致眼睛或頸部疲勞。例如，對大多數(shù)人來說，相比抬頭低頭，左右轉(zhuǎn)更容易而且更遠(yuǎn)，所以要把你的用戶界面在人們的視野中，并注意不要放的太高或太低。

如果你的應(yīng)用需要一個更大的畫布承載界面，可以嘗試一個更寬的長寬比。例如在“Freeform”中，畫布可以盡量水平延伸。

優(yōu)先將最重要的信息展示在你的應(yīng)用中（Center important information），這樣用戶可以舒適地查看你的內(nèi)容。

2. Sizing

1）保證所有交互元素至少60pt的點(diǎn)擊熱區(qū)

每個人的眼睛都有細(xì)微的差異，設(shè)計(jì)的元素應(yīng)該容易被捕捉到。因此建議交互元素的點(diǎn)擊熱區(qū)必須至少是60pt,這樣它們可以很容易地被用戶選擇。你的圖標(biāo)可以在視覺上更小，比如44pt，只要你在它周圍添加足夠的間距，這樣它就滿足了60pt目標(biāo)區(qū)域的最小值。如果你需要在容器中放置幾個按鈕，請使用標(biāo)準(zhǔn)系統(tǒng)按鈕，按鈕之間至少有16個pt間距。

舉一個展開控件的例子，您可以使用一個迷你按鈕，它在部分標(biāo)題這樣的區(qū)域中有28pt，即使這個按鈕看起來很小，但它周圍仍有60pt的空間，所以很好選中。

同樣，使用大的和超大按鈕需要減少周圍的間距，記住給所有交互元素至少60pt的點(diǎn)擊熱區(qū)（Give interactive elements 60 points of space）。

3. Focus feedback

1）提供焦點(diǎn)反饋效果

當(dāng)用戶看向組件時，它們會自動顯示微妙的視覺高亮或懸停效果，這種懸停效果讓用戶理解界面的哪些部分是可交互的。當(dāng)一個元素不可點(diǎn)擊時，它不再提供焦點(diǎn)反饋，這讓用戶將注意力集中在他們專注于預(yù)期的元素，并可以通過敲擊手指來選擇它。

當(dāng)你創(chuàng)建布局時，考慮到懸停效果是很重要的。例如，如果您正在創(chuàng)建一個列表或菜單，您需要考慮每個元素之間保留一點(diǎn)間距，以避免懸停效果的重疊，建議使用4pt。

2）保證卡片的獨(dú)立交互區(qū)

在卡片的設(shè)計(jì)上，我們允許用戶關(guān)注它時顯示懸停效果，每個卡片是一個獨(dú)立的交互元素，你需要定義一個自定義區(qū)域，所以它可以在用戶看到它時變亮，這有助于用戶理解整個區(qū)域是一個可以選擇的元素。

3）確保嵌套元素彼此同心

確保嵌套元素有相對的圓角半徑和間距，使它們彼此同心，你可以使用嵌套元素的簡單公式，來調(diào)整圓角大小：Inner corner radius +Padding=Outer corner radius

為了保證平滑圓角，一定要把他們設(shè)置成連續(xù)的圓角。整個系統(tǒng)中每一個從窗口到角落的元素的關(guān)系都是彼此同心的，所以請記住保持嵌套元素彼此同心（keep nested elements concentric），因?yàn)檫@將幫助它們感覺是彼此屬于一起的。

三、From screen to spatial

最后，我們將介紹如何將現(xiàn)有設(shè)備組件應(yīng)用到空間計(jì)算平臺中。下文將介紹核心組件結(jié)構(gòu)Window、Tab bar、Side bar，以及一種新的組件形態(tài)Ornaments和模態(tài)窗口的使用方法。

我們之前提到過，用戶用眼睛、手和聲音與設(shè)備進(jìn)行交互，他們主要通過從遠(yuǎn)處查看元素和敲擊手指來實(shí)現(xiàn)這一點(diǎn)。除此之外，用戶也可以通過觸摸直接選擇元素。當(dāng)然，用戶還可以連接鍵盤或觸控板，從而與系統(tǒng)進(jìn)行各種各樣的輸入。

我們所有的系統(tǒng)組件都已經(jīng)提供適當(dāng)?shù)姆答仚C(jī)制，并支持各種輸入方式，所以當(dāng)你開發(fā)你的應(yīng)用時，使用系統(tǒng)組件（Use system Components），它們可以幫助您快速創(chuàng)建界面。

1. Window、Tab bar、Side bar

讓我們從iOS應(yīng)用的核心結(jié)構(gòu)Window開始，你的應(yīng)用需要一個窗口，并為所有元素提供畫布，下面有一個可以在空間中流暢易懂的小橫條，允許用戶在他們的空間中流暢地移動你的應(yīng)用程序。

在iphone窗口底部，水平排列著一個標(biāo)簽欄，即主導(dǎo)航。只需輕輕一按，人們就可以快速訪問應(yīng)用程序的主要部分。而在Vision Pro中，這里的標(biāo)簽欄垂直浮動在窗口左側(cè)的固定位置，設(shè)計(jì)成易于訪問的，讓用戶可以快速找到應(yīng)用導(dǎo)航標(biāo)簽位置，又不會影響應(yīng)用的主要內(nèi)容。

為了讓標(biāo)簽欄看起來更為輕盈，在入口數(shù)量上避免超過六個。當(dāng)看向標(biāo)簽時，用戶可以快速選擇一個項(xiàng)目。如果用戶看的時間更久一點(diǎn)，它會自動擴(kuò)展，顯示每個部分的詳細(xì)標(biāo)簽，當(dāng)人們移開視線時，它會自動關(guān)閉，讓人們專注于內(nèi)容。

如果你需要提供子導(dǎo)航，比如在相冊中，在這個例子中，側(cè)邊欄位于標(biāo)簽欄旁邊的窗口中，這讓用戶清楚地知道他們現(xiàn)在在標(biāo)簽欄中的位置。

2. Ornaments

Ornaments是Vision Pro上一個全新的組件。在相冊app，在底部中心有一個浮動的配件元素，可以切換年月和日，因?yàn)樗皇芷聊坏南拗?，ornaments可以放在在窗口前面的底部作為裝飾品，用戶可以更方便的進(jìn)行與內(nèi)容有關(guān)的快速操作。

因?yàn)閛rnaments通常是多個按鈕集合的獨(dú)立玻璃容器，當(dāng)用戶看著它們時，仍然會有懸停效果。

下面是音樂應(yīng)用中ornaments的另一個案例，用戶可以通過ornaments控制切換下一首歌曲，同時能夠控制他們的音樂進(jìn)度。

Ornaments一般被放置在窗口底部，所以它們與底部邊緣重疊了20pt的位置，這使得ornaments感覺就像它們與主窗口集成在一起，但不會阻止太多的內(nèi)容。當(dāng)你滾動頁面時，ornaments的窗口背景會從玻璃中提取內(nèi)容的顏色，讓其看起來更加和諧。

Ornaments可以選擇顯示或隱藏，所以只建議用于可聚焦的高頻操作內(nèi)容上，例如，看照片或看電影，只需輕輕一點(diǎn)，我們就可以讓人們快速訪問重要的控件，而不會分散他們對主要體驗(yàn)的注意力。

3. Menus Popovers Sheets

在Vision Pro上，菜單和彈窗可以在窗口外拓展展開，默認(rèn)情況下它們居中顯示，確保用戶總是能看到內(nèi)容。使用白色背景上的黑色圖標(biāo)來顯示按鈕被選中，這有助于向用戶清晰的反饋哪個按鈕被調(diào)起了彈框。在按鈕的設(shè)計(jì)上，避免使用白色背景，除非是選中狀態(tài)。

4. Sheets

當(dāng)多個窗口以sheets進(jìn)行展示時，新的模態(tài)窗口出現(xiàn)在父窗口的中心,與父窗口保持相同的z位置，父窗口向后推并變暗，這有助于用戶集中注意力,并防止用戶與父視圖進(jìn)行交互，直到sheets被關(guān)閉。

如果您需要呈現(xiàn)另一個sheets，次要模態(tài)窗口可以出現(xiàn)在最前面，并將所有內(nèi)容向后推,如下圖所示。

參考鏈接 空間設(shè)計(jì)界面：https://developer.apple.com/videos/play/wwdc2023/10076/