前幾期和大家分享了一些 vision OS 設計亮點以及設計原則解讀，后臺有人留言說想看官方的 UI 設計規范，官方其實給出了，但分散在其他系統規范中。

往期回顧：

彩云把這些零碎的設計規范做一個匯總整理，摘取其中最精華的部分與大家分享。這篇文章將會是未來必看的設計規范，文章算是今年以來寫過最長的一篇（差不多有 1.7 萬字），但值得你提前收藏分享。

當你著手為 visionOS 設計 App 或游戲時，首先要了解該平臺特有的基本設備特征和模式。利用這些特征和模式來指導你的設計決策，幫助你打造出富有吸引力的沉浸式體驗。

積極采用 Apple Vision Pro 的獨特功能。充分利用空間、空間音頻和沉浸來讓你的體驗身臨其境，同時以讓用戶在設備上感到輕松自然的方式集成穿透、聚焦和手勢。

設計呈現 App 中最獨特時刻的方式時，考慮整體的沉浸程度。你可以在以用戶界面為中心的窗口式環境、全沉浸式環境或介于兩者之間的某種環境中呈現體驗。為 App 中的每個關鍵時刻找到最適合的最低沉浸程度，不要假設每個時刻都需要完全沉浸。

為以用戶界面為中心的受限體驗使用窗口。若要幫助用戶執行標準任務，首選在空間中使用顯示為平面并包含熟悉控件的標準窗口。在 visionOS 中，用戶可將窗口重新放置在想要的任何位置，且系統的動態縮放可幫助保持窗口內容無論遠近都清晰易讀。

優先考慮舒適性。若要幫助用戶在與 App 或游戲交互時保持舒適和身體放松，請記住以下基本原則。

1. 在用戶的視場內顯示內容，并相對其頭部放置。避免將內容放在用戶必須轉頭或改變姿勢才能進行交互的位置。
2. 避免顯示眼花繚亂、不和諧、過快或缺少靜止參考系的動態效果。
3. 支持非直接手勢，讓用戶的手放在大腿或身側時也能與 App 交互。
4. 如果支持直接手勢，請確保交互式內容不會距離過遠，并且用戶無需長時間與其交互。
5. 用戶處于全沉浸式體驗中時，避免鼓勵其過多移動。

上面是一些大的設計特征，下面會介紹一些基礎的設計規則，便于做好具體的設計。

共 18 個分類，目錄：

1. 圖標
2. 顏色
3. 圖像
4. 沉浸式體驗
5. 材質
6. 動態效果
7. 空間布局
8. 字體
9. 按鈕
10. 菜單
11. 裝飾
12. 工具欄
13. 導航欄
14. 提醒
15. 窗口
16. 手勢
17. 鍵盤
18. 指針

1. 圖標

1）App 圖標

visionOS App 圖標呈圓形，并包括一個背景層及其上方的一至兩層，以生成在用戶查看時會巧妙展開的三維對象。

系統通過添加陰影來體現各層之間的深度感并使用上層的 Alpha 通道打造浮凸感外觀，以增強 App 圖標的視覺維度。

為圖標的背景層使用全幅不透明圖像。相反，避免在非背景層中使用全幅圖像。在非背景層中使用透明區域可讓下層的視覺信息透過。

為每層提供正方形圖像。系統會使用圓形遮罩裁剪 App 圖標的所有層，因此提供已裁剪的層可能會對結果產生負面影響。

避免大面積使用半透明。雖然使用半透明像素來為形狀消除鋸齒效果不錯，但大面積的半透明區域無法與 Alpha 很好融合，還可能跟系統提供的陰影結合產生黑色結果。除非要為形狀消除鋸齒，否則請保持像素不透明或全透明。

在非背景層中，首選為完全不透明或完全透明像素的不同區域之間使用明確邊緣。非背景層包含的形狀具有清晰邊緣時，系統繪制的高光和陰影看起來最美觀。避免使用柔化或羽化邊緣。

避免在背景層中添加看起來像孔洞或凹面區域的形狀。系統添加的陰影和鏡面高光可使此類形狀看起來突出而非內凹。

保持非背景層中的不同形狀或圖像靠近中心。圓形遮罩可能會截斷過于靠近邊緣的形狀或圖像，導致形狀看起來偏離中心并破壞圖標的三維外觀。

避免使用從一個固定的有利位置看起來有深度的視覺元素。如果用戶只能從一個視角感知層內元素的深度，當其聚焦該圖標時，這種深度感便會消失。避免使用突出層元素的底部邊緣這樣的技術，因為這樣做會與其他 App 圖標的垂直透視發生沖突。

避免為 visionOS App 圖標添加自定義鏡面高光或陰影。除了會干擾系統提供的視覺效果外，自定義高光和陰影為靜態，而 visionOS 提供的高光和陰影則為動態。

VisionOS App 圖標尺寸。創建大小為 1024x1024 個像素的 App 圖標以在主屏幕視圖中顯示。

2）系統圖標

有效圖標能以用戶立即理解的方式表達單個概念。

①打造可識別且高度精簡的設計。細節過多可能會導致界面圖標混亂或難以理解。盡量使用簡單且通用的設計，讓大多數用戶可快速識別。一般情況下，當圖標使用熟悉的視覺隱喻來直接反映其所發起的操作或所代表的內容時，效果最佳。

②保持 App 中所有界面圖標間的視覺一致性。無論僅使用自定義圖標還是將自定義圖標和系統提供的圖標混合使用，你 App 中的所有界面圖標都需要在大小、細節程度、線條粗細和透視上保持一致。根據圖標的視重，你可能需要調整其尺寸以確保其在視覺上與其他圖標顯示一致。

為了幫助實現視覺一致性，可根據需要調整單個圖標的大小

并使每個圖標中的線條粗細相同

③通常使界面圖標與相鄰文本在線條粗細上相一致。在這兩者中使用粗細相同的線條可讓內容在外觀和強調程度上保持一致，除非你想要強調圖標或文本。

④如有必要，可為自定義界面圖標添加內邊距以實現視覺對齊。某些圖標（尤其是非對稱圖標）按幾何圖形（而非按視覺效果）居中時可能會看起來不平衡。例如，下方所示下載圖標的底部視重比頂部視重更大，因此如果該圖標按幾何圖形居中，看上去會很低。

非對稱圖標可能會看似偏離中心，即使實則不然

在此類情況下，你可以稍微調整圖標的位置，使其在視覺上達到居中。當創建的資源通過在界面圖標周圍添加內邊距的方式調整（如下方右圖所示）后，你可以按幾何圖形居中該資源，從而在視覺上居中該圖標。

將圖標移高幾個像素可使其在視覺上居中；將額外像素包括在內邊距中可讓居中更簡單。

視覺上居中之前（左）與視覺上居中之后（右）

在視覺上居中所需的調整通常非常小，但卻對 App 的外觀影響很大。

⑤僅在必要時才提供界面圖標的已選狀態版本。控件和區域會自動指示所選內容，因此無需為用于此處的圖標提供已選或未選狀態資源。VisionOS 中的邊欄和標簽頁欄通過應用 App 的強調色或添加背景外觀來傳達選擇狀態。

雖然你可能想要提供選中和未選中圖標以用在 visionOS 中的工具欄或導航欄，但更常見的是使用根據其狀態更改背景外觀的按鈕。

⑥打造具有包容性的設計。在描繪人物圖案時優先略去不必要的特定性別提及，并確保你的圖標可被廣大用戶接納和理解。

⑦在設計中僅包括對表達含義必要的文本。例如，在代表文本格式化的界面圖標中使用字符可能是最直接傳達概念的方式。如果需要在圖標中顯示單個字符，請確保將其本地化。如果需要表明一段文本，請在設計中使用抽象表示，并包括圖標的翻轉版本以適用于從右到左的閱讀環境。

⑧如果創建自定義的界面圖標，請使用 PDF 或 SVG 等矢量格式。系統為高分辨率顯示器自動縮放基于矢量的界面圖標，因此無需提供高分辨率版本。相反，用于 App 圖標和包括陰影、紋理和高亮標記等效果的其他圖像的 PNG 則不支持縮放，因此必須為每個基于 PNG 的界面圖標提供多個版本。或者，你可以創建自定義的 SF 符號并指定比例，以確保符號的重點與相鄰文本相匹配。

⑨為自定義的界面圖標提供備選文本標簽。備選文本標簽（或輔助功能描述）是不可見的，但可讓“旁白”以語音方式描述屏幕內容，從而使視障用戶的導覽更簡單。

⑩避免使用 Apple 硬件產品的模型。硬件設計往往會頻繁變化，可能會使界面圖標和其他內容顯得過時。

2. 顏色

巧妙地使用顏色可以增強溝通感，體現品牌形象，提供視覺連續性，傳達狀態和反饋，以及幫助用戶理解信息。

①visionOS 不提供深色模式，使用稱為玻璃的材質，可自動適應周圍對象的亮度和顏色。

②在 visionOS 中，顏色可能根據用戶現實環境中墻壁或物體的顏色及其反射光線的方式而看起來不同。

③謹慎使用顏色，尤其是在玻璃上。標準 visionOS 窗口通常使用系統定義的玻璃材質，用戶現實環境和空間中的光線和對象可透過這種材質顯示。這些現實和虛擬對象中的顏色可透過玻璃被看到，因此可能影響窗口中彩色 App 內容的易讀性。首選在有助于吸引用戶注意重要信息或顯示界面各部分之間關系的位置使用顏色。

④優先在粗體文本和較大區域中使用顏色。在較細文本或較小區域中使用顏色可能會使其更難看到和理解。

⑤visionOS 系統顏色。

3. 圖像

為了確保插圖在所有受支持設備上保持美觀，請了解系統如何顯示內容，以及如何以適當的縮放系數呈現藝術感。

①分辨率

點是一種抽象計量單位，可幫助視覺內容在任何顯示方式下都保持一致。在 visionOS 中，一個點是一個角度值，可允許視覺內容根據其距觀看者的距離縮放。

②縮放倍率

在 visionOS 中，當系統根據用戶查看的距離和角度對圖像進行動態縮放時，圖像所占面積通常會發生變化。這意味著圖像無法像在其他平臺中那樣與屏幕像素 1:1 對應。

創建 @2x 圖像。使用高分辨率可幫助確保圖像在被系統縮放時清晰顯示。

4. 沉浸式體驗

在 visionOS 中，你可以設計延伸出窗口和空間容器的 App 和游戲，并讓用戶沉浸在你的內容中。

在 visionOS 中，用戶可在共享空間中同時運行多個 App，或者在全空間中一次專注于單個 App。你的 App 默認在共享空間中啟動，在此空間中用戶可像 Mac 上一樣在多個運行中的 App 之間切換。想要更沉浸地體驗時，用戶可將你的 App 轉換到全空間，在此空間中其他 App 會隱藏，你的 App 可在任意位置顯示內容。

①沉浸和穿透

visionOS 支持一定范圍的沉浸程度，可幫助你向用戶提供多種 App 或游戲體驗方式。在此范圍內，用戶現實環境的可見度在體驗的沉浸效果方面起著關鍵作用。

佩戴 Apple Vision Pro 時，用戶可使用穿透看到現實環境，此功能提供了來自設備外部相機的實時視頻。

為更改可看到周圍的多少，用戶使用數碼旋鈕調整穿透量。例如，在想要與附近的實際物體交互或閱讀其他設備上的文本時，用戶可能會增加穿透，在想要呈現某種環境時，可能會減少穿透。

5. 材質

在 Apple 平臺上，材質可通過模糊和修改底層視覺內容的顏色值來加入半透明效果。

半透明效果可以改善前景元素和背景元素之間的融合，以視覺方式傳達圖層之間的分隔并幫助用戶保持位置感。材質可結合虛化效果來增強半透明效果。虛化效果通過從材質后面往前提拉顏色來增強文本、符號和填充等前景內容的深度感。

①基于語義和推薦用途選取系統材質和效果。避免基于給界面添加的外觀顏色來選擇材質或效果，因為系統設置可以更改其外觀和行為。而應使材質或虛化樣式匹配特定的用例。例如，使用顏色較淺的材質來突顯 visionOS App 中的交互式組件，

②通過在材質頂層使用虛化顏色來幫助確保易讀性。使用系統定義的虛化顏色時，你無需擔心顏色在不同環境中可能會太暗、太亮、太飽和或對比度太低的問題。visionOS 系統使用與 macOS 所用相同的深色虛化顏色，并自動調整這些顏色以在不同視覺環境下保持對比度。

③在 visionOS 中，窗口通常使用系統定義、被稱為玻璃的不可修改材質，通過讓光線、當前環境、虛擬內容和用戶周圍的對象透過來幫助保持用戶與現實世界的聯系。玻璃是一種適應性材質，可限制背景顏色信息范圍以便窗口可持續為 App 內容提供對比度，同時根據用戶的現實環境和其他虛擬內容在顏色上變得更淺或更深。

④visionOS 沒有專門的深色模式設置。相反，玻璃會自動適配對象的亮度和其后面的顏色。

⑤如有必要，請選取可協助形成視覺分離或表示 App 中交互性的材質。如果需要創建自定義組件，你可能需要為其指定系統材質。使用以下示例作為指導。

1. 淺色材質可讓用戶注意到按鈕和所選項目等交互式元素。
2. 深色材質可幫助你從視覺上分離 App 的各個部分，例如邊欄或分組表格視圖。
3. 最深色的材質可讓文本欄等組件看起來像嵌入一樣，表示該區域可接受文本輸入。

⑥visionOS App 默認使用淺色內容，但也會使用白色文本。

6. 動態效果

美觀流暢的動態效果賦予界面活力，從而傳達狀態、提供反饋和指示以及豐富視覺體驗。

很多系統組件自動包括動態效果，讓你在整個 App 或游戲中提供熟悉且一致的體驗。如果設計自定義動態效果，請首選有意圖的動畫，以幫助用戶確定自身位置和看起來舒適，提供清晰的反饋來響應其操作，以及幫助其了解界面以免其不知所措。

使用巧妙的動態效果進行傳達。動態效果是通過展示事物如何變化、用戶執行操作時會發生什么情況以及其下一步可執行什么操作來增強反饋和理解的絕佳方式。在 visionOS 中，當用戶聚焦窗口控件時，控件會輕輕展開。

有目的地添加動態效果，讓其在不妨礙體驗的同時提供支持。不要添加毫無意義的動態效果。不必要或過多的動畫會分散用戶的注意力，且可能讓其感到違和或身體不適。

將動態效果設為可選。用戶可能出于多種原因無法在你的 App 中體驗到移動，因此避免將動畫用作傳達重要信息的唯一方式至關重要。例如，用戶可以打開“減弱動態效果”輔助功能設置來盡量減少或去除動畫。

盡量保持真實感和可信度。在非游戲類 App 中，準確真實的動態效果可幫助用戶理解運作原理，但無意義或似乎違背物理定律的動態效果會讓其感到混亂。例如，如果用戶通過從頂部向下滑動顯示視圖，他們不會期望通過將視圖滑到一側來進行關閉。

優先使用簡短、精確的動畫。簡潔且精確的動畫往往會讓用戶感到更輕盈，干擾性更低，并且通常會更有效地傳達信息。在 visionOS 中，當用戶輕點“照片”中的全景照片時，視圖會平滑展開以填充用戶面前的空間，從而幫助其以可視方式追蹤過渡效果。

通常避免在頻繁出現的交互中添加動態效果。系統已使用標準的界面元素為交互提供了精細的動畫。避免讓用戶每次與內容進行交互時都要花額外的時間關注不必要的動態效果。

考慮在可行時使用具有動畫效果的符號。使用 SF 符號 5 或更高版本時，你可以將動畫效果應用到 SF 符號或自定義符號。

在 visionOS 中，動態效果可巧妙地傳達上下文，讓用戶關注信息，以及豐富沉浸式體驗。與深度結合使用時，動態效果還可在用戶聚焦元素時提供至關重要的反饋。按用戶預期的方式使用動態效果，而不要導致用戶注意力分散、困惑或者不適，這一點非常重要。

當用戶佩戴 Apple Vision Pro 并與虛擬內容交互時，他們會使用穿透查看現實環境。因為周圍和 App 內容可能同時可見，如果虛擬內容的移動讓用戶感覺他們自己或周圍在移動，這會讓其感到不適。一般而言，移動的虛擬對象越大，維持穩定感就越難。

顯示較大虛擬對象的移動時，幫助用戶保持舒適感。如果對象大到足以填充大部分視場，請遮蓋大部分或所有穿透，用戶會自然將其視為周圍的一部分。為了幫助用戶感知對象的移動而不會讓其覺得自身或周圍在移動，你可以增加對象的半透明效果，幫助用戶透視對象，或者降低對象對比度來讓其動態效果不那么明顯。

如果需要在大型對象間顯示過渡效果，請考慮使用漸變效果或者讓內容獲得焦點和失去焦點的效果以盡量降低可能的方向迷失感。

即使是用戶本人在移動諸如窗口這樣的大型虛擬對象，他們也可能會感到不適。雖然在這種場景下調整半透明效果和對比度也會有所幫助，但應考慮保持窗口的尺寸相對較小。

使用旋轉動態效果時應柔和。通過旋轉相機或者旋轉用戶周圍的大型虛擬對象來旋轉虛擬世界時，尤其是當旋轉速度過快或者持續時間過長時，旋轉可能會擾亂用戶的穩定感。相反，在快速淡出期間，應考慮使用瞬時方向變化。

避免顯示持續振蕩的對象。尤其應避免顯示頻率為 0.2 赫茲左右的振蕩，因為用戶對于此頻率非常敏感。如果需要顯示對象振蕩，請盡量保持振幅較低并考慮讓內容半透明。

去除不必要的動態效果。因為用戶會看向想要交互的對象，在可能導致其看向別處的位置顯示動態效果可能會帶來困擾。僅在你需要引導用戶看向重要內容時，才首選使用動態效果。

盡量避免在用戶視場的邊緣顯示動態效果。用戶對于發生在邊緣視覺處的動態效果尤其敏感。邊緣動態效果除了會分散用戶注意力外，甚至還會引起不適，因為它會讓用戶感到自身或周圍在移動。

考慮為用戶提供靜態參考系。在不會移動的區域內包含視覺移動時，用戶會更容易接受。相比之下，如果看起來周圍的一切對象都在移動，用戶會感到不舒服。

當用戶在體驗視覺旋轉時，避免鼓勵用戶移動其頭部。當虛擬對象看起來圍繞用戶旋轉時，他們通常需要看向一個固定的方向以避免感到不舒服。

需要重新放置對象時，考慮使用漸變。當對象從一個位置移到另一個位置時，用戶會自然看到移動。如果此類移動并未傳達對用戶有用的任何信息，你可以在移動對象前將其淡出，對象出現在新位置后重新將其淡入。

7. 空間布局

空間布局技術幫助你充分利用 Apple Vision Pro 的無邊際畫布，并以極具吸引力且舒適的方式呈現你的內容。

①視場

用戶的視場是無需移動頭部就能看到的空間。個人佩戴 Apple Vision Pro 時視場的維度因各種因素而異，例如用戶配置光密封性的方式以及邊緣視敏度的范圍等等。

將重要內容居中放在視場內。visionOS 默認會直接在用戶面前啟動 App，將其放在用戶的視場中。當用戶需要長時間與內容交互時，你應該將內容舒適地放在其視場內。

垂直觀看

斜角觀看

避免將內容錨定到佩戴者頭部。雖然通常想要 App 保留在視場內，但如果錨定的內容在用戶面前保持靜止，這會讓用戶感到卡頓、受限且不舒服，尤其是當內容遮擋了很多穿透且降低了用戶周圍的明顯穩定性。相反，請將內容錨定在用戶的空間中，讓用戶自由且自然地看向各處并查看不同位置的不同對象。

②深度

用戶依賴距離、遮擋和陰影等視覺提示來感知深度和理解周圍。在 Apple Vision Pro 中，系統自動使用色溫、反射和陰影等視覺效果來幫助用戶感知虛擬內容的深度。當用戶在空間中移動虛擬對象或者更改自身相對于該對象的位置時，視覺效果會更改對象的外觀深度，讓體驗更加逼真。

你可以在任意位置顯示 3D 對象，也可以使用顯示 3D 內容的空間容器組件。空間容器與窗口類似，但沒有可見的框架。

提供精確傳達內容深度的視覺提示。如果視覺提示缺失或者與用戶的真實世界體驗相沖突，用戶可能會在視覺上感到不適。

使用深度傳達層級結構。深度可幫助對象看起來相較于周圍內容更為突出，讓其更加顯而易見。用戶通常也會注意到深度變化：例如，當表單顯示在窗口上方時，窗口會沿著 z 軸后退，從而讓表單浮現出來并在視覺上更為突出。

一般而言，避免為文本添加深度。看起來懸浮在背景上方的文本不僅難以閱讀，還會降低用戶的速度，有時還會導致視覺不適。

確保深度可提供價值。一般而言，你可以使用深度帶來清晰感和愉悅感，但無需在每個地方都使用。在設計中添加深度時，考慮對象的大小和相對重要性。深度非常適合用于從視覺上分離 App 中大型且重要的元素，例如讓標簽頁欄或工具欄從窗口中突出顯示，但可能不適合用于小型對象。

例如，使用深度讓按鈕的符號從其背景中突出顯示可能會降低按鈕的辨識度和易用性。另外檢查在整個 App 中使用不同深度的頻率。用戶需要調整眼睛的焦點來感知每個不同深度，調整過于頻繁或過快會讓用戶感到疲勞。

3. 縮放

visionOS 定義了兩種類型的縮放，既保留了深度的外觀又優化了可用性。

動態縮放幫助內容保持清晰可辨且充滿交互性，而不管內容距離用戶的遠近。具體而言，visionOS 會在窗口遠離佩戴者時自動放大窗口，在靠近時縮小窗口，從而讓窗口在所有距離上看起來都大小相同。

固定縮放意味著對象無論距離用戶的遠近如何，都會保持相同比例。固定縮放對象會在沿著 z 軸逐漸遠離觀看者時看起來越來越小，這與用戶現實環境中的對象類似：遠處的對象比近處的對象看起來要更小。

為了支持動態縮放和深度外觀，visionOS 將一個點定義為一個角度，這一點與其他平臺不同：其他平臺將一個點定義為一定數量的像素，該數量因 2D 顯示器的分辨率不同而有所差異。

如果想要虛擬對象看起來和現實對象完全一樣，考慮使用固定縮放。例如，你不妨為提供的產品維持實物大小的比例，這樣產品會在用戶的空間中看起來更加逼真。交互式內容需要縮放以在其逐漸靠近或遠離時保持易用性，因此應謹慎應用固定縮放，請將固定縮放保留給需要它的非交互式對象。

避免顯示過多窗口。窗口過多會遮擋用戶的周圍，讓其感到壓抑、受限，甚至不舒服。同時也讓用戶難以將焦點移至想要的內容，除非調整多個窗口的大小或位置。

借助數碼旋鈕來幫助用戶將窗口重新放在視場中間。當用戶移動或轉動頭部時，內容可能不再出現在用戶期望的位置。如果出現這種情況，用戶可以按下數碼旋鈕將面前的內容重新放在中間。你的 App 無需執行任何操作來支持這種行為。

在交互式組件周圍保留足夠的空間以便用戶輕松聚焦。當用戶使用眼睛聚焦交互式元素時，visionOS 會顯示視覺懸停效果幫助用戶確認該元素就是用戶想要的元素來做出響應。在交互式組件周圍保留足夠的空間至關重要，這樣用戶可輕松、舒適地聚焦組件，同時可防止懸停效果擠壓其他內容。例如，放置按鈕以使其中心至少相距 60 點。

讓用戶通過極少量或無需身體活動來使用你的 App。除非某些身體活動對于體驗不可或缺，否則請幫助用戶在保持不動的情況下享受體驗。

使用地面來幫助你放置大型沉浸式體驗。如果沉浸式體驗包括從地面向上延伸的內容，請使用平坦的水平面來放置內容。將此平面與地面對齊有助于內容與用戶的周圍無縫融合并提供更直觀的體驗。

④界面布局

保持窗口內容位于其邊界內。在 visionOS 中，系統會在 XY 平面中窗口邊界之外顯示窗口控件。例如，“共享”菜單顯示在窗口上方，用于調整窗口大小、移動和關閉窗口的控件顯示在其下方。讓 2D 或 3D 內容侵占這些區域可能導致用戶難以使用系統提供的控件（尤其是窗口下方的控件）。

一般應避免將重要內容和控件放在窗口角落。內容離窗口中心越遠，用戶就可能越難以看到并與之交互，尤其是當窗口較大的時候。

讓窗口的交互式組件易于用戶聚焦。你需要在交互式組件周圍留出足夠空間，以便用戶輕松、舒適地聚焦到它，以及防止系統提供的懸停效果遮擋其他內容。例如，放置按鈕以使其中心至少相距 60 點。

如果需要顯示不屬于窗口內部的額外控件，則使用裝飾。裝飾可讓你提供與窗口在視覺上保持關聯但與系統提供的控件互不干擾的 App 控件。例如，窗口的工具欄和標簽頁欄會顯示為裝飾。

8. 字體

除了確保文本清晰易讀外，你選擇的字體排印方式還可協助你闡明信息層級結構、傳達重要內容并宣傳你的品牌。

SF Pro 是 visionOS 中的系統字體。如果使用 NY 字體，則需要指定想要使用的字體樣式。

visionOS 使用動態字體正文和標題樣式的更粗版本，并且引入了特大標題 1 和特大標題 2 以實現較寬的編輯風格布局。

一般而言，首選 2D 文本。字符的視覺深度越深，就越難以閱讀。雖然少量的 3D 文本可提供有趣的視覺元素來吸引用戶注意，但如果要顯示用戶需要閱讀并理解的內容，請首選包含少量或不含視覺深度的文本。

確保文本在用戶縮放時看起來美觀并一直清晰易讀。使用讓文本在原始尺寸下看起來美觀的文本樣式，然后測試其在不同縮放情況下的易讀性。

最大化文本和文本容器背景之間的對比度。系統默認以白色顯示文本，因為這種顏色往往能夠與默認系統背景材質之間形成強烈對比，從而讓文本更容易閱讀。如果想要使用不同的文本顏色，請務必在各種環境下測試。

如果需要顯示無背景文本，應考慮用粗體顯示以提高易讀性。在這種情況下，通常應該避免添加陰影來增加文本對比度。當前空間可能并未包括能在上面準確投影的視覺表面，并且你無法預測陰影的大小和密度是否能與用戶的當前環境完美適配。

盡量讓文本面向用戶。如果在空間中顯示與某一點關聯的文本，例如標記 3D 對象的文本，則不論佩戴者或對象如何移動，通常會希望文本面向佩戴者。例如，如果顯示與可見線段平行的標簽，你可能想要文本圍繞該線段旋轉。如果顯示 3D 對象的標簽，你不妨讓標簽看起來像打印在對象上或與對象表面平行。

9. 按鈕

visionOS 按鈕通常包括可幫助用戶看到它的視覺背景，還會播放聲音以在用戶與之交互時提供反饋。

visionOS 定義了三種標準按鈕形狀，每一種都支持以下標簽類型。

visionOS 按鈕使用不同的視覺樣式來體現以下每一種交互狀態：

1. 空閑
2. 懸停
3. 選定
4. 選定切換
5. 不可用

除了以上列出的五種狀態，圓形按鈕還可在用戶看向該按鈕片刻后顯示工具提示。相反，包含文本的按鈕不會顯示工具提示，因為按鈕的描述性標簽表達了其功能。

visionOS 提供了多種大小的按鈕，具體取決于形狀和內容。

首選具有可辨背景形狀和填充的按鈕。當按鈕被形狀包圍且形狀使用有對比度的背景填充時，用戶通常更易于看到這種按鈕。工具欄、上下文菜單、提醒或裝飾中的按鈕例外，此類較大組件的形狀和材質可保證按鈕輕松可見。以下指南可幫助你確保按鈕在不同環境中良好呈現：

1. 按鈕顯示在玻璃窗口頂部時，在按鈕背景中使用淺色材質。
2. 按鈕看起來懸浮在空間中時，為其背景使用玻璃材質。

避免創建使用白色背景填充和黑色文本或圖標的自定義按鈕。系統保留了這種視覺樣式以用于體現選定切換狀態。

一般首選圓形或膠囊形按鈕。用戶的視線常常會被形狀中的角吸引，因此難以保持看向形狀的中心。按鈕形狀的角越圓，用戶越容易聚焦該項目。需要單獨顯示按鈕時，首選膠囊形按鈕。

在按鈕周圍留出足夠空間，以便用戶聚焦其上。為使聚焦操作舒適，請以各中心始終至少相距 60 點的方式放置按鈕。如果按鈕大小為 60 點或更大，請在其周圍添加 4 點內邊距以防止懸停效果重疊。另外，通常最好避免在垂直堆棧或水平行中顯示小號或迷你按鈕。

如果需要在堆棧或行中顯示文本標簽按鈕，應選取正確形狀。具體而言，首選將圓角矩形用于垂直疊放的按鈕，將膠囊形用于按水平行排列的按鈕。

為自定義按鈕設計反饋聲音。visionOS 不提供觸感反饋，因此為自定義按鈕的交互提供聽覺反饋非常重要。

對于輸入來說，還有一個和按鈕類似，那就是滑塊。首選水平滑塊。相比于上下方向的手勢，用戶通常更容易執行從一側到另一側的手勢。

10. 菜單

1）上下文菜單

考慮使用上下文菜單而非面板或檢查器窗口來呈現頻繁使用的功能。盡量減少 App 打開的單獨視圖或窗口數量可幫助用戶保持空間整潔。

一般應避免上下文菜單的高度超過窗口高度。在 visionOS 中，窗口頂部和底部邊緣的上方和下方包括系統提供的組件，如窗口管理控件和“共享”菜單，因此上下文菜單過高可能會遮擋這些組件。考慮要包括的項目數時，請以用戶可能使用你 App 的方式作為指導。

例如，用戶在使用 App 完成有深度的專業任務時，通常期望花時間了解大量復雜的命令，并可能希望通過上下文菜單訪問這些命令。另一方面，用戶在使用 App 執行少數簡單操作時，可能喜歡可快速瀏覽和使用的簡短上下文菜單。

2）菜單

在 visionOS 中，菜單可以使用 iOS 和 iPadOS 定義的小或大布局樣式來顯示項目。如同在 macOS 中一樣，visionOS 窗口中的打開菜單可顯示在窗口的邊界之外。

盡可能優先在菜單控制的內容附近顯示菜單。因為用戶需要先聚焦菜單項才能輕點，如果該項目控制的內容太遠，則用戶可能會錯過項目所實現的效果。

11. 裝飾

在 visionOS 中，裝飾呈現了與窗口相關的控件和信息，而不會擠占或遮擋窗口內容。這里叫裝飾，說實話，我個人覺得不就是工具欄嗎？你覺得呢？留言區可以說一下。

裝飾懸浮在與其關聯窗口平行的平面中，并且沿著 z 軸稍微位于窗口前面。如果關聯窗口移動，裝飾也會隨之移動，以保持其相對位置不變；如果窗口內容滾動，裝飾中的控件或信息保持不變。

裝飾可以出現在窗口的任何邊緣并包含諸如按鈕、分段控件等用戶界面組件和其他視圖。系統使用裝飾來創建和管理工具欄、標簽頁欄和視頻播放控件等組件；你可以使用裝飾來創建自定義組件。

考慮使用裝飾在不會導致窗口塞滿的一致位置來呈現經常需要使用的控件或信息。因為裝飾緊靠其窗口，所以用戶始終知道其位置。例如，“音樂”使用裝飾來提供“播放中”控件，確保這些控件一直處在容易找到的可預測位置。

首選使用裝飾而非單獨的窗口來提供補充控件和信息。使用裝飾提供相關功能可避免讓用戶打開不得不單獨管理的額外窗口。

一般而言，保持裝飾可見。當用戶深度沉浸在窗口內容中（例如，觀看視頻或查看照片）時，隱藏裝飾十分合理；但在大多數情況下，用戶希望能夠持續訪問裝飾的控件。

盡量保持裝飾的寬度小于等于關聯窗口的寬度。如果裝飾比其窗口更寬，則可能會干擾窗口一邊的標簽頁欄或其他垂直內容。

考慮在裝飾中使用無邊框按鈕。裝飾的背景默認為玻璃，因此如果你將按鈕直接放在背景上，它可能不需要可見的邊框。當用戶看向裝飾中的無邊框按鈕時，系統會自動為其應用懸停效果。

使用系統提供的工具欄和標簽頁欄，除非你需要創建自定義組件。在 visionOS 中，工具欄和標簽頁欄自動顯示為裝飾，因此你無需使用裝飾來創建這些組件。

12. 工具欄

在 visionOS 中，系統提供的工具欄沿窗口的底部邊緣顯示，位于窗口管理控件的上方，處于沿 z 軸方向稍微位于窗口前方的平行平面中。

與 macOS 以外的其他平臺一樣，你需要為工具欄中的每個項目提供符號或者文本標簽。當用戶看向包含符號的工具欄項目時，visionOS 會顯示文本標簽來提供額外信息。

優先使用系統提供的工具欄。標準工具欄擁有一致且用戶熟悉的外觀，且經過優化可良好搭配眼睛和手部輸入使用。此外，系統還會自動將標準工具欄放在相對其窗口的正確位置。

避免創建垂直工具欄。在 visionOS 中，標簽頁欄是垂直的，因此呈現垂直工具欄會讓用戶混淆。

當用戶調整窗口大小時，盡量保持工具欄控件一致。和 macOS 不同，visionOS 不包括每個 App 在其中列出所有操作的菜單欄，因此不論窗口的大小如何，讓用戶通過工具欄可靠訪問基本控件非常重要。

如果 App 可以進入模態狀態，考慮提供上下文相關的工具欄控件。例如，照片編輯 App 可能進入模態狀態以幫助用戶執行多步編輯任務。在這種情形下，模態編輯視圖中的控件與主窗口中的控件不同。當 App 退出模態狀態時，務必恢復窗口的標準工具欄控件。

如有必要，考慮在工具欄中包括下拉式菜單。下拉式菜單可讓你提供與工具欄項目相關的額外操作，但難以被用戶發現且可能會導致界面雜亂。因為 visionOS 中的工具欄位于窗口的底部邊緣，下拉式菜單可能會遮擋出現在底部邊緣下方的標準窗口控件。

13. 導航欄

當內容在導航欄后面滾動時，為了維持導航欄項目的易讀性，visionOS 在導航欄背景中使用可變模糊。可變模糊將導航欄錨定在滾動內容上方，同時讓視圖的玻璃材質保持統一和完整。

優先在導航欄中使用標準組件。在 visionOS 中，導航欄圓角使用 60 點連續曲線。標準按鈕、文本欄、標題和腳注默認的圓角半徑與導航欄圓角保持同心。如果需要創建自定義組件，你可以使用以下公式來幫助確保其圓角半徑也與導航欄的圓角保持同心：

“半徑 = 60 點 - 內邊距”，其中“半徑”是自定義組件的圓角半徑，“內邊距”是頂部內邊距或底部內邊距的值（如果這些值相同）。

使用大標題幫助用戶在導航和滾動時始終清楚其所在位置。在位于導航堆棧頂部的視圖中顯示大標題，同時將標準標題居中顯示在堆棧中所有其他視圖的導航欄中，這種做法通常效果很好。當用戶開始滾動內容時，大標題會默認轉換為標準標題，并在用戶滾動到頂部時變回大標題，從而提醒當前的所在位置。

1）邊欄

如果 App 的層級結構較深，考慮在標簽頁欄的標簽頁內使用邊欄。在這種情況下，邊欄可支持在標簽頁內進行二級導航。如果使用邊欄，請務必防止在邊欄中進行的選擇操作更改當前打開的標簽頁。

2）標簽分欄

在 visionOS 中，標簽頁欄始終垂直，懸浮在相對于窗口前沿而言固定的位置。當用戶看向標簽頁欄時，它會自動展開；若要打開特定標簽頁，用戶可聚焦標簽頁并輕點。標簽頁欄展開后，它可能會暫時遮擋后面的內容。

為每個標簽頁提供符號和文本標題。標簽頁的符號在標簽頁欄中始終可見。當用戶看向標簽頁欄時，系統也會顯示標簽頁標題。雖然標簽頁欄會展開，但你需要保持標簽頁標題簡短，以便用戶可以一目了然。

14. 提醒

App 在共享空間中運行時，visionOS 會在窗口前方顯示提醒，沿 z 軸稍微偏前。如果用戶在未關閉提醒的情況下移動窗口，提醒會保持錨定到窗口。如果 App 在全空間中運行，系統會在佩戴者視場的正中顯示提醒。

如果需要在 visionOS 提醒中顯示補充視圖，請創建最大高度為 154 點、圓角半徑為 16 點的視圖。

在 visionOS App 中可見的表單會懸浮在其父窗口前方，讓父窗口變暗并成為用戶與 App 交互時的目標。

避免顯示從窗口底部邊緣出現的表單。為了幫助用戶查看表單，首選將表單放在用戶視場的中心。

呈現默認大小的表單以幫助用戶保留其環境。避免顯示覆蓋大部分或整個窗口的表單，但考慮讓用戶按需調整表單的大小。

15. 窗口

visionOS App 可使用窗口或空間容器在容器中顯示內容。一般而言，你可以使用窗口來呈現 2D 或 3D 內容，例如“郵件”中的收件箱或 Safari 瀏覽器中包含 USDZ 對象的網頁。若要呈現游戲棋盤或地球儀這樣的 3D 內容和對象，你通常可以使用空間容器。

用戶會立即熟悉 visionOS 中的窗口，因為這些窗口與其他平臺中已明確的窗口在外觀和行為上都比較類似。例如，visionOS 窗口與垂直平面對齊，可以與其他 App 窗口一起顯示在共享空間中，并提供可讓用戶移動、調整大小和關閉的系統定義控件。

窗口

VisionOS 窗口使用稱為玻璃的不可修改背景材質，可讓光線以及現實和虛擬對象透過顯示。玻璃窗口會讓用戶覺得你的內容與周圍融為一體，同時使用鏡面反射和陰影來傳達窗口的縮放和位置。使用默認樣式創建窗口時，你會自動獲得玻璃背景。

窗口的默認大小為 1306 x 734 點。窗口首次打開時，系統會將其放在佩戴者前方約兩米的位置，并看起來約有三米寬。

系統還會為標準窗口中的視圖和控件添加高光和陰影，從而讓視圖和控件看起來有深度且更有實質感，尤其是當用戶從一定角度查看窗口時。雖然你可以在標準窗口中顯示 3D 內容，但如果內容延伸出窗口表面過遠，系統會將其截斷。若要顯示更大深度的 3D 內容，請使用空間容器。

包含 3D 內容的窗口

優先使用標準窗口來呈現用戶熟悉的界面和支持熟悉的任務。為讓你的 App 容易上手，應顯示用戶慣用的界面并將更多沉浸式體驗預留給所提供的有意義內容和活動。如果想要展示游戲棋盤這樣的有界 3D 內容，應考慮使用空間容器。

選取空白區域盡可能少的初始窗口尺寸。太多空白區域會讓窗口看起來過大，同時也會遮擋用戶空間內的其他內容。

盡量使用適合窗口內容的默認形狀。例如，默認 Keynote 講演窗口很寬，因為幻燈片比較寬；默認的 Safari 瀏覽器窗口很長，因為大多數網頁長度要比寬度更大。

盡量讓用戶調整 App 窗口大小。用戶期望能夠在自定義空間時調整窗口大小。你可以根據情況設置最小和最大尺寸值，以幫助確保在用戶調整窗口大小時，窗口仍能正常使用且看起來美觀。

在 App 中發現用戶可能想要沉浸其中的時刻或內容。即使 App 主要使用窗口，也可能有在沉浸環境下能得到增強的功能。例如，在“照片” App 中，用戶可以在展開的視圖中打開全景照片，產生一種身臨其境的感覺。

始終確保窗口的可視邊界與其內含場景尺寸相符。如果場景超過窗口的可視尺寸，窗口控件會看起來位置不對且窗口外觀可能與用戶期望不一樣，從而讓其難以交互。
空間容器包含一個水平底面，幫助你顯示用戶可從任意角度查看的 3D 內容，例如地球儀。

空間容器

空間容器和窗口有一些相似之處：

1. 在共享空間中，系統都會確定空間容器和窗口的初始位置。
2. 空間容器提供的管理控件與用戶用于調整窗口位置或關閉窗口的控件相同。
3. 空間容器可以使用玻璃背景。

空間容器和窗口在系統應用的縮放類型上有所區別：visionOS 會為窗口自動使用動態縮放，而為空間容器使用固定縮放。

優先使用空間容器顯示豐富的 3D 內容。如果想要呈現用戶熟悉的、以用戶界面為中心的界面，通常最好使用窗口。

16. 手勢

visionOS 定義了兩類手勢：非直接和直接。

非直接手勢會影響當前獲得焦點的對象。例如，用戶聚焦某個控件后，可以用其中一根手指快速輕點拇指做出非直接輕點手勢來激活或選擇控件。visionOS 默認支持非直接手勢，用戶可通過這些手勢執行熟知的標準手勢。

非直接手勢通常較為快速（因為用戶可快速看向不同方向）和舒適（因為設備相機可在用戶的手放在大腿或身側時捕捉手部移動）。另外，非直接手勢可讓用戶與可聚焦的任何對象交互，無論其在空間中處于什么位置，因為用戶不必用手觸及對象。

直接手勢會影響用戶輕觸的對象（在 visionOS 中，用戶用手指靠近虛擬對象來輕觸它）。例如，用戶使用系統提供的鍵盤的其中一種方式是輕觸按鍵。直接手勢需要對象足夠靠近才能讓用戶觸及。另外，用戶必須將手（而非眼睛）移向對象，直接手勢通常更適用于并非必需進行快速精確交互的情況。

以下是用戶在 visionOS 中常用的直接手勢。

在可能的所有位置支持輕點。用戶聚焦 App 或游戲中的對象后，如果想要選擇或激活對象，輕點很可能是其執行的第一個手勢。即使你還支持自定義手勢，但在整個體驗中支持輕點可幫助用戶快速適應你的 App 或游戲。

首選非直接手勢。用戶通常可輕松執行非直接手勢，因為無需將手移到特定位置。將直接手勢保留給想邀請用戶操控附近虛擬對象的情況。

如果直接手勢是你 App 的一項功能，確保用戶使用非直接手勢也能執行相同功能。你要盡量讓用戶可靈活地選擇最適合自己的交互方法。

避免需要特定身體移動或姿勢來輸入。為需要用戶移動的輸入方式提供備選方案。
設計 visionOS 中的自定義手勢

若要創建自定義手勢，你需要 ARKit 來獲取手部姿態和關節方向等信息。你的 App 必須在全空間中運行，且必須請求用戶許可來訪問其手部相關信息后，才能在 App 中提供自定義手勢。

在自定義手勢中優先考慮舒適性。持續測試需要自定義手勢的所有交互中的人體工程學。需要用戶保持手臂舉起（即使只有一小會）的自定義交互可能會讓身體感到勞累，連續多次重復相似的動作也可能會對用戶的肌肉和關節造成壓力。

定義涉及多指或雙手的自定義手勢前應仔細考慮。執行自定義手勢對用戶來說可能有挑戰性，要求其同時用多指做出姿勢或使用雙手可能會更難。

避免創建需要用戶使用特定一只手執行的自定義手勢。期望用戶記住自定義手勢要用哪只手會增加其認知負荷，還會使你的體驗對有強勢慣用手或四肢缺陷的用戶不夠友好。

如果你決定創建自定義手勢，請確保其：

1. 具有包容性。手勢對不同的人可能有不同含義，因此請確保自定義手勢不會傳達意料之外的信息。
2. 舒適。優秀的自定義手勢應對用戶的身體來說易于執行，尤其是長時間執行。
3. 獨特。與你的 App 或游戲協調一致的自定義手勢可能更易于用戶發現和記住，同時也增添了體驗的樂趣。
4. 易于描述。如果你無法用簡單的語言和圖形描述自定義手勢，可能意味著該手勢對用戶來說也難以學習和執行。

17. 鍵盤

為想要配合 App 使用實體鍵盤的用戶做好準備。需要執行輸入大量文本的任務（如創建演示文稿）時，用戶通常更希望使用連接的鍵盤；用戶通常還希望使用鍵盤快捷鍵在整個系統和 App 中導航和發起操作。另外，許多用戶依賴實體鍵盤來使用全鍵盤控制模式或進行“旁白”交互。

18. 指針

在 visionOS 中，用戶可以外接指針設備或鍵盤，并在繼續使用其眼睛和手部的同時使用這兩種設備。如果用戶通過看向元素來聚焦其上，然后移動指針，系統會將焦點從用戶看向的元素移至指針下方的元素。你的 App 無需執行任何操作來支持這種行為。

連接指針設備后，用戶看向的區域決定了指針的上下文。例如，當用戶的視線從一個窗口移至另一個窗口時，指針的上下文會無縫轉換到新窗口。

當用戶使用所連接支持手勢的指針設備（如觸控板或鼠標）時，指針會在用戶使用手勢時隱藏，從而盡量減少視覺干擾。在這種情形下，指針一直處于隱藏狀態，直至用戶移動后重新出現在用戶看向的位置。

官方文檔參考： https://developer.apple.com/cn/design/human-interface-guidelines

今天這篇 vision OS 設計規范內容非多，辛苦自己看到這里，給自己點贊并分享給朋友們吧！

歡迎關注作者的微信公眾號：「彩云譯設計」