兰亭妙微ui设计公司分享：一套完整的 Web 设计语言库，由设计价值观、设计法则、布局、视觉、数据可视化、动效六大模块共同构成。本文聚焦布局模块（后续还会覆盖视觉、数据可视化）展开完整拆解。

本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合官网展示类、商城交易类、后台功能类、工具组件类等多种已上线 Web 产品实践总结而来。 部分内容来源于早期项目 1.0 版本，受互联网产品快速迭代影响，个别内容仍有待验证与迭代，欢迎各位读者交流指正。

Web 布局体系将分为四大核心板块：框架布局、页面层级、栅格系统、Web 页面适配。

提示：全文体量较大，建议收藏分段阅读。将相关知识点整合为一篇，是为了保证知识体系完整性，避免内容碎片化。版权归属原项目所有。

一、框架布局

框架布局是整个 Web 页面的骨架基底。只有确定页面框架之后，才可以进一步落地统一视觉、功能交互、业务流程。本章节围绕设计原则、基础布局、扩展布局、懒加载策略四个维度讲解。

1. 框架布局设计原则

1. 一致性：保证全站布局结构、视觉范式统一，降低用户认知成本，提升使用舒适度。
2. 逻辑性：页面信息分类、模块组织遵循业务逻辑，模块之间结构关系清晰通顺。
3. 可扩展性：无论业务简单或复杂，布局框架支持业务迭代，可灵活扩充、调整结构。
4. 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全体验链路，合理引导用户行为。

2. 基础布局

基础布局包含上下布局、左右布局、T 型布局，结构简洁，是 Web 产品中最高频的布局方案。

1. 上下布局 页面上方为导航模块，下方承载主内容区。导航栏宽度会约束导航条目数量与文字长度。 适用：导航条目少、页面纵向内容长的网站，是 Web 最通用的框架布局。
2. 左右布局 页面左侧放置全局导航，右侧为主内容区域。导航常驻可视区域，页面切换感知强。 适用：业务结构相对简单的网站。
3. T 型布局 广泛应用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，分为侧边菜单栏 + 主内容区，侧边栏可居左也可居右。

3. 扩展布局

扩展布局是基础布局的进阶形态，分为C 型布局、口型布局，适合信息密度高、功能复杂的系统。

1. C 型布局 T 型布局的延伸，同时融合水平导航与垂直侧边导航，清晰区分高频业务操作和次要辅助操作。 适用：模块繁多、逻辑复杂的后台管理系统。
2. 口型布局 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最小宽度，限制页面收缩下限。

基础布局适配规则

1. 上下布局 分为固定宽度、全屏宽度两种模式。

• 固定宽度：内容区 Fixed 建议设置1200px，适配绝大多数屏幕，两侧 Auto 区域自动留白；
• 全屏宽度：需要设置内容区 Min 最小边距，避免内容贴边被裁切。

2. 左右布局、T 型布局 侧边导航 / 菜单栏为 Fixed 固定宽度；中间主内容区为 Auto 自适应。

扩展布局适配规则

C 型布局、口型布局：两侧导航栏、侧边栏均采用 Fixed 固定，中间内容区 Auto 自适应。

四、Web 页面适配

本章节讲解响应式、断点（中断点）、布局类型、流动布局模块处理、自适应五大内容。

① 响应式 Responsive

一套代码，兼容多终端。

适用场景：展示官网、交互简单、迭代频率低的产品，维护成本更低。

实现响应式两个必要条件：

1. 布局具备规律性，依托弹性网格，尽量用百分比替代固定像素；
2. 图片资源支持弹性缩放，不写死图片宽高。

栅格系统，正是实现响应式网页的底层基础。

② 中断点（断点 Breakpoint）

断点即页面尺寸临界阈值：浏览器窗口收缩到该数值，页面布局规则需要发生变化，适配新的视口。

断点的设置，需要结合业务内容、主流设备分辨率、用户规模、研发成本综合判断；当现有布局无法良好展示内容，就应该设置断点。

参考业界标准：Material Design、Bootstrap 断点体系。

断点越多适配效果越细腻，但开发成本随之提升；资源有限的项目，选取少量核心断点即可。

③ 布局类型

按照页面缩放行为，分为固定布局、流动布局、混合布局三类。

1. 固定布局 列宽、水槽全部固定，设置 PC 端常用最小宽度（一般1200px）。

   

• 窗口大于最小宽度：内容居中，左右留白；
• 窗口小于最小宽度：页面不再收缩，底部出现横向滚动条。

2. 流动布局 浏览器窗口缩小时，元素自动变窄、文本自动换行；只有抵达断点阈值，才会变更整体布局结构。 适合仪表盘、编辑器、图文、数据可视化页面；对用户而言，内容弹性收缩，优于单纯增减显示条目。

   

3. 混合布局 固定布局 + 流动布局结合。最典型例子：后台系统 Dashboard，侧边栏 Fixed 固定，右侧内容区 Auto 流动。 不同维度使用不同缩放规则，部分区域固定、部分区域弹性伸缩。 适用后台系统、工具界面。

   

④ 流动布局下的模块处理策略

响应式不等于简单整体等比缩放。需要基于内容优先级灵活调整模块，一共 5 种处理手段：

1. 挤压‑拉伸 模块跟随视口挤压拉伸；适合文本、按钮、输入框、纯色背景，拉伸不会产生形态损坏的元素。

   

2. 左右‑上下 PC 端左右排布，窄屏转为上下堆叠；适合图文列表、主内容 + 侧边推荐等双栏排版。

   

3. 删减‑增加 小屏幕下舍弃次要内容（广告、次要快捷入口、附属推荐链接），保留核心业务主线。 移动端可视区域狭小，优先保障核心任务体验。

   

4. 变换位置 不删除模块，调整模块顺序；PC 端侧边次要模块，移动端移动至页面底部；多栏转为单栏。

   

模块上下顺序由业务优先级决定，优先级越高越靠页面上方。

5. 隐藏‑展开 内容收起，通过弹窗 / 独立页面呼出。典型场景：PC 顶部导航，窄屏幕收纳进汉堡菜单，点击展开。

   

⑤ 自适应 Adaptive

不同终端，维护独立的页面与代码。

通过检测视口尺寸、设备特征，调用对应版本页面。 适用场景：电商、交互复杂、用户量大的产品；可以针对设备深度定制交互与功能，体验上限更高，但维护成本更高。

结语

布局是 Web 设计语言库的地基，从宏观页面框架、元素堆叠层级，到微观栅格间距、跨端适配，层层约束共同保障整套产品体验统一。后续可以结合视觉规范、数据可视化规范，完成完整设计语言库搭建。

 

转载：优设

 

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。