网站设计结构图鉴 36种主流布局与适用场景

网站设计结构图鉴

36 种主流页面布局、适用场景、优缺点与响应式策略

Website Layout Pattern Atlas

用途：网站规划、UI/UX 设计、AI Coding 提示词、信息架构选型、原型评审。 范围：覆盖基础骨架、网格导航、文档内容、营销品牌、应用工作台、电商与媒体共 6 大类。 说明：“所有”网站形态无法穷举；本图鉴收录的是最常见、最可复用、可组合成绝大多数网站的主流结构。

如何使用这份图鉴

网站布局不是“选一个模板就结束”，而是根据内容类型、任务频率、信息密度和设备尺寸进行组合。一个真实网站通常会同时使用 3–8 种结构。

选型时优先回答四个问题：用户来这里是“阅读、寻找、比较、操作还是创作”？信息是单条还是大量集合？用户是否需要高频连续操作？移动端是否承担同等复杂任务？

每种结构下面都给出：适用场景、结构说明、优势、风险、移动端策略与常见参考。图示是结构示意，不代表具体视觉风格。

快速选型矩阵

用户主要任务	首选结构	常见组合	核心风险
阅读 / 学习	单栏、博客、Docs、长文	Docs + 搜索 + TOC	导航过度、正文太宽
寻找 / 浏览	卡片网格、搜索筛选、Marketplace	筛选 + 列表 + 地图	筛选过多、排序不透明
比较 / 决策	Pricing、对比矩阵、PDP	卡片 + 证据 + FAQ	选项过多、信息堆砌
高频操作	Dashboard、Admin、Master-Detail	侧栏 + 表格 + 详情	操作路径长、状态不同步
创作 / 编辑	Canvas、Chat、Workspace	工具栏 + 画布 + 属性	学习成本、快捷键冲突
内容消费	Feed、Magazine、Streaming	推荐 + 分类 + 搜索	无限滚动疲劳、发现偏差

一、基础页面骨架

决定页面最基本的空间分配方式。后续的视觉风格、组件和内容都建立在这些骨架之上。

1. 单栏居中布局 / Single-column / Centered Layout

	适合： 长文章、法律条款、说明页、阅读型页面 结构： 内容集中在单一主轴，减少横向干扰，是最稳定的阅读结构。 优势： 阅读专注；响应式简单；信息层级清晰 风险： 信息密度低；不适合复杂导航或多任务 移动端： 手机端几乎无需重构，仅收窄边距 参考： Medium 风格文章、隐私政策、长文阅读

2. 双栏：主内容 + 侧栏 / Two-column Main + Sidebar

	适合： 博客、资源页、商品详情辅助区、文章推荐 结构： 主内容承担核心任务，侧栏承载目录、推荐、筛选、作者信息等辅助内容。 优势： 兼顾主线与辅助信息；扩展性好 风险： 侧栏过宽会挤压正文；移动端需折叠 移动端： 移动端通常变成单栏，侧栏下沉或抽屉化 参考： 博客文章、知识库、商品信息页

3. 三栏布局 / Three-column Layout

	适合： 文档站、社区、信息密集型产品 结构： 左侧导航、中间主内容、右侧上下文辅助，是桌面端高密度信息的经典结构。 优势： 导航清晰；上下文丰富；适合专业工具 风险： 小屏拥挤；三栏宽度需要精确控制 移动端： 移动端保留中间主区，左右栏变抽屉/按钮 参考： JetBrains Docs、社区/协作工具

4. 左右分屏 / Split-screen Layout

	适合： 登录页、品牌首页、产品介绍、对比页面 结构： 页面被分成两个强区域，常用于“视觉+文本”“输入+预览”“A/B对比”。 优势： 视觉冲击强；对比关系清楚 风险： 移动端必须改为上下堆叠；内容量受限 移动端： 上下堆叠，优先保留核心 CTA 参考： SaaS 登录、创意作品页、产品首屏

5. 固定侧栏应用壳 / Fixed Sidebar App Shell

	适合： 后台、SaaS、编辑器、项目管理工具 结构： 左侧长期存在的导航壳，右侧是可切换工作区，适合高频操作型产品。 优势： 用户形成位置记忆；模块扩展稳定 风险： 侧栏膨胀后会变复杂；窄屏占空间 移动端： 移动端收为汉堡菜单/底部导航 参考： Notion、Linear、后台系统

6. 全屏沉浸式 / Full-screen / Immersive

	适合： 作品展示、游戏、活动主视觉、沉浸叙事 结构： 尽量移除导航噪声，以图片、视频、3D或单一任务占据主要视野。 优势： 视觉冲击极强；聚焦单一任务 风险： 可访问性和导航成本高；性能敏感 移动端： 手机端保持单任务，谨慎使用复杂动效 参考： 品牌 Campaign、游戏首页、数字展览

二、网格与导航结构

解决“很多内容怎么摆”和“用户怎么找到内容”的问题，是信息架构和响应式设计的核心。

7. 卡片网格 / Card Grid

	适合： 项目列表、资源库、课程、工具集合、作品集 结构： 用等规格卡片承载重复对象，是最通用的集合展示方式。 优势： 扫描效率高；模块化；适配响应式 风险： 卡片过多会“千篇一律”；层级容易扁平 移动端： 列数从 4/3/2 自动降为 1 参考： 项目页、资源中心、应用商店

8. Bento 便当网格 / Bento Grid

	适合： 品牌首页、AI 产品首页、功能概览、个人主页 结构： 使用大小不一的模块形成视觉节奏，强调主次关系。 优势： 辨识度高；可同时展示多种内容 风险： 布局维护复杂；小屏重排要谨慎 移动端： 移动端按优先级重新排序并单列化 参考： 现代 SaaS 首页、产品功能总览

9. 瀑布流 / Masonry Layout

	适合： 图片社区、灵感库、摄影、设计作品 结构： 各列卡片高度不一致，最大化利用垂直空间。 优势： 视觉丰富；适合异形内容 风险： 阅读顺序不稳定；键盘导航更难 移动端： 手机端 1-2 列，保持自然文档顺序 参考： Pinterest 类图库、摄影站

10. 主从详情 / Master–Detail

	适合： 邮件、订单、文件、CRM、工单系统 结构： 左侧/一侧选择对象，另一侧展示当前对象详情，减少页面跳转。 优势： 高效连续处理；上下文保留 风险： 小屏难双栏；状态同步复杂 移动端： 移动端由列表进入详情，再返回 参考： 邮件、工单、文件管理器

11. 顶部导航 + Mega Menu / Mega Navigation / Portal

	适合： 大型官网、云平台、产品矩阵、企业站 结构： 顶部导航承担全站入口，展开后按业务域组织大量链接。 优势： 适合内容规模大；全局入口明确 风险： 分类设计难；过度扩张会压迫用户 移动端： 移动端改为分级抽屉菜单 参考： 云厂商、企业集团官网、产品门户

12. Tab / Stepper 分步结构 / Tabbed / Stepper Layout

	适合： 设置页、流程表单、产品配置、复杂详情 结构： 用标签页切同级信息，或用步骤条表达有顺序的流程。 优势： 避免单页过长；状态清晰 风险： 隐藏内容可能被忽略；步骤过多会拖长流程 移动端： 横向 Tab 可变下拉/滚动；Stepper 纵向化 参考： 账户设置、下单流程、配置向导

三、内容与知识型结构

适合文章、文档、帮助中心和知识体系，重点是阅读、层级、搜索与长期维护。

13. 三栏技术文档站 / Documentation Site

	适合： 开发者文档、产品手册、内部规范、知识体系 结构： 左文档树 + 中正文 + 右页内目录，是专业技术文档的标准形态之一。 优势： 层级清晰；适合长文和多文档；可长期扩展 风险： 信息架构设计要求高；维护目录成本 移动端： 左右栏抽屉化；右 TOC 常折叠 参考： JetBrains Docs、Docusaurus、VitePress

14. 搜索优先帮助中心 / Help Center / Knowledge Base

	适合： 客服帮助、FAQ、售后、用户指南 结构： 首页先提供强搜索，再通过问题分类进入内容。 优势： 用户按问题找答案；降低客服成本 风险： 搜索质量决定体验；分类重复容易混乱 移动端： 移动端保留大搜索框和卡片分类 参考： 产品帮助中心、客服知识库

15. 博客列表 + 文章页 / Blog Index + Article

	适合： 个人博客、企业内容营销、日记、技术文章 结构： 列表负责发现，文章页负责沉浸阅读，是最成熟的内容发布结构。 优势： SEO 友好；写作/归档简单 风险： 同质化严重；推荐逻辑需单独设计 移动端： 列表单列化，文章保持窄正文 参考： 个人博客、技术博客、企业内容站

16. 杂志 / 编辑部布局 / Magazine / Editorial

	适合： 新闻、媒体、专题、文化内容、品牌内容 结构： 通过头条、次头条、栏目和不同字号形成强编辑层级。 优势： 信息密度高；内容主次强 风险： 响应式重排复杂；需要持续编辑运营 移动端： 移动端按编辑优先级顺序展开 参考： 新闻媒体、在线杂志、专题站

17. 长文故事化布局 / Long-form Storytelling

	适合： 深度文章、研究报告、品牌故事、纪录式内容 结构： 大标题、视觉素材与窄正文结合，用滚动节奏控制叙事。 优势： 沉浸；适合高价值内容 风险： 制作成本高；过度动画影响阅读 移动端： 减少动效，保证正文优先 参考： 深度报道、研究专题、品牌故事

18. Wiki / 层级知识库 / Wiki / Nested Knowledge

	适合： 团队知识、项目文档、制度、百科型内容 结构： 强调页面之间的父子关系、反向链接、属性和版本。 优势： 知识可持续生长；关联性强 风险： 容易形成信息坟场；需要治理 移动端： 移动端折叠知识树，保留搜索 参考： Confluence/Notion Wiki 类场景

四、营销与品牌结构

以表达价值、建立信任、完成转化为目标，更强调首屏、叙事节奏、证据和 CTA。

19. 经典 Landing Page / Classic Landing Page

	适合： 产品发布、广告落地页、SaaS 首页、转化页 结构： Hero 首屏之后依次解释卖点、证明、功能、案例和 CTA。 优势： 转化路径清晰；营销组件成熟 风险： 容易模板化；内容过长会疲劳 移动端： 移动端保持 CTA 前置，模块单列 参考： SaaS 官网、产品发布页

20. One-page 单页滚动 / One-page Scrolling

	适合： 小产品、个人介绍、活动、单一服务 结构： 所有主要内容放在一个页面，通过连续滚动完成叙事和转化。 优势： 路径简单；易做视觉节奏 风险： 内容多后难导航；SEO/维护有限 移动端： 移动端天然适配，但要控制长度 参考： 个人介绍、活动专题、小型产品

21. 作品集 / Case Study / Portfolio / Case Study

	适合： 设计师、开发者、工作室、个人品牌 结构： 先建立身份与能力，再用完整案例展示过程、结果和证据。 优势： 信任建立强；适合求职和个人品牌 风险： 案例质量要求高；素材准备成本大 移动端： 移动端项目卡单列，案例图适配窄屏 参考： 设计作品集、独立开发者网站

22. 价格套餐页 / Pricing / Plan Comparison

	适合： SaaS、订阅服务、会员、API 产品 结构： 并排套餐卡 + 功能对比 + FAQ，核心目标是帮助用户快速决策。 优势： 决策效率高；转化路径明确 风险： 选项太多会增加决策负担 移动端： 套餐纵向堆叠，突出推荐方案 参考： SaaS Pricing、会员订阅

23. 活动 / 会议站 / Event / Conference

	适合： 发布会、比赛、会议、演出、线下活动 结构： 主视觉+日期报名+议程+嘉宾+地点，是时间驱动型内容结构。 优势： 信息目的明确；传播性好 风险： 过期后价值快速下降；需动态更新 移动端： 报名 CTA 固定可见，议程纵向化 参考： 大会官网、比赛活动页

24. 功能/方案对比页 / Comparison Matrix

	适合： 竞品对比、版本对比、采购决策、B2B 产品 结构： 通过表格或维度矩阵把多个方案放在同一坐标系中。 优势： 非常适合决策；差异清晰 风险： 表格在手机端困难；容易陷入参数堆砌 移动端： 横向滚动或转卡片对比 参考： 版本对比、竞品对比、采购页

五、产品与应用结构

适合需要持续操作的 Web App，核心不再是“看”，而是“做事”的效率、状态与可控性。

25. 数据仪表盘 / Dashboard

	适合： 数据分析、运营、监控、财务、BI 结构： KPI + 主图表 + 明细 + 筛选，以“状态感知和趋势判断”为核心。 优势： 信息密度高；适合快速判断 风险： 容易堆指标；图表过多会失焦 移动端： 手机端只保留关键 KPI 和核心图表 参考： BI、运营后台、监控中心

26. 后台数据表格 / Admin / Data Table

	适合： CRM、订单、权限、内容审核、运维后台 结构： 筛选、批量操作和高密度表格是核心，强调效率而非展示。 优势： 批量处理效率高；信息完整 风险： 小屏体验差；表格复杂度高 移动端： 移动端转卡片或只支持关键操作 参考： 企业后台、CMS、运营管理

27. 三栏 Inbox / 工作台 / Three-pane Inbox

	适合： 邮件、客服、消息、工单、协作 结构： 导航 + 列表 + 详情同时存在，适合连续处理大量对象。 优势： 切换成本低；上下文稳定 风险： 桌面空间要求高；状态复杂 移动端： 移动端按层级逐屏进入 参考： 邮箱、客服工单、消息中心

28. 聊天 / AI 助手 / Chat / AI Assistant

	适合： AI 对话、客服、协作、命令式产品 结构： 历史会话 + 对话流 + 输入区，核心是上下文连续性。 优势： 交互门槛低；适合自然语言任务 风险： 长对话管理、上下文和工具状态复杂 移动端： 移动端优先保证输入与消息可读性 参考： AI 助手、在线客服、协作聊天

29. 画布 / 编辑器工作区 / Workspace / Canvas Editor

	适合： 设计工具、流程图、白板、IDE、可视化搭建 结构： 中央画布是核心，两侧分别放工具和属性，强调直接操控。 优势： 专业能力强；适合复杂创作 风险： 学习成本高；键盘/鼠标交互复杂 移动端： 移动端通常降级为查看或简化编辑 参考： Figma、白板、低代码编辑器

30. 搜索 + 筛选 + 结果 / Search / Filter Explorer

	适合： 招聘、房产、旅行、数据库、资源检索 结构： 顶部搜索明确意图，左侧 Facets 缩小范围，主区展示结果。 优势： 适合大规模数据发现；可控性强 风险： 筛选项过多会复杂；无结果状态重要 移动端： 筛选变底部抽屉/弹层，结果单列 参考： 招聘、旅行、资源库、目录检索

六、电商、发现与媒体结构

面向大量供给、内容消费和比较决策，重点是发现、筛选、推荐、信任与转化。

31. 电商分类 / 商品列表 / E-commerce PLP

	适合： 电商分类页、商品搜索、选品 结构： 分类筛选 + 商品卡片网格，核心是快速比较和缩小范围。 优势： 高效浏览；筛选成熟 风险： 卡片信息太多会拥挤；排序策略重要 移动端： 筛选折叠为抽屉，2列/1列商品卡 参考： 电商搜索和类目页

32. 商品详情页 / Product Detail Page / PDP

	适合： 实物商品、数字商品、服务套餐 结构： 媒体画廊 + 价格/选项/购买 CTA + 详情评价，是转化核心页。 优势： 决策信息集中；购买路径直接 风险： 内容很长；信息优先级难做 移动端： CTA 可吸底固定，图文改上下结构 参考： 主流电商商品详情

33. Marketplace / 服务发现 / Marketplace

	适合： 本地服务、自由职业、酒店、课程、B2B 供给 结构： 搜索、筛选、供给卡片、信誉和可用性共同决定选择。 优势： 适合多供给比较；扩展性强 风险： 排序公平性和信任体系复杂 移动端： 筛选抽屉化，卡片突出核心信号 参考： 服务市场、酒店/课程/自由职业平台

34. 地图中心布局 / Map-centric Discovery

	适合： 本地生活、房产、旅行、配送、门店 结构： 地图与结果列表联动，空间关系本身就是主要信息。 优势： 位置理解直观；适合附近/路线 风险： 地图性能与移动端交互复杂 移动端： 移动端地图和列表切换或半屏抽屉 参考： 本地搜索、房产、旅行发现

35. 社交 / 社区 Feed / Social / Community Feed

	适合： 社区、动态、讨论、关注流、内容平台 结构： 中心信息流承担消费，左右区域承载导航、推荐和趋势。 优势： 连续消费效率高；易形成活跃度 风险： 信息茧房、无限滚动疲劳、内容治理 移动端： 移动端主 Feed 单列，导航底部化 参考： 社区、动态流、讨论平台

36. 流媒体 / 内容库 / Media Streaming Library

	适合： 视频、音乐、课程、影视、播客 结构： 大推荐位 + 多条横向内容轨道，强调继续观看、推荐和分类。 优势： 沉浸浏览；适合大媒体库 风险： 发现逻辑依赖推荐；横向滚动层级多 移动端： 横向卡片轨道保留，减少同时显示数量 参考： 视频/音乐/课程内容平台

组合规则：真实网站通常不是单一结构

绝大多数成熟网站都会把多个结构组合起来。下面是几个高频组合：

网站类型	推荐结构组合
个人/品牌官网	Landing Hero + Bento + Portfolio Case Study + Blog
技术产品官网	Landing + Pricing + Documentation + Help Center
内容博客	Blog Index + Single-column Article + TOC + Search
SaaS 产品	Fixed Sidebar App Shell + Dashboard + Admin Table + Settings Tabs
AI 产品	Chat + Sidebar History + Workspace/Canvas + Docs
电商	PLP + PDP + Search/Filter + Comparison + Account Center
本地发现	Search/Filter + Marketplace + Map-centric + Detail Page
媒体内容库	Streaming Library + Search + Category Rails + Long-form Detail

给 AI / Codex 描述布局时的推荐格式

不要只说“做成某某网站那样”。用“结构 + 行为 + 响应式 + 禁止项 + 验收”五层描述，稳定性会高很多。

页面结构：三栏技术文档站（Documentation Site） 左栏：可折叠文档树，桌面端 sticky。 中栏：Markdown/MDX 正文，最大阅读宽度 760px。 右栏：自动读取 H2/H3 的本页目录，并用 Scroll Spy 高亮当前章节。 响应式： - < 1024px：隐藏右 TOC； - < 768px：左侧文档树改为抽屉； - 正文必须保持单栏自然滚动。 禁止： - 不要做成普通博客卡片页； - 不要让左右栏挤压正文到不可读； - 不要让三个区域分别出现难以控制的纵向滚动。 验收： 用户在桌面端可以同时看到“全站文档位置、当前正文、当前页章节”；移动端仍可通过抽屉快速切换文档。