兰亭妙微ui设计公司分享：一套完整的 Web 设计语言库，由设计价值观、设计法则、布局、视觉、数据可视化、动效六大模块共同构成。本文聚焦布局模块（后续还会覆盖视觉、数据可视化）展开完整拆解。
本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合官网展示类、商城交易类、后台功能类、工具组件类等多种已上线 Web 产品实践总结而来。 部分内容来源于早期项目 1.0 版本，受互联网产品快速迭代影响，个别内容仍有待验证与迭代，欢迎各位读者交流指正。
Web 布局体系将分为四大核心板块：框架布局、页面层级、栅格系统、Web 页面适配。
提示：全文体量较大，建议收藏分段阅读。将相关知识点整合为一篇，是为了保证知识体系完整性，避免内容碎片化。版权归属原项目所有。
一、框架布局
框架布局是整个 Web 页面的骨架基底。只有确定页面框架之后，才可以进一步落地统一视觉、功能交互、业务流程。本章节围绕设计原则、基础布局、扩展布局、懒加载策略四个维度讲解。
1. 框架布局设计原则
- 一致性：保证全站布局结构、视觉范式统一，降低用户认知成本，提升使用舒适度。
- 逻辑性：页面信息分类、模块组织遵循业务逻辑，模块之间结构关系清晰通顺。
- 可扩展性：无论业务简单或复杂，布局框架支持业务迭代，可灵活扩充、调整结构。
- 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全体验链路，合理引导用户行为。
2. 基础布局
基础布局包含上下布局、左右布局、T 型布局，结构简洁，是 Web 产品中最高频的布局方案。
- 上下布局 页面上方为导航模块，下方承载主内容区。导航栏宽度会约束导航条目数量与文字长度。 适用：导航条目少、页面纵向内容长的网站，是 Web 最通用的框架布局。
- 左右布局 页面左侧放置全局导航，右侧为主内容区域。导航常驻可视区域，页面切换感知强。 适用：业务结构相对简单的网站。
- T 型布局 广泛应用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，分为侧边菜单栏 + 主内容区，侧边栏可居左也可居右。
3. 扩展布局
扩展布局是基础布局的进阶形态，分为C 型布局、口型布局，适合信息密度高、功能复杂的系统。
- C 型布局 T 型布局的延伸，同时融合水平导航与垂直侧边导航，清晰区分高频业务操作和次要辅助操作。 适用：模块繁多、逻辑复杂的后台管理系统。
- 口型布局 C 型布局进一步拓展，在页面两侧同时增设侧边栏，最大化利用屏幕版面，可承载海量信息与功能。 缺点：页面信息密度高，灵活性偏弱，容易产生拥挤感。 适用：工具类、资讯类高密度页面。
4. 懒加载
懒加载是长页面图片的延迟加载策略：图片仅滚动进入可视区域时才发起资源请求，有效加快页面首屏速度，减轻服务器压力。 加载过程中使用骨架屏（灰色占位）作为过渡反馈。
在电商等图片密集的长页面中，如果一次性加载全部图片资源，极易出现长时间白屏、页面闪烁，极端情况会造成页面崩溃，严重破坏用户体验，懒加载就是解决这类场景的重要手段。
二、页面层级
页面层级用于定义页面元素的堆叠顺序、归属层级与组合规范。 从底层到顶层固定顺序：背景层 Background → 内容层 Content → 全局控制层 Global control → 蒙版层 Mask → 弹出层 Pop‑up。 下文以结构最复杂的口型布局作为演示案例。
1. 背景层｜最底层
永久处于页面最底部，一般使用中性底色，目的是衬托上层的内容与导航。 分为纯色背景与装饰图片背景两类：
- 纯色常用中性色：
#ffffff、#fafafa、#f5f5f5
- 图片背景：图形、纹理、装饰插画组成，用于美化页面、引导视觉流向。
2. 内容层｜业务核心层
业务关联性最强，也是页面复杂度最高的层级，位于背景层之上。 承载用户需要获取的核心业务信息，以及配套操作，例如表单录入、数据列表、详情展示、信息说明等。
3. 全局控制层
置于内容层上方，承担全站导航、全局操控能力，包含顶部导航、菜单栏、侧边栏等组件。
4. 蒙版层
不会独立使用，配合弹出层出现；标准样式为半透明黑色遮罩 rgba(0,0,0,0.5)。 作用：锁定下层页面的全部交互，视觉聚焦弹窗，引导用户完成当前操作。
5. 弹出层｜最高优先级
临时浮层，优先级最高，承载临时任务，典型代表是对话框组件。 以弹窗、抽屉滑出形式唤起；蒙版会禁用底层页面交互，用于需要强聚焦的分支任务流程。
三、栅格系统
栅格系统为页面排版、尺寸设定提供标准化参考，让设计具备秩序感。 合理运用栅格，可以降低设计决策成本、提升团队协作效率，保障视觉还原质量，同时实现响应式布局。
分为四个部分：栅格基础概念、模块划分、间距系统、布局适配规则。
① 关于栅格
- 轻量简单项目：12 栅格即可满足需求；
- 业务庞大、信息分组复杂的中台项目：推荐 24 栅格，实现更细粒度划分。
栅格两大基础单元：
- Column（列）：业务内容的容器；
- Gutter（水槽 / 槽）：控制列与列之间留白间距。
公式：列宽 + 水槽间距 + 页面左右边距 = 页面总宽度 内容区域宽度 = N 个列宽度 + (N‑1) 个水槽宽度
以上下布局的 24 栅格为例：水槽 Gutter 为固定值；浏览器缩放时，列宽会弹性变化，水槽间距保持不变。12 栅格逻辑可以同理推导。
② 模块
模块指页面内的业务区块，可以是一段文本、一张图片或组合组件。
注意：装饰性背景元素不属于业务模块，不需要严格遵守栅格约束。
以 12 栅格举例，模块既可以均分 2/3/4/6/12 份，也支持非对称比例（1:2:1、1:3:2、2:3:3、1:2、3:1 等），设计师根据业务场景自由组合。
③ 间距系统
栅格不仅管控排版，同时规范页面内全部元素对齐与留白，以此保障页面韵律与一致性。
桌面端主流屏幕尺寸大多可以被 8 整除，行业普遍采用8 为最小原子单位，采用 8n 规则定义模块尺寸与间距。
- 2、4、6：粒度太小，容易造成页面元素细碎，节奏感差；
- 10：步长过大，间距跳跃感明显； 因此 8n 是普适性最优方案。
④ 关于适配
定义三个关键概念：
Fixed固定宽度：尺寸写死，不受浏览器窗口影响；Auto自适应宽度：跟随浏览器窗口自动伸缩；Min最小宽度，限制页面收缩下限。
基础布局适配规则
- 上下布局 分为固定宽度、全屏宽度两种模式。
- 固定宽度：内容区 Fixed 建议设置
1200px，适配绝大多数屏幕，两侧 Auto 区域自动留白；
- 全屏宽度：需要设置内容区 Min 最小边距，避免内容贴边被裁切。
- 左右布局、T 型布局 侧边导航 / 菜单栏为 Fixed 固定宽度；中间主内容区为 Auto 自适应。
扩展布局适配规则
C 型布局、口型布局：两侧导航栏、侧边栏均采用 Fixed 固定，中间内容区 Auto 自适应。
四、Web 页面适配
本章节讲解响应式、断点（中断点）、布局类型、流动布局模块处理、自适应五大内容。
① 响应式 Responsive
一套代码，兼容多终端。
适用场景：展示官网、交互简单、迭代频率低的产品，维护成本更低。
实现响应式两个必要条件：
- 布局具备规律性，依托弹性网格，尽量用百分比替代固定像素；
- 图片资源支持弹性缩放，不写死图片宽高。
栅格系统，正是实现响应式网页的底层基础。
② 中断点（断点 Breakpoint）
断点即页面尺寸临界阈值：浏览器窗口收缩到该数值，页面布局规则需要发生变化，适配新的视口。
断点的设置，需要结合业务内容、主流设备分辨率、用户规模、研发成本综合判断；当现有布局无法良好展示内容，就应该设置断点。
参考业界标准：Material Design、Bootstrap 断点体系。
断点越多适配效果越细腻，但开发成本随之提升；资源有限的项目，选取少量核心断点即可。
③ 布局类型
按照页面缩放行为，分为固定布局、流动布局、混合布局三类。
- 固定布局 列宽、水槽全部固定，设置 PC 端常用最小宽度（一般
1200px）。
- 窗口大于最小宽度：内容居中，左右留白；
- 窗口小于最小宽度：页面不再收缩，底部出现横向滚动条。
- 流动布局 浏览器窗口缩小时，元素自动变窄、文本自动换行；只有抵达断点阈值，才会变更整体布局结构。 适合仪表盘、编辑器、图文、数据可视化页面；对用户而言，内容弹性收缩，优于单纯增减显示条目。
- 混合布局 固定布局 + 流动布局结合。最典型例子：后台系统 Dashboard，侧边栏 Fixed 固定，右侧内容区 Auto 流动。 不同维度使用不同缩放规则，部分区域固定、部分区域弹性伸缩。 适用后台系统、工具界面。
④ 流动布局下的模块处理策略
响应式不等于简单整体等比缩放。需要基于内容优先级灵活调整模块，一共 5 种处理手段：
- 挤压‑拉伸 模块跟随视口挤压拉伸；适合文本、按钮、输入框、纯色背景，拉伸不会产生形态损坏的元素。
- 左右‑上下 PC 端左右排布，窄屏转为上下堆叠；适合图文列表、主内容 + 侧边推荐等双栏排版。
- 删减‑增加 小屏幕下舍弃次要内容（广告、次要快捷入口、附属推荐链接），保留核心业务主线。 移动端可视区域狭小，优先保障核心任务体验。
- 变换位置 不删除模块，调整模块顺序；PC 端侧边次要模块，移动端移动至页面底部；多栏转为单栏。
模块上下顺序由业务优先级决定，优先级越高越靠页面上方。
- 隐藏‑展开 内容收起，通过弹窗 / 独立页面呼出。典型场景：PC 顶部导航，窄屏幕收纳进汉堡菜单，点击展开。
⑤ 自适应 Adaptive
不同终端，维护独立的页面与代码。
通过检测视口尺寸、设备特征，调用对应版本页面。 适用场景：电商、交互复杂、用户量大的产品；可以针对设备深度定制交互与功能，体验上限更高，但维护成本更高。
结语
布局是 Web 设计语言库的地基，从宏观页面框架、元素堆叠层级，到微观栅格间距、跨端适配，层层约束共同保障整套产品体验统一。后续可以结合视觉规范、数据可视化规范，完成完整设计语言库搭建。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
