多媒體元素課堂

多媒體入門

多媒體元素

多媒體是指結合多於一種媒體去傳遞資訊。我們在屏幕上看到的內容，大多由四種元素組成。點選其中一項開始，或按 → 依次序上課。

← → 或 PgUp PgDn 轉換投影片 O 所有投影片N 教師筆記T 計時器F 全螢幕Esc 離開滑桿，方向鍵便可再轉頁

文字

文字是最基本的多媒體元素。它能準確地傳遞圖像和聲音難以表達的資訊，例如名稱、指示、數字和標籤。

  • 標題吸引注意，並把內容分門別類。
  • 內文用來解釋細節。
  • 標籤和說明文字告訴我們圖片、按鈕或圖表的意思。
  • 文字的外觀（字體、大小、顏色）會影響閱讀的難易程度，以及給人的感覺。
本課題內容
同一句說話，不同感覺為全班輸入一個詞語

襯線字體與無襯線字體

襯線（serif）是筆畫末端的小裝飾，好像字母的「小腳」。無襯線（sans serif）字體就沒有這些小腳。

襯線 無襯線 襯線（小腳）
襯線無襯線
感覺傳統、正式、可信現代、簡潔、清晰
適合書本、報紙、長篇閱讀屏幕、路牌、標題、簡報
英文例子Times New Roman, GeorgiaArial, Helvetica, Calibri
中文例子明體／宋體（新細明體）黑體（微軟正黑體）
課堂遊戲：襯線還是無襯線？得分 0 / 0
Multimedia

字體大小

字體大小以點（pt）為單位，72 點等於紙上 1 吋。屏幕上常用像素（px）：12 pt 約等於 16 px。

  • 較大的字表示較重要：標題比內文大，這叫做層次。
  • 合適的大小取決於觀看距離：書本近在眼前，簡報則在遠處。
用途一般大小
註腳／圖片說明8–10 pt
印刷內文10–12 pt
標題16–28 pt
簡報投影片24 pt 或以上
海報72 pt 或以上
大小滑桿後排測試：大家都看得清楚嗎？
多媒體結合文字、圖像、聲音和影片。
逐步縮小，還有誰看得到？

字體與字型

字型（typeface）是字母的設計，例如 Arial。字體（font）是其中一個版本，例如 Arial 粗體 12 pt。今天大家通常把兩個詞互換使用。

  • 襯線：經典、正式。
  • 無襯線：簡潔、現代。
  • 手寫體：好像手寫字，優雅。
  • 展示／裝飾字體：搶眼，只適合大標題。
  • 等寬字體：每個字母一樣闊，用於程式碼。
  • 字形樣式：粗體、斜體、底線用來強調。
經驗法則一份設計最多用 2 至 3 種字體，太多字體會顯得凌亂。
字體切換器（英文字體）先選用途，再讓全班選字體
You're invited!

延伸：令文字更易讀

字體再好，也可能難以閱讀。顏色對比、對齊方式、行距和每行長度同樣重要。

  • 對比：淺色背景配深色文字（或相反）。對比太低便難以閱讀，用投影機時尤其明顯。
  • 對齊：靠左對齊最容易閱讀。置中只適合短標題。
  • 行距：行與行之間留少許空間，眼睛會舒服一點。
  • 全部用英文大楷（ALL CAPS）好像在大叫，而且讀得較慢。
無障礙設計一般文字的對比度建議最少為 4.5 : 1（WCAG 指引），讓視力較弱的人也能閱讀。
對比度檢查後排看得清楚嗎？
你能輕鬆讀到這句子嗎？
對比度–
評語–
對齊方式

多媒體結合了文字、圖像、聲音和影片。當文字對齊得宜，讀者的眼睛便能很快找到每一行的開頭，令長段落更容易閱讀。Good alignment helps the reader's eye find the start of each new line quickly.

文字檔案格式：TXT、DOCX、PDF

同一份內容可以儲存成不同的檔案格式。每次儲存都會產生一個獨立的檔案，各自保留不同的資訊，適合不同用途。

.txt.docx.pdf
儲存字體、粗體、顏色不可以可以可以
圖片和表格不可以可以可以
容易編輯容易容易困難
在任何裝置都一樣只有純文字版面可能走位一樣
一般大小（1 頁）約 2 KB約 15 KB 或以上約 30 KB 或以上
開啟程式任何文字編輯器（記事本）Word、Google 文件、LibreOffice任何 PDF 閱讀器或瀏覽器
最適合筆記、程式碼、設定檔仍在撰寫中的文件分享或列印的定稿
同一內容儲存成三個檔案比較三個檔案

我的旅行日記

星期六我們去了海灘。海水很暖，沙很軟。

按這裏任何位置輸入文字：.docx 是設計來讓人編輯的。

小測：文字

圖像：由像素組成

數碼相片是由一格格細小的彩色方格組成的，這些方格叫像素（pixel，picture element）。每個像素用數字記錄一種顏色：紅、綠、藍三種光各有多少（RGB），由 0 至 255。

把滑鼠移到圖片上放大
放大 15 × 15 像素
R – G – B –

延伸：點陣圖與向量圖

儲存圖片有兩種方法。點陣圖（bitmap／raster）記錄每一個像素。向量圖（vector）用數學記錄形狀：「這裏有一個圓形，這麼大，這種顏色」。

點陣圖向量圖
組成像素點、線、曲線
放大時變成鋸齒格仔依然清晰
適合相片標誌、圖示、字體、圖表
格式JPG、PNG、GIF、BMP、HEICSVG、AI、EPS（及 PDF）
你知道嗎？字體也是向量圖，所以文字放大到任何大小都很清晰。
同時放大兩張圖拖動放大滑桿
點陣圖
向量圖

解像度

解像度是圖像有多少個像素，寫成闊 × 高。像素越多，細節越多，但檔案也越大。

像素數目 = 闊 × 高
1920 × 1080 = 2,073,600 ≈ 210 萬像素（2.1 MP）
  • 1 百萬像素（MP）= 100 萬個像素。1200 萬像素的手機鏡頭，拍出的相片約為 4000 × 3000 像素。
  • 列印時會用 PPI / DPI（每吋像素／點數）。300 PPI 印出來很清晰；屏幕上 72–150 PPI 已足夠。
  • 把細小的圖像放大不能增加細節，只會令像素變大（像素化／「起格」）。
解像度滑桿由低開始，慢慢調高
解像度
像素總數
未壓縮大小

色彩深度

色彩深度（位元深度）是每個像素用多少個位元來記錄顏色。位元越多，可用的顏色越多。

顏色數目 = 2位元數
1 位元 → 2 · 8 位元 → 256 · 24 位元 → 16,777,216
位元顏色數目例子
12黑白
24早期手提遊戲機
416舊式電腦
8256GIF 圖像
1665,536「高彩」
24約 1,677 萬「全彩」：JPG、PNG
減少色彩深度留意天空
顏色數目
檔案大小（800 × 500）

長寬比

長寬比（aspect ratio）是圖像的形狀：闊 : 高。1920 × 1080 和 1280 × 720 的大小不同，但形狀同樣是 16 : 9。

比例常見用途
1 : 1正方形社交媒體帖文、頭像
4 : 3舊式電視、不少平板電腦及手機相片
3 : 2相機相片、6 × 4 吋相片
16 : 9闊屏電視、YouTube、簡報
9 : 16手機限時動態、Reels、TikTok
計算機
× = 16 : 9
把相片放進另一個形狀哪一種最好看？

壓縮：無損與有損

壓縮令檔案變細，載入和傳送都更快。壓縮分為兩種。

無損壓縮有損壓縮
原理用較短的方法寫出相同資料刪走人們不太察覺的細節
質素與原檔完全相同永久失去部分質素
檔案大小較細細得多
圖像格式PNG、GIFJPG、HEIC、WebP（有損）
好比…把行李箱執得整齊留低部分衣服在家
完全沒有壓縮BMP 一般是未經壓縮的：它把每個像素原封不動地儲存，所以檔案極大。它既不是無損壓縮，也不是有損壓縮。
注意JPG 每編輯並重新儲存一次，質素便會再差一點。
無損壓縮示範：行程長度編碼（RLE）點選方格塗色
原本16 個數值
壓縮後
節省

「5W」即「5 個白色像素」。大片單一顏色很容易壓縮；雜亂的圖案則不然，所以相片需要有損壓縮。

有損壓縮示範：JPG 質素

儲存 JPG 時可以選擇質素。質素越低，丟棄的細節越多，檔案越細。這個示範會在瀏覽器中真正壓縮圖片。

壓縮比–
節省空間–
  • 留意文字和熱氣球附近出現的方格和模糊邊緣，這些叫壓縮瑕疵（artifacts）。
  • 質素約 70–85 時，大部分人看不出分別，但檔案已細得多。
JPG 質素滑桿試試降到 5%
放大 4 倍

圖像檔案格式

每種格式在質素、大小和功能之間有不同取捨。

格式壓縮顏色透明背景動畫最適合
BMP未經壓縮（檔案極大）最多約 1,677 萬不支援不支援舊式 Windows 程式；現已少用
JPG / JPEG有損約 1,677 萬不支援不支援網站、電郵、相機的相片
PNG無損約 1,677 萬支援（平滑）不支援標誌、截圖、邊緣銳利的圖形
GIF無損只有 256 種支援（全透明或不透明）支援簡單動畫、表情圖
HEIC有損（較新、效率更高）數十億（10 位元）支援支援iPhone 相片：大小約為 JPG 一半
示範圖片的實際檔案大小在瀏覽器中量度

BMP、PNG 和 JPG 是即時量度的。GIF 和 HEIC 是一般估計，因為瀏覽器不能儲存這兩種格式。

你會選擇哪種格式？先投票，再看答案
用電郵把旅行相片寄給嫲嫲

JPG：檔案細、相片好看、任何裝置都能開啟。

透明背景的學校校徽

PNG：無損、邊緣銳利、支援透明背景。（如果是向量圖，可用 SVG！）

在聊天程式傳送一段搞笑短動畫

GIF：支援動畫，幾乎所有地方都能顯示。

把試算表截圖放進報告

PNG：文字保持清晰。JPG 會在字邊加上模糊的瑕疵。

在 iPhone 儲存數千張相片

HEIC：質素與 JPG 相同，但大小約只有一半。

小測：圖像

聲音：由聲波變成數字

聲音是空氣的振動。咪高峰把振動轉成波形，電腦每秒量度這個波形很多次，並把每次量度的結果存成數字，這就是數碼聲音。

  • 頻率（Hz，赫茲）= 振動有多快 = 音高。人耳大約聽到 20 Hz 至 20,000 Hz。
  • 振幅 = 波形有多高 = 響度。
  • 由類比轉為數碼要作兩個決定：多久量度一次（取樣率），以及量度得多精確（位元深度）。
音調產生器先把音量調低
試試很低和很高的音。誰還聽到 15,000 Hz？

取樣率

取樣率是每秒量度聲音的次數，單位是赫茲（Hz）或千赫（kHz）。取樣率越高，細節越多，檔案越大。

取樣率用途
8 kHz傳統電話
22.05 kHz低質素網上聲音、收音機
44.1 kHz音樂 CD、Spotify
48 kHz影片和電影聲音
96 kHz 或以上專業錄音室
為甚麼是 44.1 kHz？取樣率只能記錄最高為其一半的頻率（奈奎斯特極限）。44,100 的一半是 22,050 Hz，剛好高於人耳能聽到的最高聲音。
2,000 Hz 音調的 1 毫秒圓點 = 取樣
每秒取樣次數
可記錄的最高音
留意「嚓嚓」的鈸聲：取樣率低時會消失。

位元深度

位元深度是每個取樣量度得多精確。每個取樣都要「貼」到最接近的級數。位元越多 = 級數越多 = 聲音越乾淨。

級數 = 2位元數
8 位元 → 256 級 · 16 位元 → 65,536 · 24 位元 → 16,777,216
  • 16 位元是 CD 質素；24 位元用於錄音室。
  • 位元太少會產生「沙沙」雜音和失真。
  • 每多 1 位元，動態範圍（最靜與最響聲音之間的差距）便增加約 6 dB。
把波形貼到級數上灰色 = 真實波形，彩色 = 儲存的數值
級數
動態範圍

聲道數目

聲道是送到一個喇叭的一條獨立聲音。聲道越多，越能令聲音聽起來從不同方向傳來。

  • 單聲道（1 個聲道）：每個喇叭播放相同聲音。電話、語音訊息、Podcast。
  • 立體聲（2 個聲道）：左右聲道不同。音樂、遊戲、大部分影片。
  • 5.1 環迴立體聲（6 個聲道）：前左、中置、前右、兩個後置喇叭，以及播放低音的超低音喇叭（「.1」）。電影院和家庭影院。
  • 2 個聲道的資料量是單聲道的兩倍。
前左
中置
前右
.
你
超低音 .1
後左
.
後右
喇叭測試最好用兩個喇叭或耳筒
左
右

圓圈顯示每個聲道此刻有多響。

時長與檔案大小

時長是聲音播放多久。未經壓縮的聲音，每一秒的資料量都一樣，所以可以準確計算出檔案大小。

檔案大小（位元）= 取樣率 × 位元深度 × 聲道數目 × 時長（秒）
位元組 = 位元 ÷ 8 · 1 KB = 1024 位元組 · 1 MB = 1024 KB
位元率位元率 = 取樣率 × 位元深度 × 聲道數目，即每秒的資料量，單位是 kbps（每秒千位元）。CD 聲音：44,100 × 16 × 2 = 1,411 kbps。
聲音檔案大小計算機試試一首 3 分鐘的歌
位元率
檔案大小
4 GB 手機空間可放幾首

聲音壓縮

未經壓縮的聲音檔案很大。無損壓縮（FLAC、ALAC）可縮小約一半，聲音完全不變。有損壓縮（MP3、AAC）刪走人耳較難察覺的聲音，檔案通常細 5 至 10 倍。

以一首 3 分鐘立體聲歌曲計算。有損壓縮的質素以位元率（kbps）選擇：越高聲音越好，檔案也越大。

有損壓縮的原理它運用心理聲學：先刪走非常高的聲音，以及被響亮聲音掩蓋的微弱聲音。
聽聽有甚麼分別模擬示範

這個示範模擬有損檔案在較低位元率時失去高頻的情況。真正的 MP3 編碼器更聰明，所以 128 kbps 或以上，大部分人都聽不出分別。

聲音檔案格式

檔案格式決定聲音如何儲存和壓縮，以及哪些裝置可以播放。

格式壓縮質素大小（3 分鐘歌曲）一般用途
WAV沒有完美約 30 MB錄音和剪輯（Windows）
AIFF沒有完美約 30 MB錄音和剪輯（Apple）
FLAC無損完美約 15–20 MB音樂收藏家、高音質串流
MP3有損良好約 3–7 MB幾乎所有裝置都能播放
AAC (.m4a)有損相同大小下比 MP3 好約 3–6 MBApple Music、YouTube、iPhone
OGG / Opus有損（開放、免費）非常好約 2–5 MBSpotify、遊戲、語音通話（WhatsApp、Discord）
MIDI 延伸不是錄音！視乎樂器音色約 10–50 KB儲存音符（「彈 C、大聲、一拍」），而不是錄下的聲音
你會選擇哪種格式？先投票，再看答案
在錄音室錄下樂隊演奏，然後剪輯

WAV 或 AIFF：未經壓縮，剪輯時不會損失質素。

把 2,000 首歌放進舊式 MP3 機

MP3：檔案細，到處都能播放。

以完美音質收藏心愛的專輯，同時節省空間

FLAC：無損，大小約為 WAV 一半。

在聊天程式傳送語音訊息

Opus / AAC：有損、檔案極細、人聲清晰。通常是單聲道！

小測：聲音

影片：一本會動的翻頁書

影片是一連串靜止的圖像，叫做影格（frame），快速地逐張播放，通常配有聲音。我們的大腦會把它們融合成流暢的動作。

  • 影片結合了之前學過的所有元素：它有圖像的特性（解像度、長寬比、色彩深度），也有聲音的特性。
  • 它也有自己的特性：幀率和時長。
  • 由於要儲存大量圖像，影片是最大的多媒體檔案，所以壓縮非常重要。
翻頁書逐格看，然後播放

影片解像度

與圖像一樣，影片解像度是以像素計的闊 × 高，但通常以高度命名（「1080p」）或用別稱（「4K」）。

按真實比例繪畫。1080p 中的 p 代表逐行掃描（progressive）：每一格都會畫出畫面的每一行。

在 4K 大電視上播放同一段影片模擬
名稱
每格像素
與 1080p 比較

影片長寬比

當影片形狀與屏幕形狀不同，便會出現黑邊。上下的黑邊叫信箱式（letterbox）；左右的黑邊叫柱箱式（pillarbox）。

比例用途
4 : 3舊電視節目（約 2009 年前）
16 : 9高清電視、YouTube、大部分影片
9 : 16直向手機影片：TikTok、Reels、Shorts
2.39 : 1電影院「闊銀幕」電影
在另一種屏幕播放影片
影片形狀
屏幕
模式

影片色彩深度

影片的色彩深度通常以每個顏色通道計算。一般影片的紅、綠、藍各用 8 位元（每像素 24 位元）。HDR 影片每個通道用 10 位元。

顏色數目 = (2每通道位元)3
8 位元：256³ = 約 1,677 萬
10 位元：1024³ = 約 10.7 億
  • 位元太少會出現色帶：天空、陰影等平滑地方出現一條條色帶。
  • HDR（高動態範圍）用 10 位元色彩，令亮部更亮、漸變更平滑，但需要 HDR 屏幕。
日落天空：每通道位元數找找色帶
每通道色階
顏色總數
每像素位元

大部分投影機和手提電腦屏幕每通道只顯示 8 位元，所以這裏無法顯示 10 位元。

幀率

幀率是每秒顯示的影格數目，單位是 fps（每秒影格數）。幀率越高越流暢，但需要更多資料。

fps用途
12簡單動畫、GIF
24電影（「電影感」）
25 / 30電視和網上影片
60體育、電子遊戲、流暢的手機影片
120 – 240慢動作影片
慢動作以 240 fps 拍攝、以 30 fps 播放：一秒的動作會變成 8 秒。
比較幀率留意皮球和雲
你的選擇
參考：60 fps

時長與檔案大小

時長是影片的播放時間。未經壓縮的影片每多一格便大一點，數字很快便變得非常巨大。

每格大小 = 闊 × 高 × 色彩深度
未壓縮大小 = 每格大小 × 幀率 × 時長
  • 所以影片幾乎都會用編解碼器（codec，如 H.264、H.265、AV1）壓縮。
  • 編解碼器也會在影格之間節省空間：如果背景沒有移動，便只儲存有變化的部分。
  • 串流質素以位元率（Mbps）衡量：YouTube 1080p 約用 8 Mbps。
影片大小計算機試試 2 小時的 4K 電影

壓縮後的大小以一般串流位元率加 128 kbps AAC 聲音估算。

影片檔案格式：容器與編解碼器

影片檔是一個容器（盒子，例如 .mp4），裏面裝着多條軌道。每條軌道都用編解碼器（壓縮的方法，例如 H.264）壓縮。

打開盒子看看選一個容器
影像軌
聲音軌
字幕
元數據標題、時長、日期、地點
開發者
最適合
編解碼器說明
H.264 (AVC)處處通用，最常見的編解碼器
H.265 (HEVC)相同質素下大小約一半；用於 4K 和 iPhone
VP9 / AV1免費開放的編解碼器，YouTube 和 Netflix 使用
ProRes質素極高、檔案極大，用於專業剪接
為何我的影片播放不到？播放器可能打得開容器（.mp4），卻不認識裏面的編解碼器。盒子一樣，裏面的東西卻不認得。

影片的聲音部分

大部分影片除了畫面，還有一條或多條聲音軌。聲音必須與影格同步，否則對白便會「口形唔啱」。

  • 影片中的聲音可包括對白、旁白、音樂和音效，通常混合成一條聲音軌。
  • 聲音有自己的特性：取樣率（通常 48 kHz）、位元深度、聲道（立體聲或 5.1）和編解碼器（常用 AAC）。
  • 一個檔案可以有多條聲音軌，例如粵語、普通話和英語。
  • 聲音早過畫面約 45 毫秒或遲過約 125 毫秒，觀眾便會察覺。
聲畫同步示範按開始，然後移動滑桿

小測：影片

延伸：四大元素以外

不少課本還會列出另外兩種多媒體元素，而每位創作者都要認識版權。

動畫拖動滑桿

動畫是用繪圖或電腦圖像製造的動作，而不是用攝影機拍攝。電腦可以在兩個關鍵影格之間自動補上中間的影格，稱為補間（tweening）。

互動當用家可以控制多媒體內容時，它便是互動的：按按鈕、在遊戲中選擇路線、拖動滑桿。這一課本身就是互動多媒體！
版權網上找到的文字、圖片、音樂和影片都屬於某人。請使用自己的作品、取得許可，或使用採用創用 CC（Creative Commons）授權或屬於公共領域的素材，並且要註明作者。
選擇合適的元素文字用來表達準確資料，圖像展示事物的外觀，聲音營造氣氛和傳達說話，影片展示動作和隨時間的變化。好的多媒體作品會有目的地把它們結合。

總結：各元素有甚麼特性

很多特性是共通的，影片幾乎借用了圖像和聲音的所有特性。點選圓點可跳回相關投影片。

離堂問題為甚麼 1 分鐘的影片檔，比 1 分鐘的歌曲或 1 頁文件大得多？