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

1 評(píng)論 7826 瀏覽 58 收藏 66 分鐘

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

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

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

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

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

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

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

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

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

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

共18個(gè)分類,目錄:

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

一、圖標(biāo)

1. App圖標(biāo)

visionOS App 圖標(biāo)呈圓形,并包括一個(gè)背景層及其上方的一至兩層,以生成在用戶查看時(shí)會(huì)巧妙展開(kāi)的三維對(duì)象。

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

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

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

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

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

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

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

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

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

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

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

保持非背景層中的不同形狀或圖像靠近中心。圓形遮罩可能會(huì)截?cái)噙^(guò)于靠近邊緣的形狀或圖像,導(dǎo)致形狀看起來(lái)偏離中心并破壞圖標(biāo)的三維外觀。

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

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

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

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

2. 系統(tǒng)圖標(biāo)

有效圖標(biāo)能以用戶立即理解的方式表達(dá)單個(gè)概念。

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

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

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

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

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

并使每個(gè)圖標(biāo)中的線條粗細(xì)相同

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

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

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

非對(duì)稱圖標(biāo)可能會(huì)看似偏離中心,即使實(shí)則不然

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

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

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

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

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

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

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

雖然你可能想要提供選中和未選中圖標(biāo)以用在 visionOS 中的工具欄或?qū)Ш綑?,但更常?jiàn)的是使用根據(jù)其狀態(tài)更改背景外觀的按鈕。

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

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

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

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

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

二、顏色

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

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

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

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

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

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

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

三、圖像

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

1. 分辨率

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

2. 縮放倍率

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

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

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

四、沉浸式體驗(yàn)

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

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

沉浸和穿透

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

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

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

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

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

五、材質(zhì)

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

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

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

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

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

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

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

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

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

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

六、動(dòng)態(tài)效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

盡量避免在用戶視場(chǎng)的邊緣顯示動(dòng)態(tài)效果。用戶對(duì)于發(fā)生在邊緣視覺(jué)處的動(dòng)態(tài)效果尤其敏感。邊緣動(dòng)態(tài)效果除了會(huì)分散用戶注意力外,甚至還會(huì)引起不適,因?yàn)樗鼤?huì)讓用戶感到自身或周圍在移動(dòng)。

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

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

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

七、空間布局

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

1. 視場(chǎng)

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

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

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

垂直觀看:

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

斜角觀看:

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

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

2. 深度

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

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

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

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

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

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

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

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

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

3. 縮放

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

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

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

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

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

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

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

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

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

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

讓用戶通過(guò)極少量或無(wú)需身體活動(dòng)來(lái)使用你的 App。除非某些身體活動(dòng)對(duì)于體驗(yàn)不可或缺,否則請(qǐng)幫助用戶在保持不動(dòng)的情況下享受體驗(yàn)。

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

4. 界面布局

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

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

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

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

八、字體

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

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

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

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

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

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

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

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

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

盡量讓文本面向用戶。如果在空間中顯示與某一點(diǎn)關(guān)聯(lián)的文本,例如標(biāo)記 3D 對(duì)象的文本,則不論佩戴者或?qū)ο笕绾我苿?dòng),通常會(huì)希望文本面向佩戴者。例如,如果顯示與可見(jiàn)線段平行的標(biāo)簽,你可能想要文本圍繞該線段旋轉(zhuǎn)。如果顯示 3D 對(duì)象的標(biāo)簽,你不妨讓標(biāo)簽看起來(lái)像打印在對(duì)象上或與對(duì)象表面平行。

九、按鈕

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

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

visionOS 定義了三種標(biāo)準(zhǔn)按鈕形狀,每一種都支持以下標(biāo)簽類型。

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

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

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

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

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

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

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

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

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

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

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

在按鈕周圍留出足夠空間,以便用戶聚焦其上。為使聚焦操作舒適,請(qǐng)以各中心始終至少相距 60 點(diǎn)的方式放置按鈕。如果按鈕大小為 60 點(diǎn)或更大,請(qǐng)?jiān)谄渲車砑?4 點(diǎn)內(nèi)邊距以防止懸停效果重疊。另外,通常最好避免在垂直堆棧或水平行中顯示小號(hào)或迷你按鈕。

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

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

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

十、菜單

1. 上下文菜單

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

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

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

2. 菜單

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

盡可能優(yōu)先在菜單控制的內(nèi)容附近顯示菜單。因?yàn)橛脩粜枰染劢共藛雾?xiàng)才能輕點(diǎn),如果該項(xiàng)目控制的內(nèi)容太遠(yuǎn),則用戶可能會(huì)錯(cuò)過(guò)項(xiàng)目所實(shí)現(xiàn)的效果。

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

十一、裝飾

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

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

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

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

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

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

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

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

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

使用系統(tǒng)提供的工具欄和標(biāo)簽頁(yè)欄,除非你需要?jiǎng)?chuàng)建自定義組件。在 visionOS 中,工具欄和標(biāo)簽頁(yè)欄自動(dòng)顯示為裝飾,因此你無(wú)需使用裝飾來(lái)創(chuàng)建這些組件。

十二、工具欄

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

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

與 macOS 以外的其他平臺(tái)一樣,你需要為工具欄中的每個(gè)項(xiàng)目提供符號(hào)或者文本標(biāo)簽。當(dāng)用戶看向包含符號(hào)的工具欄項(xiàng)目時(shí),visionOS 會(huì)顯示文本標(biāo)簽來(lái)提供額外信息。

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

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

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

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

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

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

十三、導(dǎo)航欄

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

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

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

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

1. 邊欄

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

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

2. 標(biāo)簽分欄

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

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

為每個(gè)標(biāo)簽頁(yè)提供符號(hào)和文本標(biāo)題。標(biāo)簽頁(yè)的符號(hào)在標(biāo)簽頁(yè)欄中始終可見(jiàn)。當(dāng)用戶看向標(biāo)簽頁(yè)欄時(shí),系統(tǒng)也會(huì)顯示標(biāo)簽頁(yè)標(biāo)題。雖然標(biāo)簽頁(yè)欄會(huì)展開(kāi),但你需要保持標(biāo)簽頁(yè)標(biāo)題簡(jiǎn)短,以便用戶可以一目了然。

十四、提醒

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

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

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

在 visionOS App 中可見(jiàn)的表單會(huì)懸浮在其父窗口前方,讓父窗口變暗并成為用戶與 App 交互時(shí)的目標(biāo)。

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

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

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

十五、窗口

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

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

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

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

1. 窗口

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

窗口的默認(rèn)大小為 1306 x 734 點(diǎn)。窗口首次打開(kāi)時(shí),系統(tǒng)會(huì)將其放在佩戴者前方約兩米的位置,并看起來(lái)約有三米寬。

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

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

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

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

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

盡量使用適合窗口內(nèi)容的默認(rèn)形狀。例如,默認(rèn) Keynote 講演窗口很寬,因?yàn)榛脽羝容^寬;默認(rèn)的 Safari 瀏覽器窗口很長(zhǎng),因?yàn)榇蠖鄶?shù)網(wǎng)頁(yè)長(zhǎng)度要比寬度更大。

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

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

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

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

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

2. 空間容器

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

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

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

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

十六、手勢(shì)

visionOS 定義了兩類手勢(shì):非直接和直接。

非直接手勢(shì)會(huì)影響當(dāng)前獲得焦點(diǎn)的對(duì)象。例如,用戶聚焦某個(gè)控件后,可以用其中一根手指快速輕點(diǎn)拇指做出非直接輕點(diǎn)手勢(shì)來(lái)激活或選擇控件。visionOS 默認(rèn)支持非直接手勢(shì),用戶可通過(guò)這些手勢(shì)執(zhí)行熟知的標(biāo)準(zhǔn)手勢(shì)。

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

非直接手勢(shì)通常較為快速(因?yàn)橛脩艨煽焖倏聪虿煌较颍┖褪孢m(因?yàn)樵O(shè)備相機(jī)可在用戶的手放在大腿或身側(cè)時(shí)捕捉手部移動(dòng))。另外,非直接手勢(shì)可讓用戶與可聚焦的任何對(duì)象交互,無(wú)論其在空間中處于什么位置,因?yàn)橛脩舨槐赜檬钟|及對(duì)象。

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

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

以下是用戶在 visionOS 中常用的直接手勢(shì)。

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

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

首選非直接手勢(shì)。用戶通??奢p松執(zhí)行非直接手勢(shì),因?yàn)闊o(wú)需將手移到特定位置。將直接手勢(shì)保留給想邀請(qǐng)用戶操控附近虛擬對(duì)象的情況。

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

避免需要特定身體移動(dòng)或姿勢(shì)來(lái)輸入。為需要用戶移動(dòng)的輸入方式提供備選方案。

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

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

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

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

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

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

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

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

十七、鍵盤

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

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

十八、指針

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

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

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

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

專欄作家

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

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

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

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

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

    來(lái)自北京 回復(fù)