Avatar Mode in 3D Viewer
提高 3D 場景當中的沈浸感,增加人們之間的互動
提高 3D 場景當中的沈浸感,增加人們之間的互動
3D 虛擬場景編輯器,由場景管理後台、3D 虛擬場景編輯器 (Editor) 及場景瀏覽前台 (Viewer) 組成。場景以 3D 模型為基礎,讓使用者在虛擬場景內有真實走動的沈浸式體驗。主要應用在房地產、線上展間等產業。
Avatar Mode 為場景瀏覽前台 (Viewer) 的瀏覽模式其一。提高了 3D 場景當中的沈浸感,增加人們之間的互動,使用者可以瀏覽出席成員、與成員進行公共/私人文字,及語音聊天。
作為該專案的 UIUX 設計師,我進行使用者訪談以製作 Persona 和 Empathy Map,與 PM 確認 User Story、資訊架構及流程,構建 Wireframe 和 UI Flow,建立 Design System。
#Saas #AR #VR #i18n
此模式對於使用者來說是一個全新的體驗,除了原本的滑鼠點擊移動,我們新增加了針對 Avatar 的 WASD 移動。這類的移動方式經常被運用在遊戲當中,但我們的大多數用戶並不熟悉遊戲,因此在使用者第一次進入場景時,需要有教學路徑引導使用者學習,手機及電腦版的教學也不相同。
其次,此模式新增了語音及文字聊天的功能,其中又分成公眾及私人聊天。兩者切換方式需要先與工程端進行確認,使用者也需要 UI 畫面的引導。我們同時須兼顧電腦版及手機版 RWD 的操作順暢度。另一方面,依據場景中不同的身份權限,也需要去進行功能的探索。
為了解決上述用戶需求,我進行了競品調查,收集用戶和客戶的需求,並對我們 Avatar 模式所需的功能進行分類。然後我最終提出了我們的優化計劃,得到了團隊和客戶的認可,並與開發人員進行了充分的討論。
教學路徑引導使用者學習
我們確認了使用者流程以後,會開始製作 lofi-wireframe,並同步與 PM 及工程師隨時溝通,以便進行設計調整。後續會繼續製作 hifi-wireframe 並且測試視覺比例以及調整資訊架構優先度。若是有元件製作的疑慮,會在此階段做內部 A/B 測試,以數據為導向確保使用者經驗完善。
與 PM 確認主要 UI 設計後,會開始製作交付給工程端的 UI Flow,主要會在卡片中標註細節,並以工程端的角度去思考哪部分的需要更多的標注,以確保工程師能理解設計稿。