4500字干貨！Apple Vision Pro設(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)有平臺的一致性，同時(shí)也增加了一些元素來適應(yīng)沉浸式的空間體驗(yàn)設(shè)計(jì)。

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

1. 用戶界面的基礎(chǔ)設(shè)計(jì)原則(UI foundations)：包含 UI 基礎(chǔ)設(shè)計(jì)的設(shè)計(jì)原理、可讀性和可用性等。
2. 布局設(shè)計(jì)（Layout）：如何創(chuàng)建符合人體工學(xué)和易于用戶定位的布局。
3. 從屏幕到空間中去（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)用戶看向它們時(shí)，圖標(biāo)的層級會(huì)擴(kuò)展，系統(tǒng)通過添加高光和陰影來增強(qiáng)這種空間效果，以加強(qiáng)圖層間的微妙縱深。

①使用多個(gè)圖層

Vision Pro 上真正三維的圖標(biāo)最多有三層，一個(gè)背景層和最多兩個(gè)前景層。每個(gè)圖層都是 1024*1024 像素的矩形圖像，兩個(gè)前景層包含透明通道。可以將你的背景層設(shè)計(jì)為正方形圖像，然后所有層再裁剪為圓形蒙版，最后系統(tǒng)會(huì)為圖標(biāo)自動(dòng)添加深度，高光和陰影。

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

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

2. Materials

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

用戶可能會(huì)在任何地方使用設(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)用或人。

②避免使用不透明窗口

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

3. Typography

①增加字重以提升閱讀性

字體在我們的 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

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

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

5. Colors

顏色上，我們通常使用白色的文字或符號以保證它們清晰可見。如果你需要使用其他顏色，請?jiān)诒尘皩踊蛘麄€(gè)按鈕中使用它，以便人們更容易注意看到它。

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

二、LayOut

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

1. Ergonomics

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

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

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

2. Sizing

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

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

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

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

3. Focus feedback

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

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

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

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

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

③確保嵌套元素彼此同心

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

為了保證平滑圓角，一定要把他們設(shè)置成連續(xù)的圓角。整個(gè)系統(tǒng)中每一個(gè)從窗口到角落的元素的關(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)用時(shí)，使用系統(tǒng)組件（Use system Components），它們可以幫助您快速創(chuàng)建界面。

1. Window、Tab bar、Side bar

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

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

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

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

2. Ornaments

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

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

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

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

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

3. Menus Popovers Sheets

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

4. Sheets

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

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

參考鏈接

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

歡迎關(guān)注作者微信公眾號：Vicky Design Studio