Layout 布局

布局像房间规划。不是把家具都买齐,而是决定门、走廊、客厅和工作台放在哪里,让人进来不迷路。好的布局会让用户自然知道先看什么、哪些内容同组、下一步行动在哪里。

关键结构图

重排

页面被分成 header、main、side panel、CTA、footer 几个区域,用箭头标出阅读顺序。

Layout 是页面的空间秩序,决定内容、行动和阅读路径如何各就各位。

Layout 布局是把页面中的区域、模块、内容和行动入口安排到一个可理解空间结构里的设计方式。它决定用户先看哪里、怎么扫读、从哪个模块进入下一步。它的边界是空间关系和阅读路径,不是单个组件的样式,也不是用视觉装饰填满页面。

StructureLayout = 页面区域 + 模块关系 + 阅读路径 + 行动位置

当页面有标题、导航、说明、卡片、表单、证据、行动入口和页脚等多个模块时,需要先处理布局。

先定义主内容、辅助内容、证据和行动入口。再决定模块是并列、递进还是分组。最后用栅格、间距、容器和断点让结构在不同屏幕上保持清楚。

一个产品页把 hero、功能卡片、案例证据、定价和 CTA 依次组织,用户能自然从理解价值走到行动。

一个后台页面左侧是导航,中间是任务列表,右侧是详情。布局让用户同时理解位置、列表和当前对象。

类型:设计系统实践 / CSS 布局技术

事实线:Material Design layout guidance 强调布局用于组织视觉元素,让界面在不同屏幕和密度下保持结构清晰;CSS layout 技术提供实现这些空间关系的方法。

依据:Material Design layout guidance、MDN CSS layout 学习文档、响应式网页设计实践。

边界:布局解决空间和路径,不等于视觉风格,也不等于单个组件样式。

常见误读:不要把布局理解成“摆得好看”。布局首先要让内容关系和行动顺序可理解。