廣告設計留白比例怎麼抓?4 步驟做出版面呼吸感

呼吸有它自己的節奏,吸氣、吐氣之間一定夾著一段停頓,那段停頓不是「沒在呼吸」,而是身體正準備下一次換氣。廣告版面塞好塞滿時,就像連續換氣不留停頓:標題、圖片、按鈕、優惠字樣全部擠進同一個版位裡搶著被看見,讀者的視線找不到該先落在哪裡,滑過去的速度只會更快,不會更慢。

這種擁擠感,問題通常不是內容不夠好,而是廣告設計留白沒抓對。留白不是版面上什麼都沒放的空白,而是設計者主動配置出來的呼吸空間,它跟圖片、文字一樣是版面的一個元素,只是它的工作是讓其他元素被看見。多數人設計廣告時的直覺卻是盡量塞滿才划算,留白等於浪費版位,這個直覺恰好就是版面看起來擁擠、找不到焦點的主因。

先從留白最容易被誤解的地方講起,再往下拆比例怎麼抓、抓到之後怎麼落地,最後看同一套邏輯換了廣告版位要怎麼微調。

留白是什麼?先破除「留白=沒設計」的誤解

留白常有個英文名字叫負空間(negative space),這個名字很容易讓人誤會,以為它就是版面上空著、什麼都沒放的那塊區域。其實留白是設計者主動安排出來的空間,用意是讓版面裡真正重要的東西被看清楚,跟你放上去的標題、商品照片一樣都是設計的一部分,只是它負責的不是內容,而是呼吸。

它也不一定要是白色。只要一個區域沒有被文字、圖片、圖形佔滿,不管背景是深色、淺色,還是留了一張沒有文字的商品照,都算是留白,重點在留出來讓其他元素被看見的空間,不是顏色本身。Apple 的廣告與品牌視覺就是常被拿出來討論的例子,大面積留白搭配極少的文字與圖示,反而把簡單、好用的品牌調性傳達得比塞滿說明文字更清楚。

留白也不是只有版面四周空一圈這一種形式,可以再拆成兩個層次。巨集留白(macro white space)指的是版面裡大區塊之間的空間,例如商品照片跟標題之間、標題跟按鈕之間留出的那段距離;微留白(micro white space)則藏在細節裡,像是字距、行距、圖示跟旁邊文字的間隔。多數人一講到留白只會想到巨集留白,但一份廣告版面就算巨集留白留得再大方,微留白沒顧到,字擠在一起、行距太窄,照樣會讓人覺得擁擠。這也是「留白等於浪費版面」這個迷思常出現的地方,因為大家看到的往往只是巨集留白空出來的那一塊,卻沒意識到留白其實分兩個層次在運作,誤以為留白就是單純把東西搬開、空出一塊地。

廣告設計留白分成巨集留白與微留白兩層:巨集是區塊間距、微是字距與行距,兩層都顧版面才不會擁擠
留白分兩層:巨集留白管大區塊之間的距離,微留白藏在字距、行距這些細節裡,兩層都顧到版面才有呼吸感。

廣告留白不夠,最先流失的是什麼?

版面留白不夠時,最先付出代價的不是設計好不好看,而是讀者要花多久才找到重點。眼睛在畫面上沒有明顯的落點可以停,就會用滑的方式一路掃過去,略讀的速度只會更快,你想強調的商品、價格、行動呼籲,很容易就跟著一堆訊息一起被滑過去。

這也是為什麼留白在廣告設計裡從來不只是美感考量。一份由 Olsen、Pracejus 與 O’Guinn 三位學者於 2012 年發表在《Journal of Business Research》的調查,訪問了 31 位北美廣告創意總監,結果發現他們採用留白版式的理由,除了單純覺得這樣比較好看,更實際的考量包括:集中讀者對整體廣告的注意力、把焦點鎖定在產品與品牌名稱上,以及用留白傳達品牌的質感與定位。換句話說,留白在專業的廣告製作裡是拿來做事的工具,不是可有可無的裝飾。

不過,同一份調查也發現一個有意思的反差。接近一半的委刊方,也就是出錢下廣告的品牌方,仍然對留白版式有疑慮,擔心自己是在付錢買一塊空白版位。這個疑慮的根源不難理解,版位是花錢買來的,直覺上用滿才像是把錢花在刀口上。但從創意端的角度看,沒有留白幫忙分出主從,版面塞得再滿,讀者也記不住哪個才是真正的重點,省下的版面空間,換來的反而是訊息被稀釋的風險。

廣告留白比例怎麼抓?從一個基準值開始

與其抽象地說多留一點就好,廣告設計留白其實可以先抓一個能馬上套用的起手值。DocHipo 這類設計工具平台觀察大量廣告版面後給出的參考,是把留白抓在整體版面的兩到三成之間。這個區間的用意,是讓留白大到看得出來是刻意的設計,又不至於大到把商品、文案擠壓到看不清楚。低於這個區間,留白容易被稀釋成只是行距寬一點;高於太多,又會變成下一節要談的留白過量。

但這個兩到三成只是一個起手值,不是套進去就萬用的公式。內容量多的廣告,例如同時要放商品圖、價格、優惠條件、行動呼籲按鈕,天生就需要更多微留白,像是字距、行距、按鈕跟文案之間的間隔,去維持可讀性,巨集留白的空間自然會被壓縮;內容量少的廣告,單一商品圖搭一句標語,則可以把多出來的空間留給巨集留白,讓整體視覺更從容。與其死守一定要留三成,不如先看這則廣告要放多少東西,再回頭決定巨集留白跟微留白怎麼分配。

留白比例跟另一個常被混在一起講的指標,也就是版面上的文字佔比,其實是兩件不同的事,要分開看。留白比例談的是版面裡有多少空間沒被任何元素佔滿,文字佔比談的是畫面上被文字蓋住的面積有多少。Meta 官方對廣告素材裡的文字,一貫的建議是愈少愈好,過去甚至以文字佔比低於兩成當作明確的參考門檻;即使現在已經不是強制規定,官方仍指出文字佔比偏低的廣告,觸及與成本效益通常比較好。換句話說,一則廣告可以留白比例很高,但如果那塊留白硬要塞進一大段文案,留白照樣會被文字吃掉,留白比例與文字佔比要一起顧,才不會顧此失彼。

廣告設計留白比例先抓版面的兩到三成當起手值,留白比例與文字佔比是兩件事要分開看
留白比例先抓版面的 20–30% 當起手,再依內容量調整;留白比例和文字佔比要分開看(資料來源:DocHipo、Meta)。

抓到比例之後,四個步驟做出真正的呼吸感

有了比例基準,接下來要處理的是怎麼把這個比例真正落在版面上。這四個步驟建議照順序走,而不是同時想著留白該擺哪裡,一次處理一件事,留白才不會東留一點、西留一點,卻沒有任何一塊留白是真正在幫忙。

做出版面呼吸感的四個步驟:先找出唯一焦點、用留白把元素分組、邊界留安全留白、縮小畫面測試
四步照順序走:先定唯一焦點,再用留白分組、留足邊界,最後縮小畫面檢查焦點還抓不抓得到。

步驟一:先找出唯一的視覺焦點

動手排版之前,先問自己一句:「這則廣告如果只能被記住一件事,會是哪一件?」答案可能是商品本身、一個價格數字,或是一句行銷金句,但只能選一個。留白的功能之一,是把讀者的視線集中到你選定的那個焦點上;如果連你自己都沒決定焦點是誰,留白就沒有方向可以配置,只能均勻撒在版面各處,結果每個元素都得到一點留白,卻沒有一個元素被真正襯托出來。

決定好焦點之後,其餘的商品資訊、品牌標誌、次要文案都先當成陪襯來處理。留白該往哪裡集中,答案自然就是圍繞著焦點留,而不是繞著整個版面平均留。

步驟二:用留白把元素分組,不是灑滿版面

設計裡有一條相近原則(Proximity Principle),說的是距離靠得近的元素會被眼睛自動看成同一組,距離拉開的元素則會被讀成不同組。留白正好可以用來做這件事,用比較窄的留白把同一組資訊(例如商品名稱跟它的價格)靠在一起,再用比較寬的留白把不同組資訊(例如商品區塊跟品牌標語區塊)隔開,讀者不用特別思考,眼睛就能分辨出這些是一組、那些是另一組。

最常見的錯誤,是把留白平均分配給版面上的每一個元素,每個字、每張圖之間都留一樣寬的間距,聽起來公平,結果卻是群組的界線整個消失,讀者要花額外的力氣才分得出哪些資訊本來就該放在一起看。留白該不均勻地留,才留得出意義。

步驟三:邊界也要留安全留白,不是只留中間

新手最容易犯的錯,不是留白留得不夠,而是留白全部留在畫面中央,卻讓文字或品牌標誌貼齊了版面邊框。版面的天地左右本身就是一種留白,它讓內容不會頂到邊界,也讓整個版面在視覺上有個安全的緩衝區。

沒留夠邊界留白時,即使版面中間空曠,整體看起來還是會侷促,因為讀者的眼睛會被那些貼邊的元素拉走注意力,感覺整張版面隨時要被裁切掉一塊。邊界留白抓夠了,中間的內容才有真正可以呼吸的空間。

步驟四:縮小畫面測試,抓出視覺是否還喘得過氣

排版做到一個段落,先別急著定案,把畫面縮小到手機縮圖的大小,或者把螢幕往後退、瞇著眼睛看,這個土法測試的重點,是檢查焦點還能不能在第一眼就被抓到。如果縮小之後,原本設定好的焦點反而要找半天才看得到,通常代表留白沒有確實圍繞著焦點配置,或者版面裡搶著被看見的元素太多。

這一步就是幫版面量一次呼吸,呼吸順不順,遠看一眼就知道,不用等到廣告真的上線、讀者用滑的速度掃過去才發現問題。

同一套留白邏輯,換了廣告版位要怎麼微調?

前面四個步驟講的是通用邏輯,不管版位是什麼都適用。但同一套邏輯落到不同的廣告版位,微調的重點並不一樣,差別主要來自讀者怎麼看這個版位:是滑動中瞥一眼,還是在小版位裡快速抓重點,或是隔著一段距離慢慢看。以下用三種常見情境示範同一套方法怎麼落地,而不是每種版位都要重新學一套新規則。

社群動態廣告:留白要對抗的是滑動速度

社群平台的動態消息裡,一則廣告能被讀者看見的時間,往往只有拇指滑過去的那零點幾秒,對手不是別的廣告,是滑動本身的速度。這個情境下,留白的角色是讓畫面在一整排擁擠的貼文裡跳出來,大面積的留白搭配單一焦點,反而比塞滿商品資訊的版面更容易讓拇指停下來,因為讀者的眼睛已經習慣在資訊密集的版面裡自動略過,一塊乾淨的留白在這種環境裡反而顯得突兀,突兀就等於被看見。

橫幅/展示型廣告:留白要在小版位裡先讓焦點站穩

橫幅或展示型廣告的版位通常比較小,停留時間也更短,這時候留白的優先順序要換一下,比起整體美感,要先顧好一個訊息加一個行動呼籲讀得清不清楚。這類版位的留白最容易被壓縮成隨便留一點意思意思,結果文案和按鈕擠在一起,讀者連要按哪裡都要多想一秒。版位越小,留白越要優先保護那個唯一的行動呼籲,其他裝飾性的留白可以先讓路。

平面與戶外廣告:留白要承載遠距離的視覺重量

平面或戶外類型的廣告,通常是在比較遠的距離、比較短的時間內被看到,路過的行人、開車經過的駕駛,能盯著看板看的時間可能只有幾秒。這種情境下,留白的工作從在滑動中攔住視線,變成讓一個大焦點在遠處也站得住;比起精細調整的微留白,這類版位更依賴大面積的巨集留白撐住整體的視覺重量,讓一句標語或一個品牌標誌在幾十公尺外也能被辨認出來。

留白抓過頭,一樣會出問題

前面談的都是留白不夠的問題,但留白也不是越多越好。版面留白抓過頭,最直接的後果是看起來像沒做完。DocHipo 也提醒,版面上大片空著,卻沒有任何內容撐住那份留白該傳達的意圖,讀者看到的不是精心設計的呼吸感,而是一種說不出哪裡怪的空洞感。

留白太多,也可能反過來稀釋掉焦點的重要性。留白的作用是把注意力集中到某個元素上,但如果版面裡到處都是留白,讀者反而分不出哪一塊留白才是真正在服務那個焦點,留白本身變成了視覺裡最搶眼的東西,你想強調的商品或訊息反而被晾在旁邊。這也可能讓讀者對這則廣告要傳達的訊息量產生誤判,以為版面這麼空,大概沒什麼重要的內容,滑過去也不會錯過什麼。

廣告設計留白不足會擠到找不到焦點、過量會顯得空洞像沒做完,抓在兩到三成圍著焦點留才剛好
留白不是越多越好:不足會擁擠、過量會空洞,抓在 20–30% 圍著單一焦點留才剛好。

不少人會誤以為留白多寡是風格選擇,極簡風就該多留白,資訊型廣告就不用管留白。但留白該留多少,其實取決於這一次廣告要傳達幾件事,跟風格無關:只要傳達一個訊息,大面積留白理所當然;要交代價格、優惠條件、使用限制好幾件事,留白就該讓位給內容,硬要留出看起來很極簡的空間,只會讓該講清楚的資訊講不清楚。

呼吸感不是一套背起來就能套用的規則,而是一種判斷習慣——每次動手排版前,先幫這則廣告決定這次要讓它呼吸幾次。廣告設計留白抓得準不準,靠的就是這個習慣有沒有養成,留白該圍著哪個焦點留、該留多寬,答案每次都不一樣,但問法是一樣的。下一次打開空白版面,與其先想著要塞進多少東西,不如先想清楚這一次只需要讀者記住哪一件事,留白自然知道該往哪裡去。

資料來源
  1. Print Advertising: White Space(Journal of Business Research, 2012) — Olsen、Pracejus 與 O'Guinn
  2. White Space In Graphic Design: A Detailed Guide with Examples — DocHipo
  3. About Text in Ad Images(Meta Business Help Center) — Meta