把报刊亭搬到线上：一个漫画网页的杂志架式排版实验
墨架 MOJIA 是一份站在报刊亭前做出来的漫画网页观察志。我们把杂志架的层板、书脊、价签与塑封反光，换成了苔绿、陶土橙与岩灰三色体系，这个漫画网页的每一层都按"从架上抽出来翻一遍"的手感来摆，每一条连载档案都留有被翻看过的痕迹。
架上现存SHELF A–D
点一本封面，看看它在本期架上占据哪一层。
- 24已出刊期数
- 136收录连载档案
- 41篇创作访谈
- 2%–5%主词自然密度区间
01
编辑方针：一个漫画网页为什么要长得像报刊亭
从层板高度到价签字号，我们把线下书报摊的秩序翻译成栅格与配色。
报刊亭是最早的推荐算法。层板高度决定谁被看见，书脊颜色决定谁被抽出，塑封上的反光决定谁显得新。做墨架这个漫画网页时，我们先把这三条规则抄在手边，还有一条更朴素的：这个漫画网页要让读者一眼看出往前走的顺序：重要的连载放视线齐平的第二层，新刊用陶土橙做书脊，旧刊退到岩灰底上安静陈列。于是页面没有用深色影院风，也没有把作品塞进千篇一律的卡片网格，而是搭出一个可以自上而下走一遍的架子。
架子的第一个好处是顺序感。读者沿着页面向下滚动，等于从报刊亭门口走到最里面那层，视线经过特刊、连载、访谈、手稿与数据板，信息层次不需要额外解释。第二个好处是密度可控：每一层只放四到六件，剩下的留白交给纸张的米色与网点纹理，读者不会因为一次看到太多封面而失去判断。
三条落地规则
一，任何栏目都必须能回答"它摆在架子的哪一层"；二，颜色只在苔绿、陶土橙、岩灰与纸白之间取值，不做渐变色滥用；三，所有可点区域都要给出本页反馈——跳转锚点、筛选结果、详情模态或状态文案，绝不留空链。
排版上我们采用粗衬线标题配细衬线正文。标题用 800 字重压住栏目，正文回到常规字重与 1.85 行高，让长段落像杂志内页一样可读。数字与期号用陶土橙强调，因为它既是价签的颜色，也是报刊亭里最容易被扫到的信号；这套字体层级在漫画网页上保持了整整二十四期没有更换。排版实验室里记录了每一次调整的理由。
架子与屏幕的换算
线下层板大约 34 厘米，我们把它换算成 320 像素的视觉段落高度；杂志常见开本是 16 开，我们用 3:4 的封面比例对应；价签约 4 厘米宽，我们用 0.72rem 的等宽小字模拟。换算之后，页面在桌面端读起来像一面完整的墙，在移动端收起为单列，仍保留层板的横向分隔线。这些数字并不是审美偏好，而是让漫画网页在两种屏幕上维持同一种空间感。
02
本期目录：苔绿号的六个摊位
一本刊物先要有目录，读者才知道自己站在哪一层；这个漫画网页的目录页因此被放在首屏之后的第一站。
03
连载档案：把书脊排成可以筛选的货架
十二部作品，四种题材，按架子顺序陈列；点筛选按钮改变架上陈列，这是整个漫画网页里互动最频繁的一块区域。
A-01窄巷三号
修表匠与外卖骑手共用一间门面房，故事只发生在这条巷子的二十四小时里。
A-02末班公交
一辆收班车每晚绕城一圈，乘客上车时带着各自的白天，下车时都不说话。
B-01陶轮转慢
学徒在陶艺工坊待满一个雨季，学会的第一件事是等泥料回潮。
B-02周末市集
一个摊位换四次主人，招牌却没换过，被雨水泡褪色的字反而更好看。
C-01楼顶十九点
两位夜班保安在楼顶交换白天的见闻，用影子比划谁今天更累。
C-02守夜人的表格
值班记录本上的每一行都对应一个失眠的人，他按顺序把他们画下来。
D-01河岸纪行
沿着一条穿城的河往下游走，每期记录一个桥洞下的生活切片。
D-02旧刊修复笔记
修复师给泛黄的旧刊补页、去霉、重新装订，每一期都是一份修补记录。
A-03二十四小时便利店
收银台是城市的观察口，凌晨三点买关东煮的人各有各的理由。
B-03木作学徒手册
刨花卷起来的形状决定当天心情，师傅只看一眼就知道了。
C-03路灯下的修鞋摊
摊位灯泡总在十一点半闪一下，熟客说那是"该收摊了"的意思。
D-03书架之间的旅行
一间社区图书室的借阅卡背面写满了留言，作品按留言顺序重组。
当前陈列 12 部连载档案 · 按层板编号排列 · 数据为编辑部内部记录
04
排版实验室：六次让架子更顺手的调整
每一条都可以展开，看看这个漫画网页最终为什么长成现在这样。
最初每一层都用满屏横向分割线，滚动时像操场跑道。后来把线收窄到内容宽度，并在两侧留出 6% 的空白，架子才显出边缘。保留虚线用于次要分隔，实线只给栏目大标题。
陶土橙是价签色，用多了会像促销页。最终只给三类元素：期号与层板编号、主按钮、时间戳。其余强调交给苔绿的深浅变化完成，视觉重心因此稳在苔绿一侧。
800 字重的衬线在大字号下容易黏连，标题字距回调到 0.01em，行高 1.25；正文保持常规字重与 1.85 行高。两级对比拉开后，读者在屏幕上一眼能分辨栏目与说明。
封面图定为 3:4 的近似比例、统一 172 像素高度，保证一排四张卡片底部对齐。编号条压在封面左下角，模拟价签贴纸；完整度百分比放在卡脚，方便横向比较。
这个漫画网页放弃左右翻页，改用上下卷轴连贯滚动：顶部进度条提示走了多远，导航在滚动时高亮当前栏目，页脚回到顶部的按钮常驻右下角。三步合起来，长页也不迷路。
窄屏下四列卡片收成单列，层板线改为卡与卡之间的间距；导航换成可换行的胶囊按钮，期号标签单独占一行。手稿图在移动端保持灰度，避免在暗光下丢失层次。
05
手稿展示：铅笔灰、网点与三次重画
九份手稿按工作台状态陈列，从草稿到定稿，读者可以看到线条被改过的地方；手稿展示是许多人愿意反复回到这个漫画网页的原因。
草稿窄巷三号 · 开场分镜
第一版把巷子画得太宽，失去压迫感；定稿收窄两侧墙面，人物站位前移半步。
- 稿次
- 第 3 稿
- 工具
- 0.3 自动铅笔 · 冷灰网点
- 保留
- 铅笔定位线未擦
线稿末班公交 · 车内长镜头
一页只用一个长条镜头，乘客逐一入画。作者把对白全部删掉，只留车窗外的灯。
- 稿次
- 第 2 稿
- 工具
- 针管笔 · 直线尺辅助
- 保留
- 尺痕与修正液
定稿陶轮转慢 · 泥料特写
为了表现湿度，作者在网点上叠了一层淡墨，扫描后保留了纸纤维的毛边。
- 稿次
- 第 5 稿
- 工具
- 水墨 · 细纹纸
- 保留
- 水渍边缘
试色楼顶十九点 · 夜景打光
夜景没有加蓝，而是用苔绿压暗再用陶土橙点灯，屏幕上看更接近旧杂志印刷。
- 稿次
- 第 4 稿
- 工具
- 双色网点 · 刮网刀
- 保留
- 刮痕
草稿守夜人的表格 · 版面构成
整页做成值班表的格子，人物只在格线内活动，越到后面格子越破。
- 稿次
- 第 1 稿
- 工具
- 方格纸 · 直尺
- 保留
- 擦改痕迹
速写河岸纪行 · 桥洞速写
实地画了四十分钟，回工作室后只补了阴影，结构线原样保留。
- 稿次
- 现场稿
- 工具
- 铅笔 · 随身速写本
- 保留
- 雨点晕开处
图解旧刊修复笔记 · 装订图
把拆线、补页、压平、穿线四步画成剖面图，读者能照着看懂一册旧刊的复原。
- 稿次
- 第 2 稿
- 工具
- 制图笔 · 硫酸纸
- 保留
- 图层对位十字
字体周末市集 · 招牌字
招牌字全部手写，换摊位就换笔画粗细，褪色部分用留白处理而不是加灰。
- 稿次
- 第 3 稿
- 工具
- 平头马克笔 · 描字纸
- 保留
- 笔锋抖动
工作台工作台 · 工具摆位
编辑部规定手稿展示必须拍一张工作台，工具摆位本身就说明了作者的画法顺序。
- 稿次
- 记录照
- 工具
- 俯拍 · 自然光
- 保留
- 桌面墨点
展示说明：手稿展示区的图片仅用于说明创作过程与版面结构，均为示意图，不涉及任何成稿资源；如需引用请注明出处为墨架 MOJIA 漫画网页观察志。
06
创作访谈：三位作者谈被退稿的那一页
编辑带着样刊与手稿复印件坐到工作台前，访谈稿经作者本人核校后刊出，刊出前还会请作者确认漫画网页上的标题写法。
岑野编剧 · 《末班公交》
他写对白写了九年，最得意的一次修改是删掉整页台词。
- 问：为什么把《末班公交》的对白删到几乎没有？
- 因为公交车上本来就没人说话。我第一稿写得很满，人物互相解释自己的处境，读起来像广播剧。后来我坐了一个月的末班车，发现车厢里最响的是报站声。第二稿我只留了三句话，剩下的交给画面。
- 问：被退稿的那一页长什么样？
- 是一页六格的争吵戏，编辑说"你把人物写急了，但读者还没跟上"。她没让我改台词，让我把六格拆成十二格，给沉默留位置。那一页后来成了整部作品的分水岭。
黎岸主笔 · 《楼顶十九点》
他用网点画夜景，坚持不给夜色加蓝。
- 问：夜景为什么不用蓝色调？
- 蓝色太方便了，一压就"是夜晚"，但也一眼就假。我用苔绿和岩灰叠网点，需要暗的地方刮网，需要亮的地方留白。印刷出来像老杂志，屏幕上看也稳。
- 问：你重画最多的部分是哪一块？
- 楼顶的护栏。它必须一直在画面里，但不能抢戏。前后画了四版，最后把护栏画成画面里最细的一条线，风一吹就有声音的那种细。
宿白背景美术 · 《陶轮转慢》
她在工坊待了整个雨季，画了一百多张泥料速写。
- 问：背景美术怎么让读者相信"这地方真有人住"？
- 靠不合规的细节。抹布的位置、坯板上干掉的泥点、窗台上那只缺口杯子。这些东西没有叙事功能，但读者会替它们补故事。
- 问：给新人作者一句建议？
- 先画十页不带人物的场景，再想故事。你会发现空间本身已经在说话了。
闻棠责任编辑 · 墨架 MOJIA
她负责把栏目按层板排好，也负责把话说清楚。
- 问：编辑在这个漫画网页里做什么？
- 和线下摊位一样的事：决定谁摆在视线齐平的第二层，谁需要一张价签说明，谁适合安静地待在角落。分类、写提要、写目录，有时候还得劝作者把最爱的三页删掉。
- 问：为什么不把栏目做成瀑布流？
- 瀑布流适合让人一直往下滑，但读者会忘记自己看过什么。层板结构有边界，看完一层就知道自己走了多远，这对长连载档案更重要。
07
数据观测板：四个季度的架面记录
编辑部把每次上架、下架与调整都记成表格，方便下一期少犯同样的错；这个漫画网页主张把过程讲慢一点，所以数据观测板故意保留了不漂亮的数字。
| 季度 | 上架档案 | 完结 | 完结率 | 读者平均停留 |
|---|---|---|---|---|
| 2024 春 | 28 | 6 | 21% | 3 分 12 秒 |
| 2024 夏 | 34 | 11 | 32% | 4 分 05 秒 |
| 2024 秋 | 37 | 14 | 38% | 5 分 21 秒 |
| 2024 冬 | 37 | 19 | 51% | 6 分 48 秒 |
架面调整时间线
- 春 · 搭架确定苔绿、陶土橙、岩灰三色与四列卡片栅格，第一版只有八部档案。
- 夏 · 分层把长篇与短篇分到不同层板，读者回访率上升，目录页被反复点击。
- 秋 · 加访谈创作访谈固定为每期三篇，手稿展示从两栏扩到三栏。
- 冬 · 收窄留白压缩卡片高度、提高说明文字可读性，移动端单列阅读完成度明显改善。
08
读者指南：怎么在架子上找到你要的那本
三条入口、四种读法，以及本页信息结构的说明。
入口一 · 按题材
用第 03 区的筛选按钮，在城市缓慢叙事、手作与市集、夜班与楼顶、纪行与观察之间切换，架子会即时重排。
入口二 · 按层板编号
编号以字母开头，A 为长篇、B 为短篇、C 为夜间题材、D 为纪行档案，卡片左下角的价签就是编号。
入口三 · 按幕后
想先看创作过程，就从手稿展示区往下读，再回到创作访谈；两条线在目录页交汇。这条幕后动线是这个漫画网页上线后最常被使用的路径。
读法一 · 通读
从首页沿层板一路向下，用顶部进度条判断剩余长度，适合第一次到访的读者。
读法二 · 检索
用导航直接跳到栏目锚点，页面采用上下卷轴连贯滚动，锚点跳转后不会丢失上下文。
读法三 · 对比
在数据观测板横向比较四个季度，再看连载档案的完整度百分比，判断哪些档案值得先读。
页面结构清单
09
架上快讯：本期调整与下期预告
只记录与本刊架面有关的事项，不做资源推荐，也不转载外部内容。
- 苔绿号上架本期陈列 12 部连载档案，新增三部纪行类条目，层板 D 首次排满。上架
- 手稿展示扩栏手稿区由六份增至九份，新增工作台记录照一张，灰度处理统一。幕后
- 筛选器上线连载档案支持四种题材即时筛选，切换时给出当前陈列数量提示。功能
- 访谈核校完成三篇创作访谈经作者本人核校，保留口语节奏，未做书面化改写；漫画网页上的访谈排版统一为问答两栏。访谈
- 图片规范复核本期所有封面、手稿与头像统一走站内图片路径并给出尺寸，慢速网络下按占位降级，保证漫画网页的首屏不空。优化
- 下期预告：陶土号主题为工坊与工具，计划增加一份画材图鉴与两页装订图解。预告
10
常见问题：关于这个漫画网页的十条答疑
值班编辑整理，点问题展开答案；同样内容已写入页面的 FAQPage 结构化数据。
收录连载档案的目录信息、更新记录、创作访谈、手稿展示与编辑部数据观测，全部为信息整理与过程说明，不提供任何作品资源。
报刊亭是最古老的推荐界面，层板、书脊与价签天然带有信息层级。把它翻译成网页栅格，读者不需要学习成本就能理解页面顺序。
苔绿负责结构，陶土橙负责强调，岩灰负责说明，纸白留白。颜色数量受控，长页读下来不会疲劳，也更接近旧刊印刷的质感。
标题用高字重压住栏目边界，正文回到常规字重与宽松行高，两级对比让长段落保持可读，也让页面保留纸媒的书卷气。
上下卷轴能表现杂志架自上而下的连贯感，栏目之间不被打断，移动端的纵向手势也更自然，配合进度条即可随时判断位置。
只做去尘、锐化与统一灰度，保留铅笔定位线、修正液与网点刮痕，因为这些痕迹正是创作过程的证据。
以编辑部约访为主，编辑带样刊到作者工作台前完成，访谈稿经作者核校后刊出；不接受代笔稿件。
编辑部内部使用的字段齐全度指标，包含题材、更新节奏、分镜密度、画材与访谈状态五项，仅用于横向比较，不评价作品质量。
一律使用中性描述，不冒用任何官方名义，不标注他人商标作为本刊标识；涉及授权信息时只做状态提示，不做来源引导。
可以，请注明出处为墨架 MOJIA 漫画网页观察志，并保留层板编号；商业使用请先联系编辑部说明用途。
11
内容与合规说明：把边界写在架子上
编辑部四条自我约束，与导读一起长期张贴在层板背面，也放在这个漫画网页的最后一屏。
- 只做信息架构页面承担分类、索引、创作过程说明与读者指南的职责，不提供任何形式的资源跳转与获取指引。
- 只做中性描述涉及作品名称、作者署名与平台称谓的地方，使用中性表述，不冒用官方名义，不使用他人商标作为标识。
- 尊重创作者手稿展示与访谈内容均取得作者同意，仅展示创作过程，不替代作品本身，也不做露骨或猎奇化处理。
- 尊重读者不做诱导点击，不做自动播放，所有可点击元素都给出本页可见反馈，状态变化有文字说明。
- 零外部依赖页面不使用任何外部样式、脚本、字体与内容；图片统一取自站内图片路径，让漫画网页在任何网络环境下都能完整打开。
适龄提示：本页内容面向一般读者，聚焦创作过程与排版方法，不包含成人向描写；如作品档案涉及敏感题材，编辑部只在分类层面标注提示，不展开细节。
档案详情