編者按：這篇文章來自設(shè)計師 Jishnu Hari，他結(jié)合 WWDC 后續(xù)的宣講和官方指南，梳理總結(jié)了 18 個 Vision Pro 的 UI 交互設(shè)計的原則，如果你的產(chǎn)品有打算往這片全新的領(lǐng)域遷移，那么可以先收藏這些設(shè)計原則：

Apple 的 Vision Pro 為設(shè)計師開創(chuàng)了一個全新的時代，這一點其實是令人興奮的。對于全新的空間計算，色彩、排版、尺寸、可訪問性全方面都需要遵循新的原則。下面是梳理總結(jié)的 18 個原則。

1、避免使用純色和不透明的界面

純色的窗口往往會降低用戶對于整個環(huán)境的感知，分散用戶對于背景內(nèi)容的感知。使用玻璃的材質(zhì)效果，用戶對于周圍發(fā)生的事情有更加清晰的感知。

2、文字元素始終默認是白色

白色以外的顏色和玻璃材質(zhì)的背景不太搭。使用其他顏色，可能會面臨著環(huán)境顏色和字體顏色混合的風(fēng)險。

3、盡量只在背景和控件中使用色彩

延續(xù)上一條，玻璃材質(zhì)的背景和控件有時候能夠透出背景中顏色，也就是說是玻璃顏色是「可變的」，確保文本盡量使用白色，而在需要使用顏色的背景和控件上使用彩色，可以確?？勺x性。

4、盡量不要將淺色的玻璃材質(zhì)元素堆疊在一起

Vision Pro 的界面中主要使用2種不同深淺的玻璃材質(zhì)效果，如果將兩種同樣是淺色材質(zhì)的元素堆疊在一起，可讀性和識別度會大大降低。

5、使用加粗字體獲得更好的可讀性

在 Vision Pro 當中，蘋果將正文字體從常規(guī)體（regular）提升到中等粗細（medium），標題則從半粗體（semibold）提升到了粗體（bold），在使用其他字體的時候，你也可以進行類似的處理。

6、避免將窗口界面放置得太高或者太低

頸部左右移動比上下移動更輕松。

如果你需要更大的畫布或窗口，盡量讓畫布變得更寬，而非更高。

7、將最重要的信息放置在視野中心

為了讓用戶可以更輕松地獲取內(nèi)容、進行交互且無需過多移動頭部，將重要信息放到視野中心。這還有助于避免分心，讓用戶更加專注。

8、交互元素的觸發(fā)區(qū)域至少為 60pts

交互元素的視覺尺寸可以小于 60pts，但是實際的觸發(fā)范圍至少為 60pts。

9、向用戶清楚地表明元素的狀態(tài)

控件是否是可交互的、可選擇的或者是處于非選擇狀態(tài)，這些需要透過設(shè)計呈現(xiàn)出來，確保用戶在交互過程中有所了解。比如當用戶雙眼注意到特定元素的時候，它會進入懸停狀態(tài)（hover）。

10、交互元素之間流出 4pts 的間距

留出 4pts 的間隙，是方便用戶快速掃視選中的時候，懸停效果觸發(fā)不會疊加到其他的元素上。

11、嵌套元素的圓角半徑和填充

絕大多數(shù)的控件和元素都采用的是圓角，而互相嵌套的視覺元素之間，圓角應(yīng)該是同心的，具體計算公式如上。

12、標簽欄上圖標不應(yīng)超過6個

和移動端的底部標簽欄的功能類似，用戶只需要快速點擊一下就能快速訪問特定的功能和模塊。Vision Pro 的標簽欄是垂直在側(cè)面的，它同樣是用于快速導(dǎo)航。它應(yīng)該是輕量且不礙事的。不應(yīng)該包含太多的功能。

13、Ornaments 控件和底部邊緣疊加高度為 20pts

Ornaments 控件通常包含這一窗口界面相關(guān)控件和信息，它可以承載工具欄、選項卡、播放控件等常見功能。

Ornaments 控件通常位于窗口底部，和窗口疊加的高度為 20pts，這樣看起來是一體的，但是又具備有足夠的功能性。

14、菜單和彈出框都圍繞著圖標來呈現(xiàn)

菜單和彈出框都會以圖標為中心，在周圍彈出和呈現(xiàn)，這樣符合用戶交互的自然邏輯。

15、避免使用白色填充的按鈕，除非是選中狀態(tài)

在 Vision Pro 當中，默認的按鈕的選中狀態(tài)，圖標是填充白色的，所以一般按鈕默認樣式不要設(shè)計成白色填充。

16、關(guān)閉和后退按鈕始終位于左上角

這種設(shè)計遵循的是蘋果旗下設(shè)備的一般交互模式。

17、使用調(diào)光來幫助用戶專注于內(nèi)容

用戶周圍的環(huán)境是不可預(yù)測的，可以借助調(diào)暗的方式，來幫助用戶將注意力集中到特定的內(nèi)容上。

18、使用環(huán)境從 AR 切換到 VR

可以將用戶所處的真實環(huán)境被虛擬環(huán)境所替代，結(jié)合用戶所使用的應(yīng)用和內(nèi)容，讓用戶擁有更加身臨其境的體會。

參考來源

https://developer.apple.com/videos/play/wwdc2023/10076
https://developer.apple.com/videos/play/wwdc2023/10073
https://developer.apple.com/videos/play/wwdc2023/10078

另外，還有一套 Figma 社區(qū)的非官方 Vision Pro UI kit：

https://www.figma.com/community/file/1254074278921038081

作者：陳子木