← UI/UX

0-to-1 Design

0-1 OneBoard 課中互動遊戲設計

從零設計四款課中互動遊戲,兼顧學生的遊戲體驗與教師的教材彈性。

Web Desktop Tablet
OneBoard 線上學習互動遊戲主視覺:桌機畫面中呈現問答遊戲的答題介面

團隊資訊

專案期間
2024 / 09 - 2024 / 11
團隊成員
PM*1 |UI/UX*1|外包廠商
擔任角色
UI/UX 設計:遊戲流程設計、介面設計、高擬真原型、Design QA

問題狀況

01

課堂中多是老師單向講述,學生參與感低。

02

舊有的線上學習內容多為選擇、填空等制式題目,教材形式受限,難以涵蓋不同科目的出題需求。

產品目標

01

以遊戲化的學習體驗,提升課堂中師生之間的互動。

02

建立 4 款互動遊戲流程,涵蓋學生作答與教師講解。

03

設計支援文字、圖片與語音的遊戲式 UI 模組,讓教材內容有彈性。

遊戲流程

從進入遊戲到教師講解,一條完整的課堂節奏

User Flow | 問答遊戲

進入遊戲 題目說明 學生作答 送出與檢核 遊戲結果 教師檢視 結束 完成作答 暫停中 暫停 繼續 重新開始

主線之外的兩個控制作答完成就往下走完檢核、結果到教師檢視。過程中隨時可以暫停,停在「暫停中」狀態、繼續後接回原本的進度;也可以重新開始,整場退回進入遊戲。這兩個控制讓教師能配合課堂節奏調整。

UI Design 介面介紹

透過遊戲感場景和介面,讓學生彷彿進入了另一個世界,
吸引學生的注意力及提升參與度。

遊戲首頁:畫面中央顯示問答遊戲標題與玩法說明,右側為機器人角色,下方為進入遊戲按鈕
01

遊戲首頁

  • 顯示遊戲標題及玩法介紹
題目介紹:畫面顯示四種動物圖片與標籤,下方為開始遊戲按鈕
02

題目介紹

  • 先向學生及老師說明此遊戲題目,可在開始前做準備
答題過程:左側為題目圖片與答對標示,右側為選項清單,頂部有完成度、計分與計時
03

答題過程

  • 左側題目欄 + 右側選項欄
  • 涵蓋上課常用功能,例:老師視課堂需求暫停或重新遊戲
遊戲結果:畫面顯示成績等第 A 與所花時間 120.5 秒,下方為查看答案與再玩一次按鈕
04

遊戲結果

  • 成績會透過動效旋轉呈現,提升視覺效果
  • 時間以快速跑秒的方式到達此遊戲所花費的時間
答題紀錄:逐題列出答對與答錯狀態,每列右側有放大鏡按鈕可查看詳情
05

答題紀錄

  • 老師快速瀏覽錯題,點擊放大鏡即可查看詳情
答題詳情:上方顯示題目圖片,下方表格比對我的答案與正確答案
06

答題詳情

  • 顯示學生的答案以及正確答案,方便老師檢討及教學

打造一致的視覺語言

跨遊戲可重用元件系統 & 場景設計

互動遊戲的介紹佈告欄:藍色系標題列與內容區 互動遊戲的題目及選項欄:左側為題目內容區,右側為直向排列的答案選項清單
分類配對遊戲的介紹佈告欄:綠色系標題列與內容區 分類配對遊戲的題目及選項欄:上方為三個分類欄位並排,下方為橫向排列的答案選項

遊戲介紹佈告欄

同一套設計元素配置搭配色系變化來達成部分模組化,並加速設計及開發。

題目及選項欄

遊戲會因不同的玩法而有各種介面組合,我盡可能將元件做成跨遊戲可重用。

神秘水晶洞窟場景:青綠色調的洞窟與水面,兩側有發光水晶

神秘水晶洞窟

冰封外太空場景:深藍色星空與冰層,右側有大型星球

冰封外太空

NEXT

NaniVideo 南一影音網重構 →

備課資源平台