选择标题（3 选 1）

排版卡壳怎么办？这份 GitHub 上的 350 张高清图鉴按 8 大类直接给你答案

350-layout-compositions 把零散版式素材整理成可检索图鉴，设计师少搜 80% 时间

没读一本构图书，却想用对黄金螺旋与三远法？这个免费图鉴做到了

350 种排版图鉴：把混乱的设计参考，整理成可检索的知识库

一、开篇：这个痛点，几乎每个设计师都踩过

做设计时最常遇到的场景：Figma 画板前盯着空白的文档，不知该把主图放左还是放右；做汇报 PPT 时翻遍 Pinterest、Dribbble，保存 200 张参考图，结果真正要动手时还是不知道用哪种版式；学摄影构图买了一堆书，记住了三分法、黄金螺旋，遇到复杂场景照样选不准；学中文字体网格，搜出来的中文资料零零碎碎，没有一份成体系的对照表。

更现实的问题是：网上的「构图参考素材」要么散落在数千张图里缺乏分类，要么收费，要么单一来源、单一风格。设计学生、UI 设计师、摄影爱好者和做汇报的开发者，常常为此反复搜集却一无所获。一名资深插画师坦言，他为了凑齐一份「中西混排参考表」，翻了三本外文书外加两个素材网站，前后花了 40 小时。

有没有一份现成的、按知识结构整理好的排版图鉴，从构图逻辑到网格系统、从网页 UI 到中国传统章法，分类清晰、可检索、可下载，还能直接当作日常工作查阅？开源项目 350-layout-compositions 正是为解决这个问题而生。

二、项目简介：用一句话概括

350-layout-compositions 是 GitHub 上的一套排版构图知识图鉴，包含 350 种排版参考案例，按 8 个一级分类、33 个二级主题组织，覆盖构图逻辑、视觉原则、出版广告、字体网格、网页 UI、影视画面、中国传统构图与演示文稿。

核心关键词：体系化（8 大分类）、高清（每张 1086×1448 PNG）、可检索（CSV/JSON 数据目录）、持续扩展（原 100 张版本保留，新版扩大到 350 张）。项目目前 GitHub Stars 828，覆盖从设计师到开发者的多类人群。

三、核心功能深度解析

1. 八大分类体系，覆盖几乎所有版式需求

项目把 350 种排版拆成 8 个一级分类：构图逻辑（86 种）、视觉原则与阅读模式（45 种）、平面出版广告（36 种）、字体网格与东亚文字（54 种）、网页与 UI（79 种）、影视画面构图（14 种）、中国传统构图（20 种）、演示文稿页面（16 种）。

这个结构解决了「参考素材分散」的核心问题。设计师想找「黄金三角构图」时，直接打开 01-composition-logic；前端工程师想找「响应式重排模式」，进入 05-web-ui 即可；做中国风海报时，打开 07-chinese-composition 看「三远法」「留白章法」。每个分类下还有二级主题做更细的索引，例如「构图逻辑」下细分「经典法则与空间留白」「重心、线条与轴线」「字母形与曲线」「几何形与放射结构」「阵列、层叠与组群」「空间层次与投影」「视点、景深与空间感」共 7 个二级组。

2. 每张参考图配备高清版本与缩略图，便于检索

点开任何缩略图，对应一张 1086×1448 的 PNG 高清图，可直接用于设计稿二次参考或截图分析。缩略图组织成响应式表格，GitHub 仓库内即可直接浏览，无需部署。

例如「构图逻辑」第一组「经典法则与空间留白」收录了 15 种，从三分法、黄金比例、黄金螺旋、对角线法，到视线空间、运动空间、头部空间，再到负空间、框中框、引导线。每一种都标号 001–015，便于在团队沟通中引用。

3. 机器可读的数据目录，方便二次开发

项目提供 v2/catalog.csv 与 v2/catalog.json，每张图都带有编号、名称、一级/二级分类、文件路径、尺寸与 SHA-256 校验值。这意味着程序员可以写脚本批量读取自己想要的那一组，例如「把所有属于 05-web-ui 且标注 responsive 的图拉下来做训练集」。

相比纯图床式素材站，它多了一层可程序化访问的能力，做设计工具、自动化参考、机器学习素材准备的团队可以直接调用。

4. 兼容旧版本，向后兼容避免链接失效

原项目「100 种排版」的高清图、缩略图与下方画廊完全保留，旧链接继续可用。这一做法对已经在做内部素材库或撰写教程的作者非常友好——升级到新版的同时不会留下坏链，避免「图片 404」的情况。

四、技术亮点与性能数据

• 体系规模：350 张高清 PNG，2.5 倍于原 100 张版本。
• 结构清晰度：8 个一级分类 + 33 个二级主题，平均每个二级组约 10 张，密度合理不冗余。
• 图片规格：统一 1086×1448 PNG，文件命名规范例如 001-三分法构图.png，可读性强。
• 配套数据：catalog.csv / catalog.json 包含 SHA-256 校验值，便于做资产版本管理。
• 下载方式：新版本提供 ZIP 整包下载（旧版同样保留入口），离线学习与本地查阅无需联网。
• 生态兼容：纯文档与图片仓库，零运行时依赖，Linux、macOS、Windows 上用 GitHub 网页就能直接浏览。
• 可持续性：项目用 scripts/ 目录存放素材导入与画廊生成工具，方便后续扩展到 500、1000 张甚至更多。

五、适用场景与人群

场景一：设计师寻找版式灵感。当你做海报、画册、电商落地页卡壳时，打开项目对应分类，浏览 30 张对比分析，比临时翻图站快得多。

场景二：开发者学习 UI 布局。前端工程师做 dashboard、官网首页、营销活动页时，「05 网页 UI」分类下的「CSS 流、定位与响应」「布局原语」「页面框架与导航」「内容与产品模式」「响应式重排模式」5 个二级主题几乎覆盖了全部实战场景。

场景三：摄影与影视创作。「01 构图逻辑」的「视点、景深与空间感」组、「06 影视画面构图」分类中的「视角与镜头覆盖」「场面调度与景深」，提供从静态照片到动态分镜的完整参考。

场景四：传统美学与中文排版。「07 中国传统构图」收录三远法、取景留白、章法等 20 种；「04 字体网格」单独把东亚文字与混排抽出来，对做中文出版与字体设计的人尤为重要。

适合：UI/平面/品牌设计师、前端工程师、摄影爱好者、视觉传达专业学生、做汇报的开发者与产品经理。不适合：需要 3D 建模或动效设计的群体（项目聚焦静态版式，不含动效示范）。

六、竞品对比

对比结论：当需要一份「跨领域、按知识结构组织、可持续扩展且可程序化使用」的参考图鉴时，这个项目是当前公开仓库中较完整的方案。

七、如何快速上手

第一步：浏览新版总目录。在 GitHub 打开项目后，进入 docs/350/README.md，这里列出全部 8 个一级分类入口与每个分类的张数。点击「01 构图逻辑 · 86」即可看到 86 张分类好的高清图。

第二步：下载整套高清图。如需离线查阅，前往 Releases 页面下载 350-layout-compositions-images.zip；若只需旧版 100 张，也有专门的 100-layout-compositions-images.zip。

第三步：用数据目录做二次处理。下载 v2/catalog.csv，用 Excel 或脚本筛选，例如只想保留「05 网页 UI」「响应式重排模式」相关的图，可按一级/二级分类字段过滤，得到对应编号后下载原图即可。

进阶建议：把高频使用的分类加到浏览器书签栏（如固定 docs/350/05-web-ui.md），每次开工前扫一眼，能逐步建立你的版式索引肌肉记忆。想扩展自己团队的素材库时，可 fork 项目，按 scripts/ 工具的规则新增分类与图片，再 PR 回上游共建。

八、总结与行动建议

350-layout-compositions 的核心价值在于把分散、零碎的排版参考整合成「可按分类浏览、按数据筛选、按编号引用」的图鉴体系，350 张高清图覆盖从基础构图到中国传统美学的完整链路，免费且开源。

如果你正在为某个版式纠结，强烈建议先花 10 分钟在对应分类里过 30 张参考；如果你做的是中文排版或 UI 响应式布局，直接收藏 04 字体网格 与 05 网页 UI 两个分类长期翻阅。

项目链接：

• GitHub 仓库：https://github.com/nevertoday/350-layout-compositions
• 新版图鉴入口：docs/350/README.md
• 数据目录：v2/catalog.csv、v2/catalog.json

排版不是灵感玄学，而是可学习、可索引、可复用的设计语言。这套开源图鉴，把它做成了所有人都能访问的公共知识。

#350-layout-compositions #350LayoutCompositions #nevertoday #AI视频剪辑 #脚本化视频 #口播视频 #开源项目 #GitHub