圖文繞排圖說設計怎麼做？間距、環繞方式一次搞懂

大衛·奧格威在《Ogilvy on Advertising》裡留下一個常被引用的觀察，讀者讀圖說的機率，平均是讀內文的兩倍。放到日常排版來看，這句話其實有點諷刺——多數人花力氣調整內文的字體、行距，圖片旁邊那行說明文字卻常常隨手打一打就算了，結果讀者最先看完、也最容易記住的那段文字，反而是整份版面裡做得最隨便的一段。

圖文繞排（text wrap）跟圖說設計（caption design）其實是兩件不同的事，繞排處理的是文字要怎麼閃過圖片，不撞在一起也不擠成一團；圖說處理的是圖片旁邊那段文字要怎麼排，才會被讀者看懂、看完。兩者常被當成同一件「排版順不順」的事一起感覺到，實際動手時卻各有各的規則，顧到其中一邊，版面也未必真的舒服。

先從最容易讓版面顯得擠、顯得亂的繞排講起，把間距怎麼抓、環繞方式怎麼挑弄清楚，再回頭處理圖說本身的字級、位置與對齊。

繞排顧「不擠」，圖說顧「看得懂」

版面看起來順不順眼，讀者通常說不出具體原因，但那個「順不順」，其實可以拆成兩個各自獨立的技巧在顧。文繞圖（text wrap）顧的是空間問題：一張圖放進一段文字裡，文字要沿著圖片的邊界走，行與行之間的間距抓多少、遇到不規則形狀怎麼處理，都算在這一塊。圖說（caption）顧的是理解問題：這張圖在講什麼、想讓讀者記住哪個重點，字級多大、放在圖片的哪一側，決定了讀者要花多少力氣才看得懂。

兩者會被混在一起討論，是因為讀者感受到的其實是同一種東西，版面整不整齊、讀起來累不累。但動手做的時候，繞排錯了，頂多是文字擠、行氣亂；圖說錯了，讀者可能完全誤解圖片要傳達的重點，兩種錯誤的後果不一樣，修法也不一樣。接下來先拆繞排的間距與環繞方式，抓穩空間規則之後，再往下處理圖說本身怎麼排。

圖文間距抓多少，繞排才不擠成一團？

多數人排版時，文繞圖最容易出錯的地方不是選錯環繞方式，而是完全沒去想文字跟圖片該留多少空間，要嘛留白留到文字跟圖片看起來像兩個各自獨立的區塊，要嘛擠到文字幾乎貼上圖片邊緣。間距抓對了，接下來選環繞方式跟微調文字邊界，才有意義。

用「一行字的高度」抓基本間距

把一行文字的高度當作一個判斷單位，圖片跟文字之間的距離，抓在一到一點五個單位之間最舒服。抓在一單位之內，兩者太近會像貼在一起，讀者的視線容易在圖片邊緣頓一下，才能接著讀下一行；放大到超過一點五到兩個單位，又會讓文字跟圖片看起來像互不相干的兩塊，讀者甚至會懷疑這段文字是不是在講這張圖。

實際操作可以先抓一個單位試排，版面看起來還是擠，再一點一點放大到一點五個單位，不需要套一個固定的公分或像素數字，不同字級、不同圖片大小，適合的間距本來就不一樣；用「行高的倍數」去抓，換到不同文件、不同版面都還能用同一套邏輯判斷。

矩形、緊密、上下，三種環繞方式怎麼挑？

三種最常見的環繞方式，差別在文字沿著什麼邊界走，適合的版面性質也不一樣：

拿不準怎麼選，可以照這個順序判斷：先看素材是不是去背圖或異形圖案，是的話直接選緊密；不是的話再看整份文件的調性，想穩重就選上及下，想讓版面有層次感就選矩形。

手動拖拉文字端點，微調行氣

自動繞圖算出來的邊界不會永遠剛剛好，尤其是去背圖或形狀不規則的素材，常常某幾行文字會卡住，或是被壓得太窄。這時候多數排版工具（像 Word 的編輯文字端點、InDesign 的繞圖框）都能手動拖曳邊界上的控制點，把文字邊界往內收或往外推，一個點一個點調整。這個功能通常只有在環繞方式選了緊密之類的設定才能用，矩形或上下環繞的邊界本來就是一個方框，沒有形狀可以微調。

以 Word 為例，選取圖片後從繞圖選單找到編輯文字端點，畫面上會出現一圈紅色虛線跟黑色方形控制點，把控制點往外拖，文字跟圖片的空間就變大；往內拖則相反，需要新增控制點也可以按住 Ctrl 點在虛線上加一個。判斷調到什麼程度算好不用糾結精確座標，拖到那幾行文字讀起來不再卡、版面看起來順眼就停手，這種手動微調本來就是為了處理自動運算顧不到的細節，追求的是視覺上的順，不是數字上的精準。

繞排最常犯的三個錯誤，該怎麼改？

間距抓對、環繞方式選對之後，還有三個經典錯誤會讓版面看起來不對勁。以下逐一對照，檢查自己手上的版面有沒有踩到。

錯誤一：圖片卡在段落正中央，打斷閱讀動線

一段完整的論述被硬插一張圖從中間截成兩半，讀者讀到一半視線被打斷，還得決定要先看圖還是先把這句話讀完，閱讀節奏整個亂掉。這種擺法常見於「哪裡有空位就把圖塞哪裡」的排版習慣，沒有考慮圖片跟文字論述之間的關係。

修法很直接，把圖片挪到這段文字的開頭或結尾，讓讀者先讀完一個完整的意思再看圖，或是反過來先看圖再讀文字說明；版面空間夠的話，也可以乾脆把圖片獨立成一個上下區塊，不要插進同一句論述的中間，讓文字段落維持完整不被截斷。

錯誤二：兩組圖文擺一起，間距忽大忽小

版面上同時有兩組以上的圖文配對時，如果每一組之間留白不一致，讀者會很難分辨哪一段文字對應哪一張圖，這組間距只留了半行，那組卻留了兩行，讀者的眼睛得重新判斷好幾次配對關係，版面看起來也顯得隨性、沒有經過設計。

修法是抓一個固定的「組間距」規則，套用到全部圖文配對上；組間距可以比組內的圖文距離大一些，方便讀者一眼分辨這是不同的兩組，但每一組都要套用同一個數字，不能這組留多、那組留少。

錯誤三：圖說文字跟圖片背景黏在一起，看不清楚

把圖說直接疊在圖片上面是常見做法，但如果沒注意底色跟文字顏色的對比，文字很容易被圖片的花紋或色調吃掉，讀者得瞇著眼睛才能看清楚寫了什麼。W3C 的無障礙標準 WCAG 對這件事有具體門檻：一般大小的文字，跟背景的對比至少要達到 4.5 比 1；字級夠大（18 點以上，或 14 點以上的粗體）可以放寬到 3 比 1。

Nielsen Norman Group 針對圖片疊字這個問題，整理出兩種常見修法。第一種是在文字底下加一層半透明色塊，讓文字有一個固定深淺的底，不直接暴露在圖片原本的顏色上，色塊的不透明度不夠時可以再調高，直到文字清楚為止。第二種是在圖片靠近文字的那一側加一層漸層色調，愈靠近文字的地方顏色愈深，愈遠離文字的地方保留原本圖片的樣子，兩種做法都能在不整個蓋掉圖片的前提下，把文字的可讀性顧好。

圖說字級、位置、對齊，怎麼抓才清楚？

繞排顧好版面不擠之後，接下來要顧的是圖說本身：字級開多大、放在圖片的哪一側、要不要置中、字體要不要換一種，這四個決定點做對了，圖說才會真正被讀懂，而不只是「有放字」而已。

圖說字級，比內文小幾級才剛好？

Cornell 大學工程溝通中心給過一個具體範例：內文用 11 點字，圖說用 9 點字，字級差了 2 級。但 Cornell 特別提醒，光靠縮小字級是圖說區隔做法裡效果最弱的一種，差距太小容易被讀者誤認成正文的延伸（詳見後段）。真的要用縮小字級這個方法，「比內文小 1 到 2 級」是常見區間，字級又不至於小到讀不清楚。

真正要避開的是字級縮得太小，小到讀者得瞇著眼睛才看得清楚，可讀性就直接被犧牲掉了。行動裝置螢幕小，或是圖片投影到大螢幕、海報放遠處看的情境，縮太小的圖說幾乎等於白排，字級這件事寧可比預期的大一點，也不要為了「看起來精緻」硬把它壓小。

圖說放在圖片上方，還是下方？

多數一般文件、簡報、型錄的慣例，是把整組圖說放在圖片下方，讀者掃視版面時，習慣先看圖、視線再往下移動去讀說明，這個順序最直覺，也最不需要讀者多想。

比較制式的學術規範，做法反而是拆開的。APA 官方格式把辨識用的圖號跟標題放在圖片上方，補充說明跟出處的附註才放在下方，這種拆法比較嚴謹。一般文件不需要照搬這麼細的拆分，把整組圖說（標籤、標題、說明）都放在下方最保險，也最符合多數讀者的掃視習慣。

例外是雜誌、海報這類強視覺的媒體，圖說有時候會直接放進圖片內部，或挪到側邊當作設計元素的一部分；但一般文件、簡報、型錄，說明文字放在圖片下方仍然是最不容易出錯的選擇。

左對齊或置中，怎麼選才不會亂？

圖說字數比較多、超過一行的時候，建議用左對齊，因為置中會讓每一行的長短不一，邊緣看起來像鋸齒，字數愈多鋸齒感愈重，反而不好讀。圖說很短、一行就結束的情況，置中通常沒有問題，尤其圖片本身也是置中擺放時，置中的圖說在視覺上會更貼合整體版面。

判斷的關鍵不是「置中比較好看」或「左對齊比較正式」這種美感偏好，而是先數一下這段圖說會不會超過一行，超過就左對齊，沒超過再考慮跟圖片的擺放方式搭不搭。

圖說要換個字體或顏色，才能跟內文分開

圖說要讓讀者一眼就分辨「這不是正文」，而不是要瞇著眼睛比對字級才發現差別。Cornell 大學工程溝通中心整理出三種常見做法：換成跟內文不同風格的字體（內文用襯線字，圖說就換成無襯線字）、把標籤跟標題加粗、或是縮小字級。三種做法裡，縮小字級是效果最弱的一種，單靠縮小很容易被讀者當成內文的延伸而不是獨立區塊，搭配字體或顏色的變化，效果才明顯。

顏色上，圖說常見的做法是降低到灰階或較淺的色調，視覺權重比正文低，讓讀者知道這是輔助說明而不是主要內容。不管選哪一種做法，全篇圖說都要套用同一套規則，這篇用無襯線字加灰階，那篇又換成粗體黑字，讀者會抓不到圖說的視覺語言，風格一致比選哪種做法本身更重要。

Word、PowerPoint、Canva 的繞排支援度，有什麼差異？

前面談的間距抓法、環繞方式都是原理，實際上不同工具能不能做到，落差很大。選工具前先弄清楚支援度，才不會在不支援的工具裡找一個不存在的功能。

需要更精細的間距控制，例如同一版面裡有多張圖片、每張的環繞邊界都要單獨調整，這種情況更適合用 InDesign 這類專業排版軟體，它的文繞圖邏輯跟 Word 類似，但每一邊的間距數值可以更細緻地個別設定。

多組圖文並排，怎麼維持一致感？

前面談的都是「一張圖配一段文字」的情境，但型錄、報告、社群輪播這類版面，常常一次要並排好幾組圖文。組數一多，讀者最容易犯的錯就是配錯對，分不清楚哪段文字在講哪張圖，這節處理的就是這個問題。

用序號或連接線，避免讀者認錯圖說

多組圖文放在同一個版面時，如果圖片跟文字沒有明顯的上下鄰接關係，例如排成一個網格、說明文字統一放在版面另一側，讀者很容易配錯對。解法是幫每一組圖文加上序號，像圖一、圖二依序編號，或是用一條細線把說明文字跟對應的圖片連起來，讓配對關係一眼就看得出來，不需要讀者自己猜。

Cornell 大學工程溝通中心把圖說的固定結構整理成標籤、標題、說明、出處四個部分，其中標籤（像「圖一」）正是用來解決這個配對問題的必要元素。多組圖文並排時，標籤不是可有可無的裝飾，而是讀者辨認配對關係的第一個依據；這套結構一旦在第一組圖文定下來，後面每一組都要照同一套順序排，不能這組只放標題、那組又加了出處，讀者才不用每組重新學一次怎麼讀。

圖說也要讓螢幕閱讀器讀得到

如果這組圖文最後會用在網頁或電子文件上，圖說不能只顧著給人眼看。網頁常見的做法是搭配圖片的替代文字（alt text）一起規劃，並且用語意化的標籤把圖片跟說明文字綁在一起。W3C 官方的 HTML 規範裡，figure 跟 figcaption 這兩個標籤就是為了這個用途設計的，讓螢幕閱讀器跟搜尋引擎都能正確辨識「這段文字是在說明這張圖」，而不是把圖片跟文字當成版面上兩個互不相干的元素。

若圖說最後會疊在圖片上面，前面談過的對比門檻也要一併檢查，螢幕閱讀器讀得到，不代表視力正常的讀者就看得清楚，兩件事都要顧到。

圖文繞排跟圖說，本質上都是在替讀者省力氣。繞排讓眼睛不用跳著找下一行該從哪裡接；圖說讓讀者不用回頭確認這張圖在講什麼。奧格威那句觀察放到今天依然成立，圖說常常是版面裡讀完率最高的一段文字，值得跟正文一樣認真排。下一次排版面對一張圖，先問自己兩個問題：文字有沒有讓圖片喘口氣，圖說有沒有讓讀者一眼看懂，兩者都顧到，版面才真的站得住。