YL
LAYOUT

布局 UI 设计模式

布局(Layout)分类收录 10 种常用界面模式:便当格布局、瀑布流布局、Z 型布局、分屏布局、粘性侧栏、杂志式排版等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

布局

Layout

10 条

便当格布局

Bento Grid

网格不对称仪表盘Bento

大小不一的圆角方格严丝合缝拼成一块,重要内容占大格,次要指标占小格。

瀑布流布局

Masonry Layout

瀑布流错落图片墙Pinterest

列宽固定、高度随内容自然错落,像 Pinterest 一样从上往下填补空隙。

Z 型布局

Z-Pattern Layout

动线图文节奏落地页

按"左上→右上→左下→右下"的 Z 字路径排布图文块,模拟人眼扫视的天然路线。

分屏布局

Split Screen

分屏对比二元对等

屏幕被垂直切成两半,一边深色一边浅色,各自承载完全对等的内容。

粘性侧栏

Sticky Sidebar

粘性侧栏固定滚动

左栏固定在视口上不动,右栏内容继续滚动——浏览长文时关键信息始终可见。

杂志式排版

Editorial Layout

杂志排版双栏内容

粗黑短横线 + 超大标题 + 双栏正文 + 斜体引文,像一本印刷杂志的内页。

12 栏栅格系统

12-Column Grid System

栅格骨架响应式网格

把页面宽度切成 12 等份,任何元素都跨整数份排列。所有精致布局背后的隐形骨架。

左右交替行

Zigzag / Alternating Rows

交替图文特性节奏

多组"图 + 文"行依次交替方向,形成锯齿般的阅读节奏,是最耐看的特性展示结构。

三栏特性卡

Tri-column Feature Cards

三栏特性图标卡片

一行三张等宽小卡:图标、标题、两行说明。独立站特性区最经典的组合。

全出血区块

Full-bleed Section

满宽色带数据带节奏

一块横贯整个视口宽度的色带区,内部的窄容器居中——用颜色宽度制造呼吸与节奏。