杂志编辑风
Editorial
别名:杂志编辑风杂志风编辑排版风报刊风格首字下沉那种排版衬线大标题风Magazine LayoutEditorial Design
这是什么
把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
开发规格
字体
斜体衬线大标题 + 衬线正文
色彩
暖纸底 #FBF9F4 × 墨色 × 棕色强调
边框
细分割线代替卡片框
阴影
仅照片卡带轻微投影
间距
分栏排版，行距宽松
动效
150–200ms 的淡入与下划线过渡，克制不弹跳
状态反馈
hover 显示下划线并转棕；focus 用墨色点线可见外框；active 下沉一像素；disabled 降为浅灰；error 用棕色强调并加斜体提示
风格演示
先看整页效果，再试交互场景整页预览
Good Life
in Small Things
在细微处，发现更好的生活
我们记录真实的生活方式、人与地方的故事，相信日常之中，藏着最动人的答案。
阅读更多 →
生活不在别处，
就在此刻。
在山色与晨光中慢下来
在熟悉的街巷中发现新鲜
关于生活节奏的重新思考
交互场景
正在加载演示…
✓ 适用场景
- 内容型产品：长文 数字杂志 作品集 品牌刊物
- 品牌想传达文化质感与文字的尊严
- 图片与文字有明确主次关系的叙事页面
✕ 不适用场景
- 任务型工具界面，效率优先于阅读体验
- 需要快速扫读的仪表盘与列表
- 团队缺乏排版功底，劣质衬线会暴露无遗
常见形式
大报风
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。
在当前项目中用杂志编辑风（Editorial）实现一个长文阅读区块。 先检查现有字体栈与排版变量，衬线字体通过现有字体系统引入。 要求： - 衬线大标题 + 眉题 + 正文三级结构，行长 60～75 字符 - 首字下沉与章节编号用 CSS 实现 - 分隔只用发丝线与留白，无重投影无重渐变 - 移动端字号行距同步适配，标题不换行断裂尴尬 - 支持深色模式（暖黑底保纸感） - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
风格相似概念以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念以阅读为中心的长驻内容页面：一侧是可折叠的文档树导航，正文栏承载标题层级、段落、 代码块与提示框，宽屏下再加页内目录（TOC）标示当前阅读位置。页面靠永久链接与 上一页/下一页串联成站，搜索是第一入口，结构稳定到可以背下来。
页面搭配使用用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件影响组件