UNIVERSE:建構空間協作的設計架構

UNIVERSE:建構空間協作的設計架構

為 3D 虛擬教室制定互動標準——在技術限制與直覺易用性之間找到那條線,讓學生真的想待在裡面。

Product Logo
UNIVERSE 是一個沉浸式遠端與混合教學平台。透過虛擬化身與空間音效,讓遠端課堂不只是換個背景的視訊會議,而是真的發生在同一個空間裡。
Role
首席產品設計師 & 互動架構師
Domain
EdTech, 空間運算
Timeline
6 個月(設計至規格交接)
Company
ViewSonic
Platform
Unity(跨平台:桌機 & 平板)
Team
1 PM、2 位工程師(Unity/後端)、2 位美術(技術/3D)

摘要

挑戰

  • 2D 思維的慣性:大家都說要做「元宇宙教室」,但互動設計還是停在螢幕共享那個年代。問題不是技術,是思維框架。
  • 非玩家的易用性:K-12 老師不打電動,看到三個軸向的 3D 操作介面就直接放棄。我需要設計一個「第一次摸就會用,不需要教」的互動模型。
  • 技術碎片化:同一套操作要在 PC 滑鼠、平板觸控、鍵盤之間無縫運作,效能預算還很緊。

策略執行

  • 互動架構:定義「平台—模式—輸入」框架,把 2D UI 的精準性跟 3D 空間操作(抓取移動 vs. 精確變換)整合進同一套邏輯。
  • 具象化教學策略:主導 3D 物件庫與可移動互動白板的設計,把「用 3D 空間教東西」這件事變成真的可行。
  • 治理與擴展:設計權限系統跟多人衝突解決規則,管理 30 人以上同時在線的課堂場景。
  • 跨專業協同:橋接設計、3D 美術與工程三方,交付 300+ 件跨平台優化互動資產。

關鍵成果

  • 商業成果:3D 物件庫功能直接促成首位海外付費用戶(新加坡南洋理工大學)的獲取。
  • 產品差異化:把平台從「3D 版 Zoom」真正轉型為空間學習工具,讓我們有了競爭對手沒有的東西。

3D 空間裡,發生的還是 2D 的事

我接手這個專案的時候,UNIVERSE 已經有了漂亮的虛擬校園——走廊、教室、化身,畫面做得很好看。但我進去體驗了一堂課之後,發現一個根本問題:裡面發生的事情,跟 Zoom 沒有什麼差別。

老師還是在對著螢幕廣播投影片。學生還是在盯著平面畫面聽課。3D 環境只是個視覺背景,沒有任何功能。

這就是我說的「虛擬教育的悖論」——你用了最先進的空間技術,卻把它用來做最傳統的事。

具體的產品問題

  • 沒有差異化:去掉 3D 環境,UNIVERSE 跟 Zoom 或 Teams 的差距幾乎是零。但 Zoom 跟 Teams 的用戶基礎大太多了,你沒辦法靠「看起來比較酷」贏他們。
  • 表達太受限:課堂裡所有互動——管理、分享、討論——都壓縮在平面 UI 和表情符號裡,空間性完全沒有被利用。
  • 工作流一直被打斷:老師要做個稍微複雜一點的事,就得切到外部應用程式,課堂節奏就斷掉了。

3D 介面前後對比:左為課堂管理名冊;中為螢幕共享視圖;右為協作白板。

那麼,這個空間能讓什麼事情發生,是 Zoom 做不到的?

這是我問自己的第一個問題,也是整個設計方向的錨點。

老實說,這個問題的答案並不是一開始就清楚的。我們跟 PM、銷售、教育專家開了很多次工作坊,才慢慢收斂出一個方向:3D 物件庫。讓老師可以在空間裡放一個可以操作的實體模型,學生可以圍過去看、可以旋轉、可以拆解。這是 Zoom 的投影片做不到的。

3D 物件庫——讓抽象的東西變得可以摸

傳統線上課堂最大的限制之一,就是知識只能以平面的方式呈現。你要解釋一個分子結構、一棟建築的空間關係、一顆心臟的構造,最終都只能壓縮成投影片上的圖片。

我的設計方向是:把虛擬教室變成一個空間實驗室。3D 物件庫不只是資產的儲藏庫,而是「具象化教學」的載體——讓老師能用可以操作的實體物件來解釋複雜概念。

核心目標

  • 支援動態教學:系統要能在「老師主導示範」和「學生自主探索」兩種模式之間無縫切換,不能只支援一種教學風格。
  • 讓非技術型老師也能用:不是每個老師都懂 3D 軟體。我希望匯入和管理 3D 資產這件事,對老師來說跟上傳一張圖片一樣直覺。
  • 管理協作秩序:30 個人同時在空間裡,需要一套清楚的權限框架,確保學生可以安全地跟物件互動,不會把整堂課搞亂。

挑戰

  • 易用性 vs. 自由度:標準 3D 軟體(像 Blender)給你完全的自由,但認知負擔很高,非玩家型的 K-12 老師根本不會用。我需要找到一個平衡點——夠直覺、但又不能太陽春。
  • 多人同時搶同一個物件:即時協作很好,但當三個學生同時想抓同一個 3D 模型的時候,會發生什麼事?這個問題不解決,課堂就直接爆炸。
  • 跨平台的效能限制:300+ 件互動資產,要在 PC 和資源有限的學生平板上都能穩定呈現。這不只是設計問題,需要跟工程跟美術三方對齊非常精確的規格。

把教學流程拆開來看:權限設計從哪裡來

當時最難的是——我們的用戶(老師跟學生)大多是 3D 世界的「數位移民」。他們習慣用投影片,不習慣遊戲控制器。

為了不讓設計流於想像,我用 FigJam 主導了一系列工作坊,找來銷售、教育專家和 PM,一起把真實的教學情境一個個盤點出來。

模擬一堂 45 分鐘的課

說起來,這個做法是後來才發現最有價值的一步。我們不是在討論「功能清單」,而是真的演練:老師備課怎麼上傳物件?課程開始後學生怎麼進入操作模式?下課了物件怎麼處理?

從老師準備課程到課程結束,整個旅程逐一審視,壓力測試出幾百個微互動情境,把邊界案例都翻出來。

四個關鍵設計辯論:我們在工作坊裡解決了幾十個邊界案例,但有四個問題的答案直接決定了整個權限系統的骨架:

  1. 資產來源(物件從哪裡生成?誰能生成?)
  2. 層級控制(誰可以覆寫誰的操作?)
  3. 並發處理(兩個人同時搶同一個物件,怎麼辦?)
  4. 情境分組(小組模式和全班模式,物件的狀態要怎麼區分?)
Project image

根據這些討論,我整理出完整的設計流程,以及整個操作過程中的權限設計邏輯。

老師不熟悉 3D 操作——這是事實,不是藉口

後來才發現,這個問題比我預期的更核心。教師跟學生對「3D 空間變換」這件事幾乎是零基礎的。你讓他們用 XYZ 三個軸向去旋轉一個物件,他們會直接放棄。

所以我做了一件事:去比較各類沉浸式平台跟 3D 創作工具的操作方式,找出關鍵差異。

結論很清楚:問題的核心是**有模式(modal)vs. 無模式(modeless)**的操作設計。

「有模式」意思是:你要先選一個操作模式(移動、旋轉、縮放),再去操作物件。這是 Blender 和大多數 3D 軟體的做法,靈活但複雜。「無模式」意思是:你直接對物件做動作,系統自動判斷你的意圖。學習成本低很多,但設計難度更高。

最終我們決定以無模式作為預設互動方式。

為非玩家設計:抓取移動 vs. 精確變換

跟銷售和教師專家討論之後,我定義了兩層互動:

  1. 抓取移動(主要,無模式):直接拖曳物件,物件沿用戶正前方方向移動,並自動面向用戶旋轉。這是大多數人直覺會想做的動作,門檻最低。
  2. 精確變換(次要,有模式):當用戶需要細微調整角度或位置時,切換進入這個模式。保留給有需求的進階用戶,不強迫所有人學。

這個設計的核心邏輯是:第一次摸就要會用,但不限制想要更精確的人。

Project image

設計亮點

15 條規則,讓 300+ 個物件都能好好運作

為了讓體驗夠穩健,我仔細制定了 3D 物件庫的 15 條互動規則,確保分佈在 30 多個空間裡的 300+ 件不同物件,在各種使用情境下都能有一致且可預期的行為。


白板也可以移動——讓 2D 協作工具進入 3D 空間

隨處放置,隨時展開。

原本的協作白板是固定在牆上的靜態道具,尺寸固定、風格不一,基本上就是把 Miro 搬進 3D 環境裡,僅此而已。

我的想法是:既然這是一個 3D 空間,白板為什麼不能移動?老師可以把白板拉到學生聚集的地方,可以放在任何需要的位置,可以在小組討論時各自展開一塊。這才是 3D 空間應該有的工作方式。

Project image

「可書寫表面」到底是什麼?回去問真實的課堂

白板可以移動這件事,帶出了一堆新問題:它的內容應該保存嗎?移到另一個教室之後,還屬於原來的老師嗎?30 個學生同時在同一塊白板上寫字,誰的內容算數?

為了不讓這些問題變成各自解決的邊界案例,我回歸到「可書寫表面」的本質,借鑑 K-12 真實課堂的動態,從三個核心維度展開辯證:

  1. 資料生命週期:這塊板子上的內容應該存在多久?
  2. 跨教室權限:所有權怎麼隨著空間移動?
  3. 協作模式:不同年齡層的學生,使用習慣差異有多大?

兩種白板原型:臨時用還是長期存?

方向一:臨時型(比喻:一張 A4 散頁)

強調即時性和輕量使用——適合課堂上的即興討論或粗略腦力激盪。用完就丟,不需要儲存。

  • 資料生命週期:不儲存(課後清除)
  • 範疇:僅限當前教室
  • 權限:全員開放編輯(高協作)

方向二:持久型(比喻:活頁夾裡的一頁)

強調歸檔和可攜帶性——適合個人筆記或保存重要討論成果。可以帶著走,跨教室使用。

  • 資料生命週期:儲存並保留(可隨時取回)
  • 範疇:可跨教室轉移
  • 權限:限制編輯(私有或低協作)

跟 PM 和工程團隊評估技術可行性之後,我們選擇推進方向一。基於這個決定,我們確定了一次性白板的具體權限設定、多人互動規則與資料生命週期。

決定方向之後,我接著要把「30 個人同時用這塊白板」這件事設計清楚。每一個互動狀態、每一個權限邊界,都要有明確的規則——不然工程師根本不知道要實作什麼。

我跟 PM 和工程一起把所有條件列出來,最後確認了白板的完整權限設定和多人互動規則。

Project image

30 人課堂,白板怎麼不亂

這個問題比想像中難。另一位設計師幫我模擬了 30 位學生與老師在教室空間中同時使用白板的情境,光是看那個模擬,就發現了一堆沒想到的衝突點。

我做了一份 FigJam,跟美國的銷售和教育專家進行訪談,確認我們對教學情境的理解是對的,需求也符合他們的預期。

然後我畫出白板每個空間互動和權限的完整流程圖,跟開發團隊一一討論,確保每個條件都被涵蓋到。最後我們清點出至少 36 種情境需要被處理。

Project image

設計亮點

從察覺白板到開始書寫:狀態轉換的引導設計

用戶怎麼知道這塊白板可以互動?怎麼知道現在可以移動它、可以在上面書寫?這些都需要清楚的示能符號(affordance signifiers)來引導——也就是讓物件的外觀本身告訴用戶它能做什麼。

我畫出了從「察覺白板存在」到「開始與白板互動」的完整狀態流,為每個狀態設計對應的視覺反饋和示能提示,讓用戶不需要說明書就能自然上手。

管理課堂混亂:白板協作的行為規則

這份表格定義了實現協作白板的所有限制條件——讓使用效益最大化,同時讓老師有辦法管理整個協作過程。

補充討論:靜態白板和可移動白板應該合併成一個嗎?

方向一:不合併,兩種白板分開存在

優點:開發成本低,依賴關係少,可以快速上線。

缺點:用戶可能會困惑——哪個可以移動?為什麼行為不一樣?

方向二:合併,所有白板外觀與行為統一

優點:一致的設計語言,認知負擔最低,體驗最乾淨。

缺點:技術可行性低,工作量極大,當下的資源不支撐。

為可移動白板設計新的示能外觀

用戶要怎麼知道這塊白板可以被拿起來移動?這需要視覺上的線索——也就是示能符號(perceived affordance)。

我參考了實體 UI 和 VR 互動的做法,找到白板把手區域這個比喻作為設計起點,然後向 3D 美術師提出了從擬物化到虛擬化的設計方向,看哪個方案在 3D 空間裡最直覺、視覺噪音最少。

Project image

白板背面因為無法互動,如果外觀太複雜會造成視覺干擾。我跟 3D 美術師討論了幾個把手和白板外觀的方案,最後選了接近 C 版本的方案——減少多餘的視覺元素,讓空間更乾淨。

結語

六個月內,有足夠的資源認真做兩個大功能,在我的職涯裡算是比較少見的。

  • 3D 物件庫功能幫我們拿到了第一個海外付費用戶——新加坡南洋理工大學。
  • 可移動白板最後因為開發團隊重組而暫停,沒有正式上線,有點可惜。

反思

這個專案對我來說,最大的收穫不是某個具體功能的設計,而是建立了一套思考框架:在 3D 和 2D 之間,介面設計和行為設計的邏輯有哪些根本的不同,決策依據應該是什麼。

ChirpAI:透過 AI 中介互動,打造課中的師生對話與學習歷程平台

ChirpAI:透過 AI 中介互動,打造課中的師生對話與學習歷程平台

美國 B2B 教育研究:從採購到課堂的全生態調研

美國 B2B 教育研究:從採購到課堂的全生態調研