SuperAPI AI 工具集

editorial-design

设计与创作

查看项目

更新于 10-16 09:28

技能介绍

用途:当用户需要杂志感排版、醒目大标题与精致字体搭配时,使用该子风格参考。它是 design-it 技能的子参考,不直接触发。

核心原则:衬线体与无衬线体搭配(高对比衬线体做标题,干净无衬线体做正文);大号首字下沉与拉引引言;分栏布局,常用细线分隔。

视觉特征:色彩为现代编辑风或 Yacht Club 风,暖纸感背景配深墨黑或藏蓝。标题字体 Playfair Display、Merriweather、Bodoni;正文字体 Lato、Open Sans、Source Sans Pro;用细水平分隔线划分区域。

Web 实现:给出 CSS 示例,body 使用纸白背景(#F9F9F9)与墨黑文字(#121212);.editorial-headline 用 Playfair Display、4rem、斜体、底部 1px 分隔线;.editorial-body 用 Lato、1.1rem、行高 1.8、column-count: 2、column-gap: 40px;首字母用 ::first-letter 实现下沉;.pull-quote 居中、2rem、上下 2px 边框。

App 实现:提供 SwiftUI、Flutter、React Native、Jetpack Compose 四种示例。SwiftUI 要求大量使用 .font(.custom()),用 Divider() 做细线,用 HStack 顶部对齐模拟首字下沉。Flutter 在 TextStyle 中设置高度,正文 1.6,拉引引言分隔线 thickness: 2。React Native 指出行高与字体最关键,需在项目中链接自定义字体,用容器 View 的 borderTopWidth/borderBottomWidth 实现拉引样式。Jetpack Compose 用 Divider() 做细线,并按需调整厚度。

建议与禁忌:像对待印刷页面一样处理界面,留出充裕边距;避免浮动操作按钮或厚重导航栏等典型 App 组件,保持简洁。

限制:这是样式参考,不替代具体环境的验证、无障碍测试或专家评审;需另行确认对比度与响应式行为。官方资料未提供收费、价格、平台支持范围等更多信息。