框架布局是页面的骨架和基础。在框架确定之后，设计者才可进行下一步的构建：统一的视觉元素，清晰的功能操作，具体流程的交互等。

一、设计原则

（1）一致性：确保产品布局在结构和视觉的一致性，为用户提供高度的舒适感。

（2）逻辑性：视觉中的各种分类构成具有逻辑思路，结构联系紧密且通畅。

（3）可扩展性：无论产品功能是简单还是复杂，布局框架能够随着产品需求的变化进行布局结构的延展和扩充。

（4）可预测性：选择可预测和可识别的布局，并连接到体验的每一个环境中且在适当的地方引导用户。

二、基础布局

基础布局包括：上下布局、左右布局、“T”型布局。这三种布局结构相对简单且常见。

（1）上下布局：· 上半部分为导航模块，下半部分为主内容模块。

                       · 导航栏宽度限制了导航的数量和文本长度，适用于导航较少、页面篇幅较长的网站。

                       · 是使用场景最多的框架布局。

（2）左右布局：页面左侧为全局导航模块，右侧为主内容模块。这种布局提高了导航的可见性，也有利于页面之间的切换，适用于结构简单的网站。

（3）“T”型布局：常用于社交文章类网站，顶部全局导航承接了所有子入口的功能，内容区域再划分成菜单栏（或侧边栏）、主内容模块两部分。

3. 扩展布局

扩展布局包括：“C”型布局、“口”型布局。这两种布局结构相对复杂，是基础布局的拓展，用于承载有大量信息的页面。

（1）“C”型布局：它是“T”型布局的扩展。结合了水平导航和垂直导航的特点，能更清晰地区分，常用业务功能操作和辅助操作。适用于功能模块较多、较复杂的后台管理网站。

（2）“口”型布局：常用于工具、资讯类网站，它是“C”型布局的扩展，增加了侧边栏模块。它充分利用了版面的特性，可承载最多的信息及功能，缺点是页面拥挤，不够灵活。

三、 常见布局模式

基于上述核心技术，网页设计形成了几种经典且通用的布局模式。

1. 静态布局
（1）描述： 使用固定宽度（如 width: 960px;）单位。无论浏览器窗口如何变化，布局的宽度始终不变。

（2）优点： 设计简单，控制精确。· 缺点： 在移动设备上体验很差，可能出现横向滚动条。

（3）现状： 现代网页设计中已较少使用，仅用于一些特定场景。

2.流式布局
（1）描述： 使用百分比（%）作为宽度单位，布局尺寸会随着浏览器窗口大小而成比例地缩放。

（2）优点： 具有一定的适应性。

（3）缺点： 在大屏幕上可能被拉伸得过长，在小屏幕上可能被挤压得过窄，可读性不佳。

3. 自适应布局

（1）描述： 使用媒体查询为不同范围的屏幕尺寸定义多套固定宽度的布局。可以看作是多个静态布局的集合。

（2）优点： 针对不同设备提供了更优化的体验。

（3）缺点： 仍然存在断点之间布局不变化的问题。

4.响应式布局（当前主流）

（1）描述： 流式布局 + 弹性布局（Flexbox/Grid） + 媒体查询 的结合。它不仅能适应屏幕尺寸的变化，其布局和内容也会智能地调整和重新排列。

（2）优点： 能为所有设备提供最优的浏览体验，是当今网页设计的标准做法。

（3）示例： 在桌面上是三栏，在平板上变为两栏，在手机上变为单栏。

5.栅格系统

（1）描述： 一种基于“列”的结构化布局工具。将页面水平划分为等宽的若干列（通常是12列或24列），通过指定元素占据多少列来创建布局。

（2）作用： 提供一套统一的标准，保证布局的秩序和一致性，同时极大地提高了开发效率。

（3）实现： Bootstrap、Ant Design 等主流UI框架都内置了强大的栅格系统，其底层通常由 Flexbox 或 Grid 实现。