設計稿交出去，最常聽到的第一句回饋，往往是「這裡是不是空太多了」。版位是花時間、花預算做出來的，空著總讓人覺得沒有物盡其用，於是這裡加一塊促銷用的 banner，那裡塞一句提醒文字，最後整個頁面被擠得滿滿當當，原本想讓人一眼看到的重點，反而被埋進一堆雜訊裡。
這篇要談的不是「留白很美」這種美學偏好，而是網頁留白設計在理解、信任、行動這幾件實際的事情上，交換到了什麼。空間留得對，讀者看得懂重點、也比較信任這個網站；留得不對，填再多內容進去也只是徒增雜訊。
這就得先想清楚一件事，為什麼多留一點空白，在多數經營者眼裡反而像是浪費。
為什麼「填滿版面」看起來比較划算？
這種「空著等於浪費」的直覺，其實在設計史上早有名字。horror vacui（拉丁文，直譯是「害怕空的空間」）指創作者把整個畫面或版面填滿細節、盡量不留一點空白的傾向，這個詞最早被義大利藝術史學家馬里奧・普拉茲（Mario Praz）用來形容維多利亞時代那種堆滿雕花、織品與擺飾的過度裝飾風格，後來也延伸套用在巴洛克、洛可可時期的滿版壁畫與裝飾藝術上。放到現在的網站首頁，滾動 banner、跳出視窗、同時掛出三四個行動呼籲按鈕，本質上是同一種心理在不同時代的版本，只是載體從石膏線板換成了螢幕。
把這種心態套進網站，最常見的說法是「這塊版位是花錢做出來的，空著不用很浪費」，好像網頁上的空間跟店面租金一樣，每一坪都要塞滿商品才划算。這個比喻忽略了一件事，版面上有沒有東西不等於有沒有價值，讀者要花力氣處理的資訊量，才是真正的成本。放進去的東西越多，讀者要在同一眼掃過的畫面裡辨認、篩選、排序的資訊也跟著變多；注意力本身是有限的資源，一旦超過負荷，結果常常是什麼都沒被記住。
填滿版面解決不了資訊超載這個問題，反而是先想清楚哪些東西該留白、哪些該被看見，才是真正在幫讀者省力。
留白不是「什麼都沒做」，是把注意力配給重要的東西
留白常被誤會成「什麼都沒放的空白色塊」，但網頁留白設計真正在做的事，是刻意選擇「不放」，好讓真正重要的元素被看見。留白也不一定是白色，只要是刻意空出來、沒有塞進內容的區域，都算數。
留白也分兩個層次，各自做的事不一樣。大區塊之間的留白，決定整個版面的呼吸感，也就是讀者一眼掃過去，能不能立刻抓到這個頁面在講什麼；文字與按鈕內部的細部間距，則決定內容好不好讀、按鈕好不好點。這種分法，Interaction Design Foundation 稱作巨觀留白（macro white space）與微觀留白（micro white space），前者決定版面骨架，後者決定閱讀節奏。兩種留白處理的問題不同，只做好其中一種，另一種沒做到位，使用體驗還是會出狀況。
這節真正的地基，是格式塔心理學裡的鄰近原則（Proximity Principle）。距離近的元素，大腦會自動當成同一組；距離遠的，會被當成不同組。留白做的事，是先替讀者排好順序，幫他分好「這些東西是一起看的，那些是分開的」，再讓他去讀內容。
Nielsen Norman Group 針對鄰近原則做過的分析裡，舉了幾個公部門網站的實例。威靈頓市議會（Wellington City Council）的網站桌機版把搜尋框跟主選單放在同一列，中間刻意留了一段空白，讓使用者一眼就能分辨這是搜尋、那是導覽；畫面縮到平板尺寸，搜尋框改移到上方、跟其他工具列項目分成一組，避免它看起來像黏在主選單上。加州就業發展部（California EDD）的網站則是反例：申請表單裡用來新增雇主資訊的「新增」按鈕，被擺在跟它功能無關的下一步、存草稿、取消按鈕中間，使用者掃過去以為那一排都是同一組不相關的按鈕，反而完全沒注意到「新增」這顆鍵。倫敦運輸局（Transport for London）的頁面則是另一種情況：桌機版把兩個排放限制區的相關連結並排放在兩欄，方便使用者對照；縮到手機版之後，欄位改成上下堆疊，兩個連結之間反而被拉開一段距離，不少使用者只看到第一個就以為看完了，完全沒發現往下還有第二個連結。三個案例合起來說明同一件事，留白的距離安排會直接決定使用者能不能正確分組資訊，抓錯距離，可能讓人誤判是不同組，也可能讓人完全漏看重要的按鈕或連結。
留白先把資訊分好組，只是解決了找不找得到的問題；讀者拿到分好組的內容，會不會讀得懂、記不記得住，又是另一回事。
留白讓人讀得比較快，還是讀得比較懂？
多數人直覺留白會拖慢閱讀速度，讀起來要多滑好幾頁，不划算。Wichita State University 的 Software Usability Research Laboratory，由 Barbara Chaparro 主持的研究團隊，在 2004 年做過一項對照實驗，找了十九位受試者閱讀線上文章，分別測試版面周圍留邊（十毫米空白）與幾乎不留邊（兩毫米空白）兩種排版，同時比較不同行距的影響。結果證實了一半的直覺，留邊的版面讀取速度確實比較慢；但另一半直覺被推翻了，留邊版面的理解力測驗分數反而比較高，不留邊的版面雖然讀得快，答對的題目卻比較少。
換句話說，留白拖慢的不是理解，是眼睛掃過畫面的速度；讀得慢一點，但記得住，對經營者真正想傳達的訊息來說反而更划算，畢竟重點不是讀者花了多少秒看完，而是他離開之後還記得多少。這項研究裡的受試者事後也回報，有留邊的版面讓他們比較不容易疲勞，滿意度也比較高，不留邊又行距偏窄的版面則最容易讓人覺得吃力。
另外一個常被忽略的細節，是留白怎麼分配，比留白留多少更關鍵。標題與內文之間的間距，得比同一段落內文字行與行之間的間距更大，讀者才能單靠間距的落差，分辨出這是新的段落開始，還是這還是同一段話。間距一旦被拉成同一個值，版面看起來乾淨，卻讓讀者少了一個判斷主從關係的線索。
留白讓讀者讀得懂內容，只是它發揮作用的其中一層；讀者甚至還沒開始讀正文，留白就已經在影響他對這個網站的第一印象。
留白如何撐起一個網站的專業感？
這種第一印象，心理學上有個名稱叫美觀可用性效應（aesthetic-usability effect），說的是使用者會把「看起來順眼」直接聯想成「用起來可靠」，就算介面的實際功能沒有比較好，好看的畫面還是會讓人比較願意忍受小瑕疵、也比較快建立信任。這個效應最早是日立設計中心的研究者 Masaaki Kurosu 與 Kaori Kashimura 在 1995 年發現的，他們找了兩百五十二位受試者評比二十六款自動櫃員機介面，結果發現使用者對「介面好不好用」的感受，跟外觀吸不吸引人的相關程度，遠高於跟介面實際功能是否完善的相關程度。多數人先被畫面說服，才會覺得這個東西應該不錯用。
留白正是讓畫面看起來乾淨俐落最直接的手段之一。這也解釋了一個常見的現象，把設計當一回事的網站，版面看起來往往比塞滿的網站更有質感。不是留白本身值錢，是留白傳達了一個訊號，這個團隊有餘裕做取捨，不必靠塞滿版面去證明內容夠多。
Nielsen Norman Group 分析過一百一十二個被歸類為極簡風格的網站，發現「最大化使用留白」出現在其中百分之八十四的樣本裡，是極簡設計五個共同特徵之一，跟畫面扁平化、色彩受限、只留核心功能、大膽排版並列。也就是說，大量留白不是少數設計師的個人偏好，而是這類風格裡有統計基礎、被反覆驗證的做法。
留白撐起的專業感，決定的是訪客願不願意留下來、信不信任這個網站；信任建立之後，下一步就是能不能讓他順利完成該做的動作，例如按下一個按鈕。
留白怎麼讓訪客更快按下該按的按鈕？
選項擺得越多，使用者要花的決定時間就越長，這是心理學裡的希克定律（Hick’s Law）。英國心理學家 William Edmund Hick 在 1952 年提出這個關係，隔年美國心理學家 Ray Hyman 的實驗也得出同樣的結論，眼前的選項或視覺元素每增加一項，反應時間就跟著拉長；選項多到一定程度，使用者甚至乾脆放棄不選。
留白在這裡扮演的角色，不是裝飾，而是實際減少視線要處理的競爭對象。把一個重要按鈕周圍清空，等於先幫訪客篩掉不相關的選項，讓他更快意識到這就是該點的東西。要緩解這種選擇壓力，常見的做法是把選項分組、分批呈現，留白就是最基本的分組工具，先用空間把不同性質的選項隔開，使用者不用一次面對所有選項，才有辦法在合理時間內做出決定。
這一點正好呼應本文一開始提到的心態，頁面上同時擺出五、六個一樣搶眼的行動呼籲，看起來機會變多了，實際上是在拖慢每一個訪客的決定速度，結果往往是他花太多時間猶豫，乾脆什麼都不點就離開。
前面幾節都在講留白帶來的好處，但這不代表留白越多越好，留過頭一樣會出問題。
留白也可能「留過頭」，分寸怎麼抓？
留白抓過頭最常見的後果，是重要資訊被推到摺線以下，訪客滑到一半就放棄，根本沒看到往下還有東西；第二種常見狀況是版面看起來很乾淨，但訪客反而找不到該點的東西，因為所有元素都被拉得太散，少了鄰近原則本來該有的分組線索。手機版還有第三個問題，想模仿桌機那種大面積留白，結果內容被壓縮成一長串，訪客得一直往下滑才能滑到重點。
美國的行銷顧問公司 Portent 分析過幾個眼鏡電商網站的留白配置，提出一個實用的判斷原則，設計必須發揮功能，不能只是好看的裝飾。文中舉的例子裡，同樣賣眼鏡的網站，有的行動版首屏留白過多，把主要商品分類擠到摺線以下，訪客得往下滑好幾層才看得到重點；也有的網站留白留在對的位置，重要導覽跟分類在第一眼就看得到。Portent 建議的做法，是靠使用者測試與熱區圖（heatmap）確認留白幫的是訪客，還是擋了訪客的路，而不是憑感覺決定要留多少。
判斷原則其實很單純，留白要服務的是「找得到」跟「看得懂」，不是服務「看起來夠不夠講究」。拿掉某一塊留白，會不會讓訪客漏看重要資訊，漏看就是留過頭；留白讓重點更快被看到，那才是留對地方。
留白不是版面上剩下的邊角料，而是網頁留白設計裡最容易被低估的一塊，是主動分配給「該被看見的東西」的資源，跟文案、圖片一樣是設計出來的內容，不是預算或時間不夠時才拿出來將就的做法。回到最開頭那句反射性提問「這裡是不是空太多了」，更值得問的其實是另一個問題，這塊空間有沒有在幫某個重點做事。答得出來，留白就是留對了；答不出來，才是真正的浪費。