攤開一份報紙,版面被切成五、六條窄窄的欄,字擠在一起,眼睛卻能很快掃過標題抓到想看的新聞;翻開一本小說,或是雜誌裡一篇要從頭讀到尾的專題報導,通常只有一欄,字看起來密,卻沒有人喊過眼睛累。同樣是印刷品,欄數卻天差地遠。這不是設計師隨機決定,也不是誰的美感比較好。
真正在背後運作的是多欄式版面分欄設計:一頁要切幾欄、每欄多寬、欄與欄之間留多少距離,答案其實都跟著「這份內容打算讓人怎麼讀」走。切錯欄數,輕則讀者讀得吃力、版面看起來擁擠又沒重點,重則資訊明明都在,卻沒有人耐著性子讀完。搞懂這套邏輯,不只印刷品受用,網頁跟簡報要抓版面,靠的也是同一套判斷。
先從最基本的幾個名詞拆起,再一路解開報紙為什麼窄欄、書籍為什麼寬欄的謎題,最後落到欄距與欄寬怎麼算的實用做法。
分欄是什麼?先搞懂欄、欄距與版心
任何一頁版面動工前,其實都要先決定三個基本範圍。版心:把整頁四周的留白(margin)框出去之後,真正能放內容的區域。欄(column):版心縱向切開後的一塊塊區域。欄距(gutter):欄與欄之間固定的間隔,讓讀者的視線一眼分得出這是兩欄,不是同一欄。這三個詞的定義,取材自國際設計平台 Visme 的排版指南。

這三個範圍不是各自獨立決定的,而是互相牽動。版心總寬度固定的情況下,欄數一多,每欄自然就變窄;想要每欄維持一定寬度,能切的欄數就有上限。換句話說,欄數與欄寬是同一筆預算的兩種花法,欄距則是花這筆預算時留給呼吸的空間。分欄看似只是版面上幾條分隔線,實際上是整個版面的骨架,而且這套邏輯印刷品和網頁相通,不管是紙本雜誌還是瀏覽器裡的網頁,都是先決定切幾欄,才往裡面填內容。
窄欄多欄,為什麼是報紙和型錄的預設選擇?
窄欄多欄(一頁切三欄以上)最核心的價值,就是讓每一行變短。行一短,眼睛掃過去不用左右大幅移動,讀者可以快速跳著看標題、抓重點,而不必逐字讀完;同時,窄欄還能讓同一頁並排塞進更多獨立的內容區塊,像是多篇報導或多樣商品。這種取向適合「讀者不是從頭讀到尾,而是跳著找感興趣段落」的閱讀行為,報紙、型錄、DM 天生就是這種瀏覽模式。
短行讓眼睛掃得快,資訊塞得下
行越長,讀者讀完一行、把視線拉回下一行開頭時,越容易「跳錯行」,讀到一半找不到自己讀到哪;行短則視線移動距離短,抓取速度快,正好適合報紙這種讀者會快速掃過標題找興趣點的媒介。國際排版經典著作《The Elements of Typographic Style》裡,作者 Robert Bringhurst 提出多欄排版每行字數以四十到五十字為佳的原則,講的就是這個道理。國際電商 UX 研究機構 Baymard Institute 的研究也指出,行寬過長會拖慢每行之間的視線移動速度,讀者要花更多力氣才能找到下一行的起點。窄欄同時解決了兩件事:一是讓單行讀起來更快,二是讓一頁能並排放進更多篇文章或商品,是空間效率的取捨結果,不是美感偏好。
寬欄少欄,書籍為什麼始終只有一欄?
書籍、長文報告用單欄到頂,原因跟報紙完全相反。讀者是「從頭讀到尾」的線性敘事,不需要在欄與欄之間跳來跳去尋找下一段,單欄讓閱讀節奏一路平順,不會被欄位切斷打斷沉浸感。行雖然物理上比較長,但讀者不必頻繁換欄找下一段,整體讀起來反而更順、更不容易分心。Bringhurst 在同一本書裡也給出單欄的字數區間:四十五到七十五字都算舒適,其中六十六字被視為最理想的行寬。
比較容易被忽略的是,這個邏輯不只用在小說或書籍上。國際新聞媒體研究機構 Poynter Institute 的 Eyetrack 眼動追蹤研究系列發現,讀者在閱讀「一篇要讀完的報導」時,對單欄格式的接受度其實高於多欄,連新聞網站也不例外。即使是新聞內容,只要讀者的任務是把一整篇讀完,而不是掃過去找標題,單欄仍然勝出。這也解釋了為什麼同一份報紙,標題與短訊區塊會切很多欄,但一篇完整專題報導反而傾向收窄欄數。
窄欄和寬欄,有什麼差異?
把前面兩節的對照收斂起來看,窄欄多欄與寬欄少欄的差異,其實可以拆成幾個具體的維度,這也是判斷「這份內容該切幾欄」時真正在比較的東西。

每行字數,決定閱讀節奏快慢
兩節提到的數字放在一起看,多欄抓四十到五十字一行,單欄可以放寬到四十五到七十五字、六十六字最理想。差距的根本原因在於任務不同,多欄要應付跳讀,行要短;單欄要應付連續閱讀,行可以長。給自己一個簡單的判斷起點,先想這段內容是要讓人跳著掃,還是從頭讀到尾,字數區間就跟著決定了。
版面氣質:密集的資訊感,還是舒展的閱讀感
欄數不只影響閱讀效率,也決定版面給人的第一印象。歐洲印刷電商平台 Pixartprinting 的排版建議指出,留白(margin 與 gutter)的大小會直接影響版面「輕盈或擁擠」的觀感:窄欄多欄留白相對少,版面看起來忙碌、資訊量大,適合「內容豐富、想強調划算或選擇多」的調性;寬欄少欄留白多,版面看起來沉穩、有質感,適合強調「專業、值得靜下心讀」的調性。兩者沒有絕對優劣,關鍵在於這份版面想留給讀者什麼第一印象。
圖文搭配的彈性:多欄比單欄好切模組
國際設計顧問公司 Design Force 在介紹網格系統時提到一種常見手法,叫模組(module),由欄與列交錯構成,常用在圖文元素多的版面。多欄版面因為欄數多,可以做出「圖片佔兩欄、文字佔一欄」這類跨欄組合,彈性明顯比單欄高,適合圖文混排量大的內容;單欄版面裡的圖片通常只能整段置中或滿版鋪開,彈性較低,但勝在乾淨、不打斷閱讀的視線。這也是型錄、DM 傾向多欄的另一個原因。不只是文字要跳讀,圖片也需要更靈活的排列空間。
六種常見版面,欄數各該抓幾欄?
同樣是「窄欄多欄比較快、寬欄少欄比較順」這條原則,套進不同版面類型,答案卻不會是同一個數字。決定欄數的關鍵,是這份內容天生要讓人跳著找重點,還是從頭讀到尾,加上版面裡塞的資訊量高不高。以下把常見的六種版面拆開來看,各自的欄數該怎麼抓。

報紙抓多欄,雜誌欄數看版面彈性
報紙傳統上抓比較多欄,常見落在五到八欄,目的是維持短行的掃讀速度,同時能並排放進多篇報導。雜誌則更有彈性,常見落在二到四欄:兩欄版面感覺對稱工整,三欄是兼顧圖文混排與大量內文的靈活起點,四欄則適合資訊更密集的版面。國際雜誌產業媒體 Azura Magazine 在介紹雜誌版面網格時也提到一個容易被忽略的細節。同一本雜誌內部常常混用欄數:主打的專題報導欄數通常比一般單元頁少,甚至只用單欄,因為專題要讓讀者沉浸讀完;一般單元頁欄數較多,方便塞進多則短內容。
書籍、長文報告、電子書,為什麼只用一欄?
書籍與長文報告幾乎都用單欄到頂,原因就是前面提過的線性閱讀邏輯。電子書更進一步,因為讀者可以自行調整字級,版面必須用能隨字級重新排版(reflow)的單欄格式,多欄在字級變動時會直接崩版。Amazon Kindle Direct Publishing 的官方格式規範明確要求,可重排(reflowable)電子書的內文必須用單欄排版,才能確保在不同裝置、不同字級設定下都正常顯示,這不是排版習慣,而是格式本身的硬性要求。
型錄、DM 的欄數,跟著商品密度走
型錄、DM 的欄數不是固定套一種版型,而是看這一頁的商品密度決定。商品項目少、文字量小,可以少欄,例如兩欄,讓版面舒展;商品項目多、規格資訊密集,就要加欄,常見三到四欄,才塞得下又不顯得擁擠。Pixartprinting 的排版建議也提到,欄數應對應版面的內容密度調整,版面較窄時不宜切太多欄。實務上同一本型錄裡,主打商品頁的欄數可以刻意加大、做跨欄放大處理,一般商品陳列頁則維持較多欄的整齊排列。
網頁與響應式設計(RWD),欄數跟著螢幕寬度變
網頁的欄數會隨螢幕寬度變動,並不是固定的單一數字。美國政府官方的 U.S. Web Design System,在其版面網格規範裡採用十二欄網格,方便切出三欄、四欄並排的區塊;Google 官方的 Material Design 響應式版面網格則明確給出斷點對照:桌機用十二欄,平板在較窄的斷點縮到八欄,手機再收斂到四欄,避免每欄窄到放不下內容。欄距與版心留白也會隨斷點縮小,不是欄數變了,間距卻還維持桌機的大小。
名片、簡報、履歷這類短文件,內容少不必多欄
這類文件內容量本來就不多,欄數少甚至單欄不是偷懶,而是內容密度根本用不到多欄。硬要切成多欄,反而讓每欄字更少、版面顯得破碎。簡報這類文件講究一行字少、一頁行數少,內容本該精簡到這個程度,自然也不需要靠多欄硬塞更多字。少數會用到兩欄的情境,是「左側放照片或圖示、右側放文字」這種圖文對照,欄數增加是為了容納圖片區塊,不是為了塞更多文字。
欄距要跟著欄寬抓固定比例
欄距太窄,讀者的眼睛容易從這一欄「滑」到隔壁欄,看錯地方;欄距太寬,版面又會顯得鬆散,像是欄與欄各自獨立、沒有整體感。實務上,欄距要跟欄寬維持固定比例,並在同一份版面裡全程保持一致,不能有的地方寬、有的地方窄,讀者才不會每翻一頁就要重新適應版面。

美國政府官方 U.S. Web Design System 的網格規範給了一個實際可以參照的數字例子:欄距會隨裝置寬度縮放,手機窄螢幕用較小的欄距,桌機寬螢幕用較大的欄距,但同一個斷點內,欄距是統一的固定值,不會在同一個畫面寬度裡忽寬忽窄。抓欄距時,與其憑感覺調整,不如先定好一個比例(例如欄距等於欄寬的某個分數),再依裝置或版面尺寸整體縮放,這樣不管版面怎麼變,比例關係都維持一致。
欄寬怎麼抓?回推一行該放幾個字
欄寬不是先決定「這欄要幾公分或幾像素」,而是先決定「這欄一行要放幾個中文字」,再回推欄寬。前面已經給過數字:多欄抓四十到五十字,單欄可以放寬到六十六字上下。中文全形字每字大約佔一個字身寬,欄寬大致等於字級乘上目標字數,再扣掉左右內距。
這個原則不只是排版經驗,也寫進了國際官方的無障礙規範裡。W3C 的《WCAG 2.1》在 1.4.8 視覺呈現準則裡明確規定,中日韓文字每行建議不超過四十個字元,西文則不超過八十個字元。CJK 文字因為字身較寬,建議的行寬上限剛好是西文的一半。實作上,與其用固定的像素數字寫死欄寬,不如用 CSS 裡的 ch、em 這類相對單位設定,讓欄寬能隨字級縮放而自動調整,Baymard Institute 在探討行寬與可讀性時也提到這種做法,能避免使用者放大字級後,一行反而塞進超出建議範圍的字數。

窄欄寬欄混著用是常態,不是例外
窄欄寬欄混著用是常態做法,不是例外情況。同一份型錄可以主打商品用跨欄放大處理,一般商品維持多欄整齊排列;同一本雜誌可以專題報導用單欄或少欄講故事,一般單元頁用較多欄塞進短內容,這跟前面提到的雜誌欄數混用是同一個道理;同一個網頁也可以首頁用多欄網格陳列多則內容,文章內頁切回單欄,讓讀者專心讀完。
判斷原則回到最前面,這一個區塊的內容是要讓人跳讀,還是要讓人專心讀完,欄數就跟著這個答案走,而且可以在同一份版面裡,依區塊各自決定,不需要整份文件用同一套欄數。Poynter Institute 的 Eyetrack 研究已經證實,讀者在需要讀完的內容前偏好單欄,即便是新聞網站也一樣;反過來說,需要瀏覽、比較、跳著找的區塊,窄欄多欄依然是比較有效率的選擇。兩種取向不是二選一的立場問題,而是同一份版面裡,不同區塊各自該有的答案。
欄數是為內容服務的決定,不是版型套用的結果。回到最前面的謎題,報紙窄欄、書籍寬欄,答案從來不是誰的版面比較高級,而是各自服務了完全不同的閱讀行為——一個要讓人跳著找,一個要讓人一口氣讀完。下次規劃版面前,先問自己這段內容是要讓人跳著找重點,還是要讓人一口氣讀完,欄數、欄寬、欄距的答案自然會跟著浮現。
