品牌行銷

banner 品牌識別比例該佔多少?logo 越大不代表被記住

多數人以為,banner 裡的 logo 放得越大、品牌色塊占得越滿版,讀者的品牌印象就會跟著加深。眼動研究卻給出完全相反的答案,一張版面只要整體構圖看起來像廣告,讀者的視覺系統就會直接跳過,連 logo 有沒有被看到都成問題,跟 logo 占了整張 banner 的百分之幾其實沒有太大關係。

這個現象叫做 banner 盲視(banner blindness),Nielsen Norman Group 在 2007 年的眼動追蹤研究就記錄過,使用者幾乎不會注視任何看起來像廣告的版面元素,就算那塊區域根本不是廣告也一樣。放大品牌識別元素想讓讀者記住品牌,反而可能讓整塊 banner 被視覺系統濾掉,連被看見的機會都沒有。banner 品牌識別比例真正該解決的問題,從來不是 logo 該占多大,而是這塊版面會不會先被讀者的大腦判定成廣告。

既然 logo 再大也不保證被看見,比例該怎麼抓就不能只靠感覺。先從 logo 放大為什麼可能失靈講起,再一路拆到具體的抓法、位置跟曝光節奏。

Logo 放得越大,讀者反而看得越少?

banner 盲視不是 logo 太大或太小的問題,而是整塊版面的構圖方式決定了讀者要不要看它。大面積的色塊、置中滿版的排版、四周包一圈高對比的框線,這些手法本來是想讓 banner 更顯眼,結果卻讓它看起來越來越像廣告。使用者的視覺系統對這種樣式已經高度敏感,只要辨識出這是廣告區塊的訊號,視線掃過去的路徑就會直接繞開,連正眼看一下都省了。

同一組品牌識別的兩種構圖對照:置中滿版大 logo 被視覺系統當成廣告略過,適中 logo 融入版面才被真正看見。
logo 放大不等於被看見,版面會不會先被判定成廣告,才決定品牌識別有沒有機會被看進去。

Nielsen Norman Group 在 2007 年的眼動追蹤研究把這個現象講得很清楚,受測者的視線幾乎不會落在任何看起來像廣告的元素上,就算那塊區域其實是網站自己的內容、不是外部廣告,一樣被略過。即使少數使用者真的把視線停在 banner 上,他們也常常沒有看到 logo 或品牌名稱。視線停留在哪裡,跟有沒有真正看進品牌識別,是兩件不同的事。

這裡要拆成兩個不同的風險,別混在一起談。一個是 logo 太小、對比不夠,肉眼真的看不清楚;另一個是 logo 夠大、夠清楚,但整塊版面被判定成廣告,讀者根本不會把視線移過去。前者靠加大尺寸、拉高對比就能解決,後者靠加大尺寸反而可能惡化,因為版面越滿、越像置入,越容易被歸類成該忽略的區塊。banner 品牌識別比例要抓對,得先分清楚自己現在遇到的是哪一種風險。

Banner 裡的品牌識別元素,比例該抓多少?

知道 banner 盲視的成因之後,下一個問題很實際,品牌識別元素在 banner 裡該占多少視覺份量,才不會落入越滿版越容易被略過的陷阱。這裡有兩層可以直接拿來對照的具體數字,一層來自廣告產業行之有年的安全區公式,一層來自視覺識別規範裡的淨空間概念。兩者都能回頭查證,不是憑感覺喊出來的比例,可以直接拿它們檢查手上的 banner。

廣告安全區的抓法:中心 80%與 logo 留白公式

Google 針對回應式廣告提出的建議,是目前最常被引用的一套具體公式。核心內容,包含 logo,要留在整張版面中心 80%的範圍內,四周留 20%當緩衝,避免 logo 或文字被裁切、被平台自動套版時擠壓變形。logo 本身周圍的留白,也不應該超過 logo 尺寸的 1/16,也就是 logo 越大,留白也該跟著等比例放大,不能讓 logo 緊貼版面邊界。

在 logo 比例上,Google 也給了具體規格:方形 logo 建議 1:1,最小尺寸 128×128 像素,理想尺寸 1200×1200 像素;長方形 logo 建議 4:1,最小 512×128 像素,理想 1200×300 像素。這套規格原本是給廣告平台用的,但拿來對照網站 banner 裡的品牌識別配置一樣適用,與其憑感覺決定 logo 佔多大,不如先把它放進中心 80%的安全區,再用 1/16 留白公式檢查 logo 四周夠不夠呼吸空間。這是一套保底防呆的抓法,不是唯一正確答案,但至少讓比例判斷有數字可以對照,不是純粹的美感直覺。

廣告安全區示意:品牌識別放在版面中心 80% 範圍內、四周各留 10% 緩衝,避免 logo 被裁切或套版擠壓。
把品牌識別放進中心 80% 安全區、四周留 20% 緩衝,banner 品牌識別比例就有數字可以對照(資料來源:Google)。

淨空間怎麼留,才不會擠壓其他內容?

除了留在安全區裡,logo 四周還需要一圈淨空間(clear space),才不會被旁邊的文字、圖片或按鈕擠壓到失去清晰度。這個概念在各國政府與機構的視覺識別規範裡很常見,做法是先從 logo 本身挑一個固定的參考單位,通常是 logo 裡某個字母或圖形符號的高度,再規定 logo 四周至少要留出這個單位的空間,不管 banner 裡塞了多少其他內容,logo 旁邊那一圈空間都不能被壓縮。

阿聯政府的聯邦部會視覺識別規範就是這樣操作,淨空間以 logo 本身的字元高度當計算單位,logo 與版面邊界之間至少要留出這個單位的距離。美國小型企業管理局的 logo 使用規範也是同樣邏輯,用 logo 裡特定字母的寬高當單位訂出最小淨空間。這類規範的共通點,是把該留多少呼吸空間變成一個可以量出來的數字,而不是設計師憑手感抓。放到 banner 的實際操作上,代表比例判斷不能只看 logo 佔了整張圖的百分之幾,logo 周圍有沒有留夠淨空間,同樣是決定它會不會被讀者清楚辨識出來的關鍵。

logo 淨空間示意:以 logo 字元高度為一個 X 單位,四周至少各留一個 X,邊界內不放其他元素。
淨空間用 logo 自身字元高度當單位量出來,不論 banner 塞了多少內容,logo 四周這一圈都不能被壓縮。

決定讀者記不記得品牌的,是位置,不是 logo 尺寸

如果 logo 放大不保證被看見,心力該放在哪裡?Nielsen Norman Group 的另一份研究發現,同一個 logo 只要改變擺放的位置,記憶率就會出現明顯落差。研究找了 128 位受測者,把 logo 分別放在左上角與右上角進行比較,結果左上角的平均記憶率是 39%,右上角只有 21%,差距將近九成。這中間 logo 的尺寸完全沒有變動,唯一的變數就是位置。

長條圖顯示同一 logo 擺左上角記憶率 39%、擺右上角只有 21%,尺寸不變、位置是唯一變數。
logo 尺寸不變,只把位置從右上換到左上,品牌記憶率就從 21% 拉高到 39%(資料來源:Nielsen Norman Group)。

這個結果說明一件事,讀者對 logo 在不在慣用位置的依賴,遠高於 logo 夠不夠大。網頁瀏覽多年累積下來的習慣,讓多數人的視線本來就會先掃向左上角,logo 擺在那裡等於順著讀者既有的瀏覽動線走;擺到右上角,即使 logo 本身放得再大,也得先克服讀者原本沒有預期在那裡看到品牌識別的落差。

那單張 banner 裡 logo 沒有放到最大,品牌印象是不是就會變弱?心理學裡的重複曝光效應(mere-exposure effect)給出補足的答案。Zajonc 在 1968 年的經典研究提出,人只要反覆接觸同一個刺激,好感度與熟悉感就會跟著提升,後續發表在 Acta Psychologica 期刊、針對消費性商品情境的研究,也延伸驗證了這個發現。換句話說,品牌印象的累積,靠的是 logo 在固定位置反覆出現、一次又一次被看到,而不是靠單張 banner 裡 logo 佔的比例衝到最大。位置穩定加上重複曝光,才是真正決定讀者記不記得品牌的關鍵。

Banner 上的每個元素,都在搶同一塊注意力預算

logo 位置與曝光節奏決定了記憶率,但版面裡不是只有 logo 一個元素在爭注意力。讀者看一張 banner 的時間通常只有幾秒,這幾秒的注意力是一塊有限的預算,logo、品牌色塊、標題文案、行動呼籲按鈕跟主視覺圖像,全部要從裡面分配。這不是「看到 logo,也還看得到 CTA」這麼理所當然的事,注意力一旦分給某個元素多一點,能分給其他元素的份量自然就變少。

一份發表在 Behavioral Sciences 期刊的研究提供了具體的證據。這份研究用 AI 眼動追蹤與腦波技術分析 logo 裡各個組成元素拿到的注意力占比,結果顯示同一個 logo 裡,圖形符號拿到 33.19%的注意力,兩段文字則分別拿到 34.90%與 16.70%。這個數字證明了一件事,視覺元素之間確實在競爭同一塊注意力,份量分配不是模糊的感覺,是真的可以測量出來的落差。

橫向長條圖呈現同一 logo 內圖形符號 33.19%、兩段文字 34.90% 與 16.70% 的注意力占比落差。
同一個 logo 裡各元素拿到的注意力可以量出落差,證明版面元素確實在競爭同一塊注意力預算(資料來源:Behavioral Sciences)。

放大到 banner 整體的層次也是同樣邏輯。logo、品牌色塊、標題文案、行動呼籲按鈕,全部都是同一塊注意力預算的競爭者。把比例都讓給品牌識別元素,標題與行動呼籲能分到的視覺份量就會被壓縮,這也是為什麼 banner 品牌識別比例不能只從品牌想被看到多少出發,還要回頭問一句,這張 banner 真正的任務是什麼、哪個元素最需要優先被看到。

從「把 logo 放大」走向「抓對比例」,banner 可以怎麼調整?

前面幾節拆開了 logo 尺寸、位置、注意力分配的關係,回到自己手上的 banner,可以收斂成三個判斷角度直接拿去檢查。假設一個做外銷產品的中小團隊,官網首頁的 banner 同時想放品牌識別、產品賣點跟一顆詢價按鈕,三個角度剛好可以幫忙決定誰該拿到多少版面,而不是憑感覺把 logo 越放越大。

這張 banner,第一眼該留給品牌識別還是行動呼籲?

先問這張 banner 在整個網站流程裡扮演什麼角色。如果是網站入口頁的第一印象,讀者對這個品牌可能還不熟悉,識別元素可以分到多一點版面,幫讀者建立起最初的信任感;如果是已經有明確導購目的的行銷活動 banner,讀者通常已經知道品牌是誰,行動呼籲該拿到更多視覺份量,識別元素退居到一個穩定但不搶戲的位置就好。前面提到的中心 80%安全區規則跟 logo 位置的記憶率研究,都可以拿來對照,入口頁把識別元素放進安全區裡、擺在讀者熟悉的位置就夠了,不必再靠放大尺寸搶版面;活動 banner 則該把安全區跟版面份量優先讓給行動呼籲。

色彩與字體的一致性,比放大 logo 更能延續品牌調性

品牌識別能不能被記住,不是只靠 logo 這一個載體。色彩、字體、圖像風格如果在整個網站反覆出現,同樣能建立讀者對這個品牌的印象,而且不會佔用 logo 本身需要的比例。logo 做小一點,品牌感不會跟著變弱,只要 banner 的色彩與字體風格跟網站其他頁面維持一致,讀者累積的印象一樣會延續下去。這正好呼應重複曝光效應,讓讀者反覆看到同一套色彩與字體,比單張 banner 裡 logo 佔多大更能留下印象。

多支 banner 輪替曝光,比單張塞滿更貼近讀者的記憶方式

既然重複曝光才是建立熟悉感的關鍵,與其把所有品牌識別元素通通塞進單張 banner 裡佔到最大,不如讓不同版本的 banner 在不同頁面、不同時段輪流出現。讀者在不同地方一次又一次看到同一套識別元素,累積起來的記憶效果,會比死守著單張裡 logo 佔多少比例更扎實。比例決定的是一張 banner 看起來順不順眼,曝光的次數跟節奏,才是真正決定讀者最後記不記得住這個品牌的關鍵。

呼應開頭的反直覺斷言,這裡濃縮成一句可以直接記住的判斷準則。banner 品牌識別比例真正該解決的,從來不是 logo 佔多大這道算術題,而是這塊版面會不會先被讀者的視覺系統歸類成廣告,連被看到的機會都沒有。比例只是結果,構圖看起來像不像廣告、logo 擺在讀者習慣的位置,加上重複出現的節奏,才是真正的原因。下一次調整 banner 之前,先問這塊版面看起來像不像廣告,再回頭談比例該怎麼分配。

資料來源
  1. Banner Blindness: The Original Eyetracking Research — Nielsen Norman Group
  2. Website Logo Placement for Maximum Brand Recall — Nielsen Norman Group
  3. Best practices guide for responsive display ads — Google
  4. UAE Federal Ministry Logo - Visual Identity Guidelines — 阿聯政府聯邦部會
  5. Logo | SBA Brand Guide — 美國小型企業管理局
  6. Neuroscientific Analysis of Logo Design: Implications for Luxury Brand Marketing — Behavioral Sciences
  7. Attitudinal Effects of Mere Exposure(1968) — Zajonc
  8. The mere exposure effect for consumer products as a consequence of existing familiarity and controlled exposure — Acta Psychologica