每張封面只給一個焦點,約佔畫面的 25–45%。如果焦點是人臉,就裁得緊一些,讓臉至少佔畫面的 10–15%,只呈現一種清晰的表情,並保證眼睛和嘴巴周圍有良好對比。把它放在左側或中間三分之一,遠離右下角,再用眯眼測試和細節熱力圖確認它是視線最先找到的東西。
為什麼只要一個焦點
資訊流是一格格互相競爭的圖片。視線透過快速注視在它們之間跳躍,只在明顯突出的地方停下。有一個主導形狀的封面給了視線落點;五個同等元素的封面讓視線無處停留,於是滑走。
關於人們如何瀏覽網頁的研究描述了這種模式:人們不會閱讀每個元素,而是掃視尋找訊號,跳過其餘部分。在 168×94 畫素下這種效應更強,因為小細節消失了,只剩下最大、對比最強的形狀。
“使用者常以 F 形模式閱讀網頁”
F-Shaped Pattern of Reading on the Web — Nielsen Norman Group · 引文譯自英文原文
人臉或主體應該多大
尺寸是最重要的單一因素。佔畫面 3% 的人臉在側欄尺寸下只有幾個畫素寬,看不出表情。ThumbProof 會在檢測到的人臉面積不足畫面 4% 時發出提示,並把佔 5–60% 的最繁忙區域視為健康的主體。
| 人臉面積(佔畫面比例) | 在 168×94 下 | 表情可讀? | 結論 |
|---|---|---|---|
| < 4% | 臉約 12 px 寬 | 否 | 太小 |
| 4–10% | 約 20 px 寬 | 有時 | 臨界 |
| 10–25% | 約 30–45 px 寬 | 是 | 良好 |
| 25–45% | 約 45–60 px 寬 | 清楚 | 很強 |
| > 60% | 佔滿卡片 | 是,但沒有空間放背景資訊 | 慎用 |
對於產品、菜品或成果等非人臉主體,同樣的比例適用於物體的輪廓。
小尺寸下仍能看清的表情
細微的表情在圖片縮小後會消失。睜大的眼睛、張開的嘴、揚起的眉毛和明顯的歪頭能保留下來;淺淺的微笑或沉思的神情則不能。這並不是說每張封面都需要誇張的臉,但表情應在側欄尺寸下可讀,並與影片的基調一致。
光線和表情同樣重要。拍攝或後期時讓臉比背景更亮,並用清晰的陰影勾勒出眼睛和嘴巴。平光、正面光會讓臉在變小後看起來像一個空白的橢圓。
- 眼睛和嘴巴清晰
- 臉比背景亮
- 表情與影片基調一致
- 一張臉比三張臉更有力
位置:三分法、視線方向與角落
把焦點放在畫面左側或中間三分之一。這樣它遠離右下角的時長角標,並把上方留給兩三個詞。如果人物看向某個東西——物品、文字、結果——觀眾的視線往往會跟隨,所以讓主體朝向畫面內部而不是外部。
不要把臉放在最底部,那裡會被進度條和圓角切到;也不要把文字壓在眼睛或嘴巴上。
| 位置 | 適合 | 注意 |
|---|---|---|
| 左側三分之一 | 人臉 + 右上方文字 | 文字避開角標區 |
| 中間 | 單一物體、對稱構圖 | 文字只能放在上方或下方 |
| 右側三分之一 | 從文字讀到人臉的順序 | 臉可能與角標衝突 |
五步構建並檢查焦點
- 01
選定主體
選出能講述影片故事的那一張臉、一件物品或一個結果。
- 02
裁緊
放大到佔畫面 25–45%;如果是人臉,至少 10–15%。
- 03
打光並分離
讓主體比背景亮,並加上輪廓光或邊緣。
- 04
放在三分線上
左側或中間,朝向畫面內部,避開右下角。
- 05
驗證
做眯眼測試,開啟細節熱力圖,並檢視評分拆解中的主體一行。
ThumbProof 如何檢測人臉和主體
部分瀏覽器透過 Shape Detection API 提供內建人臉檢測器。可用時,ThumbProof 會在本地用它統計人臉數量並測量它們覆蓋畫面的比例。不可用時,工具根據邊緣密度估算主體:把圖片分成 16×9 的網格,找出最大的高細節連通區域,並報告它佔畫面的比例。
兩種方法都完全在你的瀏覽器中執行,不會把圖片傳送到任何地方。估算結果是參考,不是定論。雜亂的背景在邊緣檢測器看來可能像一個大主體,這正是熱力圖檢視有用的原因:它準確顯示細節在哪裡。
沒有人臉時
很多出色的封面裡根本沒有人:一件成品、一組強烈的前後對比、一張地圖、一張帶有醒目數字的圖表。規則相同——一個主體、夠大、有對比——只是你需要透過構圖、色彩和文字而不是表情來營造情緒。前後對比的分屏在 168×94 的灰度下仍能看出差異時效果最好。
加入輔助元素而不分散焦點
單一焦點並不等於只有一個元素。大多數出色的封面有一個主導主體加一個輔助元素:一個詞、一件物品、一個箭頭或第二張更小的臉。輔助元素應明顯更小——約為主體的三分之一到一半——並透過視線、位置或顏色指回主體。
背景同樣重要。模糊或壓暗的背景會把主體推到前面;清晰而細節豐富的背景則會與之競爭。如果你自己拍攝,使用大光圈或在後期加模糊,並把背景亮度比主體降低 20–40%。
| 元素 | 相對大小 | 作用 |
|---|---|---|
| 主體 | 100% | 視線最先落下的地方 |
| 輔助元素 | 30–50% | 補充背景或反轉 |
| 背景 | 柔和、更暗 | 襯托而不競爭 |
系列影片保持一致
如果你釋出系列或固定欄目,就複用構圖:人臉在同一側,文字在同一位置,同一個強調色。回訪觀眾會記住這種模式,在擁擠的資訊流中更快認出你的影片。每期更換表情、物品和文字,但保留骨架。
同時,避免反覆使用同一張臉部照片。如果每張封面都是同樣的驚訝表情,觀眾就不再把它當作訊號。每次錄製時多拍幾種表情,再挑與每期內容最匹配的那一張。
- 系列使用相同的版式骨架
- 變換表情和物品
- 每期多拍幾個備選
例項:合影與特寫
一張 vlog 封面展示四個朋友在海灘上,人物在畫面裡很小,背後是夕陽。每張臉約佔畫面 1%。熱力圖顯示細節均勻分佈在地平線上,主體估算為 68%,意味著沒有單一焦點。
重新設計後裁成一位朋友大笑的特寫,臉佔畫面 18%,放在左側,夕陽作為柔和背景。主體估算降至 31%,在側欄尺寸下也能看清臉。
| 指標 | 合影 | 特寫 |
|---|---|---|
| 最大人臉 | 約佔畫面 1% | 佔畫面 18% |
| 主體估算 | 68%(分散) | 31%(清晰) |
| 眯眼測試 | 沒有清晰形狀 | 人臉突出 |
| 168×94 下可讀 | 否 | 是 |
常見的焦點錯誤
人臉太小
遠景原尺寸很好看,在資訊流中卻無法辨認。
多個同等主體
三張同樣大的臉會分散注意力。讓其中一個佔主導。
文字壓在臉上
它會擋住最易辨認的元素。把字移到旁邊。
臉在角標角落
時長角標可能遮住下巴或眼睛。
平光
沒有陰影,臉在小尺寸下會變成空白形狀。
表情與內容不符
平靜的教程配上震驚的臉,會給出錯誤預期。
