设计

杂志编辑风Editorial

你可能会说

像时尚杂志那样的排版，图文穿插，有编辑感。

杂志编辑风是一种借用纸媒排版方法组织网页内容的视觉风格它常用衬线标题、分栏、图注和明显的字号对比，适合品牌故事、长文和年报。这些元素不必全部出现，行宽、行距和栏数要分别按语言与屏幕测试。
Concrete forms cut by lightLight study / Xuhui, 6:12 p.m.

CITY / PEOPLE / PLACE

The city
after midnight.

For one quiet hour, familiar streets become a different kind of public room.

WORDS / LIN ZHI8 MIN READ
设计原则 · Principles
  • 衬线标题 + 无衬线正文：两族字体各司其职，层次和气质一起出来
  • 分栏排版控制行长：宽屏可以多栏，小屏应回到单栏并保持自然阅读顺序
  • 选择少量出版物信号：首字下沉、刊头、期号和页码按内容需要使用，不必全部堆上
  • 行距与留白服务长文：具体数值按字体、语言和字号测试，不以 1.8 为固定起点
  • 图片与图注共同表达信息：大图可配简短图注，说明内容、地点或来源

什么时候用

  • 品牌故事和关于页面，需要人物与图片叙事
    一块茶饼的三十年品牌故事 · 第 12 期
  • 深度文章和专栏，需要组织多层图文内容
    「慢，是一种能力。」
  • 文旅与生活方式页面，重视阅读氛围
    去山里住一周
  • 年报和专题页面，需要出版物式节奏
    年度特辑2026

什么时候不用

  • 工具后台让装饰排版阻碍高频操作
    数据后台使用杂志式排版会增加扫描负担
  • 客服和工单等任务页面牺牲扫描效率
    客服工作台（首字下沉版）高频操作界面应优先保证扫描与处理效率
  • 转化页面让主要行动被分栏和图片淹没
    购买按钮藏在第三栏末尾转化型页面：CTA 不能被排版淹没
  • 小屏继续保留多栏，导致每栏过窄
    手机屏沿用三栏会使行宽过窄
组成结构 · Anatomy
衬 Aa衬线标题 无 Aa无衬线正文 分栏 首首字下沉 VOL.12 · P.042刊头页码
Georgia / 宋体一族，负责气质和分量
正文用无衬线保持易读，两族字体搭出层次
栏窄行短，长文读感的关键，小屏记得收回单栏
可在合适的长文开篇使用，为段落建立入口；不适合每段或所有语言
用期号、页码和栏题建立杂志式编辑语境
AI 提示词 · Prompt

做一篇城市观察长文页。用标题、导语、正文、图片和图注建立像杂志一样的阅读节奏；分栏、衬线标题或首字处理只在帮助阅读时使用，并保证手机上也能顺畅阅读。

典型使用场景
杂志风品牌故事页

左右滑动查看完整示例

岭南建筑志城市特刊 · 春
光落进建筑的方式
图：西九龙文化区，午后。摄影 / Cai Fang

建筑师把窗称作「缓慢的时钟」。晨光从墙脚移动到桌面，房间便拥有了不需要提醒的时间。

石、木与玻璃没有争夺视线。它们只是把天气留在室内，也让居住者重新注意一天的变化。

— 018 —
深度专栏长文

左右滑动查看完整示例

专栏 · 慢观察 · 第 47 期
我们为什么不再读完一本书
文 / 林之　·　阅读约 12 分钟
注意力是最稀缺的资源，这句话你已经听过一万遍。但真正的问题不是注意力变短了，而是我们把「读完」的成就感，让渡给了「划过」的快感。
「深读不是怀旧，
而是一种抵抗。」
那些需要二十页铺垫才抵达的段落，恰是短视频永远无法压缩的部分——思想有自己的时长，拒绝倍速。[1]
[1] 《慢读宣言》，2024，未名出版
文旅目的地特辑

左右滑动查看完整示例

目的地特辑 · 莫干山
去山里，住一周
不打卡、不赶路。这份行程单只有三件事：散步、喝茶、看云。
壹 · 抵达
庾村民宿落脚，晚饭吃笋
贰 · 山里
剑池步道，竹林里走半天
叁 · 慢下来
白云书馆，发呆到日落
数字杂志封面

左右滑动查看完整示例

VOL.122026 春季号 · ¥25
慢 城 志
SLOW CITY JOURNAL
封面故事
缓慢生活的复兴
老街豆浆铺的清晨
本期还有
七位回城青年的选择
手冲咖啡与工夫茶
— 042 —▌▍▌▌▍▌▍▍ 6-2026-12
延伸阅读 · 权威出处
CSS 多列布局MDN ↗::first-letter 伪元素MDN ↗