排版前的準備：確認目標與內容架構
動手選排版形式之前，先問自己一條問題：這一頁要讀者完成什麼動作？假設你經營一間會計師事務所，服務專頁的任務便是讓訪客看完服務範圍與收費後，按下「聯絡我們」或提交報價表單。整頁的內容次序、圖文比例與按鈕位置，都應圍繞這個核心動作來安排。
目標明確後，把訪客想知道的問題按重要性排序：服務包含什麼項目、收費標準、過往成功案例、聯絡方式。這四項便構成了頁面的四個主要區塊。這種資訊架構的梳理，是排版的先決條件。確認內容的優先次序後，我們就可以根據各個區塊的特性，選擇合適的佈局形式。
12 款常見的網頁佈局形式
現代網頁設計甚少全頁只用一種排版。通常是因應不同區塊的內容特性，混合使用幾種佈局。以下整理了 12 種在香港企業網站及電商平台常見的佈局形式，助你對號入座。
1. 雙欄佈局 (Two-column Layout)
最經典的圖文組合。一邊放圖片或影片，另一邊放文字說明，適用於產品介紹、導師簡介或公司願景。如果有多個介紹項目，可以採用左右交錯的方式（一組圖左文右，下一組圖右文左），增加頁面閱讀節奏。
2. 分屏佈局 (Split Screen Layout)
將首屏畫面平均分成左右兩半，各自賦予同等重要的視覺比重。適合用來展示兩項並重的核心服務（例如：買樓／租樓），或兩個截然不同的產品系列，讓訪客一進站就能二選一。
3. 非對稱佈局 (Asymmetrical Layout)
打破左右均分的平衡，刻意放大其中一邊的視覺比重。這種排版能營造出現代、動感的設計風格，常用於創意機構或強調品牌個性的首頁，引導視線聚焦在較大或對比較強的一側。
4. F 形佈局 (The F-shape Layout)
根據眼動追蹤研究，用戶瀏覽文字較多的網頁時，視線常呈 F 形（先橫向看頂部，再往下看第二行，接著沿左側垂直掃視）。適合內容豐富的新聞網站或網誌，將重要的導航與標題放在左上及頂部。
5. Z 形佈局 (The Z-shape Layout)
視線從左上到右上，再斜向左下，最後移至右下。這種佈局非常適合以視覺引導為主的登陸頁（Landing Page）。你可以把標誌放左上，主要導航在右上，中間是大圖與標語，右下角收結在「行動呼籲 (CTA)」按鈕。
6. 卡片/區塊佈局 (Card or Block Layout)
將資訊打包成一個個獨立的卡片，常見於文章列表、服務項目或產品目錄。卡片佈局結構一致，方便用戶並排比較多項同類內容，而且在轉換成手機版時，非常容易由多欄堆疊成單欄。
7. 特色圖像/影片佈局 (Featured Image/Video)
首屏使用一張極具視覺衝擊力的大圖或全螢幕影片作為背景，上面疊加簡短標題與按鈕。這種 Hero Section 佈局適合快速傳遞品牌形象或活動氣氛，但必須注意文字與背景的對比度，確保文字清晰可見。
8. 瀑布流佈局 (Masonry Layout)
卡片佈局的變奏，卡片寬度相同但高度不一，像磚牆般緊密排列。最常見於 Pinterest 或攝影作品集。它能有效展示大量比例不同的圖片，但不適合用於需要仔細比較文字規格的資訊列表。
9. 雜誌式佈局 (Magazine Layout)
模仿實體雜誌的多欄網格設計，混合不同大小的圖片、大標題與摘要文字。適合內容繁多的資訊門戶或數碼媒體，能在首頁同時呈現多個重點故事，層次分明。
10. 固定導航佈局 (Fixed Navigation)
將選單固定在頁面頂部或側邊，即使訪客向下捲動，導航列依然可見。這種設計能提供極佳的便利性，讓訪客隨時跳轉到其他單元，是現今企業網站的標準配置。
11. 隱藏導航佈局 (Hidden Navigation)
通常以「漢堡選單 (Hamburger Menu)」形式出現。為了保持版面極度乾淨，將選單收納在圖示內。在手機版上這是主流做法，但在電腦版上使用時，需考慮是否會增加用戶尋找資訊的阻力。
12. 互動式佈局 (Interactive Layout)
包含圖片輪播 (Slider)、手風琴式選單 (Accordion) 或分頁標籤 (Tabs) 等元素。適合在有限空間內收納大量資訊。使用時要注意，自動輪播若過快可能會令讀者錯過訊息，應提供手動暫停或切換的控制權。
文字與色彩：易讀性的關鍵
選好佈局後，文字與色彩的處理直接決定了頁面是否「好讀」。
字體選擇與文字編排
字體配置建議由兩種開始：標題選用一種字體（如較粗的黑體以加強力度），內文選用另一種易讀性高的字體，並在全站統一使用。與其不斷增加字體種類，不如善用字級（大小）、字重（粗幼）與間距來建立閱讀層次。重要字句應以字重強調，而非頻繁變換顏色。
在香港的網頁設計中，由於經常出現中英夾雜的情況，選用字體時必須以實際的繁體中文及英文內容進行試排，檢查兩者並列時的基線是否對齊、粗細是否協調。W3C 的 WCAG 2.2 文字間距準則也提醒，文字框應具備彈性，確保訪客自行放大字體時，內容不會被截斷。
色彩對比與品牌規範
色彩的第一要務是確保文字清晰可辨。WCAG 2.2 對比度準則建議，一般文字與背景的對比度至少應達 4.5:1。即使是使用品牌主色，若對比度不足，也應適度調深文字或調淺背景。若要在圖片上疊加文字，必須確保文字所在位置的背景明暗穩定，必要時可加入半透明的遮罩層來提升對比。
將按鈕顏色、連結樣式及各級標題的設定寫成一套簡單的品牌設計規範（Brand Guidelines），不僅能確保全站風格一致，也能大幅降低訪客在不同頁面間的學習成本。
跨裝置體驗：由電腦到手機的重排重點
超過一半的流量來自流動裝置，響應式設計（Responsive Web Design）是基本要求。同一套內容必須能適應不同螢幕寬度自動重排。W3C 準則指出，內容在手機螢幕重排後，不應損失資訊，且正文不需要橫向捲動。
手機版調整的三個檢查點
- 堆疊次序：電腦版的雙欄佈局在手機上通常會變成上下堆疊。你必須確認堆疊後的次序是否符合閱讀邏輯，重要的說明文字會不會被次要的裝飾圖推到畫面太下方。
- 按鈕與觸控範圍：電腦上用滑鼠點擊很準確，但在手機上用手指點擊則需要較大的目標區域。確保 CTA 按鈕及表單欄位有足夠的大小與間距，避免誤觸。
- 保留二維結構的資料表：一般正文不應左右捲動，但如果是規格比較表或價目表，強行變成單行直排反而難以閱讀。這類內容應允許在其專屬的區塊內進行橫向捲動（Horizontal Scroll）。
排版定稿前，務必用真實尺寸的手機親自操作一次，測試導航是否順暢、文字是否過小。
資料參考
- W3C《Understanding SC 1.4.12: Text Spacing》，讀者可能自行放大行距與字距，文字框要能隨內容伸展
- W3C《Understanding SC 1.4.3: Contrast (Minimum)》，一般文字與背景之間至少有 4.5:1 的對比
- W3C《Understanding SC 1.4.10: Reflow》，狹窄寬度下重排後不損失資訊或功能，不需兩個方向捲動
- W3C《Understanding SC 2.2.2: Pause, Stop, Hide》，自動開始、超過五秒的移動資訊要提供暫停、停止或隱藏的方法
網站版面設計常見問題
網站版面設計如何兼顧美觀與易讀？
先確保讀者讀得舒服，再用層級與節奏做視覺變化。具體可留意四件事：內容次序貼近讀者問題、正文有最大寬度、區塊之間留白足夠、文字與背景對比足夠。疊字、滿版這類變化用之前，需逐項檢查該區的圖文關係、比較需求、文字寬度與背景條件：圖配說明就用雙欄；多項同類內容要並排比較，結構一致的卡片幫得上忙；文字一長，回到有寬度上限的排法；文字疊圖，先看該位置的明暗是否穩定。
要怎樣開始規劃網頁排版？
由頁面目的開始：先寫下這一頁要讀者完成的一個動作，再把讀者會問的問題按次序排成區塊，用真實內容畫線框圖定位置，視覺處理放最後。目的多過一個時應分清主次，避免幾個動作爭奪注意力。
電腦版的圖文排版搬到手機時要調整什麼？
主要調整次序與大小：雙欄變上下堆疊後，圖文先後就是閱讀次序；按鈕與連結要夠大，讀者才容易準確按到。檢查三件事：
- 逐區看堆疊後的次序，重要的圖文有沒有被推到後面
- 按鈕與表單在手機上是否仍然容易準確操作
- 正文有沒有不必要的左右捲動；需要保留二維關係的資料表，例如規格或價目對照，才可在自己的區域內橫向捲動
一頁的內容應該用哪種排版形式？
按內容條件選排法，判斷的位置有三個：
- 圖文關係：這區是圖配說明，還是多項內容並排？圖配說明用雙欄；多項比較用結構一致的卡片佈局。
- 文字寬度：文字長不長？長文要有閱讀寬度上限。
- 背景條件：文字疊圖的位置，明暗穩不穩定？不穩定就換位置或加深背景，再檢查對比。
同一頁混合幾種排法是正常做法，但同類區塊要維持同一種，讀者才認得出它們屬於同類內容。
網站的字體應該用多少種？
可先由兩種開始：標題與內文各一種，全站通用。要更多變化，先用字級、字重與間距去做，而不是加字體；最終用幾種，以實際字形、字級與全站一致性的試排決定，沒有通用的最佳數量。選字體時應以實際內容試排，檢查繁體中文字形、中英夾雜與數字的顯示效果。
