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,裡面整理了來自世界各地行銷公司的優秀作品,是靈感滿滿的寶庫!

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

相關文章

政策活動數位體驗|Agent 企劃預覽

將政策宣導與互動整合成數位頁面,而非多年單頁資訊頁,降低參與門檻並提升理解度
Agent 輸出內容
企劃概念
酒駕法規與罰則資訊往往較艱澀,駕駛容易忽略「只喝一點、路很近、酒快醒 了」的風險。本企劃透過《今晚你能安全回家嗎?》情境問答遊戲,將聚餐 / 小酌 / 代駕 / 同車乘客責任 / 拒測 / 宿醉 / 慢車酒駕等議題轉化為日常選擇題, 讓玩家在 3 分鐘內完成風險判斷並吸收酒駕零容忍重點。結果頁以安全回家指 數、個人稱號、錯題提醒、風險雷達圖與行動建議呈現,可提升宣導吸收率、 帶動分享與導流,並蒐集常見錯誤觀念作為後續宣導依據。下載完整企劃可查 看題目設計、結果頁架構、法規重點卡片、社群擴散與線下導流規劃。
solutions_download_for_offline。
下載完整互動企劃
分鏡頁面
封面頁 / 前言頁 / 情境互動頁 / 成果頁
視覺風格
政府資訊圖像風 / 親民插畫風 / 2D 遊戲介面
預約諮詢體驗 AI Agent
分鏡示意
homepage_titleicon。
政策資訊圖像風
homepage_titleicon。
親民插畫風
homepage_titleicon。
2D 遊戲介面
solutions_policies_0
封面頁
solutions_policies_1
前言頁
solutions_policies_2
問答互動頁
solutions_policies_3
成果頁