指南 · 閱讀約 7 分鐘

人臉與焦點:讓一個元素不可能被忽視

如何圍繞一個焦點(通常是人臉)構建封面,讓它在 168×94 下一眼就能看懂,附尺寸、擺放規則和測試方法。

快速答案

每張封面只給一個焦點,約佔畫面的 25–45%。如果焦點是人臉,就裁得緊一些,讓臉至少佔畫面的 10–15%,只呈現一種清晰的表情,並保證眼睛和嘴巴周圍有良好對比。把它放在左側或中間三分之一,遠離右下角,再用眯眼測試和細節熱力圖確認它是視線最先找到的東西。

1視覺核心主體
168×94清晰度檢測尺寸
0.09清晰度指標

為什麼只要一個焦點

資訊流是一格格互相競爭的圖片。視線透過快速注視在它們之間跳躍,只在明顯突出的地方停下。有一個主導形狀的封面給了視線落點;五個同等元素的封面讓視線無處停留,於是滑走。

關於人們如何瀏覽網頁的研究描述了這種模式:人們不會閱讀每個元素,而是掃視尋找訊號,跳過其餘部分。在 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%佔滿卡片是,但沒有空間放背景資訊慎用

對於產品、菜品或成果等非人臉主體,同樣的比例適用於物體的輪廓。

小尺寸下仍能看清的表情

細微的表情在圖片縮小後會消失。睜大的眼睛、張開的嘴、揚起的眉毛和明顯的歪頭能保留下來;淺淺的微笑或沉思的神情則不能。這並不是說每張封面都需要誇張的臉,但表情應在側欄尺寸下可讀,並與影片的基調一致。

光線和表情同樣重要。拍攝或後期時讓臉比背景更亮,並用清晰的陰影勾勒出眼睛和嘴巴。平光、正面光會讓臉在變小後看起來像一個空白的橢圓。

  • 眼睛和嘴巴清晰
  • 臉比背景亮
  • 表情與影片基調一致
  • 一張臉比三張臉更有力

位置:三分法、視線方向與角落

把焦點放在畫面左側或中間三分之一。這樣它遠離右下角的時長角標,並把上方留給兩三個詞。如果人物看向某個東西——物品、文字、結果——觀眾的視線往往會跟隨,所以讓主體朝向畫面內部而不是外部。

不要把臉放在最底部,那裡會被進度條和圓角切到;也不要把文字壓在眼睛或嘴巴上。

位置適合注意
左側三分之一人臉 + 右上方文字文字避開角標區
中間單一物體、對稱構圖文字只能放在上方或下方
右側三分之一從文字讀到人臉的順序臉可能與角標衝突

五步構建並檢查焦點

  1. 01

    選定主體

    選出能講述影片故事的那一張臉、一件物品或一個結果。

  2. 02

    裁緊

    放大到佔畫面 25–45%;如果是人臉,至少 10–15%。

  3. 03

    打光並分離

    讓主體比背景亮,並加上輪廓光或邊緣。

  4. 04

    放在三分線上

    左側或中間,朝向畫面內部,避開右下角。

  5. 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 下可讀否是

常見的焦點錯誤

人臉太小

遠景原尺寸很好看,在資訊流中卻無法辨認。

多個同等主體

三張同樣大的臉會分散注意力。讓其中一個佔主導。

文字壓在臉上

它會擋住最易辨認的元素。把字移到旁邊。

臉在角標角落

時長角標可能遮住下巴或眼睛。

平光

沒有陰影,臉在小尺寸下會變成空白形狀。

表情與內容不符

平靜的教程配上震驚的臉,會給出錯誤預期。

FAQ

相關問題解答

有人臉的封面效果更好嗎?

人臉識別快、能吸引注意,但只有在夠大且有表情時才有效。一個有力的物體或成果同樣可以奏效。

封面中的人臉應該多大?

至少佔畫面 10–15%,這樣在 168×94 下依然可讀。低於約 4% 時表情就消失了。

人臉應該放在哪裡?

左側或中間三分之一,朝向畫面內部,遠離出現時長角標的右下角。

封面上應該有幾張臉?

通常一張最有力。如果需要兩張,讓其中一張明顯更大,或使用帶清晰分隔線的分屏版式。

ThumbProof 如何檢測人臉?

可用時使用瀏覽器內建的人臉檢測器,否則根據邊緣密度估算主體。兩種方式都在本地執行。

如果影片裡沒有人怎麼辦?

用一個大的物體、成果或對比作為焦點,並保持強對比。同樣的尺寸和擺放規則適用。

參考來源

文中規格與資料已於 2026年10月27日 對照以下公開資料核對。平臺規則會變化,重要釋出前請到官方幫助頁確認限制。

  1. Accelerated Shape Detection in Images (FaceDetector) — W3C WICG draft
  2. F-Shaped Pattern of Reading on the Web — Nielsen Norman Group
  3. Add custom thumbnails — video platform help center
繼續閱讀

相關指南與工具