写在前面

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

本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合多类已上线 Web 产品实践沉淀而成，涵盖展示官网、交易商城、后台管理系统、组件工具平台等不同业务场景。 内容基于 2020‑2021 年项目 1.0 版本总结，互联网产品迭代速度快，部分内容仍有待实践验证与迭代更新，欢迎大家交流指正。

Web 布局体系将从四大维度展开：框架布局、页面层级、栅格系统、Web 页面适配。

提示：全文篇幅较长，建议收藏阅读。各章节知识点关联性较强，合并成文更利于建立完整认知。版权归原出处所有。

一、框架布局

框架布局是 Web 页面的骨架基底。只有确定整体页面框架，才可以在此基础上搭建统一视觉样式、定义功能操作、完善交互流程。本章节包含设计原则、基础布局、扩展布局、懒加载四部分。

1. 设计原则

1. 一致性：保证全产品布局结构与视觉表现统一，降低用户认知成本，提升使用舒适度。
2. 逻辑性：页面模块划分、信息排布具备清晰逻辑，模块之间结构关系通顺。
3. 可扩展性：无论业务简单或复杂，布局框架可跟随需求迭代做结构延展，支持功能扩容。
4. 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全使用场景，合理引导用户行为。

2. 基础布局

基础布局包含上下布局、左右布局、T 型布局，结构简单，是 Web 产品中最高频使用的框架模式。

1. 上下布局 页面上半部分为导航区，下半部分承载主内容。导航栏宽度会限制导航条目数量与文字长度；适合导航条目较少、页面内容篇幅较长的产品，是应用范围最广的布局形式。
2. 左右布局 页面左侧放置全局导航，右侧为内容区。导航常驻可视区域，便于多页面快速切换；适合整体业务结构简单的网站。
3. T 型布局 多用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，一边为侧边菜单栏，另一边为主内容，侧边栏可置于左侧或右侧。

3. 扩展布局

扩展布局是基础布局的进阶变体，包含C 型布局、口型布局，适合承载大量信息、业务模块复杂的系统。

1. C 型布局：T 型布局的延伸，同时融合水平顶部导航与垂直侧边导航，清晰区分高频业务操作与辅助功能；多用于模块繁多的后台管理系统。
2. 口型布局：C 型布局进一步拓展，双侧均增加侧边栏，最大化利用屏幕版面，能够容纳最多功能与信息。缺点是页面信息密度高，灵活性偏弱，常见于工具类、资讯类平台。

4. 懒加载

懒加载是长页面的图片延迟加载方案：图片仅在滚动进入浏览器可视区域后才触发请求渲染，能够加快页面首屏渲染、减轻服务器压力。骨架屏（灰色占位） 是懒加载过程中的过渡占位效果。

以电商长列表页面举例：如果一次性加载全部商品图片，海量资源请求会造成长时间白屏、页面闪烁，极端情况甚至引发页面崩溃，严重损害用户体验，懒加载可以很好规避该类问题。

 

二、页面层级

页面层级用于规范页面元素的堆叠顺序、所属层级与组合规则。 从底层到顶层固定顺序：背景层 → 内容层 → 全局控制层 → 蒙版层 → 弹出层。下文以复杂度较高的口型布局为例做分层说明。

1. 背景层

位于整个页面最底层，样式固定。通常使用中性底色，目的是衬托上层的内容层与全局控制层。 分为纯色背景与图片背景：

• 纯色：常用中性色 #ffffff、#fafafa、#f5f5f5；
• 图片背景：由图形、图像、装饰文字构成，多用于页面美化、视觉引导。

2. 内容层

业务关联性最强的核心层级，位于背景层之上。承载用户需要获取的核心业务信息与配套操作，例如表单录入、数据列表、详情弹窗、说明文本等。

3. 全局控制层

堆叠在内容层之上，承载全站级的导航、菜单、侧边栏，负责整个产品的全局跳转与功能切换。

4. 蒙版层

极少单独使用，通常配合弹出层出现；通用样式为半透明黑色遮罩 rgba(0,0,0,0.5)。 作用：锁定下层内容、导航栏的交互，视觉聚焦弹窗，引导用户完成当前任务。

5. 弹出层

页面最高优先级层级，用来承载临时交互任务，典型代表为对话框组件。 以弹窗、侧边滑出等形式唤起；弹窗出现时底层页面被蒙版禁用不可操作，用于需要强聚焦的分支业务流程。

三、栅格系统

栅格系统为页面排版、尺寸定义提供标准化参考，让页面设计具备可遵循的规律。熟练运用栅格，能够降低设计决策成本、提升团队协作效率，同时实现响应式，保障设计稿还原质量。

① 关于栅格

• 轻量简单项目：12 栅格即可满足绝大多数需求；
• 信息量大、模块分组复杂的大型后台项目：推荐24 栅格，拆分粒度更细。

栅格两大基础单元：

• Column（列）：内容容器；
• Gutter（水槽 / 槽）：列与列之间的留白间距，控制页面呼吸感。

计算公式：列宽 + 水槽宽度 + 页面左右边距 (Margin) = 页面总宽度 内容可视区域宽度 = N 个列 + (N‑1) 个水槽。

以上下布局的 24 栅格举例：水槽 Gutter 为固定值；浏览器缩放时，列 Column 会跟随视口伸缩，水槽保持固定不变，12 栅格逻辑同理。

② 模块

模块即页面设计区块，可以是文本、图片、卡片等各类内容。装饰性背景元素不需要严格遵守栅格约束。

以 12 栅格为例，模块可以做均等分割（2/3/4/6/12 等分），也可以做非对称比例划分（1:2、1:3:2、3:5 等），设计师可以结合业务场景自由组合。

③ 间距系统

栅格不仅管控排版，同时规范页面元素对齐与间距，保证整体页面的韵律与一致性。 目前主流桌面设备分辨率大多可被 8 整除，行业普遍采用8n 原子间距规则：模块尺寸、内外间距优先取 8 的倍数。

对比参考：

• 2/4/6：粒度太细碎，容易打乱页面节奏感；
• 10：数值跨度偏大，细分场景灵活性不足；
• 8：兼顾细分能力与整体节奏，适用性更广；极小细节可补充 4px 作为辅助。

• 

 

④ 关于适配

定义三个基础概念：

• Fixed固定宽度：尺寸写死，不跟随浏览器缩放；
• Auto自适应宽度：随视口大小自动拉伸收缩；
• Min最小宽度：页面允许压缩的下限。

1. 上下布局：分为固定宽度、全屏宽度两种模式
   • 固定宽度：PC 端常用固定值 1200px，两侧 Auto 区域随屏幕自适应；
   • 全屏宽度：内容区设置左右最小边距 Min，防止内容贴边被截断。
2. 左右布局、T 型布局：侧边导航、菜单栏 Fixed 固定，主内容区 Auto 自适应。
3. C 型、口型扩展布局：两侧边栏 / 导航栏为 Fixed 固定，中间内容区域 Auto 自适应。

四、Web 页面适配

本章节覆盖响应式、中断点、布局类型、流动布局模块处理、自适应五大知识点。

① 响应式（Responsive）

一套代码、一套页面同时适配多终端设备。 适用场景：交互简单、迭代频率低的展示类官网。

实现两大必要条件：

1. 页面建立弹性网格，元素尺寸优先百分比，减少大量固定 px；
2. 图片资源支持伸缩，不写死图片宽高。

栅格系统正是实现响应式网页的基础手段。

② 中断点（断点 Breakpoint）

浏览器窗口不断缩放到某一临界值，原有布局已经无法正常展示，必须变更内容排布，这个临界像素值就是中断点。

断点设置需要结合业务内容、主流设备分辨率、用户体量、研发成本综合确定。参考 Material Design、Bootstrap 成熟断点标准。

断点设置越多，适配效果越细腻，但开发成本会上升；资源有限时，选取 3‑4 个核心断点即可满足基础业务。

③ 布局类型

根据视口缩放时网格模块的变化策略，分为固定布局、流动布局、混合布局三类。

1. 固定布局 列宽、水槽全部固定，设置 PC 最小宽度（常用 1200px）。视口大于最小宽度时，内容居中，两侧留白；视口小于最小宽度，页面出现横向滚动条。
2. 流动布局 浏览器缩小时，元素自动变窄、文本自动换行；在未抵达断点前整体布局结构不变，到达断点后触发布局切换。 适合仪表盘、数据可视化、图文编辑页面。视口变化优先改变内容大小，而不是单纯增加 / 减少展示条目。

   

3. 混合布局 固定布局 + 流动布局组合使用。典型案例：后台 Dashboard，侧边栏 Fixed 固定，右侧内容区域流动自适应。不同区域使用独立缩放规则，适合工具系统、B 端后台。

   

 

④ 流动布局下的模块处理

响应式不等于简单整体等比缩放。需要结合内容优先级灵活调整，共有 5 种处理策略：

1. 挤压‑拉伸：元素跟随视口挤压拉伸；适合文本、按钮、输入框等不怕形变的控件。

   

2. 左右‑上下：多列横向排布转为纵向堆叠；适用于图文列表、主内容 + 侧边推荐等左右结构。

   

3. 删减‑增加：小屏舍弃次要非核心内容（广告、次要入口、附属推荐），保留主线任务流程。移动端屏幕空间有限，需要优先保障核心业务。

   

4. 变换位置：不删除模块，调整模块位置。PC 端侧边次要模块，移动端挪至页面底部；多栏转单栏，模块上下顺序按照业务优先级排序，优先级越高位置越靠上。

   

5. 隐藏‑展开：内容收起，通过弹窗、呼出菜单、独立页面展示；最典型场景：PC 顶部导航，窄屏下收拢成汉堡图标，点击展开菜单。

   

⑤ 自适应（Adaptive）

为不同终端（PC、平板、手机）分别开发独立页面与代码。 适用场景：交互复杂、功能繁多、访问量大的电商等产品；可以针对不同设备深度定制交互与功能，体验上限更高。

 

转载：优设

 

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