VR頁面動效設計中如何引導用戶視線?
01-25
&< 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(情感設計)及創新設計有哪些例子?