編者按:Vision Pro 所創建的數字空間將真實的環境和虛擬的數字內容進行了有效的融合,在體驗的設計上,也區別于我們所熟知的手機和平板內的 APP 設計范式,用戶體驗的邏輯的簡單遷移并不足以創建出優秀的體驗,這使得我們需要重新審視和琢磨 Vision Pro 的空間計算下的體驗設計。行進到這個系列文章的第五篇,文中所提及的一些體驗設計細節并不復雜,但是仔細想來卻是可以極大的提升體驗。文章來自設計師 Hajira 的搜集整理,以下是系列文章的前4篇:

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

Vision Pro 在細節上做出了很多令人舒適、以人為本的設計,今天的文章將會梳理總結這些內容。

用戶視野

我們通常說的視野,是用戶在不移動頭部的情況下,雙眼能直接看到的空間區域。視野居中的位置是最容易被看到的內容,因此最重要的內容需要放在居中的位置。由于視野通常較為開闊,所以采用橫向布局會更好。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

具體可以參考下面的范例:在 Safari 當中,將主窗口置于中心位置。當用戶想要一次查看所有標簽頁的時候,它們會按照網格分散呈現,這種分布非常適合用戶的視野,同時,分散的標簽頁會按照它們距離視野中心的距離,有微妙的縮放和偏移傾斜角度,向內傾斜,這樣更容易閱讀。

這樣一來,整體的瀏覽體驗會明顯的具有沉浸感,不過依然要注意,內容還是要盡量控制在用戶視野之內。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

人體工程學

在默認情況下,窗口應該沿著視野的自然角度來排布放置,這樣也是鼓勵用戶用更加舒適的姿勢來與 Vision Pro 進行互動,無論所處的環境如何。

將內容放置在距離用戶較遠的地方,最好超出手臂可以觸及的區域,這樣可以鼓勵用戶使用目光遠距離互動,降低交互成本。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

窗口控制

在下方的范例當中,所呈現的控件,是用于移動、關閉窗口,以及調整窗口大小的。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

用戶可以鎖定窗口的底部握柄控件,將窗口移動到任意的位置。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

窗口也可以被拉伸成為任何比例,來適配不同的尺寸需求。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

控件和內容分開

在下面的范例當中,Safari 瀏覽器的頂部導航欄和網頁內容被分開,讓頁面內容更容易被視線聚焦,而當打開 Safari 側邊欄的時候,窗口會變大,顯示更多的控件,并不會覆蓋網頁內容。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

下面的范例則是 Keynote,在播放演示文稿的時候,展示的內容會放置在一個更遠更大的窗口當中,同時還有一個方便演示者使用的小窗口則置于觸手可及的位置,兩者的組合讓演示和操作區分開來,確保了 Keynote 展示是完美而大方的。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

當用戶移動窗口的時候,窗口會隨著距離邊遠而適當變大確保可讀性,當窗口靠近的時候,則會適當縮小,讓界面保持清晰且具備良好的可操作性。窗口變化會在近大遠小的基本物理規則的基礎上,做適當的調整來符合交互。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

光影控制

空間計算并不僅僅只涉及到控件本身,在虛擬空間中,看起來會發光的元素,需要將光同樣投射到地板和天花板上,借助光的發散來凸顯它在空間中的位置。

而不發光的物體,則應該具有投影,就像虛擬的窗口投射在桌子上的陰影一樣,這會讓這些數字元素更加融入這個空間。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

錨定內容

為了避免用戶產生「被困住」的感覺,盡量不要將空間中的內容固定在一個視野中的特定位置。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

相反,將窗口或者內容固定在空間當中,這會讓它更像是空間中的一部分,讓用戶可以更加自由地環顧周圍,更加放松。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

空間音頻

為了獲得更加引人入勝的體驗,調用空間音頻技術,來創建更加具有融入感的音頻效果。

掌握這7個細節,幫你創建貼合Vision Pro的用戶體驗

豐富的視覺效果、貼合環境的音頻效果,會讓數字內容的真實感更強。

收藏 13
點贊 25

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。