术语图鉴/UI/UX 设计/布局
←→切换Esc返回

布局 Layout

你可能会说

帮我排一下页面布局:导航在上、侧边栏在左、内容居中。

页面上各个元素的位置安排——导航在上、侧边栏在左、内容在中间。

页面上各个元素的位置安排——导航在上、侧边栏在左、内容在中间。好的布局让人一眼就知道在哪、看什么。

也常被叫作Layout

生活类比

像房间装修的平面规划图——沙发放哪、电视放哪、过道留多宽,都要提前设计。

🎮 动手试试

选择题选择一个你认为最合适的答案

关于「布局」,以下哪个描述最准确?

你可以这样告诉 AI

帮我搭一个后台布局:左侧 240px 侧边栏、右侧内容自适应、顶部导航固定,用 CSS Grid 实现。

容易混淆?这样区分

布局 Layout≠
视觉层级 Visual Hierarchy

布局决定元素放在页面的哪个位置,视觉层级决定同一区域内元素的主次阅读顺序。

什么时候用

搭建页面骨架结构

新页面需要确定导航、侧边栏、内容区、页脚等区域的位置关系时,用布局设计规划空间分配,确保结构清晰一致。

和 AI 协作时

想让 AI 搭布局时,说「左导航 240px、中内容自适应、右 300px 三栏布局」,AI 会用 Flex/Grid 实现。

什么时候不用

简单单页无导航

只有一个表单或一段文案的单页,不需要复杂的布局设计——居中放内容就足够,过度布局反而增加代码量。

与纯数据处理流程无关

数据处理、ETL 管道、批处理脚本等后端逻辑不涉及页面展示,布局概念在这里完全不适用。

组成结构 · Anatomy

1
核心概念Core

页面上各个元素的位置安排——导航在上、侧边栏在左、内容在中间。好的布局让人一眼就知道在哪、看什么。

2
实际表现In Practice

像房间装修的平面规划图——沙发放哪、电视放哪、过道留多宽,都要提前设计。

3
与 AI 的关联AI Context

和 AI 沟通时提到「布局改成左边目录右边内容」,调整的就是 Layout。

典型使用场景

搭建后台骨架
告诉 AI「用 Grid 搭后台布局:左 240px 菜单、右内容区、顶部固定导航栏,最小宽度 1024px」
想弄懂概念时
告诉 AI「用大白话给我解释什么是布局,举个生活中的例子」

延伸阅读