8 大类和 33 个主题：350 套图像排版布局 × 知识图鉴，做海报、网页、PPT、出版物或视觉设计直接套用

这是一本可视化的版式词典：先按任务找到布局，再拆出主体、层级、对齐和留白，最后换成自己的文字、图片和品牌规则。

作者：nevertoday / 350-layout-compositions09-02 · 25 分钟

工具教程 · 小互解读

一分钟速览

这是由 350 张排版知识卡组成的版式词典，按 8 大类和 33 个主题组织；可套用的是布局关系，不是 PSD 或 Figma 成品模板。
它可以用来做海报、封面、网页、UI、PPT、出版物和视频画面，帮你快速确定主体、标题、正文和留白的关系。
使用时按五步走：定任务、列内容、选范围、比较三到五张候选、换成自己的文字、图片和品牌。
读一张图时，依次看主体位置、信息层级、阅读路径、疏密、需要保留的关系，以及换入真实内容后是否仍然成立。
交给 AI 时，同时提供经过确认的参考图和位置、比例、对齐、分组、阅读路径与禁止复制项。

做海报、网页、PPT、出版物或其他视觉设计时，标题、图片、正文和留白应该怎样摆，往往比软件操作更难。

小小东分享的开源仓库 350-layout-compositions，把 350 套常见的图像排版布局整理成了 8 大类、33 个主题。每张竖版知识卡解释一种构图、网格、页面或镜头关系。

这些图是排版知识卡，不是可直接编辑的 PSD 或 Figma 成品模板。可以把它当成一本可视化的“版式词典”：海报和封面用它找主体与留白，出版物用它找分栏与网格，网页和 UI 用它找页面框架与响应式重排，PPT 用它找标题页、比较页、流程页和数据页的骨架。直接套用的是布局关系，原图的文字、配色和素材需要替换。

使用这套图鉴时，先确定成品类型和内容清单，再进入对应分类，每次只比较三到五张候选，提取主体位置、信息层级、对齐线和留白比例，最后换成自己的文字、图片与品牌规则。这篇指南会先教你怎样选图和读图，再完整展示 350 张图，最后用海报、长文、网页、PPT 和视频任务演示怎样落地。

有些目录名和图片里写的主题对不上。目录名只用来帮你查找，选图时要以图片内容为准。

选中一张图后，拆出六个可执行关系

仓库里的新版图片统一为 1086 × 1448 竖版解释卡。缩略图适合快速比较，点击后可以打开高清 PNG 阅读细节。面对其中任何一张，按六个问题拆解，比记住名称更有用。

主体在哪里？ 先找第一眼落点。它可能位于中心、三分线交点、边角，也可能由多个重复单元共同构成。
信息有几级？ 标出标题、主体、说明和辅助元素。每一级应当在字号、面积、颜色或位置上有所区别。
视线怎样移动？ 判断阅读路径是从上到下、沿对角线、绕中心旋转，还是在多个模块之间跳转。
画面哪里紧、哪里松？ 疏密关系决定呼吸、速度和焦点。空白承担分组、停顿和强调，不是等待填满的剩余区域。
哪些关系必须保留？ 参考图的价值通常来自位置、比例、轴线、重复或层次。配色、字体和装饰元素可以全部替换。
换成你的内容后会不会失效？ 标题变长、图片比例变化、数据项增加以及手机重排，都可能破坏原来的关系。采用之前要做一次内容压力测试。

可以把观察结果写成一句结构说明：

右侧产品图占画面约五成，标题与说明在左侧纵向排列；产品落在右上三分线附近，左下保留行动按钮；阅读路径从标题到产品，再回到按钮。

这句话已经能指导设计师搭框架，也能成为 AI 提示词的主体。

怎么使用：五步找到并套用一个版式

350 张图不需要从 001 一张张翻到 350。按下面五步操作：

定任务：先写清要做海报、网页、PPT、出版页还是视频画面。
列内容：列出标题、正文、主体图、数据、按钮等真实元素。
选范围：根据下表先进入一个一级分类，再进入对应的二级主题。
比候选：每次只选三到五张，用同一份内容测试不同结构。
套内容：保留位置、比例、对齐和阅读路径，替换原图的文字、图片、颜色和品牌。

你正在做什么	先看哪些分类	需要解决的问题
海报、文章封面、社交图片	构图逻辑、视觉原则、平面出版	主体位置、标题面积、留白和视觉张力
杂志、报告、长文页面	平面出版、字体网格、阅读模式	分栏、图文比例、注释和连续阅读
网站、后台、移动产品	网页与 UI、视觉原则、字体网格	页面框架、组件关系、导航和响应式重排
视频分镜、访谈、叙事画面	影视画面、构图逻辑	人物关系、视角、景深和镜头覆盖
山水、文化主题、东方视觉	中国传统、构图逻辑	游观路径、虚实、留白、开合和取景
演讲、路演、课程幻灯片	演示文稿、视觉原则	每页职责、数据判断和叙事顺序

每次只比较三到五张候选。比较时固定内容不变，只替换结构：同一个标题、同一张主体图、同一组数据分别套入几个骨架，才能看出哪一种关系真正适合任务。

任务入口

先按成品选分类，再按问题选主题

一条路径只召回少量候选，避免在 350 张图里无目的翻找。

海报 / 封面构图逻辑→视觉原则→平面出版

定主体、标题面积与留白

长文 / 报告平面出版→字体网格→阅读模式

定栏宽、图文比例与连续阅读

网站 / 产品网页 UI→视觉原则→字体网格

定框架、组件关系与小屏重排

视频 / 分镜影视画面→构图逻辑

定人物、视角、景深与覆盖

东方视觉中国传统→构图逻辑

定游观、虚实、留白与开合

PPT / 演讲演示文稿→视觉原则

定每页职责与叙事节奏

每条路径最终都回到同一步：打开候选原图，提取位置、比例、层级和阅读路径。

8 大类、33 个主题：350 套布局完整图鉴

下面完整展示仓库的 350 张缩略图，共 8 个一级分类和 33 个二级主题。每个主题前的“使用动作”说明这一组适合解决什么问题。输入编号或目录名可以筛选；关闭脚本时，全部图片仍会按分类显示。

01 · 构图逻辑：先确定画面骨架

这 86 张处理主体、线条、形状、空间和视点。海报、封面、摄影和主视觉都可以从这里起步。选择时先忽略卡片的字体和颜色，只看主体落点、方向线、留白比例以及前中后景。

02 · 视觉原则与阅读模式：控制主次和阅读路径

这 45 张解决“内容都有了，画面为什么仍然散”的问题。它们覆盖焦点、层级、对比、节奏、格式塔分组和页面扫描模式。用法是保留已有骨架，再调整权重与分组。

03 · 平面、出版与广告：把结构放进真实页面

这 36 张关心栏、跨页、出血、图文面积和功能页面。做杂志、报告、品牌手册和广告时，应先确认页面尺寸、装订或裁切条件，再选择版式。

04 · 字体、网格与东亚文字：让大量文字稳定下来

这 54 张覆盖字体层级、对齐、缩进、网格，以及中文、日文和西文混排。它们适合报告、长文章、知识卡和信息密集页面。先把字号、行距、栏宽和基线变成规则，再使用破格或造型文字。

05 · 网页与 UI：从 CSS 机制到产品页面

这 79 张分为 CSS 流与定位、布局原语、页面框架、产品模式和响应式重排。做网页时要区分“怎样实现”和“用户要完成什么任务”：网格、弹性盒属于实现机制；仪表盘、表单、搜索结果属于产品模式。

06 · 影视画面：组织人物、视角和景深

这 14 张适合分镜、采访和叙事视频。它们从人物数量出发，继续处理主客观视角、过肩镜头、镜头覆盖和场面调度。实际使用时要把候选画面放进前后镜头，检查空间与视线能否连续。

07 · 中国传统构图：用游观、虚实和章法组织空间

这 20 张包含三远、散点透视、边角、截景、留白、疏密、开合和藏露。它们适合文化主题、长卷式叙事和需要东方空间感的视觉。使用时提取观看方式与关系，不需要复制水墨材料和古典装饰。

08 · 演示文稿：让每一页只完成一个叙事动作

这 16 张从标题页、章节页、比较页延伸到大数字、时间线、流程、矩阵、数据图表和全图页。选版式前先写出这一页的职责，例如“宣布一个数字”“比较两个方案”或“解释三步流程”。

仓库目录 335：标题幻灯片幻灯片版式的排版解释卡缩略图 — 335标题幻灯片幻灯片版式

仓库目录 336：标题和内容幻灯片版式的排版解释卡缩略图 — 335标题幻灯片幻灯片版式

五个使用场景：从参考图走到成品

任务一：给一篇文章做封面

先列内容：一个标题、一句副标题、一张人物或产品图、一个品牌标识。然后从构图逻辑中找三种方向，例如负空间、偏轴和对角线。把同一份内容快速套入三个黑白框架，只比较主体大小、标题位置和留白。

最终说明可以写成：主体放在右侧偏上，左侧保留连续空白承载两级标题；品牌标识靠左下角，不与标题争夺注意力。参考图只提供空间关系，成品使用自己的颜色、字体和照片。

任务二：排一篇图文长文章

先估算文字长度、图片数量、图注和引用，再看单栏、多栏、图片主导、侧栏和模块网格。正文阅读需要稳定栏宽；数据、引用和补充材料可以放进独立模块。

桌面端的双栏或侧栏不能直接缩小到手机。提前写出重排规则：主栏保持顺序，侧栏内容移动到相关段落之后，多栏表格允许横向滚动，装饰图不改变正文阅读次序。

任务三：设计产品网页

先画用户路径，再选页面模式。营销页常从 Hero、卖点卡片、案例和行动按钮组成；后台产品可能需要侧边导航、数据表格、筛选器和详情窗格。

实现时从普通流开始，使用堆栈控制纵向节奏、簇群处理同级按钮、网格组织卡片。小屏规则应明确写成“由三列变一列”“详情移到列表之后”“导航收进抽屉”，避免只写“响应式”。

任务四：做一组汇报幻灯片

先给每页写功能标签：标题、问题、证据、比较、结论、下一步。再为不同职责选择对应版式。大数字页只承载一个关键指标，比较页保持两侧结构对称，时间线页按事件顺序移动，数据图表页把结论写进标题。

整套演示需要节奏变化。连续五页使用同一种卡片网格会让信息失去重点；章节页、全图页和大数字页可以承担停顿与强调。

任务五：规划一段访谈或叙事视频

先确定人物关系和场景方向，再画建立镜头、双人或过肩镜头、单人反应镜头。每个镜头记录人物位置、视线方向、景别和前后景。深度调度适合让人物关系在一个镜头内变化，镜头覆盖则保证剪辑时有足够选择。

这五类任务共享同一条方法：明确内容 → 选择分类 → 比较少量候选 → 提取关系 → 写成约束 → 用真实内容验证。

用 AI 套版：把参考图写成可执行提示词

只写“参考 001 的风格”信息太少。模型需要知道哪些关系要继承，哪些表面元素不能复制。一个完整提示词至少包含六部分：

任务与画布：做什么成品，尺寸和比例是什么。
内容清单：标题、正文、主体图、数据、按钮分别有哪些。
参考对象：编号、目录名和经过确认的原图。
结构约束：主体位置、面积比例、对齐线、分组和阅读路径。
视觉约束：品牌色、字体气质、图片处理和留白程度。
禁止复制：不复刻参考图的文字、配色、品牌和具体素材。

AI 提示词结构

把“参考这张图”展开成六层约束

01
任务与画布
成品类型、尺寸、比例、平台
02
内容清单
标题、正文、主体图、数据、按钮
03
参考对象
编号、目录名、经过确认的原图
04
结构约束
位置、面积、轴线、分组、阅读路径
05
视觉约束
品牌色、字体气质、图片处理、留白
06
禁止复制
不复刻原图文字、品牌、素材和装饰

参考图+内容+空间关系+验收条件

结构关系写得越具体，模型越少依赖“高级、简洁、现代”等无法验收的形容词。

例如，一张 4:5 产品海报可以这样写：

制作一张 4:5 竖版产品海报。标题为两行，副标题一行，产品图一张，行动按钮一个。参考已确认的三分式空间关系：产品占右侧约 52%，视觉中心靠近右上交点；标题和副标题在左侧形成单一文字轴，按钮位于左下。保留约 20% 的连续空白。使用品牌蓝和暖白背景，不复制参考图中的文字、字体、图标与装饰。

模型生成后，仍按前面的六个问题检查：主体是否落在约定位置，层级是否清楚，视线是否经过行动点，小屏或长标题是否破坏结构。参考图只是骨架，验收标准来自你的内容目标。

目录名和图片对不上怎么办

仓库的自动校验能检查文件是否齐全，但不会看懂图片主题。抽查 8 张时，001 三分法构图一致，另外 7 张不一致；这只是小范围抽查，不能代表全部 350 张。

目录 001 三分法构图，图片内主标题也是三分法构图 — 这是一组跨分类定向样本，不代表对 350 张完成全量语义审计，也不能据此计算全库错误率。

目录 095 视觉层级原则，图片内主标题为一点透视 — 这是一组跨分类定向样本，不代表对 350 张完成全量语义审计，也不能据此计算全库错误率。

使用时记住一条：先用目录名缩小范围，再打开图片确认内容。 交给 AI、团队或客户时，也要按图片的实际结构来描述。

怎么下载、怎么用

只想浏览：看完整分类图鉴。
想下载全部 350 张（约 560 MiB）：去 v2.0.0 Release。
想批量筛选：用 CSV 或 JSON。

仓库采用 CC BY 4.0。使用时保留来源和许可证链接，并说明你做过哪些改动。商用前，再确认图片中的人物、品牌和其他素材是否允许使用。

选版式时，能说清用了什么空间关系、为什么适合当前内容，就够了。

来源

nevertoday/350-layout-compositionsnevertoday·2026-08-31·查看主材料

延伸

开源：350套排版布局 x 知识图鉴·main 分支核对基线 34dc39c·v2.0.0：350 种排版 · 分类图鉴·CC BY 4.0 与仓库使用说明

↑ 正文结束

✓ 本篇全文免费开放

会员可复制、下载全文 Markdown，还能让你的 AI 订阅和提问。

订年卡 $59/年看权益对比 →

阅读原文 ↗

📮 新解读第一时间进邮箱

读完觉得有用？留个邮箱，每篇新解读发布就送达，随时退订。

登录