引言

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

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

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

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

一、UI foundations

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

1. App icons

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

①使用多個圖層

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

②保持圖標圖形居中

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

2. Materials

①應(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è)計了一種新的視覺語言玻璃材質(zhì)，這種效果就像物理世界的一部分。

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

②避免使用不透明窗口

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

3. Typography

①增加字重以提升閱讀性

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

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

4. Vibrancy

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

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

5. Colors

顏色上，我們通常使用白色的文字或符號以保證它們清晰可見。如果你需要使用其他顏色，請在背景層或整個按鈕中使用它，以便人們更容易注意看到它。

盡可能使用系統(tǒng)顏色而不是自定義顏色，因為它們已經(jīng)被校準為易讀性，并能自適應(yīng)玻璃材質(zhì)上的色調(diào)和對比度。

二、LayOut

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

1. Ergonomics

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

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

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

2. Sizing

①保證所有交互元素至少 60pt 的點擊熱區(qū)

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

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

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

3. Focus feedback

①提供焦點反饋效果

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

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

②保證卡片的獨立交互區(qū)

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

③確保嵌套元素彼此同心

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

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

三、From screen to spatial

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

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

我們所有的系統(tǒng)組件都已經(jīng)提供適當(dāng)?shù)姆答仚C制，并支持各種輸入方式，所以當(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 窗口底部，水平排列著一個標簽欄，即主導(dǎo)航。只需輕輕一按，人們就可以快速訪問應(yīng)用程序的主要部分。而在 Vision Pro 中，這里的標簽欄垂直浮動在窗口左側(cè)的固定位置，設(shè)計成易于訪問的，讓用戶可以快速找到應(yīng)用導(dǎo)航標簽位置，又不會影響應(yīng)用的主要內(nèi)容。

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

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

2. Ornaments

Ornaments 是 Vision Pro 上一個全新的組件。在相冊 app，在底部中心有一個浮動的配件元素，可以切換年月和日，因為它不受屏幕的限制，ornaments 可以放在在窗口前面的底部作為裝飾品，用戶可以更方便的進行與內(nèi)容有關(guān)的快速操作。

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

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

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

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

3. Menus Popovers Sheets

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

4. Sheets

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

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

參考鏈接

空間設(shè)計界面： https://developer.apple.com/videos/play/wwdc2023/10076/

作者：Vicky Design Studio