VR/AR/MR-空間交互設(shè)計之“界面布局”

0 評論 2993 瀏覽 15 收藏 8 分鐘

三維空間中的界面設(shè)計與二維空間中的界面設(shè)計有所不同,這篇文章里,作者就針對空間界面通用布局展開說明,并總結(jié)了空間界面設(shè)計的相應(yīng)原則,一起來看看吧,或許會對想了解VR的你有所幫助。

一、探討空間界面設(shè)計

總結(jié)

關(guān)于空間界面設(shè)計需要考慮“人體工程學(xué)和舒適感下新的界面布局思路”、“融合虛擬和真實場景下界面樣式新的設(shè)計思路”、“結(jié)合不同交互方式(如手勢直接交互、手勢非直接交互)的界面內(nèi)容設(shè)計等”很多因素。了解VR/AR空間手勢交互內(nèi)容,可查看我之前的文章VR/AR/MR-空間交互設(shè)計之“手勢交互”。

這期我們針對空間界面通用布局展開說明。

二、空間界面通用布局

1.左右式(X軸方向)

左右式,主要是將比較大的、重要的界面面板水平排列,滿足頭部左右旋轉(zhuǎn)查看,避免頭部上下運動,以減少用戶的頸部不適。

左右式排列的信息可以是多個主界面面板,主界面面板和導(dǎo)航標簽欄(標簽欄一般垂直放置在主界面面板左側(cè)位置,當然標簽欄也可以放置在主面板頂部,詳見“上下式”)

2. 上下式(Y軸方向)

上下式,主要是在主面板的頂部或底部放置一些導(dǎo)航類、標簽類、或操作類的組件。切記不要將多個主界面大面板垂直排列。

3. 深度式(Z軸方向)

前后式,主要考慮到一個空間布局中的重要理念:深度。垂直于人臉的z軸方向上,利用深度視覺效果,將二級面板呈現(xiàn)出來。

好處是層級清晰且空間感強烈,當用戶觸發(fā)一級界面上的某個按鈕需要顯示鏈接后的內(nèi)容,可考慮在一級主面板前方呈現(xiàn)二級界面內(nèi)容。

4. 混合式(多軸方向)

混合式,顧名思義:可根據(jù)不同產(chǎn)品及功能、項目中有多種交互方式存在的情況下,可以進行多種布局方式相結(jié)合的呈現(xiàn)方式。

三、空間界面布局設(shè)計原則

1. 符合人體工程學(xué)原則

人體工程學(xué)是設(shè)計領(lǐng)域的一個重要部分,它關(guān)注的是人與物品、環(huán)境以及技術(shù)之間的關(guān)系。在設(shè)計中考慮到人體工程學(xué),可以確保我們的產(chǎn)品或服務(wù)使用起來更加舒適、高效且不疲勞。

用戶完全依賴頭顯來看到真實和虛擬的一切事物,因此保持視覺舒適性至關(guān)重要。將系統(tǒng)中的界面相對于佩戴者的頭部正前方放置內(nèi)容面板,以保證無論用戶的身高如何、坐著或者站著還是躺著,都能夠正對內(nèi)容。

即使是用戶在空間中的位移、位姿發(fā)生變化,也可以將內(nèi)容平滑的帶到用戶眼前(而非讓用戶移動來觸及內(nèi)容)。

2. 視場角范圍內(nèi)原則

我們需要確保所有內(nèi)容都在用戶的視野范圍內(nèi)。呈現(xiàn)信息面板或內(nèi)容時,我們要避免將任何內(nèi)容放得太高或太低,以迫使用戶做出不必要的頭部旋轉(zhuǎn)。

3. 左右布局原則

對于需要大畫布的應(yīng)用,可以考慮使用更高的寬高比,例如在”自由形式”中,畫布是水平延伸而不是垂直延伸。這種設(shè)計選擇可以更好地適應(yīng)用戶的視野,并減少不必要的頭部動作。

4. 重要內(nèi)容居中原則

優(yōu)先將最重要的信息集中在視野中央非常重要。這樣,用戶可以更輕松地找到并查看他們需要的內(nèi)容,同時還能保證他們的身體舒適度。應(yīng)避免將重要內(nèi)容和控件放在窗口角落。內(nèi)容離窗口中心越遠,用戶就可能越難以看到并與之交互,尤其是當窗口較大的時候。

5. 謹慎使用多窗口原則

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

總的來說,考慮到人體工程學(xué)的設(shè)計原則可以幫助我們創(chuàng)建出更舒適、更人性化的用戶體驗。

最后:本文案例圖均來自visionpro公開的宣傳資料,也是因蘋果一直在用戶交互和產(chǎn)品設(shè)計體驗上比較優(yōu)秀。本文僅站在通用性思路的角度出發(fā)去分析,當然關(guān)于多窗口布局,目前主流經(jīng)??吹降挠袑m格式、列表式、抽屜式、曲面陳列館式、旋轉(zhuǎn)木馬式等,根據(jù)不同項目特點選擇不同的布局方式即可。

可以推薦看看以下幾篇文章,可以作為參考:

  • 談VR界面的空間布局
  • VR世界里,需要怎樣的交互界面?
  • 如何建立一套 VR UI 設(shè)計規(guī)范?
  • 淺談VR UI設(shè)計規(guī)范|為VR界面設(shè)計給出明確指導(dǎo)建議
  • VR軟件設(shè)計:GoogleXR設(shè)計規(guī)范簡析

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

題圖來自蘋果官網(wǎng)

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!