內容行銷數位設計|課程講義

Unit 01.課程導論與數位內容行銷策略

大四畢業專題的
數位轉型指南

畢製不只是一場實體展,而是一場線上品牌發布會。

身為大四的設計學生,你們現在的重心一定都放在畢業專題的實體產出上。但如果設計只存在於展場那幾坪大的空間,它就只有在展期那四天、被走過路過的人看到而已。這一堂課先建立「內容行銷」的觀念,看懂靜態設計如何變成數位資產、如何規劃展前展中展後的完整旅程,最後動手盤點你們畢製的數位潛力,畫出整學期的數位藍圖。

0種數位物件:Web、Video、AR、Motion
0個觀展階段:展前、展中、展後
0週,把畢製延伸成數位生態系

W2.2026/09/14|中國科大視傳系|內容行銷數位設計.JinJin Wang

“ 設計做得好,
沒人看到等於沒做。

大四的畢業製作,不應該只是一場實體展位的「靜態發表」,而應該是一場規劃嚴密的「線上品牌發布會」。這學期每組都要完成四個數位物件:

這堂課怎麼上 前半段(01–06 關)建立觀念:內容行銷、數位資產、全旅程觸點、案例與工具;後半段(07–09 關)直接動手:各組把畢製的視覺資產全部打開,進行「數位化拆解」,填寫盤點表並畫出數位行銷延伸藍圖。
上課前請先準備 各組組長把目前畢業專題的所有視覺資產(主視覺 AI/PSD/SVG 檔、草稿、企劃書)放進雲端並開啟共享;準備好 Figma 或 Notion 帳號,課堂上要共同編輯數位藍圖。
STAGE 01

什麼是數位內容行銷(Content Marketing)?

傳統的行銷是「推銷(Push)」:不斷叫別人來看你的作品、買你的產品。內容行銷則是「吸引(Pull)」:透過創造有價值、具備傳播力的內容,讓目標受眾(Target Audience, TA)自動找上門。

關鍵字:Visual Storytelling
視傳系最強大的武器身為視傳系學生,你們擁有全天下最強大的武器:視覺(Visuals)。內容行銷的核心,是把「設計理念」轉化為「能吸引流量的視覺故事」。

推銷 vs. 吸引

Push 傳統推銷

不斷叫別人來看你的作品、買你的產品。

我→廣告→觀眾(被動)
Pull 內容行銷

創造有價值、有傳播力的內容,讓 TA 自動找上門。

內容→分享擴散→觀眾(主動)

用視覺講故事的兩個方法

不要只給結果,要給過程最終完美的包裝只有一張圖,但失敗的 20 個打樣原型、半夜爆肝的討論側拍、手繪草稿的縮時攝影,才是社群上能引發共鳴的「故事內容」。
創造情感共鳴你的專題在探討什麼議題?台灣地方文化、心理健康,還是永續環保?用視覺將議題包裝成資訊圖表(Infographics)或議題短片,在展前就引發討論,這就是內容行銷。

在數位世界裡,沒人想看長篇大論的設計理念。

STAGE 02

靜態設計如何轉化為「數位資產(Digital Assets)」?

目前做的海報、包裝、書籍,都是「實體資產」。要進入數位內容行銷,第一步就是將它們升級為「數位資產」。這不是單純把 PDF 轉存成 JPG 上傳 IG,而是要進行結構性的轉化。

產出:資產轉化清單
每一種轉化,都對應一個單元右邊點選你的專題物件,看它可以變成哪些數位資產,以及這學期在哪一個單元學會做它。

互動練習.點選實體物件,看它的數位轉化

完整對照表

實體/靜態專題物件轉化後的「數位資產」型態數位世界的行銷功能
主視覺海報動態海報(Motion Poster)、AI 延伸概念影片在展場螢幕或社群上,用前 3 秒的動態視覺抓住眼球。
實體裝幀書籍/雜誌響應式策展網頁(Landing Page)、線上互動電子書突破地域限制,讓中南部或國外的設計師、廠商也能完整觀看你們的論述與作品。
產品包裝/實體盲盒AR 互動濾鏡、3D 數位建模展示觀展者只要用手機掃描,就能看到包裝上的圖案跳出來跳舞或產生互動,創造驚喜感。
靜態插畫/角色 IPAI 輔助生成的社群圖資庫、LINE 貼圖或動態 Emoji降低延伸設計的製作成本,讓角色能快速產出應景的社群貼文素材(如節慶賀圖)。
2026 更新:原表中的 AR 工具 Spark AR 已於 2025 年 1 月停止服務,本課改用 Web AR(MyWebAR、MindAR),詳見 單元 07。
STAGE 03

視覺傳達的「觸點(Touchpoints)」延伸:全旅程行銷

一個成功的畢業製作,與觀展者的互動不應該只發生在走進展位的那一刻。我們必須把視覺觸點拉長,建立一個「展前、展中、展後」的完整旅程。

產出:觀展者旅程規劃
對應整學期的數位物件展前靠網站與短影音,展中靠動態海報與 AR,展後靠社群二次傳播與作品集網站。每個階段的工具,都會在之後的單元中實作。
視覺傳達觸點延伸:展前、展中、展後的全旅程行銷流程圖
點圖可放大.全旅程行銷流程圖

點選階段,看目標與作法

STAGE 04

國內外頂尖畢業專題/品牌數位延伸案例分析

了解內容行銷的架構後,直接來看業界與學長姐們是怎麼玩的。優秀的設計不只停留在紙面上,而是會像液體一樣,流向不同的數位載體。

延伸閱讀:Claude AI 案例解析
CASE 1.新一代/放視大賞金獎案例
從展位延伸到螢幕的數位捕獲

案例背景:近年在「新一代設計展」與「放視大賞」榮獲視覺傳達設計類金獎的學長姐作品(例如以探討台灣在地宮廟文化或社會實驗為主題的專題)。他們在實體展出前三個月,就已經啟動了數位佈局。

「官方網頁」的沉浸式論述他們不滿足於官方標準的展覽簡介頁,而是自己架設專題 RWD 網頁。網頁一打開,利用滾動視差(Parallax Scrolling)與微動態,讓觀者在線就能體驗紙張翻閱的沙沙感與層次感。網頁裡更完整收錄了實體展覽放不下的田野調查紀錄、未採用的設計提案,將「專題論述」堆疊得極具深度。
「IG 動態濾鏡」的病毒式擴散他們將主視覺中的核心 IP 角色或強烈的視覺語彙(如特殊的反光材質、未來感的字體排版),開發成 IG 互動濾鏡,在展前透過設計圈同溫層的「限時動態挑戰」擴散。觀展者還沒到現場,就已經在手機上玩過他們的視覺,成功在展前創造破萬的觸及率(Reach),直接轉化為現場展位的人潮。
2026 更新:IG 自訂濾鏡已隨 Spark AR 關閉而無法上架,現在的替代作法是「網頁 AR 濾鏡+限動連結貼紙」,見 單元 07 第 10 關。
CASE 2.商業品牌跨界
傳統視覺品牌的數位叛逆

案例背景:近年許多國內外傳統獨立書店與精裝書出版社(如 Maison Margiela 的品牌書發表或日本 D&DEPARTMENT 的地域設計展),面對「實體書與線下展覽式微」的困境,成功利用數位工具打響翻身仗。

AI 輔助與 No-Code 的高效率協作這些品牌在經費與人力有限的情況下,利用 AI(如 Midjourney)將實體精裝書裡的插畫快速延伸出數百張不同尺寸、符合社群規格的背景圖資;並使用 Webflow/Framer 這類無程式碼(No-code)工具,在短短一週內搭建出極具前衛動態視覺的官方活動頁。
動態視覺的社群爆紅(Going Viral)他們把原本靜態的書籍封面,利用動態設計(Motion Graphics)拆解,讓封面上的幾何圖形隨著音樂節奏跳動,製作成 15 秒的 Reels 短影音。這種「讓靜態美學動起來」的視覺反差,極度符合當代社群短注意力的特徵,成功在 Instagram 和 TikTok 上獲得大量觀看,吸引年輕人為了「打卡體驗」而購買實體精裝書。

適合導入課程的數位延伸案例

品牌識別設計AI 品牌故事、品牌網站、Landing Page
包裝設計AR 掃描互動、3D 展示、產品動畫
插畫設計AI 動畫、Motion Poster、短影音
書籍設計電子書、互動網頁、AR 導覽
地方創生地圖網站、旅遊 App、AR 導覽
社會議題Podcast、YouTube 宣傳影片、社群經營
展覽設計虛擬展覽、360° 展覽、VR 展示
吉祥物設計AI 動畫、LINE 貼圖、社群角色經營
畢業專題專題網站、作品集網站、數位行銷企劃
STAGE 05

本學期「AI 數位設計工具箱」總覽

這學期不會只聊理論,每週兩小時的課程節奏非常快。為了幫你們的畢業專題加上數位翅膀,我們將陸續解鎖五大 AI 與數位設計武器庫。

以免費工具為主
工具會變,方法不會變AI 工具更新非常快,有些平台甚至會直接關閉。右側每一類都標示「本課目前使用」的工具與對應單元,各單元講義會說明免費版的實際限制。
本學期 AI 數位設計工具箱總覽
點圖可放大.AI 數位設計工具箱
AI 視覺與文案

負責在展前幫你擴充海報素材、發想社群文案,做你最強大的圖文助理。

本課使用:Claude、ChatGPT、Gemini、Moonland
單元 03 →
UI/UX 介面設計(Figma)

業界標準介面設計軟體。搭配 AI 外掛,快速拉出 App 介面與網頁原型(Prototype)。

本課使用:Figma
單元 05 →
No-Code 網頁建置

視傳系不用苦背 HTML/CSS!把設計稿直接變成真正能上網、有精緻動態效果的官方網頁。

原規劃 Webflow/Framer → 本課使用:Claude、Lovable+GitHub Pages
單元 05 →
互動與擴增實境

觀展者拿起手機掃描實體週邊,畫面就會跳出會動的 3D 物件或濾鏡,達成虛實整合。

原規劃 Spark AR/Adobe Aero(已停止服務)→ 本課使用:MyWebAR、MindAR
單元 07 →
AI 動態與短影音

上傳畢製的靜態海報,輸入 Prompt(提示詞),AI 就會算出生動的動態影片,直接拿來剪輯前導宣傳片。

本課使用:Moonland、Seedance、Kling、CapCut
單元 06 →
STAGE 06

核心觀念建立:AI 是放大器,不是替代品

⚠️ AI 是放大你設計創意的「工具」,而非取代你思考的「機器」。很多人擔心 AI 會讓設計師失業,但在這堂課上你會發現:如果一個設計師沒有核心的審美與觀點,AI 算出來的東西只會是一堆精緻的垃圾。

01靈魂在於你們的畢製主視覺

AI 無法憑空猜出你們小組花了半年田野調查得出的專題核心。這學期所有 AI 工具的輸入源(Input),都是你們已經做好的畢製核心視覺、色彩計畫與字體規範。

02主導權永遠在設計師手上

AI 負責處理繁瑣的「像素生成」與「規格優化」,而你們扮演「總監(Art Director)」的角色,去篩選、修正、拼貼,並賦予這些數位物件靈魂。

03完美度取決於美學底子

網頁的排版、動態的節奏、AR 的互動美感,依然考驗著你們前三年所學的色彩學、構成、編排與視覺心理學。AI 只會縮短你點滑鼠的時間,不會提高你的品味。

STAGE 07

工作坊:畢製視覺資產的「數位化拆解」

經過上半節課的案例洗禮,接下來直接動手。請各組組長把畢業專題的所有視覺資產全部雲端共享打開,我們要進行一場「從靜態到數位的基因重組」。

產出:品牌數位化盤點表
先討論,再填表老師會下位到各組一對一指導。開始動筆填寫前,請各組核心成員圍在一起,針對右側三個關鍵問題進行「靈魂拷問」。

三個引導思考

Q1你們畢製的「核心視覺(Key Visual)」是什麼?如果它會動,它該怎麼動?
  • 不要只看整張海報:請把海報「圖層化(Layered)」拆解。主標題字體、背景紋理、核心 IP 角色、裝飾線條,這些都是獨立的燃料。
  • 動態想像力:如果你的視覺是一個液態的霓虹字體,它應該像岩漿一樣緩慢流動,還是像閃電一樣瞬間亮起?如果是一個角色,他的眼睛會眨嗎?背景的煙霧會飄嗎?這決定了第 6 單元(W13–14)製作動態海報時的「視覺節奏」。
Q2你們的 TA(目標受眾)在 IG/Threads 上最會被什麼樣的數位內容吸引?
  • 拒絕同溫層自嗨:思考你們的受眾到底是文青、宮廟文化愛好者,還是關注心理議題的 Z 世代?
  • 社群原生內容(Native Content):他們在 Threads 上喜歡看幽默諷刺的短文字,還是精緻的製程縮時?在 IG 上,什麼樣的視覺會讓他們「停留超過 3 秒」甚至願意主動轉發到限時動態?我們必須根據 TA 的滑手機習慣來設定數位內容的語氣(Tone of Voice)。
Q3實體作品(包裝、書籍或盲盒)中,哪一個部分最適合埋入 AR 互動彩蛋?
  • 尋找「觸發點(Trigger)」:AR 需要一個實體圖案作為媒介。
  • 虛實情境設定:觀展者撕開包裝的那個瞬間,手機掃過去會浮現什麼?是書籍封面上的幾何圖形立體化,還是包裝上的插畫角色跳出來跟你招手?AR 不是為了酷炫而做,而是為了延伸實體作品「講不完的故事」。

實作工具:品牌數位化盤點表(範例)

請各組依照以下格式,將既有資產填入左側,並與組員激盪出右側的數位想像:

專題物件分類目前實體/靜態資產現況預計數位轉型延伸構想(18 週目標)核心觸發點/社群吸睛點
主視覺與圖層例:亮面幾何插畫、去背角色 3 款、特調螢光綠色計畫。例:將角色眼神做微動態,背景螢光綠進行呼吸燈特效。動態海報在前 3 秒內利用強烈色彩對比吸引眼球。
文字與論述例:3000 字的田野調查報告、一組客製化標準字。例:將報告拆解成 5 篇 Threads 趣味快問快答、標準字網頁化。利用 ChatGPT/Gemini 轉化為帶有厭世感、適合轉發的社群迷因金句。
實體載體(周邊)例:精裝盲盒 5 款、雙面印刷謝卡。例:掃描盲盒外觀,手機會浮現該款怪物的 3D 動態介紹。以盲盒封面圖案作為 AR Trigger,引導觀眾拍照打卡換小禮物。
STAGE 08

分組腦力激盪:數位行銷延伸藍圖

本週的核心任務:各組打開 Figma 或 Notion 協作頁面,繪製專題的「數位行銷延伸藍圖(Digital Marketing Blueprint)」,把 Web、Video、AR、Motion 四個物件串成一個生態系。

產出:Figma 數位藍圖
數位行銷延伸藍圖範例
點圖可放大.數位行銷延伸藍圖

檢核重點 Checklist

✗ 不可多頭馬車四個物件的視覺靈魂(色彩、字體、氛圍)必須極度統一,讓人一看就知道是同一個畢業專題。
✓ 導流路徑明確短影音最後要引導人點選 Bio 的 Web 連結;現場的 Motion 海報下方要附上 AR 的 QR Code。這才叫做生態系。
STAGE 09

畢業專題數位化轉型規劃藍圖:四組範例

以下是本屆四組專題的品牌數位化盤點表與數位延伸四象限矩陣分析。四象限以「互動性高低」×「靜態知識/動態情境」分成四類,幫助檢查數位物件是否涵蓋了不同的體驗層次。

菇
菇台灣毒蘑菇教育應用設計
一、品牌數位化盤點表
盤點項目現有實體基礎轉型數位化策略數位化預期效益
核心內容分類明確的腸胃性、神經性、儲血性台灣毒菇圖鑑與其毒性、分布資料。將圖鑑資料庫雲端化,並建立可供開放查詢的「台灣毒菇線上互動百科」。打破實體印刷載體限制,方便社會大眾與戶外愛好者隨時即時檢索。
產品媒介實體蝴蝶頁精裝立體書、班蝶蕈燈(摺紙照明結構)、綠褶熱墊(放射狀隔熱墊結構)。在實體燈飾與熱墊底座內嵌 NFC 晶片,手機感應即可觸發手機顯示該毒菇的數位 3D 動態生態。創造虛實整合(Phygital)的體驗,將日常家居美學與數位科普教育無縫連結。
推廣管道戶外模擬展示海報、展場實體成果陳列。開發「毒菇野外 AR 辨識濾鏡」(可上架至 Instagram/TikTok 等主流社群)。降低晦澀科普知識的接受門檻,透過社群病毒式傳播吸引年輕學生族群。
老師提醒:Instagram 已無法上架自訂濾鏡,「AR 辨識濾鏡」建議改為網頁 AR 濾鏡+限動連結貼紙,作法見 單元 07 第 10 關。
二、數位延伸四象限矩陣圖|【菇】數位延伸(毒蘑菇 VR)
I
高互動性 × 靜態知識:沉浸式虛擬圖鑑空間
  • 核心概念:打破傳統制式、枯燥的文本閱讀體驗,將「毒蘑菇圖鑑」立體化轉譯。
  • 數位功能:
    • 3D 立體觀察:使用者可透過 VR 手勢自由放大、縮小、旋轉菇體,近距離觸發並觀察放射狀的菌褶紋理。
    • 三冊主題展廳:依據「腸胃型、神經型、儲血型」三種毒性分類設立三大虛擬主題展廳。
II
高互動性 × 動態情境:野外模擬採集與迷思破解
  • 核心概念:針對主要目標族群(年輕學生、親子家庭),創造生活化的學習體驗。
  • 數位功能:
    • 擬真生態環境:模擬台灣平原、低中高海拔等潮濕林地生態,體驗因氣候與海拔產生的真菌多樣性。
    • 採集互動遊戲:提供野外模擬採集情境,透過答題機制澄清大眾「鮮豔蘑菇一定有毒、白色看似無害」的常見認知偏見。
III
低互動性 × 靜態知識:毒性警示與特徵對照
  • 核心概念:精準傳遞科學教育知識,降低大眾野外誤食的致命風險,建立基本辨識認知。
  • 數位功能:
    • 毒性與症狀告示:靜態展示如綠褶菇(引發嘔吐腹瀉)、毒鵝膏(致肝腎衰竭)等科學毒性症狀。
    • 結構特徵標註:文字與視覺符號動態標註「菌環、菌托、菌蓋顏色及特殊黏液」等安全辨識特徵。
IV
低互動性 × 動態情境:虛實整合之日常設計延伸
  • 核心概念:呼應「耳濡目染」之設計核心,將數位體驗與實體文創產品(班蝶蕈燈、綠褶熱墊)相連結。
  • 數位功能:
    • 光影穿透模擬:在虛擬空間中模擬實體「班蝶蕈燈」結合摺紙結構所產生的神祕放射狀光影效果。
    • 產品脈絡引導:透過 VR 情境演示如何將菇類觀察的生態細膩之美,轉化為貼近日常的生活文創美學。

四象限:I 高互動×靜態知識.II 高互動×動態情境.III 低互動×靜態知識.IV 低互動×動態情境(浪、拜 兩組依專題需求自訂象限主題)

修課與評分規範

因為課程包含大量 AI 工具實作與現場指導,缺席一堂後面會很難跟上,請每週準時出席。完整週次與日期見 時程規範。

40%課堂出席與參與度、平時作業

每週準時出席,完成各單元課後作業、課堂練習與分組實作。

30%階段性數位物件發表
  • 期中前:繳交官方網頁/App 原型。
  • 期中後:繳交動態海報與 AR 互動成果。
30%期末數位內容行銷成果大展

第 18 週,各組在現場展示完整的數位行銷大禮包(網頁、前導片、AR、動態海報)。這份成果將直接作為畢業展(新一代/放視大賞)現場展出的數位大補帖。

HomeWork|【作業01】畢業專題「數位內容行銷」品牌盤點表

小組繳交:完成課堂工作坊表格與數位行銷延伸藍圖。

交付內容

  • 形式:小組繳交
  • 品牌數位化盤點表:完成課堂上的工作坊表格,將畢製既有的靜態專題物件(海報、包裝、書籍等)拆解成圖層與元素
  • 四個數位物件:具體規劃出「1 Web+1 Video+1 AR+1 Motion」的延伸方向
  • TA 分析:目標受眾是誰、在社群上會被什麼內容吸引
  • 數位行銷延伸藍圖:在 Figma 範本中完成,並參考第 09 關的四象限矩陣

接下來的單元

  • 單元 02:用 AI 建立品牌 Moodboard 與視覺風格
  • 單元 03:品牌語氣與 18 週社群矩陣
  • 單元 04:整合成「數位生態系藍圖」企劃書
小提醒:本週盤點表是整學期的地基,後面每個單元都會回來修改它。建議放在小組共用雲端,保留每次修改的版本。

繳交前自我檢核

逐項勾選確認,瀏覽器會記住你的勾選狀態

0 / 8(0%)