廣告版面設計失焦?8 個最常見的原因一次看懂

一支廣告素材前後修了三個版本,主圖換過,文案也重新斟酌好幾輪,滑過去的人卻始終比停下來看的人多。素材品質檢查過,受眾設定也調整過,問題卻還是沒解,這種情況常見的真正原因,往往不是內容不夠好,而是畫面本身沒有一個讓視線優先落地的地方。

這種狀況有個明確的說法,叫版面失焦。版面沒有清楚的視覺優先順序(visual hierarchy),讀者的眼睛不知道該先落在哪裡,或者每個元素都想搶戲,結果沒有一個真的搶到。放對地方的一個焦點,能在使用者滑過畫面的短短幾秒內就完成溝通;版面一旦失焦,再好的文案跟再講究的攝影都很難被看見,前面的準備等於白花了功夫。

廣告版面設計失焦通常不是單一個錯誤,而是幾種常見做法疊加出來的結果,從只顧著把賣點塞好塞滿,到忽略視線移動的路徑都算。先從最根本的一種講起,想讓每個重點都被看到,反而什麼都沒被看到。

廣告版面設計失焦的 8 個常見原因一覽,從沒有單一視覺焦點、對比不足到裝飾過度一次看懂。
版面失焦多半卡在這 8 種,對照一次就知道自己的廣告中了哪幾條。

原因一:想讓每個重點都被看到,結果沒有一個真正的視覺焦點

很多設計不是輸在美感,而是輸在什麼都想留。怕漏掉任何一個賣點,主圖、標題、副標、按鈕全部放大、加粗、上鮮豔色,結果畫面裡沒有一樣東西真的比其他更醒目,讀者的視線反而無處可去。

視覺焦點是靠對比與取捨製造出來的,不是靠疊加醒目手法湊出來的。SiteGround Academy 對這個現象的說法很直接,每個畫面都該有一個清楚的焦點(通常是行動呼籲或核心賣點),其餘元素退到更安靜的角色,才會有真正的主從關係。全部搶戲,等於全部沒戲。

同一支廣告的對照:左邊每個元素都搶戲導致失焦,右邊只留一個焦點,視線一眼就知道先看哪裡。
全部搶戲等於全部沒戲;只留一個主角、其餘退為配角,短短幾秒就能完成溝通。

國外設計工具 SVGator 一篇整理常見設計錯誤的文章,提出一套很實用的三層焦點提問法:視線第一眼會落在哪裡?第二個吸引目光的大概是什麼?最後又停在哪裡?如果這三個答案含糊不清,或每個元素給出的答案都差不多,代表版面還沒有真正的焦點。

還有一個更直覺的自我檢查,問自己「如果整張圖只能留一個元素,會留哪一個」。答不出來,或答案是「都要留」,就代表這支廣告還沒決定好要讓觀眾先看什麼。常見的做法是先選定唯一主角,其餘元素主動降級為配角,而不是每一個都想當主角。

原因二:關鍵文字和背景對比不夠,重點被吃掉

就算已經選定了唯一的焦點,如果那個焦點在畫面上看不清楚,前面的取捨就等於沒有發生。對比(色彩、明暗、大小、疏密)是製造焦點最直接的手段,但很多廣告版面會把重點文字直接壓在複雜的背景圖或相近的色調上,結果重點被背景吃掉,尤其縮圖或行動裝置的小尺寸顯示時更明顯,放大看沒問題,縮小看卻糊成一片。常見的踩雷還包括邊框粗細或字重都選得差不多,導致哪個元素該優先被注意完全抓不出層級。

SiteGround Academy 建議一個簡單的自我檢查法,把畫面縮小,或者退遠幾步看,問自己還能不能一眼認出重點在哪裡。認不出來,就代表對比不夠。這個測試其實比在電腦前盯著原始尺寸檢查更貼近真實使用情境,畢竟多數人是在手機上滑過廣告,不是站在大螢幕前仔細端詳。

對比不是只有「換個顏色」這一種做法,大小、明暗、疏密都可以拉出層次。網頁內容的無障礙標準也提供了一個可以量化的參考,W3C 的 WCAG 2.1 規範要求一般文字與背景的對比比例至少達到 4.5:1,字級達到約 18 點以上(或加粗達 14 點以上)才放寬到 3:1。這個標準原本是為了讓視力不佳的使用者也能辨識文字,拿來檢查廣告版面的對比夠不夠,同樣是一個不算太嚴苛的底線。

原因三:畫面被塞滿,留白不夠讓視線喘息

留白(負空間)常被誤會成「還沒填滿的空間」,但它其實是引導視線、製造焦點的工具。很多設計新手覺得空著可惜,把每一寸版面都塞滿圖文,結果觀眾的眼睛沒有地方可以停留,也分不出誰才是真正的重點。廣告版位本來就有限,越是這種情況,設計者越容易急著把所有賣點一次塞進畫面,反而弄巧成拙。

留白的作用不只一種,除了單純製造焦點,還能引導視覺路徑、改善資訊的可理解程度,也能單靠間距把不同群組的內容分隔開來,這個分組的作用,後面談到相關資訊該不該靠在一起時還會再提到。SVGator 的分析另外整理出建立整體風格、讓版面看起來平衡兩種效果;SiteGround Academy 的說法則更直接,留白能帶來一種冷靜、清晰的感覺,讓使用者更快處理資訊,也更容易在畫面上多停留一會兒。

這裡有一個反直覺但很實用的原理,用留白包圍重點元素,反而會讓它更顯眼。原因不難理解,當一個元素周圍空空的,沒有其他東西跟它搶注意力,眼睛自然會被吸過去。下次版面覺得好像哪裡空空的,先別急著補圖補字,想一下這塊空白是不是正在幫忙。

原因四:文字大小粗細都差不多,看不出誰先誰後

畫面的整體對比與留白都顧到了,文字本身的層次卻還是常常被忽略。標題、副標、內文如果用差不多的大小與粗細,讀者無法判斷哪一行該先讀,畫面看起來就會扁平、沒有層次。

SiteGround Academy 把這個現象稱為「文字權重相等(equal-weight text)」,當所有文字看起來份量都一樣,使用者根本分不出誰比較重要。常見的兩種反例剛好相反,一種是全部文字都加粗,另一種是全部文字都用同一個大小,結果都等於沒有加粗、沒有分級。

比較可靠的做法,是先定出三層文字級距,主標、副標、內文各自明確,再用大小、粗細、顏色三種手段一起拉開差距,而不是只靠放大字級這一招。字級之間留的差距要夠大,層次才看得出來;如果主標只比副標大一點點,肉眼幾乎感覺不到差別,等於沒調。

原因五:放了不只一個行動呼籲,讀者不知道該點擊哪一個

文字層次分清楚之後,還有一個常被忽略的地方,發生在行動呼籲(CTA)本身。一支廣告只能有一個主要的行動呼籲,多個 CTA 用同樣大小、同樣顏色互相競爭視覺份量,讀者反而會猶豫,最後什麼都不點。SiteGround Academy 對這個現象的描述很貼切,太多平起平坐的 CTA,只會讓使用者無所適從,也稀釋掉原本想要的轉換目標。

這個錯誤常常出於「多留一個機會」的心態,同一支廣告裡同時放了「立即購買」「了解更多」「追蹤我們」三個同等醒目的按鈕,想著讀者總會點其中一個。實際上剛好相反,選項一多,決策成本就跟著拉高,讀者乾脆什麼都不做。

比較實際的做法,是先確定這支廣告只服務一個目標,曝光、導流、轉換三選一,再讓樣式反映優先順序。SVGator 把按鈕的層級分成三級,主要按鈕用最大、最搶眼的填色樣式;次要按鈕改用外框或幽靈樣式,份量明顯降低;真的不是這支廣告的重點,乾脆用純文字連結,甚至直接拿掉。

三顆同樣醒目的行動呼籲會互相競爭,改成主要填色、次要外框、純文字連結三級,讀者才知道先點哪個。
一支廣告只留一個主要行動呼籲,其餘降成外框或純文字連結,轉換目標才不會被稀釋。

原因六:有關係的資訊沒有靠在一起,畫面看起來各講各的

決定好唯一的目標與按鈕之後,還有一種容易被忽略的失焦,跟距離有關,而不是顏色或大小。距離相近的元素,會被讀者的大腦自動判斷成同一組;距離遠的元素,即使內容相關,也容易被看成不相關。這是格式塔心理學(Gestalt psychology)裡的鄰近原則(proximity principle),Nielsen Norman Group 對這個原則的說法很直白,靠得近的東西就會被當成一夥的。

廣告版面常見的踩雷,是價格和商品圖隔得太遠,或者副標與主標的間距,跟它與下一段的間距一樣寬,讀者因此分不出哪些內容是同一組、哪些是不同段落,畫面看起來像好幾則各講各的訊息硬湊在一起。解法不難,同一組的間距要明顯小於不同組之間的間距,單靠間距的差異,就能傳達這些東西是一夥的這件事,不需要額外的裝飾。

把同組元素的間距縮小、不同組之間拉開,讀者的大腦就會自動把靠得近的看成同一組。
同組間距明顯小於不同組,光靠距離就能分組,不必額外加框(資料來源:Nielsen Norman Group)。

如果留白還是不夠明確,Nielsen Norman Group 另一篇分析提到一個更強制的分組手段,叫共同區域(common region),用邊框或底色把一群元素圈起來,即使彼此間距沒有拉開,也會被認成同一組,效果比單靠鄰近更明確。不過邊框用太多、太密,反而會製造新的視覺雜訊,能靠留白解決的分組,就不必額外加邊框。

原因七:版面沒有順著視線移動的路徑走,重點被放在視線不會先到的地方

分好組別之後,還要考慮一件事。讀者的視線,並不是隨機掃過整張畫面,而是有一定的慣性路徑。版面簡單、元素不多的廣告,常見的是由左上到右下的 Z 字型移動路徑;文字比較密集的版面,則常見另一種 F 字型移動,視線先橫掃過上方一兩行,再往下掃一次較短的橫向範圍,最後沿著左側往下巡視。Nielsen Norman Group 在 2006 年做的一份眼動追蹤研究,分析了 232 位使用者瀏覽網頁內容的軌跡,才把這個 F 字型模式整理出來。

簡單版面的視線走 Z 字型、文字密集版面走 F 字型,把重點放在視線先經過的位置才不會被略過。
版面簡單走 Z 字型、文字多走 F 字型;重點別擺在視線最後才到的角落(資料來源:Nielsen Norman Group)。

如果把最重要的資訊放在視線不會優先經過的位置,例如畫面最下方的角落,就算內容再關鍵,也容易被讀者直接略過。這節要談的不是憑感覺擺版位,而是先搞懂讀者的視線平常怎麼移動,再決定重點該放在哪裡。

還有幾個實際做得到的手法,用引導線條把視線帶往重點,或者讓畫面裡人物的視線方向「借」一下讀者的注意力。人在看到另一張臉時,會不自覺地順著對方的視線方向看過去,這也是版面設計常拿來借力的一種心理慣性。

原因八:為了吸睛硬加裝飾元素,反而被大腦自動忽略

版位挑對了,但還有一種常見的失手,問題不是少做了什麼,而是多加了不該加的東西。這節要談兩個疊在一起的現象。

第一個比較單純,純裝飾性、不承擔傳達功能的花邊、圖案、背景紋路,會分散讀者的注意力,喧賓奪主。SiteGround Academy 的說法是,每一個視覺元素都該有目的,強調訊息、引導視線,或者幫助讀者理解;如果拿掉之後訊息傳達完全不受影響,那它就只是裝飾,可以簡化或直接拿掉。

第二個現象更反直覺,叫廣告盲視(banner blindness)。當畫面用了太多「長得就像廣告」的套路化裝飾(閃亮色塊、滿版粗邊框、罐頭式促銷貼紙),讀者的大腦會自動判定這是廣告,直接略過,連認真看一眼都不會。Nielsen Norman Group 指出,這個現象背後是選擇性注意力(selective attention)在作用,大腦會自動過濾掉超出目前關注焦點以外的東西,較新的眼動追蹤研究也證實了這個行之有年的舊發現。

每個視覺元素都該問一句,它是在幫讀者理解訊息,還是只是好看。裝飾感越濃、越像制式廣告的長相,反而越容易被讀者的大腦自動忽略。

其他常見但較次要的原因

除了以上幾種比較根本的原因,還有幾個較輕、但同樣常見的次要問題,可以簡單抓幾個方向調整:

  • 對齊沒有抓齊網格:元素東一個西一個,沒有共同的基準線,畫面看起來凌亂、不夠專業;抓一條共同的網格線,把主要元素對齊,是最快看得出差別的調整。
  • 一支廣告混用太多種字體風格:字體選太多款,會削弱整體一致性,也分散原本該有的焦點;把字體控制在二到三種以內,靠字重和大小做出層次就夠用。
  • 色彩風格前後不一致:主色調忽冷忽熱、風格跳來跳去,會讓畫面看起來像好幾張圖拼貼而成,而不是同一支廣告;先定出一套固定的主色與輔助色比例,再套用到所有素材上。

下次準備調整廣告版面之前,不妨先養成一個幾乎不花時間的習慣,把畫面縮小,或者退後幾步、瞇眼看整張圖,問自己視線第一眼落在哪裡,第二眼呢,有沒有一個東西真的比其他都醒目。答得出來,代表這支廣告已經有了清楚的焦點;答不出來,問題多半出在前面提到的某一種失焦,而不是創意不夠或素材不夠好。

廣告版面設計失焦,通常不是缺乏靈感的問題,而是動筆之前,沒有先決定好誰該先被看到、誰該退到後面。把這份自我檢查習慣養成,比急著再加一個賣點、再挑一張更漂亮的圖,更能決定這支廣告最後有沒有人停下來看。

資料來源
  1. Visual Hierarchy That Drives Action (+ Examples) — SiteGround Academy
  2. You Need To Stop Doing These Graphic Design Mistakes — SVGator
  3. F-Shaped Pattern For Reading Web Content (original eyetracking research) — Nielsen Norman Group
  4. Proximity Principle in Visual Design — Nielsen Norman Group
  5. The Principle of Common Region: Containers Create Groupings — Nielsen Norman Group
  6. Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop — Nielsen Norman Group
  7. Understanding Success Criterion 1.4.3: Contrast (Minimum) — W3C