交互体验·Katia Gil Guzman
深海之下:按深度分区的滚动叙事
向下滚动依次穿过阳光层、暮光层、午夜层、深渊层与超深渊层,每层配一只可检视的标本(海龟、吸血鬼乌贼、黑海魔、海猪)。它最克制的一处是在页面上直接写明「滚动距离与深度不成比例」——既保住了下潜的体感,又没有拿视觉效果冒充数据。
打开作品
3 步 · 导览视频
画面由本站录制,作品著作权归 Katia Gil Guzman
实现过程
滚动叙事最常见的毛病是为了沉浸感劫持滚动条,代价是没法回头、键盘用不了、晕动症的人直接出局。这件作品反过来做:下潜完全建立在原生滚动之上,沉浸感靠背景光衰减与信息密度递减来给,可访问性因此不用事后补。
建一条连续的下潜
操作作者指令 · 中文译文(昆仑编辑部译) 做一个完整、精致、可交互的落地页。用清晰自然的文案和克制的版式,控件要有目的。保留原生滚动,支持手机与桌面版式、键盘控制和减少动效。主要交互不得依赖运行时的 AI 调用或账号。 场景:《深海之下》是一个数字海洋展。访客从阳光照耀的海面向深海滚动下潜,发现光、压力与生物如何随深度变化。它应当同时展示沉浸式的视觉叙事与清晰的科学解说。 艺术方向:明亮而有大气感的海面,逐渐变成饱和的蓝,再到近黑;大幅、精心构图的海洋生物插画或 3D 标本;克制的发光点缀;自信的字体与充裕的留白。避免做成科学仪表盘式的版式。海洋本身就是这个页面。 首屏:「按深度探索海洋。」「开始下潜」引入一段连续的滚动旅程。在水层、海洋雪与标本之间用视差;配一个紧凑的深度指示器帮助访客定位。原生滚动必须保持自然,深度、光线与内容的变化都可逆。 选出四到五个有证据支持的深度分层,以及一小组位置准确的动物。从可靠的科学或博物馆来源查证关键的深度/尺寸事实,并通过一个紧凑的来源区保持引文可查。不要编造研究发现、精确的物种分布区间或实时传感器数据。 在选定的深度,访客可以不离开场景就检视一个标本:轻轻旋转它、在生物学上合适时开关生物发光,或展开一个带简单标注的剖面。要清楚区分「解释性的灯光控制」与「声称每种动物都会发光」。加一个「尺度对比」视图,把同一尺度套在标本和一名潜水员或科研潜水器上,并给出可见的比例参照。 在最深的一章,一束可控的光束可以用指针/触控或键盘移动,照亮场景中一块有限区域的细节。提供一个等效的「照亮场景」控件,让这个交互永远不会挡住阅读。最后的动作回到海面,留下一份优雅的深度分层总结。 使用准确的轮廓与解剖结构;有意识地生成或建模资产,并保留来源。让粒子与位移保持高性能,暂停离屏的模拟,并提供一个漂亮的减少动效版本。测试快速前后滚动、细节的打开/关闭、深度同步、尺度对比、触控,以及回到海面。结果应当是一个引人入胜、且科学上让访客信得过的展览落地页。
生成物
注整件作品的骨架一步到位:五个分层、可检视的标本、尺度对比、最深层的探照光、减少动效版本、可核对的出处——全在这一个 prompt 里。尤其「不要编造研究发现、精确物种深度区间或实时传感器数据」这一句,是科普作品可信度的底线。
生成海洋背景
操作作者指令 · 中文译文(昆仑编辑部译) 生成一个带阳光、并逐渐过渡到深处的水下背景。
生成物
注背景不是一张图,是一条从阳光到近黑的渐变,随滚动连续变化。午夜层这张能看到它已经暗到只剩生物发光的程度。
重写展陈文案
操作作者指令 · 中文译文(昆仑编辑部译) 在保留视觉的前提下,把科学表述与交互标签写清楚。
生成物
注最后一轮只改文字,不动视觉:把科学表述改准、把交互标签说清。科普作品的可信度是逐句攒出来的——这一步没有截图能表达,所以生成物就是收尾那页的深度分层总结。
据以下公开资料整理,核对于 。 指令原文引自作者公开的构建记录;编辑部注与其中的判断由昆仑编辑部撰写,不代表原作者观点。
