VISUAL LANGUAGE / DESIGN GUIDE

视差叙事

Parallax Storytelling

让不同景深层以不同速度移动,借滚动展开叙事。用户的滚动控制和文本顺序应保持稳定,景深只是辅助说明。

视差叙事设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

让不同景深层以不同速度移动,借滚动展开叙事。用户的滚动控制和文本顺序应保持稳定,景深只是辅助说明。

适用场景

短篇视觉故事、展览介绍、阶段清晰的产品叙事。

不适用与取舍

信息检索、手机弱设备、易受运动影响的用户和重复使用的工作流。

实现方法

用小幅 transform 移动装饰层,避免强制滚动速度;图片延迟加载并保留尺寸。减少动态效果时按普通文档排列,正文不锁在长时间固定区域。

具体界面示例

地理故事把地图背景缓慢移动,每段说明仍在文档流中;关闭动效后地图和段落按顺序显示。

常见误区

滚动劫持与大幅缩放会造成不适;不应让用户必须反复滚动才能读到一句话。

延伸阅读

下列技术规范或官方文档可用于核对实现;本站示例与设计取舍由本站编写。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。