構圖是設計的骨架。**好的構圖讓信息「自己跳進用戶腦子」，壞的構圖讓用戶「在視覺迷宮裡迷路」**。本章系統講解網頁構圖的底層邏輯、主流框架、視覺流設計與響應式適配策略。

一、構圖三大基石

1. 網格系統：秩序的基因。12/24 欄響應式網格，斷點標準化（576/768/992/1200/1400px）
2. 視覺層級：大小/顏色/位置/留白/對比，引導視線按重要序瀏覽
3. 視覺流：Z型（閱讀型）、F型（內容型）、倒S型（營銷型）、放射型（品牌型）四大經典模型

二、主流頁面構圖框架

框架類型	結構特徵	適用場景	關鍵指標
聖杯/雙飛翼佈局	左右定寬中間自適應，主內容優先渲染	內容型、後台管理、電商列表	首屏渲染速度、側邊欄固定
卡片式瀑布流	等寬卡片，瀑布流/網格雙模式，無盡滾動	發現型、社區、圖片/視頻流	加載性能、圖片懶加載、防抖
單頁式長頁面	全屏區塊垂直堆疊，錨點導航，視差滾動	產品介紹、活動專題、作品集	視覺衝擊、敘事節奏、轉化路徑
儀表盤佈局	頂部導航 + 側邊菜單 + 核心指標區 + 圖表區	數據大屏、後台分析、監控面板	信息密度、圖表響應式、實時更新

三、視覺流設計：引導視線的隱形手

1. Z型流：Logo→導航→主標題→核心CTA→內容區→頁腳。適合簡單營銷頁
2. F型流：標題→副標→列表項→側邊欄。適合內容密集頁（新聞/部落格/文檔）
3. 倒S型流：左右交替佈局，視線呈蛇形下行。適合長故事/產品特性/品牌敘事
4. 放射型流：核心信息居中，輔助信息四周輻射。適合品牌首頁/儀表盤

**實操技巧**：

• 關鍵節點放大/高對比/動效吸引
• 留白製造呼吸感，避免視覺擁堵
• 重複元素（圖標/色塊/數字）建立節奏感
• 打破常規製造驚喜（如斜向切割/不對稱/超大字體）

四、響應式構圖策略：從桌面到移動的優雅降級

斷點	佈局調整	內容策略
≥1200px (LG)	多欄並列、豐富側邊欄、大尺寸媒體	完整功能、深度內容、多任務並行
992-1199px (MD)	側邊欄收納/疊加、卡片列表縮列數	保持核心功能、次要信息折疊
768-991px (SM/平板)	單欄主流、頂部導航簡化、抽屜式菜單	觸控優化、手勢操作、關鍵任務聚焦
<768px (XS/手機)	單欄堆疊、底部 Tab Bar、浮動操作按鈕	極致簡化、大拇指區域、離線優先

五、構圖質量自檢清單

1. 是否建立清晰視覺層級？（眯眼測試：模糊視覺下主次分明）
2. 視覺流是否順暢無阻？（眼動軌跡測試或團隊走查）
3. 關鍵信息是否首屏可見？（5 秒測試）
4. 留白是否有節奏？（8px 基礎網格倍數）
5. 響應式斷點是否無破綻？（實機測試主流設備）
6. 對齊是否嚴格？（基線網格、光學對齊修正）
7. 是否有「視覺雜音」？（無功能裝飾、多餘分隔線、亂七八糟圖標）

結語

構圖不是排版遊戲，而是**信息架構的視覺化表達**掌握網格、層級、視覺流三大基石，選對框架，設計視覺流，做響應式適配，每一步都在為「用戶不思考」服務。下章《色彩篇》見！