Scrollytelling
スクロールテリング / 2012– / 版面 / 网页上的读物
把读者滚动的动作本身当作叙事进程的网页版面。图表、地图和视频随滚动而更替,往回滚就按同样的顺序退回原状。研究界把它归为长篇报道的网络形态,情节要么是一条直路,要么是伸缩式的,只有愿意的人才潜得更深。



快速判断
视觉特征
- 图表停在画面上不动,只有一条窄窄的正文栏从它上面经过
- 图表的更替靠不透明度的变化和地图的移动完成,反向滚动就退回原状
- 照片、视频和数据图三样并存于同一篇报道中
- 路径要么一直走到底,要么中途分岔到更深的段落再回到主线
适用场景
- 要把调查报道或研究介绍做成图表不动、只让正文流过的一整页时
- 要让手机上的长文有一种不必说明就能继续往下走的机制时
使用这一风格
把简短指引带入项目,或将结构化规格交给AI工具。
详细方法与出处制作规则、真实案例、比较、研究与引用格式
辞典词条
- 字体
- 正文保持一栏。决定阅读快慢的是滚动而不是版面,所以行长要窄,标题只放在情节的接缝处。
- 版面
- 把图表固定在画面上,让正文从它上面经过。一张图表分配几段正文,就是叙事的快慢。
- 材料
- 只用可以倒回去的方式做替换。像不透明度的交替和地图的平移这样,能与滚动量一一对应的变化才用。
- 注意
- 一旦把只播一次的动画绑在滚动上,往回滚的读者眼前就只剩空白,文章的中段也再读不成了。
- 延伸阅读
- the difference between a single track thread and an elastic one, and the mechanism that brings a reader back in the elastic kind / the relation between how much body text is allotted to one graphic and how long it takes to read through / binding map movement to the amount scrolled and making it hold in both directions
相关词条
- Photo Essay (フォトエッセイ)共同感受:Trust。比较Scrollytelling与Photo Essay
- Isotype (アイソタイプ)共同感受:Trust / Technique。比较Scrollytelling与Isotype
常被混淆的对象
继续浏览网页上的读物
从网页上的读物中按共同感受优先推荐以下词条。
- Infinite Canvas (インフィニット・キャンバス)
- Webtoon (Vertical-Scroll Comics) (ウェブトゥーン(縦スクロール漫画))
- Single-Serving Site (シングルサービング・サイト)
引用此条目
这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。
- Link
- https://indexstyle.org/zh/styles/scrollytelling
- Markdown
- [Scrollytelling — IndexStyle](https://indexstyle.org/zh/styles/scrollytelling)
- HTML
- <a href="https://indexstyle.org/zh/styles/scrollytelling">Scrollytelling — IndexStyle</a>