跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

杂志编辑风

Editorial

别名:杂志编辑风杂志风编辑排版风报刊风格首字下沉那种排版衬线大标题风Magazine LayoutEditorial Design

这是什么

把页面当作杂志版面经营的视觉语言:衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线,图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配, 用版式语言讲故事,而非用装饰堆砌氛围。

开发规格

字体

斜体衬线大标题 + 衬线正文

色彩

暖纸底 #FBF9F4 × 墨色 × 棕色强调

边框

细分割线代替卡片框

阴影

仅照片卡带轻微投影

间距

分栏排版,行距宽松

动效

150–200ms 的淡入与下划线过渡,克制不弹跳

状态反馈

hover 显示下划线并转棕;focus 用墨色点线可见外框;active 下沉一像素;disabled 降为浅灰;error 用棕色强调并加斜体提示

风格演示

同一张页面,直接操作

阅读更多进入文章目录;打开「群山间的清晨」「城市漫游指南」「慢下来的周末」「与陶艺师的一次午后谈话」全文,收藏/取消收藏并返回。关键词搜索过滤四篇文章并显示数量,清空无匹配关键词恢复目录;专栏、生活、旅行、人物、关于各有内容。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 The Paper Room 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02完成上述 The Paper Room 操作后修改输入或撤销,检查结果与状态同步。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 内容型产品:长文 数字杂志 作品集 品牌刊物
  • 品牌想传达文化质感与文字的尊严
  • 图片与文字有明确主次关系的叙事页面

✕ 不适用场景

  • 任务型工具界面,效率优先于阅读体验
  • 需要快速扫读的仪表盘与列表
  • 团队缺乏排版功底,劣质衬线会暴露无遗

常见形式

大报风

Broadsheet

报纸多栏密排,黑白摄影与细栏线

光面杂志

Glossy Magazine

大图大字留白多,时尚刊物气质

数字编辑风

Digital Editorial

网页化改良,衬线标题配现代正文排版

实现要点

font-family: Georgiafont-variant-numeric: oldstyle-numscolumn-countborder-top: 1px solidtext-indent

字体是主角:标题用高对比衬线(Playfair/Georgia),正文衬线或人文无衬线, 行长控制在 60~75 字符;首字下沉用 float 加 3~4 行高度;分隔只用发丝线 (1px)与留白,配小型大写字母的眉题(letter-spacing 0.15em);编号用 老式数字。黑白摄影或单色调图片优先,深色模式用暖黑底保持纸感。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 The Paper Room 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致;首屏结构、实际导航与素材以 ReferenceStyleScene 为准。

延续 .paper-body 的 34% / 36% / 26% 三栏与 2% 间隙:Georgia 斜体大标题、晨光生活照片、三个侧栏故事。保留 #fdfdf9 暖纸底、细分隔线和照片原色/既有局部滤镜,不能强制把所有照片改成黑白。阅读弹层沿用 Georgia 18px/1.9 与斜体导语,分类目录使用现有四篇数据;600px 以下按文案、照片、故事堆叠。现有照片延续到带日期的文章列表与阅读页,使用克制的首字下沉、细线收藏状态与 380ms 阅读页入场;保留四篇文章及操作。

完整页面操作:
阅读更多进入文章目录;打开「群山间的清晨」「城市漫游指南」「慢下来的周末」「与陶艺师的一次午后谈话」全文,收藏/取消收藏并返回。关键词搜索过滤四篇文章并显示数量,清空无匹配关键词恢复目录;专栏、生活、旅行、人物、关于各有内容。

静态封面、详情演示与 /style-scenes/editorial/(英文 /en/style-scenes/editorial/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

瑞士风格Swiss Style

以客观网格与排版传达信息的视觉语言:严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色(经典为红),用留白与字号对比建立秩序。装饰被视为噪音, 设计的目标是让信息以最短的路径被读懂。

风格相似概念
极简主义Minimalism

以"少即是多"为准则的视觉语言:用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身,删除一切装饰性元素,层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。

风格相似概念
文档页Documentation Page

以阅读为中心的长驻内容页面:一侧是可折叠的文档树导航,正文栏承载标题层级、段落、 代码块与提示框,宽屏下再加页内目录(TOC)标示当前阅读位置。页面靠永久链接与 上一页/下一页串联成站,搜索是第一入口,结构稳定到可以背下来。

页面搭配使用
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件影响组件
顶部导航栏Navbar

固定在页面顶部的水平导航条:左侧品牌标识,中间主导航链接,右侧搜索、 入口按钮与用户头像。它是网站的"门面导航",把最重要的三到七个入口压进 一条横向空间,移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON