功能
63 种杂志版式
63 种公众号版式分成六个板块:标题样式 12 种、竖排文字 9 种、多图组合 11 种、长文结构 6 种、重点与数据 13 种、节奏与落款 12 种。每种都能单独调字体、配色、间距和圆角,且全部满足微信兼容约束。
63 种版式分六个板块:标题样式 12 种、竖排文字 9 种、多图组合 11 种、长文结构 6 种、重点与数据 13 种、节奏与落款 12 种。 它们不是同一种效果换颜色,而是各自解决不同的编排问题——标题板块解决层级,多图板块解决并排,重点与数据板块解决信息回收。每一种都可以单独调字号、行高、字距、间距、配色和圆角,改完还能一键套给全篇同类组件。
六个板块分别解决什么
| 板块 | 数量 | 代表版式 | 解决的问题 |
|---|---|---|---|
| 标题样式 | 12 | 大标题、引题加主标题、序号标题、双色标题、框式标题 | 建立层级,让读者一眼看出章节边界 |
| 竖排文字 | 9 | 竖排标题、双列竖排、竖排带框 | 制造东方感的视觉停顿,用在开篇或转场 |
| 多图组合 | 11 | 二图并排、一大两小、四宫格、图文左右混排 | 多张图并排但不塌,全部用表格实现 |
| 长文结构 | 6 | 引言卡、目录导航、侧标签引言 | 给三千字以上的长文提供导航 |
| 重点与数据 | 13 | 左竖线引用、大字金句、数据卡条形、结论卡对勾 | 把要记住的信息从段落里拎出来 |
| 节奏与落款 | 12 | 大序号分隔符、停顿屏、作者名片 | 控制阅读节奏,交代作者身份 |
为什么多列一定要用表格
这是整个版式库里最硬的一条约束。微信会剥掉 display:flex 和 display:grid,被剥掉之后并排的元素会退化成块级、变成上下堆叠,中间的空隙也一起消失。所以「二图并排」「四宫格」这类版式只能用一个 <table> 来实现,每个格子是一个 <td>。
表格方案还带来两个额外好处。一是宽度天然可靠——<td> 的宽度是相对于容器的比例,不像 flex 那样依赖容器的计算规则。二是跨行跨列可以用 rowspan / colspan 表达,「左大图跨两行、右侧两张小图」这种结构不需要任何额外技巧。
代价也有:表格单元格里的垂直对齐在不同客户端上表现略有差异,所以版式设计时要求每个格子的内容高度尽量接近。这也是为什么多图版式都提供了固定的宽高比。
每种版式都能改什么参数
版式的样式分成三组,加起来三十多个可调项:
- 颜色:主色、辅色、底色、文字色、强调色
- 排版:字号、行高、字距、对齐、字重
- 间距与尺寸:外边距、内边距、圆角、条形高度、分割线粗细
有三个细节值得知道。第一,改过的项会被标出来,可以单独复位,不用整块重来。第二,改完当前组件后可以「一键套给全篇同类组件」,不用一个个改。第三,连续调参只占一条撤销历史,不会把撤销栈冲掉。
版式和配色是两件事
一个常见的误解是把版式当成模板。在这个工具里,版式决定结构(这一段是数据卡还是引用块),主题色决定外观(数据卡的条形是朱红还是靛蓝)。两者可以自由组合:同一套版式配不同的主题色,出来的是完全不同的气质,但结构完全一样。
这么拆的好处是改动成本低。想换季换个颜色,改一次主题色就够,所有组件的配色会跟着走——不像模板型工具那样需要整篇重排。
常见问题
是。所有版式在生成时就走同一套约束检查:纯内联样式、不用 flex 和 grid、不用绝对定位、不用 writing-mode、不引外部图片。多列一律用表格。
不会。已有的组件是用各自的配置生成的,新增版式不改变任何既有生成器的输出。项目里有逐字比对的回归测试守着这条。
能。版式插入到光标所在位置,插完之后立刻可以继续在它前后打字。选中它就能打开属性面板改参数,或者用快捷键上移下移。
能,但实现方式和网页不同。网页上竖排用 writing-mode,微信会过滤这个属性,所以这里的竖排是用表格逐字排列出来的——每个字一个单元格,从上到下排。这也是为什么竖排版式的字数是有限制的。