VR頁面動效設計中如何引導用戶視線?


&< VRAR界面設計回答匯總—————————————————————————————————————

(圖片來源:https://www.youtube.com/watch?v=braV_c4M8oI)

這個問題問的非常好。

我們都知道VRAR的交互都是使用光線投射(ray casting)的方式——你的cursor在單眼各自對應的屏幕的幾何中心,而這個幾何中心和用戶直視時的視覺中心一樣,用戶通過轉動頭部而移動屏幕中央的cursor~(這也是VR和傳統智能手機不同的地方,可以直接測試和收集用戶的視覺中心。)

—————————————————————————————————————

1.1、動效的流程變化(motion flow),方案一

在一個普通的界面里。

當你想和左邊目錄欄交互時,你將屏幕中心的cursor放到了它目錄的按鈕上,然後點擊touchpad或者『select』按鈕。

但是問題來了,作為屏幕中心的cursor,其實把相當於把用戶的視角『系』在了那裡,動不了了。

因為視場角的限制,當你將它放在視覺中心的時候,就不能看到視場角外的頁面元素(即使圖中頁面變黃了可激活也看不見)。

最終用戶的視角還停留在原來的位置,用戶沒有發現此時頁面右上角的變化,於是感到沮喪。

—————————————————————————————————————

1.2、動效的流程變化(motion flow),方案二

所以這裡嘗試一種新方案——當用戶轉頭看向那個黃色按鈕時,

引導用戶看向右邊的元素→_→

左上角的按鈕向右拉長,右上角的內容塊慢慢變黃。

(這時,用戶的視覺中心就成功地被轉移到了右上角的內容塊上。)

成功把用戶的視覺中心轉移到了合適的地方,(^o^)/

—————————————————————————————————————

—————————————————————————————————————

2.1、UI元素的移動,方案一

這是一個基本頁面

當你看向左上的按鈕時(hover on),

點擊『select』或者tap以下gear上的touch pad

點擊操作被激活後,這裡跳出一個新窗口。

本來的頁面跳出去了

新的頁面慢慢顯現

頁面展開了,卻超過了用戶的視場角範圍。用戶此時會感到沮喪,因為這時的頁面是他不想要的。(用戶點擊是為了獲得他期待的結果,但是這裡並沒有達到。)

—————————————————————————————————————

2.2、UI元素的移動,方案二

所以,又嘗試了第二種方案:點擊黃色按鈕後,先將主要頁面移走。

而在用戶的視角里,載入新的頁面(漸顯)

這種設計的優點是,仍然將用戶的視覺中心,保留在了他仍然在看著的地方。

具體案例:


推薦閱讀:

VR交互探秘:我們到底需要怎樣的手部交互? | 硬創公開課
信息架構:入門完全指南
Leap Motion 能用來做什麼?在你所熟悉的領域,你能設想出哪些應用場景?
《設計是什麼》讀書筆記
運用在汽車 HMI 及內飾設計中的 Emotion Design(情感設計)及創新設計有哪些例子?

TAG:產品設計 | 交互設計 | 用戶界面設計 | 用戶體驗設計 | 虛擬現實VR |