海报设计特训：用少量代码练出版式感

海报设计不是“灵感来了就好看”，而是一套可以训练的判断力：先定信息层级，再用网格、字体、色彩和留白把它组织起来。特训的目标，是把“凭感觉”变成“有方法”。

一、先排信息，再谈美化

拿到文案，先别打开素材库。拿张纸，列出：

• 主标题：一眼要看到什么
• 副标题：补充什么信息
• 时间地点：用户何时何地参与
• 行动号召：扫码、购票、关注

然后只用黑白灰，做 5 版草稿。只调大小、位置、对齐。能在这一步立住，后面加颜色和图片才不会乱。

二、少量代码：一个海报骨架

下面用 HTML + CSS 搭一个竖版海报结构。代码很少，但包含了网格、层级和留白。

<div class="poster">
  <h1>夏日音乐节</h1>
  <p>7.20 城市广场</p>
  <span>扫码购票</span>
</div>

.poster {
  width: 600px; height: 900px; padding: 48px;
  display: grid; grid-template-rows: 2fr 1fr auto;
  background: #111; color: #fff;
}
.poster h1 { font-size: 72px; line-height: 1; }
.poster span { align-self: end; border: 1px solid #fff; padding: 12px 24px; }

grid-template-rows 把画面分成三块：主标题占最大，信息居中，按钮贴底。你只需要替换文字、颜色和字体，就能快速试版式。这就是“结构先于装饰”。

三、特训核心：网格、字体、色彩

网格：用 8pt 或 12 列网格对齐元素。对齐产生秩序，秩序产生专业感。

字体：最多两种。标题用粗体建立重量，正文用常规体保证可读。商用字体注意授权。

色彩：60-30-10 法则。主色占 60%，辅助色 30%，强调色 10%。对比度要够，缩略图也要能看清。

留白：留白不是浪费，是呼吸。信息越少，越要敢空。

四、7 天特训法

• 第 1 天：临摹 3 张优秀海报，拆解信息层级。
• 第 2 天：同一文案做 5 版黑白稿。
• 第 3 天：只换字体，感受气质变化。
• 第 4 天：只换色彩，感受情绪变化。
• 第 5 天：加入图片，练习裁切、遮罩和图文关系。
• 第 6 天：限时 30 分钟出一版，训练决策速度。
• 第 7 天：A/B 对比，选最优并复盘为什么。

每天一版，比一周做一版更有效。特训的关键是“高频反馈”，不是“一次完美”。

五、AI 与工具

Figma、Canva、Photoshop、Illustrator 都能做海报。AI 可以生成背景、素材和灵感，但信息层级、版式节奏和品牌一致性，仍然需要人判断。使用 AI 素材要注意版权、肖像权和平台标注要求。

六、常见坑

信息太多、字体太杂、颜色太花、对齐随意、对比度不足、忽视手机缩略图效果。海报首先要在小屏幕上被看清，其次才是放大后的细节。

结语

海报设计特训，不是学更多软件按钮，而是训练判断：什么该大，什么该小，什么该留，什么该删。少量代码可以搭出骨架，真正决定质量的，是层级、秩序和克制。每天一版，坚持复盘，手感自然会来。