NCC x 遊戲互動:用一場測驗探索你的數位人格樣貌!

本文重點:
品牌背景與行銷目標
品牌背景
➤ 行銷目標
趣味互動大揭秘,活動再現
➤ 活動操作流程
技術亮點
➤ 版本設計與技術亮點
➤ 遊戲機制說明
想要什麼,Web5 Studio都為您做到

一、品牌背景與行銷目標

品牌背景

長期致力於推動大眾媒體識讀能力與數位素養的NCC,此次轉換策略,以更貼近年輕世代喜好的互動遊戲形式,將原本艱澀的數位教育議題轉化為有趣且具啟發性的體驗內容。透過科技導入與創意策畫,NCC成功展現其活躍且親民的品牌形象,希望打造更深層的公民參與感。

行銷目標

  • 提升大眾,特別是年輕族群(Z 世代、千禧世代)對「數位素養」議題的關注與參與意願。  
  • 建立NCC更具現代感與互動性的品牌形象。  
  • 導流至官方網站與社群平台,加強後續教育資源的接觸率與回訪率。

二、趣味互動大揭秘,活動再現

活動操作流程

本活動以「一日數位生活」為設計主軸,將常見的數位使用情境轉化為互動題目,讓使用者透過選擇與回饋,逐步完成整體體驗流程。操作步驟如下:

  1. 使用者進入活動網站,點擊「開始遊戲」即可進入主流程。
  2. 進入問答階段後,畫面會先呈現動畫或插圖,約 1 秒後才出現題目與選項,以建立節奏與情境感。
  3. 題庫涵蓋 5 大主題領域;每次體驗採隨機抽題,累計得分最高為 100 分。
  4. 以載入頁再次呈現「你的數位一天」,讓使用者更能體會到數位足跡的議題。
  5. 作答完成後進入個人結果頁,呈現對應的「數位人格」風格,並提供分析與小秘訣等延伸內容,協助使用者理解自身數位行為;同時設有「再玩一次」選項,鼓勵重複體驗與分享,提升互動與擴散效果。

三、技術亮點

版本設計

本次互動遊戲依使用情境規劃為兩個版本,分別對應行動裝置與較大螢幕設備,確保不同載具下皆能維持良好體驗:

  • 手機版本(直式):以直式操作為主要使用情境,符合多數使用者的日常手機操作習慣,強化單手操作與連續作答的流暢度。
  • 桌機/平板版本(橫式):針對較大螢幕設計橫式版面,提供更寬廣的視覺配置與完整的畫面呈現,適合在桌機或平板裝置上操作。

遊戲機制說明

整體以 HTML5 Canvas 為核心開發架構,著重於跨裝置與互動體驗的穩定呈現:

  • 採用 RWD(Responsive Web Design)響應式設計,依裝置自動切換直式或橫式版型,並透過 Canvas 預設比例(720 × 1280 px)進行等比縮放,以維持視覺一致性。
  • 動畫與圖片顯示時間經過節奏設計(約 1 秒延遲),協助使用者聚焦於畫面情境。
  • 題目採隨機抽取機制,讓每次體驗皆可能出現不同組合,增加新鮮感。
  • 內建裝置與方向偵測功能,當使用情境不符建議顯示方向時,系統將適時提供提示,以確保最佳操作體驗。
  • 當畫面未能完全填滿顯示區域時,背景以輕暖粉橘色(#d6b39e)補齊,維持整體視覺一致性。

以上由 Web5 Studio 提供一站式活動平台技術支援,確保操作穩定與後台數據分析系統即時更新。

想要什麼,Web5 Studio都為您做到

Web5 Studio 專注在國際最新的 AIGC 互動式行銷應用,致力於為客戶打造創新又有個人風格的行銷方案。我們看準 AIGC 的發展潛力,率先推出全台首創的 AIGC 互動式行銷模組,幫助品牌用最新科技做出最有創意的行銷活動。

想了解更多精彩的互動式行銷案例嗎?歡迎追蹤我們的 IG,裡面整理了來自世界各地行銷公司的優秀作品,是靈感滿滿的寶庫!

如果您有技術開發或整合上的需求,也歡迎填寫下方表單,我們會有專人與您聯繫,提供合適的技術支援與建議。

相關文章