「使用者不是在逐字閱讀網頁，而是在快速掃描網頁。」這是 Nielsen Norman Group 一場眼動追蹤研究歸納出的結論，也是網頁設計圈裡最常被引用的一句話。2006 年，NN/g 追蹤 232 位使用者瀏覽數千個網頁時的眼球移動軌跡，發現多數人根本不會把整頁內容從頭讀到尾，只在少數幾個位置真正停留，這也是為什麼網頁內容排版動線設計得好不好，會直接決定訪客到底看不看得到你想讓他看到的東西。
多數網站排版時，想的多半是「這樣排好不好看」，卻很少去想訪客的眼睛實際上會先落在哪個角落、接著往哪個方向移動。結果就是重要資訊放在訪客視線很少經過的地方，一整段文字擠成一團沒有分層，訪客的眼睛還沒掃到重點，就已經滑走離開了。這其實不是美感問題，而是視線動線設計對不對的問題。動線對了，重點才有機會真的被看到；動線錯了，版面再精美，訪客也視而不見。
先從訪客的視線實際上怎麼移動講起，再一路拆到怎麼動手調整版面。
訪客瀏覽網頁時，視線都往哪裡移動？
版面設計背後，其實有幾種已經被長期研究驗證的視線移動路徑，古騰堡動線、Z 型動線、F 型動線是設計圈最常拿出來討論的三種。這三種動線有一個共同的起點，視線幾乎都是從左上角開始，再依照由左至右、由上至下的順序移動。差別在於，版面內容的份量與強弱對比不同，會讓視線走出完全不同的路徑，也代表適合的頁面型態不一樣。
古騰堡動線：文字平均分布時，視線從左上滑向右下
當一個版面上的文字資訊量分布得很平均、沒有明顯的粗細大小對比時，訪客的視線就會沿著所謂的「閱讀重力」，從左上角一路滑向右下角，這條路徑就是古騰堡動線（Gutenberg Diagram）。整個版面因此被切成四個象限：左上角是視線的起點，通常也是被看到最多次的區塊；右下角則是視線最終的落點，同樣容易被注意到；至於右上角與左下角這兩塊，剛好落在視線掃過的路徑之外，是最容易被忽略的死角。
這是三種動線裡最古老、也最基礎的一種理論，常見於文字量大、排版單調的頁面，像是純文字說明頁或早期的網頁設計，版面上沒有明顯的視覺焦點，訪客的眼睛只能照著這條預設路徑走。
Z 型動線：單頁、精簡版面最常見的視線捷徑
如果版面元素精簡、資訊量不多，像是活動頁、單一商品頁，或首頁的主視覺區塊，訪客的視線就不會乖乖照著古騰堡動線一路滑到底，而是會抄一條更快的捷徑，由左上角出發，先橫向掃到右上角，再斜線跳到左下角，最後橫向移到右下角，整條路徑畫出一個字母 Z，這就是 Z 型動線。
比起古騰堡動線，Z 型動線更快速、也更跳躍。原因很單純，版面上可看的元素本來就少，訪客不需要逐區塊細看，幾步就能掃完整個畫面。這種動線特別適合只希望訪客完成「一個核心行動」的頁面，例如看完主視覺、按下同一顆按鈕，不需要在中途分心去讀太多資訊。
F 型動線：文字內容多的頁面，視線大多卡在左側
三種動線裡，只有 F 型動線有正式的眼動追蹤實驗數據支撐，也是 Nielsen Norman Group 那場研究裡談得最仔細的一種。訪客的視線會先橫向掃過內容區塊最上方，形成 F 的第一橫；接著往下移動一小段距離，再做一次較短的橫向掃視，形成第二橫；最後，視線沿著頁面左側一路垂直往下掃，很少再往右移動，整條路徑的形狀就跟字母 F 一模一樣。
這種模式最常出現在文字量大的頁面，像是部落格文章、電商的商品列表、搜尋結果頁，內容多到訪客沒辦法逐字讀完，只能靠掃描取捨。研究也發現，F 型動線代表的意涵其實很直白。版面越往下，訪客實際讀到的字就越少；而每一段的第一行文字，以及每一行最左側的頭幾個字，得到的注視次數遠遠高於版面上其他位置。
為什麼排版亂、段落太長，訪客會提早放棄閱讀？
視線會往哪裡看，只解釋了一半的問題。版面沒有清楚的視覺分層時，訪客不會乖乖把整篇內容讀完，而是會用最省力的方式掃描版面；掃描沒抓到重點，訪客就會提早離開，而且他們通常不會意識到自己「漏看」了什麼，只會覺得這個網站沒有他要的東西。這也代表視線動線設計從來不是美感問題，而是內容有沒有機會真的被看到的問題，排版亂、段落堆得太長，等於直接把訪客往外推。
掃描並不是訪客偷懶的壞習慣，而是多數人瀏覽網頁時的預設行為，沒有特別投入心力時，自然會找最省力的路徑找答案。也因為這樣，動線設計失控的後果從來不只是「版面不好看」，而是重要資訊直接被跳過，訪客根本沒發現網站裡其實有他要的答案。掃描習慣也不只有 F 型和 Z 型這兩種。
掃描習慣不只兩種：蛋糕層式、關鍵字搜尋式與投入閱讀式
多數談動線設計的文章，通常只提到 F 型與 Z 型這兩種掃描方式，但實際上，研究裡記錄到的瀏覽行為還更多元。
有一種讀者只挑標題和粗體字看，整段內文幾乎直接跳過，像在吃蛋糕只舔上層奶油，可以稱作「蛋糕層式」瀏覽；另一種讀者的眼睛像在找特定的字詞或連結，一格一格掃過畫面，遇到不相關的段落就直接略過，是「關鍵字搜尋式」；還有一種讀者，是真的被內容吸引住，願意從頭到尾逐字讀完，這種「投入閱讀式」反而是三種裡最少見的。
這代表排版要同時服務兩種完全不同的人：只看標題就走的人，以及願意認真讀完的人。標題與粗體字要能單獨成立、讓人一眼抓到重點，同時內文本身也要經得起真正被讀完的考驗，兩邊都顧到，動線設計才算真正做到位。
排版動線怎麼設計，才能抓住訪客的視線？
前面把動線怎麼走、為什麼重要都講清楚了，接下來就是動手的部分。以下四個做法分別對應大小對比、留白分組、小標題調整，以及精簡版面的重點配置，四者要一起搭配使用，單靠其中一個做法，效果會打折。
用大小與對比，決定訪客先看哪裡
比例與對比，是建立視覺層次最基本的兩個工具。把重要元素做得比次要元素更大、更亮，訪客的眼睛會自然被吸引過去，不需要特別提示。
不過對比也不是越多越好。Nielsen Norman Group 在視覺設計原則的整理裡提到，一個版面的大小層級，維持在大、中、小三個等級就足夠建立清楚的優先順序，層級切得再細，訪客反而分不出誰輕誰重；對比也是同樣道理，一個畫面同時出現太多種粗細、太多種顏色深淺，結果會是每個元素都想搶第一眼，卻沒有一個真的突出。
還有一點容易被忽略，區分層次時不能只靠顏色。色弱與色盲的讀者看不出色彩上的細微差異，如果重要與次要的差別只靠換顏色標示，對這群使用者等於完全沒有做出層次，大小、粗細、留白這些不依賴顏色的線索，才是層次能被所有人接收到的關鍵。
用留白與分組，讓相關內容一眼就能辨識
除了大小與對比，留白與分組是另一個能左右訪客怎麼解讀畫面關係的工具。訪客的眼睛有一個很直覺的判斷方式，距離近的元素，會被自動看成同一組；距離遠、或中間隔著分隔線與背景色的元素，則被看成不同組。這個現象在 Nielsen Norman Group 對視覺層次的說明裡，稱為「鄰近性」與「共同區域」，是設計群組時最基本的兩個原則。
留白因此不是浪費版位，而是幫訪客快速分辨「這幾行資訊是一組」、「那顆按鈕跟這段文字有關」的視覺工具。元素之間的間距越大，越容易被視為獨立的一組，也越容易被注意到；需要更明確的分組時，可以用邊框或背景色圈起來，但這個做法要節制，同一個版面裡框線與色塊用得太多，反而會製造出額外的視覺雜訊，讓訪客搞不清楚哪裡才是真正的分界。
小標題怎麼下，才留得住掃描中的視線？
回到前面 F 型動線的研究結論，訪客真正認真看的，是每段的第一行文字，以及每一行最左側的頭幾個字。這代表內文排版有幾件事可以馬上動手調整。
- 把最重要的訊息放進頁面最前面幾段，不要留到文章後段才交代重點。
- 小標題與內文開頭的用字要有明確資訊量，讓訪客只看前兩三個字就知道這段在講什麼，避免用「談談」、「關於」這種空泛的開場。
- 用粗體與條列標出關鍵字詞，而不是整段文字都加粗，整段強調等於沒有強調。
- 砍掉不影響理解的贅字贅句，內容越精簡，訪客掃描時越容易抓到重點。
這幾個調整都不需要重新設計版面，單純調整文字的下法，就能明顯改善訪客掃描時抓到重點的機率。
版面精簡時，把重點放進動線的關鍵位置
呼應前面提到的 Z 型動線，精簡版面像是活動頁、單一商品頁、首頁主視覺區塊，做法可以直接對照 Z 字的四個轉折點來安排：起點放品牌識別，讓訪客一眼知道自己在哪個網站；第一條橫向路徑放最想讓訪客先看到的訊息，例如活動主標或商品賣點；中段放能延續興趣、但不搶戲的圖片或輔助說明；終點則放這個頁面唯一的行動呼籲。
這種版面的原則很簡單，一個頁面只鎖定一個行動，不要在中途插入太多分散注意力的資訊。這跟前面文字量大的頁面剛好形成對照，內容多的頁面要靠分層跟粗體撐住掃描動線，內容少的頁面則要靠版面配置，把訪客一路帶到唯一的行動呼籲上。
手機瀏覽的動線，跟電腦版一樣嗎？
現在多數流量來自手機，窄螢幕上的視線動線，只有一部分沿用電腦版的邏輯，另一部分則要整個換掉。
F 型掃描在手機版一樣存在，甚至比電腦版更明顯，手機版的內容多半是單欄堆疊呈現，訪客沒有左右選擇的空間，只能一路往下滑，做法也因此一致，重要內容仍然要放在最前面幾段，不能指望訪客滑到頁面下半段才看到重點。
Z 型動線就不一樣了。窄螢幕沒有足夠的橫向空間讓視線畫出左右來回的 Z 字，原本的斜線跳動會被壓縮成一條由上到下的堆疊順序。這代表設計手機版面時，重點不再是「畫面上哪個角落」，而是「堆疊的第幾個位置」，先放什麼、後放什麼，決定了訪客會不會看到你想讓他看到的內容，不能直接把桌機版的左右配置邏輯原封不動搬過來。
建立清楚的視覺層次後，動線不必被 F 或 Z 侷限
前面談的古騰堡動線、Z 型動線、F 型動線，描述的其實都是同一種情境，版面沒有明顯的視覺層次時，訪客的眼睛只能照著預設路徑走。一旦你用前面提到的大小、對比、留白、分組，把版面的重點做出清楚的層次，訪客的視線就會開始跟著你設計的層次走，不再被固定的字母形狀綁住。
換句話說，排版動線設計真正的目標，從來不是把內容硬塞進 F 或 Z 的形狀裡，而是主動幫訪客的眼睛規劃一條路，讓他們不用花力氣思考，就能找到你想讓他看到的內容。層次做得夠清楚，視線自然會被牽著走，設計者才是真正決定動線的人，不是那幾個既定的字母形狀。
順帶一提，除了實際找使用者測試、或是事後查看熱區圖，現在也有 AI 輔助的視線預測工具，能在版面還沒上線前，先模擬訪客可能落下注視點的位置，作為設計階段的參考，這不是本篇的重點，先知道有這個選項即可。
視線動線設計不是套一個公式就好，而是先搞懂訪客的眼睛預設會怎麼走，再用清楚的視覺層次，主動幫他們找到重點。不妨回頭檢視一下自己的網站，那些你最想讓訪客看到的資訊，是不是剛好落在他視線最容易漏看的角落。把答案放到訪客的視線路徑上，而不是放在你覺得好看的地方，這件事現在就能動手調整。