設計 Vision Pro 的 UI和交互時，需要牢記的 18 個原則
編者按：這篇文章來自設計師?Jishnu Hari，他結合 WWDC 后續(xù)的宣講和官方指南，梳理總結了 18 個?Vision Pro?的 UI 交互設計的原則，如果你的產(chǎn)品有打算往這片全新的領域遷移，那么可以先收藏這些設計原則：
Apple 的 Vision Pro 為設計師開創(chuàng)了一個全新的時代，這一點其實是令人興奮的。對于全新的空間計算，色彩、排版、尺寸、可訪問性全方面都需要遵循新的原則。下面是梳理總結的 18 個原則。
純色的窗口往往會降低用戶對于整個環(huán)境的感知，分散用戶對于背景內(nèi)容的感知。使用玻璃的材質(zhì)效果，用戶對于周圍發(fā)生的事情有更加清晰的感知。
白色以外的顏色和玻璃材質(zhì)的背景不太搭。使用其他顏色，可能會面臨著環(huán)境顏色和字體顏色混合的風險。
延續(xù)上一條，玻璃材質(zhì)的背景和控件有時候能夠透出背景中顏色，也就是說是玻璃顏色是「可變的」，確保文本盡量使用白色，而在需要使用顏色的背景和控件上使用彩色，可以確保可讀性。
Vision Pro 的界面中主要使用2種不同深淺的玻璃材質(zhì)效果，如果將兩種同樣是淺色材質(zhì)的元素堆疊在一起，可讀性和識別度會大大降低。
在 Vision Pro 當中，蘋果將正文字體從常規(guī)體（regular）提升到中等粗細（medium），標題則從半粗體（semibold）提升到了粗體（bold），在使用其他字體的時候，你也可以進行類似的處理。
頸部左右移動比上下移動更輕松。
如果你需要更大的畫布或窗口，盡量讓畫布變得更寬，而非更高。
為了讓用戶可以更輕松地獲取內(nèi)容、進行交互且無需過多移動頭部，將重要信息放到視野中心。這還有助于避免分心，讓用戶更加專注。
交互元素的視覺尺寸可以小于 60pts，但是實際的觸發(fā)范圍至少為 60pts。
控件是否是可交互的、可選擇的或者是處于非選擇狀態(tài)，這些需要透過設計呈現(xiàn)出來，確保用戶在交互過程中有所了解。比如當用戶雙眼注意到特定元素的時候，它會進入懸停狀態(tài)（hover）。
留出 4pts 的間隙，是方便用戶快速掃視選中的時候，懸停效果觸發(fā)不會疊加到其他的元素上。
絕大多數(shù)的控件和元素都采用的是圓角，而互相嵌套的視覺元素之間，圓角應該是同心的，具體計算公式如上。
和移動端的底部標簽欄的功能類似，用戶只需要快速點擊一下就能快速訪問特定的功能和模塊。Vision Pro 的標簽欄是垂直在側面的，它同樣是用于快速導航。它應該是輕量且不礙事的。不應該包含太多的功能。
Ornaments 控件通常包含這一窗口界面相關控件和信息，它可以承載工具欄、選項卡、播放控件等常見功能。
Ornaments 控件通常位于窗口底部，和窗口疊加的高度為 20pts，這樣看起來是一體的，但是又具備有足夠的功能性。
菜單和彈出框都會以圖標為中心，在周圍彈出和呈現(xiàn)，這樣符合用戶交互的自然邏輯。
在 Vision Pro 當中，默認的按鈕的選中狀態(tài)，圖標是填充白色的，所以一般按鈕默認樣式不要設計成白色填充。
這種設計遵循的是蘋果旗下設備的一般交互模式。
用戶周圍的環(huán)境是不可預測的，可以借助調(diào)暗的方式，來幫助用戶將注意力集中到特定的內(nèi)容上。
可以將用戶所處的真實環(huán)境被虛擬環(huán)境所替代，結合用戶所使用的應用和內(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
