Apple Vision OS最全設(shè)計規(guī)范

1 評論 8069 瀏覽 58 收藏 66 分鐘

當(dāng)你需要著手為 visionOS 設(shè)計相應(yīng)的APP或其他應(yīng)用時,你要怎么做,才能為用戶帶來視覺感受和操作體驗上的完善?或許你需要先了解 visionOS 的有哪些設(shè)計規(guī)范。本篇文章里,作者就匯總分析了 visionOS 的設(shè)計規(guī)范,一起來看看吧。

前幾期和大家分享了一些visionOS設(shè)計亮點以及設(shè)計原則解讀,有人說想看官方的UI設(shè)計規(guī)范,官方其實給出了,但分散在其他系統(tǒng)規(guī)范中。

彩云把這些零碎的設(shè)計規(guī)范做一個匯總整理,摘取其中最精華的部分與大家分享。這篇文章將會是未來必看的設(shè)計規(guī)范,文章算是今年以來寫過最長的一篇(差不多有1.7萬字)。

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

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

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

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

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

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

上面是一些大的設(shè)計特征,下面會介紹一些基礎(chǔ)的設(shè)計規(guī)則,便于做好具體的設(shè)計。

共18個分類,目錄:

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

一、圖標

1. App圖標

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

Apple Vision OS最全設(shè)計規(guī)范

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

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

為每層提供正方形圖像。系統(tǒng)會使用圓形遮罩裁剪 App 圖標的所有層,因此提供已裁剪的層可能會對結(jié)果產(chǎn)生負面影響。

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

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

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

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

Apple Vision OS最全設(shè)計規(guī)范

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

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

VisionOS App 圖標尺寸。創(chuàng)建大小為 1024×1024 個像素的 App 圖標以在主屏幕視圖中顯示。

2. 系統(tǒng)圖標

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

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

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

Apple Vision OS最全設(shè)計規(guī)范

為了幫助實現(xiàn)視覺一致性,可根據(jù)需要調(diào)整單個圖標的大小

Apple Vision OS最全設(shè)計規(guī)范

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

3)通常使界面圖標與相鄰文本在線條粗細上相一致。在這兩者中使用粗細相同的線條可讓內(nèi)容在外觀和強調(diào)程度上保持一致,除非你想要強調(diào)圖標或文本。

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

Apple Vision OS最全設(shè)計規(guī)范

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

在此類情況下,你可以稍微調(diào)整圖標的位置,使其在視覺上達到居中。當(dāng)創(chuàng)建的資源通過在界面圖標周圍添加內(nèi)邊距的方式調(diào)整(如下方右圖所示)后,你可以按幾何圖形居中該資源,從而在視覺上居中該圖標。

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

視覺上居中之前(左)與視覺上居中之后(右)

在視覺上居中所需的調(diào)整通常非常小,但卻對 App 的外觀影響很大。

5)僅在必要時才提供界面圖標的已選狀態(tài)版本。控件和區(qū)域會自動指示所選內(nèi)容,因此無需為用于此處的圖標提供已選或未選狀態(tài)資源。VisionOS 中的邊欄和標簽頁欄通過應(yīng)用 App 的強調(diào)色或添加背景外觀來傳達選擇狀態(tài)。

雖然你可能想要提供選中和未選中圖標以用在 visionOS 中的工具欄或?qū)Ш綑冢R姷氖鞘褂酶鶕?jù)其狀態(tài)更改背景外觀的按鈕。

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

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

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

9)為自定義的界面圖標提供備選文本標簽。備選文本標簽(或輔助功能描述)是不可見的,但可讓“旁白”以語音方式描述屏幕內(nèi)容,從而使視障用戶的導(dǎo)覽更簡單。

10)避免使用 Apple 硬件產(chǎn)品的模型。硬件設(shè)計往往會頻繁變化,可能會使界面圖標和其他內(nèi)容顯得過時。

二、顏色

巧妙地使用顏色可以增強溝通感,體現(xiàn)品牌形象,提供視覺連續(xù)性,傳達狀態(tài)和反饋,以及幫助用戶理解信息。

1)visionOS 不提供深色模式,使用稱為玻璃的材質(zhì),可自動適應(yīng)周圍對象的亮度和顏色。

2)在 visionOS 中,顏色可能根據(jù)用戶現(xiàn)實環(huán)境中墻壁或物體的顏色及其反射光線的方式而看起來不同。

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

4)優(yōu)先在粗體文本和較大區(qū)域中使用顏色。在較細文本或較小區(qū)域中使用顏色可能會使其更難看到和理解。

5)visionOS 系統(tǒng)顏色。

Apple Vision OS最全設(shè)計規(guī)范

三、圖像

為了確保插圖在所有受支持設(shè)備上保持美觀,請了解系統(tǒng)如何顯示內(nèi)容,以及如何以適當(dāng)?shù)目s放系數(shù)呈現(xiàn)藝術(shù)感。

1. 分辨率

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

2. 縮放倍率

Apple Vision OS最全設(shè)計規(guī)范

在 visionOS 中,當(dāng)系統(tǒng)根據(jù)用戶查看的距離和角度對圖像進行動態(tài)縮放時,圖像所占面積通常會發(fā)生變化。這意味著圖像無法像在其他平臺中那樣與屏幕像素 1:1 對應(yīng)。

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

四、沉浸式體驗

在 visionOS 中,你可以設(shè)計延伸出窗口和空間容器的 App 和游戲,并讓用戶沉浸在你的內(nèi)容中。

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

沉浸和穿透

visionOS 支持一定范圍的沉浸程度,可幫助你向用戶提供多種 App 或游戲體驗方式。在此范圍內(nèi),用戶現(xiàn)實環(huán)境的可見度在體驗的沉浸效果方面起著關(guān)鍵作用。

Apple Vision OS最全設(shè)計規(guī)范

佩戴 Apple Vision Pro 時,用戶可使用穿透看到現(xiàn)實環(huán)境,此功能提供了來自設(shè)備外部相機的實時視頻。

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

Apple Vision OS最全設(shè)計規(guī)范

五、材質(zhì)

在 Apple 平臺上,材質(zhì)可通過模糊和修改底層視覺內(nèi)容的顏色值來加入半透明效果。

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

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

2)通過在材質(zhì)頂層使用虛化顏色來幫助確保易讀性。使用系統(tǒng)定義的虛化顏色時,你無需擔(dān)心顏色在不同環(huán)境中可能會太暗、太亮、太飽和或?qū)Ρ榷忍偷膯栴}。visionOS 系統(tǒng)使用與 macOS 所用相同的深色虛化顏色,并自動調(diào)整這些顏色以在不同視覺環(huán)境下保持對比度。

3)在 visionOS 中,窗口通常使用系統(tǒng)定義、被稱為玻璃的不可修改材質(zhì),通過讓光線、當(dāng)前環(huán)境、虛擬內(nèi)容和用戶周圍的對象透過來幫助保持用戶與現(xiàn)實世界的聯(lián)系。玻璃是一種適應(yīng)性材質(zhì),可限制背景顏色信息范圍以便窗口可持續(xù)為 App 內(nèi)容提供對比度,同時根據(jù)用戶的現(xiàn)實環(huán)境和其他虛擬內(nèi)容在顏色上變得更淺或更深。

Apple Vision OS最全設(shè)計規(guī)范

4)visionOS 沒有專門的深色模式設(shè)置。相反,玻璃會自動適配對象的亮度和其后面的顏色。

5)如有必要,請選取可協(xié)助形成視覺分離或表示 App 中交互性的材質(zhì)。如果需要創(chuàng)建自定義組件,你可能需要為其指定系統(tǒng)材質(zhì)。使用以下示例作為指導(dǎo)。

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

6)visionOS App 默認使用淺色內(nèi)容,但也會使用白色文本。

六、動態(tài)效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用旋轉(zhuǎn)動態(tài)效果時應(yīng)柔和。通過旋轉(zhuǎn)相機或者旋轉(zhuǎn)用戶周圍的大型虛擬對象來旋轉(zhuǎn)虛擬世界時,尤其是當(dāng)旋轉(zhuǎn)速度過快或者持續(xù)時間過長時,旋轉(zhuǎn)可能會擾亂用戶的穩(wěn)定感。相反,在快速淡出期間,應(yīng)考慮使用瞬時方向變化。

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

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

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

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

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

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

七、空間布局

空間布局技術(shù)幫助你充分利用 Apple Vision Pro 的無邊際畫布,并以極具吸引力且舒適的方式呈現(xiàn)你的內(nèi)容。

1. 視場

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

Apple Vision OS最全設(shè)計規(guī)范

將重要內(nèi)容居中放在視場內(nèi)。visionOS 默認會直接在用戶面前啟動 App,將其放在用戶的視場中。當(dāng)用戶需要長時間與內(nèi)容交互時,你應(yīng)該將內(nèi)容舒適地放在其視場內(nèi)。

垂直觀看:

Apple Vision OS最全設(shè)計規(guī)范

斜角觀看:

Apple Vision OS最全設(shè)計規(guī)范

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

2. 深度

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

Apple Vision OS最全設(shè)計規(guī)范

你可以在任意位置顯示 3D 對象,也可以使用顯示 3D 內(nèi)容的空間容器組件??臻g容器與窗口類似,但沒有可見的框架。

Apple Vision OS最全設(shè)計規(guī)范

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

使用深度傳達層級結(jié)構(gòu)。深度可幫助對象看起來相較于周圍內(nèi)容更為突出,讓其更加顯而易見。用戶通常也會注意到深度變化:例如,當(dāng)表單顯示在窗口上方時,窗口會沿著 z 軸后退,從而讓表單浮現(xiàn)出來并在視覺上更為突出。

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

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

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

3. 縮放

visionOS 定義了兩種類型的縮放,既保留了深度的外觀又優(yōu)化了可用性。

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

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

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

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

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

借助數(shù)碼旋鈕來幫助用戶將窗口重新放在視場中間。當(dāng)用戶移動或轉(zhuǎn)動頭部時,內(nèi)容可能不再出現(xiàn)在用戶期望的位置。如果出現(xiàn)這種情況,用戶可以按下數(shù)碼旋鈕將面前的內(nèi)容重新放在中間。你的 App 無需執(zhí)行任何操作來支持這種行為。

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

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

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

4. 界面布局

保持窗口內(nèi)容位于其邊界內(nèi)。在 visionOS 中,系統(tǒng)會在 XY 平面中窗口邊界之外顯示窗口控件。例如,“共享”菜單顯示在窗口上方,用于調(diào)整窗口大小、移動和關(guān)閉窗口的控件顯示在其下方。讓 2D 或 3D 內(nèi)容侵占這些區(qū)域可能導(dǎo)致用戶難以使用系統(tǒng)提供的控件(尤其是窗口下方的控件)。

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

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

如果需要顯示不屬于窗口內(nèi)部的額外控件,則使用裝飾。裝飾可讓你提供與窗口在視覺上保持關(guān)聯(lián)但與系統(tǒng)提供的控件互不干擾的 App 控件。例如,窗口的工具欄和標簽頁欄會顯示為裝飾。

八、字體

除了確保文本清晰易讀外,你選擇的字體排印方式還可協(xié)助你闡明信息層級結(jié)構(gòu)、傳達重要內(nèi)容并宣傳你的品牌。

SF Pro 是 visionOS 中的系統(tǒng)字體。如果使用 NY 字體,則需要指定想要使用的字體樣式。

visionOS 使用動態(tài)字體正文和標題樣式的更粗版本,并且引入了特大標題 1 和特大標題 2 以實現(xiàn)較寬的編輯風(fēng)格布局。

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

Apple Vision OS最全設(shè)計規(guī)范

Apple Vision OS最全設(shè)計規(guī)范

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

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

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

盡量讓文本面向用戶。如果在空間中顯示與某一點關(guān)聯(lián)的文本,例如標記 3D 對象的文本,則不論佩戴者或?qū)ο笕绾我苿樱ǔM谋久嫦蚺宕髡?。例如,如果顯示與可見線段平行的標簽,你可能想要文本圍繞該線段旋轉(zhuǎn)。如果顯示 3D 對象的標簽,你不妨讓標簽看起來像打印在對象上或與對象表面平行。

九、按鈕

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

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

visionOS 按鈕使用不同的視覺樣式來體現(xiàn)以下每一種交互狀態(tài):

  • 空閑
  • 懸停
  • 選定
  • 選定切換
  • 不可用

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

Apple Vision OS最全設(shè)計規(guī)范

visionOS 提供了多種大小的按鈕,具體取決于形狀和內(nèi)容。

Apple Vision OS最全設(shè)計規(guī)范

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

  • 按鈕顯示在玻璃窗口頂部時,在按鈕背景中使用淺色材質(zhì)。
  • 按鈕看起來懸浮在空間中時,為其背景使用玻璃材質(zhì)。

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

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

在按鈕周圍留出足夠空間,以便用戶聚焦其上。為使聚焦操作舒適,請以各中心始終至少相距 60 點的方式放置按鈕。如果按鈕大小為 60 點或更大,請在其周圍添加 4 點內(nèi)邊距以防止懸停效果重疊。另外,通常最好避免在垂直堆?;蛩叫兄酗@示小號或迷你按鈕。

如果需要在堆?;蛐兄酗@示文本標簽按鈕,應(yīng)選取正確形狀。具體而言,首選將圓角矩形用于垂直疊放的按鈕,將膠囊形用于按水平行排列的按鈕。

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

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

十、菜單

1. 上下文菜單

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

一般應(yīng)避免上下文菜單的高度超過窗口高度。在 visionOS 中,窗口頂部和底部邊緣的上方和下方包括系統(tǒng)提供的組件,如窗口管理控件和“共享”菜單,因此上下文菜單過高可能會遮擋這些組件??紤]要包括的項目數(shù)時,請以用戶可能使用你 App 的方式作為指導(dǎo)。

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

2. 菜單

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

盡可能優(yōu)先在菜單控制的內(nèi)容附近顯示菜單。因為用戶需要先聚焦菜單項才能輕點,如果該項目控制的內(nèi)容太遠,則用戶可能會錯過項目所實現(xiàn)的效果。

Apple Vision OS最全設(shè)計規(guī)范

十一、裝飾

在 visionOS 中,裝飾呈現(xiàn)了與窗口相關(guān)的控件和信息,而不會擠占或遮擋窗口內(nèi)容。這里叫裝飾,說實話,我個人覺得不就是工具欄嗎?你覺得呢?留言區(qū)可以說一下。

Apple Vision OS最全設(shè)計規(guī)范

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

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

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

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

一般而言,保持裝飾可見。當(dāng)用戶深度沉浸在窗口內(nèi)容中(例如,觀看視頻或查看照片)時,隱藏裝飾十分合理;但在大多數(shù)情況下,用戶希望能夠持續(xù)訪問裝飾的控件。

盡量保持裝飾的寬度小于等于關(guān)聯(lián)窗口的寬度。如果裝飾比其窗口更寬,則可能會干擾窗口一邊的標簽頁欄或其他垂直內(nèi)容。

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

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

十二、工具欄

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

Apple Vision OS最全設(shè)計規(guī)范

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

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

Apple Vision OS最全設(shè)計規(guī)范

避免創(chuàng)建垂直工具欄。在 visionOS 中,標簽頁欄是垂直的,因此呈現(xiàn)垂直工具欄會讓用戶混淆。

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

如果 App 可以進入模態(tài)狀態(tài),考慮提供上下文相關(guān)的工具欄控件。例如,照片編輯 App 可能進入模態(tài)狀態(tài)以幫助用戶執(zhí)行多步編輯任務(wù)。在這種情形下,模態(tài)編輯視圖中的控件與主窗口中的控件不同。當(dāng) App 退出模態(tài)狀態(tài)時,務(wù)必恢復(fù)窗口的標準工具欄控件。

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

十三、導(dǎo)航欄

當(dāng)內(nèi)容在導(dǎo)航欄后面滾動時,為了維持導(dǎo)航欄項目的易讀性,visionOS 在導(dǎo)航欄背景中使用可變模糊??勺兡:龑?dǎo)航欄錨定在滾動內(nèi)容上方,同時讓視圖的玻璃材質(zhì)保持統(tǒng)一和完整。

優(yōu)先在導(dǎo)航欄中使用標準組件。在 visionOS 中,導(dǎo)航欄圓角使用 60 點連續(xù)曲線。標準按鈕、文本欄、標題和腳注默認的圓角半徑與導(dǎo)航欄圓角保持同心。如果需要創(chuàng)建自定義組件,你可以使用以下公式來幫助確保其圓角半徑也與導(dǎo)航欄的圓角保持同心:

“半徑 = 60 點 – 內(nèi)邊距”,其中“半徑”是自定義組件的圓角半徑,“內(nèi)邊距”是頂部內(nèi)邊距或底部內(nèi)邊距的值(如果這些值相同)。

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

1. 邊欄

如果 App 的層級結(jié)構(gòu)較深,考慮在標簽頁欄的標簽頁內(nèi)使用邊欄。在這種情況下,邊欄可支持在標簽頁內(nèi)進行二級導(dǎo)航。如果使用邊欄,請務(wù)必防止在邊欄中進行的選擇操作更改當(dāng)前打開的標簽頁。

Apple Vision OS最全設(shè)計規(guī)范

2. 標簽分欄

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

Apple Vision OS最全設(shè)計規(guī)范

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

十四、提醒

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

Apple Vision OS最全設(shè)計規(guī)范

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

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

Apple Vision OS最全設(shè)計規(guī)范

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

呈現(xiàn)默認大小的表單以幫助用戶保留其環(huán)境。避免顯示覆蓋大部分或整個窗口的表單,但考慮讓用戶按需調(diào)整表單的大小。

十五、窗口

visionOS App 可使用窗口或空間容器在容器中顯示內(nèi)容。一般而言,你可以使用窗口來呈現(xiàn) 2D 或 3D 內(nèi)容,例如“郵件”中的收件箱或 Safari 瀏覽器中包含 USDZ 對象的網(wǎng)頁。若要呈現(xiàn)游戲棋盤或地球儀這樣的 3D 內(nèi)容和對象,你通??梢允褂每臻g容器。

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

1. 窗口

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

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

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

Apple Vision OS最全設(shè)計規(guī)范

包含 3D 內(nèi)容的窗口

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

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

盡量使用適合窗口內(nèi)容的默認形狀。例如,默認 Keynote 講演窗口很寬,因為幻燈片比較寬;默認的 Safari 瀏覽器窗口很長,因為大多數(shù)網(wǎng)頁長度要比寬度更大。

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

在 App 中發(fā)現(xiàn)用戶可能想要沉浸其中的時刻或內(nèi)容。即使 App 主要使用窗口,也可能有在沉浸環(huán)境下能得到增強的功能。例如,在“照片” App 中,用戶可以在展開的視圖中打開全景照片,產(chǎn)生一種身臨其境的感覺。

始終確保窗口的可視邊界與其內(nèi)含場景尺寸相符。如果場景超過窗口的可視尺寸,窗口控件會看起來位置不對且窗口外觀可能與用戶期望不一樣,從而讓其難以交互。

空間容器包含一個水平底面,幫助你顯示用戶可從任意角度查看的 3D 內(nèi)容,例如地球儀。

Apple Vision OS最全設(shè)計規(guī)范

2. 空間容器

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

  • 在共享空間中,系統(tǒng)都會確定空間容器和窗口的初始位置。
  • 空間容器提供的管理控件與用戶用于調(diào)整窗口位置或關(guān)閉窗口的控件相同。
  • 空間容器可以使用玻璃背景。

空間容器和窗口在系統(tǒng)應(yīng)用的縮放類型上有所區(qū)別:visionOS 會為窗口自動使用動態(tài)縮放,而為空間容器使用固定縮放。

優(yōu)先使用空間容器顯示豐富的 3D 內(nèi)容。如果想要呈現(xiàn)用戶熟悉的、以用戶界面為中心的界面,通常最好使用窗口。

十六、手勢

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

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

Apple Vision OS最全設(shè)計規(guī)范

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

直接手勢會影響用戶輕觸的對象(在 visionOS 中,用戶用手指靠近虛擬對象來輕觸它)。例如,用戶使用系統(tǒng)提供的鍵盤的其中一種方式是輕觸按鍵。直接手勢需要對象足夠靠近才能讓用戶觸及。另外,用戶必須將手(而非眼睛)移向?qū)ο螅苯邮謩萃ǔ8m用于并非必需進行快速精確交互的情況。

Apple Vision OS最全設(shè)計規(guī)范

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

Apple Vision OS最全設(shè)計規(guī)范

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

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

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

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

設(shè)計 visionOS 中的自定義手勢

若要創(chuàng)建自定義手勢,你需要 ARKit 來獲取手部姿態(tài)和關(guān)節(jié)方向等信息。你的 App 必須在全空間中運行,且必須請求用戶許可來訪問其手部相關(guān)信息后,才能在 App 中提供自定義手勢。

Apple Vision OS最全設(shè)計規(guī)范

在自定義手勢中優(yōu)先考慮舒適性。持續(xù)測試需要自定義手勢的所有交互中的人體工程學(xué)。需要用戶保持手臂舉起(即使只有一小會)的自定義交互可能會讓身體感到勞累,連續(xù)多次重復(fù)相似的動作也可能會對用戶的肌肉和關(guān)節(jié)造成壓力。

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

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

如果你決定創(chuàng)建自定義手勢,請確保其:

  • 具有包容性。手勢對不同的人可能有不同含義,因此請確保自定義手勢不會傳達意料之外的信息。
  • 舒適。優(yōu)秀的自定義手勢應(yīng)對用戶的身體來說易于執(zhí)行,尤其是長時間執(zhí)行。
  • 獨特。與你的 App 或游戲協(xié)調(diào)一致的自定義手勢可能更易于用戶發(fā)現(xiàn)和記住,同時也增添了體驗的樂趣。
  • 易于描述。如果你無法用簡單的語言和圖形描述自定義手勢,可能意味著該手勢對用戶來說也難以學(xué)習(xí)和執(zhí)行。

十七、鍵盤

為想要配合 App 使用實體鍵盤的用戶做好準備。需要執(zhí)行輸入大量文本的任務(wù)(如創(chuàng)建演示文稿)時,用戶通常更希望使用連接的鍵盤;用戶通常還希望使用鍵盤快捷鍵在整個系統(tǒng)和 App 中導(dǎo)航和發(fā)起操作。另外,許多用戶依賴實體鍵盤來使用全鍵盤控制模式或進行“旁白”交互。

Apple Vision OS最全設(shè)計規(guī)范

十八、指針

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

連接指針設(shè)備后,用戶看向的區(qū)域決定了指針的上下文。例如,當(dāng)用戶的視線從一個窗口移至另一個窗口時,指針的上下文會無縫轉(zhuǎn)換到新窗口。

當(dāng)用戶使用所連接支持手勢的指針設(shè)備(如觸控板或鼠標)時,指針會在用戶使用手勢時隱藏,從而盡量減少視覺干擾。在這種情形下,指針一直處于隱藏狀態(tài),直至用戶移動后重新出現(xiàn)在用戶看向的位置。

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

專欄作家

彩云Sky;微信公眾號:彩云譯設(shè)計(ID:caiyunyisheji),人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設(shè)計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 最少兩三年內(nèi) 不考慮 發(fā)展好了 就買以后的升級款。
    初代就給那些測評博主玩好了,普通用戶買來就屬于花大腦袋錢。

    來自北京 回復(fù)