UI FLOWKNOWLEDGE SYSTEM

色彩与装饰 · Color & Decoration

杂志排版
Editorial Layout

用杂志编辑的方式组织网页内容,通过多栏网格、标题层级、跨栏图片、首字下沉、引文和留白建立阅读节奏。

A publishing-inspired layout that uses multi-column grids, headline hierarchy, image crops, drop caps, pull quotes, and whitespace to shape reading rhythm.

交互预览

这是 mianhua UI Glossary 的原生 Preview Runtime,不是静态截图。

可以直接对 Agent 说

请以「杂志排版 / Editorial Layout」为核心视觉方向重设计这个页面。

角色:你是一位精通编辑设计、排版艺术和前端落地的 UI 设计师,熟悉 Vogue、Kinfolk、Monocle 这类高质量出版物的版式语言。

设计理念:内容至上。所有视觉决策都要服务阅读体验、信息层级和视觉叙事,不要把杂志风做成空洞装饰。

布局要求:使用 2-4 栏模块化网格,建立清晰基线节奏;允许跨栏大图、图片出血、图文错位、边注和窄正文栏;移动端收敛为单栏,但保留阅读进度、章节节奏和重点引文。

字体要求:标题使用有性格的衬线字体,正文使用高可读字体,图注和标签用小号无衬线;建立 56/32/24/18/14/12 的层级感,控制行长在 45-75 字符。

图文关系:加入首字下沉、拉引文、细分隔线、页眉/栏目标签、图注和页码感元素;图片可以黑白或低饱和,裁切要服务内容。

色彩要求:以黑白灰、象牙白或浅米色为主,只使用一个克制强调色。避免高饱和渐变、过度阴影、卡片堆叠和 AI 味装饰。

输出格式:先给信息架构,再给桌面与移动布局策略,然后给颜色、字体、间距、图片裁切、装饰元素、交互细节和需要避免的反例。

相关可运行档案研究

Modern Agency

以服务多选、案例参考和本地 brief 摘要构成的原创现代 Agency 页面。

page · 93%

EVR Ventures

以编辑式投资备忘录、Thesis 滚动和本地 Brief 反馈构成的原创风投页面。

page · 92%

Book Hero

以原创章节、阅读进度和三种阅读主题构成的原创图书体验。

page · 92%

返回术语实验室 · 浏览完整馆藏 · 读取术语 API