数字媒介视域下《红楼梦》主题的视觉叙事设计研究

摘要

《红楼梦》中的人物情感与家族生活紧密相连，园林、诗词及日常物件又贯穿于人物经历之中。将这些内容转化为数字视觉作品，需要在有限的场景中保留情节联系，并处理好图像观看、诗词阅读和交互操作之间的衔接。围绕这一问题，本文以互动网页《风月宝鉴》为设计实践对象，结合文学图像、叙事学和空间叙事的相关研究，探讨文学意象在数字媒介中的呈现方式。

研究采用文献研究、文本分析、案例比较与设计实践分析的方法，从情节筛选、画面设计和体验流程展开论述。作品借用风月宝鉴的镜面意象，将宝黛情感与贾府兴衰安排为两条观看路径。情感线通过初见、共读、葬花及婚姻错置等场景推进，家族线则以园林探索与抄检呈现人物的生活环境及其中的冲突。落花、金锁、通灵玉和私匣等物件分别进入拖动、揭示、倒箱与拒检交互，雪后园林成为两条路径共同的收束空间。

通过对作品的分析，本文认为，文学意象的视觉表达可以从物件的情节作用出发，使其形态变化与人物经历相互呼应；场景顺序与空间探索可以分别承担情感推进和环境呈现的任务；与情节行为相联系的操作，则使部分叙事变化由观看者触发。实践同时反映出双线篇幅不均、意象段落容易产生时间歧义，以及长篇诗词与交互节奏难以协调等问题。研究结论以文本解释和作品分析为依据，用户理解与情感体验仍有待后续研究。

关键词：《红楼梦》；数字媒介；视觉叙事；文学意象；空间叙事；交互设计

Abstract

The emotional lives of the characters in A Dream of Red Mansions unfold within the everyday life of the Jia household, while gardens, poetry, and personal objects recur throughout their experiences. Adapting these relationships into a digital visual work requires a selective sequence of scenes and careful coordination between viewing images, reading poetry, and interacting with objects. This study examines these concerns through the interactive website Fengyue Baojian, drawing primarily on Chinese scholarship on literary images, narratology, and spatial narrative.

The study combines literature review, textual analysis, comparative case analysis, and reflection on design practice. A mirror motif connects two viewing paths: one follows the relationship between Baoyu and Daiyu, while the other explores the garden and the disruption of household life through inspection. Flowers, a gold lock, jade, and private chests become objects that viewers can move, reveal, or attempt to open. A snow-covered garden provides a shared closing space for the two paths.

The analysis considers how the roles of objects within literary situations can inform visual design, how sequential scenes and spatial exploration can serve different narrative purposes, and how interaction can allow viewers to trigger changes related to particular events. It also identifies limitations in the uneven development of the paths, the temporal ambiguity of symbolic scenes, and the pacing of poetry reading and interaction. The conclusions are based on textual interpretation and analysis of the work; their implications for audience comprehension and emotional experience require further investigation.

Keywords: A Dream of Red Mansions; digital media; visual narrative; literary motifs; spatial narrative; interaction design

目次

第一章 绪论

第二章 数字媒介中文学主题视觉叙事的理论基础

第三章 相关视觉叙事实践的比较与启示

第四章 《红楼梦》主题的视觉叙事设计构思与策略

第五章 《风月宝鉴》数字视觉叙事设计实践

第六章 研究结论与展望

参考文献

附录 场景与交互对应表

第一章 绪论

1.1 研究背景

1.1.1 文学主题视觉表达的媒介拓展

文学作品通过语言描写人物、事件和环境，读者随着阅读逐渐认识人物处境，并在想象中形成故事的形象。插画、连环画、影视和数字互动作品为这些内容提供了不同的观看方式。文学进入视觉媒介后，原本由文字铺陈的心理活动、时间变化和人物关系，需要通过有限的画面重新表达，创作者也由此参与了对文本的解释。

在数字网页中，图像能够分层显现，文字可以随操作展开，观看者还可以沿着不同入口接触内容。这些特点使文学题材的视觉表达获得了更灵活的形式，也使创作者面临新的安排。情节怎样分成几个场景，哪些信息先出现，何时让观看者停留或继续，都直接影响作品的阅读过程。例如，长篇诗词需要一定的阅读时间，连续的操作提示却可能促使用户尽快完成步骤；地点入口增加了探索选择，重要线索也可能因此被遗漏。

赵宪章关于文学与图像的研究关注语象和图像之间的联系，为理解文学语言如何进入视觉表达提供了参照[1]。本文从这一问题出发，进一步考察图像在数字界面中的呈现，重点讨论场景和操作如何参与文学内容的表达。

1.1.2 《红楼梦》主题的设计问题

《红楼梦》的人物情感发生于具体的家族生活之中，院落、诗词和日常物件贯穿着人物的交往，也记录着生活境遇的变化[2]。对这一题材进行视觉设计，人物外观与其生活环境都影响情节的呈现。若只选取若干知名情节，场景虽然容易辨认，彼此之间的情绪和事件衔接仍可能不够清楚。

本次设计围绕宝黛情感及贾府生活的变化展开。面对原著较为庞杂的内容，作品先确定保留的情节，再安排它们之间的联系。初见与共读用于建立人物关系，葬花使情感与自然意象发生联系，园林和抄检则补充人物生活的环境。研究关注这些选择在画面和交互中的具体呈现，以及场景连接后形成的整体叙述。

1.2 研究目的与意义

本文以横屏互动网页《风月宝鉴》为研究对象，探讨《红楼梦》文学意象的视觉呈现与叙事安排。作品选取宝黛情感和园林生活中的部分情节，通过场景转换、物件变化及局部操作，表现相遇、惜花、错失和离散的过程。

研究希望在文学分析与创作实践之间建立较为具体的联系，使设计选择能够得到解释。例如，落花的拖动方式与葬花情境是否相合，保持关闭的私匣怎样表达人物立场，都是本研究结合场景讨论的问题。围绕这些问题展开分析，可以为同类文学题材设计提供可讨论的实践经验，也有助于检视作品在情节衔接、视觉统一和观看节奏方面的不足。

1.3 国内外研究现状

1.3.1 国内叙事学与文学图像研究

国内叙事学研究为理解故事内容和叙述方式提供了基础。胡亚敏的《叙事学》从叙述、故事和阅读等方面介绍相关理论[3]，罗钢的《叙事学导论》系统梳理了叙事分析的问题与方法[4]，申丹、王丽亚则通过对经典与后经典叙事学的评介，介绍不同研究视角及其适用范围[5]。这些研究使本课题能够区分原著事件与作品中的呈现顺序，考察情节经过选择和重排后发生的变化。

文学图像研究更直接地涉及语言与视觉表达。赵宪章围绕语象和图像关系展开论述[1]，提示研究者关注文学内容成为可见形象时的解释过程。对于本课题，同一情节采用人物特写、环境全景或物件局部，会使不同内容获得突出，这种取舍也影响着观者对情节的认识。本文借鉴这一研究方向，将文本中的情节和意象与实际画面相互对照，分析图像保留和强调了哪些内容。

1.3.2 国内空间叙事与数字文化展示研究

龙迪勇的空间叙事研究关注叙事作品中的空间元素及其作用[6]。在这一视角下，故事发生的地点能够参与人物和事件的呈现。本作品中的大观园由院落、道路和水系组成，各处入口又分布着不同的人物与物件，适合从空间角度考察观看者怎样逐步接触这些内容。

国内数字文化展示研究也涉及内容与参与方式的协调。刘思屹、张志贤从文化体验角度讨论数字博物馆的交互叙事，关注感知、行为和情感等层面的设计[7]；刘芳、吴振新对文化遗产数字叙事的现象及应用展开研究[8]。这类成果为本课题提供了邻近领域的经验，尤其有助于思考文化内容如何分层呈现、用户通过何种方式接触信息。文学主题创作还涉及诗意和情绪的保留，展示方法的借鉴因而与具体场景的分析相连。

1.3.3 国外数字与空间叙事研究

Murray对数字叙事参与的讨论，为考察用户行动及其意义提供了参照[9]。Jenkins关注叙事空间的设计，讨论环境如何承载事件和线索[10]。Ryan围绕沉浸与交互展开研究，使本课题能够进一步考虑操作与连续观看之间的协调[11]。

本文选取其中与作品较为接近的问题展开讨论：用户触发的变化是否回应当前情节，园林中的物件如何补充人物经历，以及点击、阅读与等待怎样形成合适的节奏。这些问题共同指向作品的具体体验，也限定了本文借鉴国外理论的范围。

1.3.4 研究述评

现有文献分别从叙述方式、文学图像、空间和数字参与等方面提供了分析工具。结合本次创作，可以将研究推进到情节与画面的对应、场景之间的衔接，以及动作反馈与文学含义的联系。研究重点由此落在一个具体作品之中，考察这些方法经过实际运用后能够解释哪些设计问题。

目前的文献梳理主要围绕上述主题展开，《红楼梦》图像史、园林和意象的专题研究仍有补充空间。后续对具体情节的讨论，还需要结合原著和相关专题文献细化，以加强文学解释的依据。

1.4 研究内容与方法

本文先讨论文学主题数字视觉叙事的基本问题，再结合相关绘画与数字展示案例，分析其情节、画面和观看方式，最后以《风月宝鉴》说明设计构思及实践结果。

文献研究主要用于梳理叙事学、文学图像及数字展示的相关观点。文本分析围绕作品选用的情节、诗词和物件展开，考察它们在原著中的作用及进入设计后的变化。案例比较从内容选择、画面呈现、观看顺序和参与方式入手。设计实践分析则依据现有场景、程序流程和修改记录，讨论作品已经形成的表达及其局限。

本文尚未开展问卷、访谈和量化用户实验。文中的体验判断主要来自作品分析，项目内部的运行记录用于核对功能及界面状态。

1.5 研究范围与论文结构

研究范围包括《风月宝鉴》的宝黛情感线、家族线、镜面导航与共享雪景，人物性情测试作为番外补充讨论。家族线以大观园的兴盛与抄检为主要节点，着重呈现园林生活和内部矛盾。

本文拟统一采用人民文学出版社2022年修订校注本作为文本参照[2]，网页摘句仍需与该版本逐项核对。作品涉及前八十回与后四十回中的不同情节，相关分析按内容来源区分，尤其在婚姻与出家段落中保留版本说明。

全文共六章。绪论提出研究问题，第二章讨论理论基础，第三章比较相关案例，第四章说明设计构思与策略，第五章结合场景分析实践，第六章总结研究所得及后续方向。

第二章 数字媒介中文学主题视觉叙事的理论基础

2.1 文学叙事与视觉叙事

2.1.1 文学语言与视觉形象的表达差异

文学语言可以交代人物的过去与未来，也可以直接叙述其心理活动。画面首先呈现可见的人物、动作和环境，许多含义需要观看者依据线索逐渐理解。例如，人物的悲伤可以通过姿态、表情和周围景物表现，其原因却往往依赖前后情节或文字说明。转化为视觉作品后，原著中较为明确的信息可能变得含蓄，某些原本留有想象空间的外观又会被固定下来。

图像和文字在创作中承担着相互补充的作用。画面具体呈现人物所处的环境，诗词延续原著的语言节奏，较短的说明则交代事件背景。它们在数字界面中出现的时机与位置，会影响用户何时从画面转向阅读，以及读完后怎样回到场景。

2.1.2 情节选择与叙述重组

篇幅和载体限制了文学题材作品所能容纳的内容，情节选择由此成为设计的起点。熟悉的段落可以帮助用户辨认故事，它们在整体叙述中的作用则影响前后场景的连接。初见与共读能够表现人物的接近，葬花将情绪与自然景物相连，抄检则揭示生活环境中的矛盾。只有把这些段落放在一起，才能进一步判断它们是否形成连续的观看经历。

本研究从情节所呈现的人物关系、可转化的视觉对象，以及它在情绪变化中的位置进行筛选。选出的内容再按照网页的观看方式安排，有些段落顺着事件推进，有些段落则作为回忆或预示出现。标题、过场与画面中的时间线索，可以帮助用户区分这些段落，理解它们与前后情节的联系。

2.2 视觉叙事的构成关系

2.2.1 人物与物件

人物的服饰、姿态和位置能够帮助观者辨认身份与相互关系。两人共同面向一本书，可以提示共享阅读；人物离开后留下的空景，又使观看的重点转向原先被忽略的环境。这些形式所产生的含义依赖具体情节，前后画面也为理解人物变化补充了语境。

原著中的物件也为设计提供了叙述线索。书、花囊、金锁、通灵玉和私匣分别进入共读、葬花、婚姻和抄检情境，观者能够通过它们接触人物经历。物件的状态尤其适合数字呈现：遮盖与显露、收拢与散落、打开与保持关闭，都可以在同一画面中发生变化，使动作及其后果被看见。

2.2.2 场景与空间

人物生活在相互关联的地点中，院落、道路和水系使这些地点拥有可辨认的位置。空间叙事的研究视角[6]有助于进一步考察内容怎样分布于环境之中。例如，园图先呈现整体格局，各院落再提供人物和物件信息，观者返回园图时便能够将已经接触的内容放回原来的位置。

不同地点中呈现的内容，使空间探索逐渐积累信息。若各建筑只提供名称，园图主要发挥导览作用；当私匣、旧物和书信分别出现在不同院落时，地点便开始与人物经历相连。探索的意义来自这些内容逐步积累后形成的认识，也受到入口提示和访问顺序的影响。

2.2.3 顺序、显隐与节奏

图层显现、人物渐隐和诗句展开，使静态插画能够在时间中发生变化。这里涉及故事时间、信息出现的先后，以及用户实际花费的时间。例如，花瓣移动的动作很短，与之相伴的诗词阅读却需要较长停留；镜面切换又可能使用户返回已经经历的章节。

标题、过场和导航可以帮助用户确认当前所处的段落，动态时长则影响观看的快慢。较缓的显现适合引导注意、形成停顿，在需要连续操作的场景中，过长等待也容易使人失去方向。节奏的安排与当下任务相连，观看、阅读和继续操作的时机也随之调整。

2.3 数字媒介对观看方式的拓展

2.3.1 动态呈现与逐步揭示

分层图像使内容能够按照设计的顺序出现。婚礼中的盖头暂时遮蔽人物，揭开后再引导用户观察金锁和宝玉；结尾的人物逐渐消失，则使原来由人物占据的空间显露出来。前后画面的差异改变了观看重点，也构成了这一段叙述的进展。

环境中的花瓣、云雾等动态更多用于保持场景氛围，其强弱也影响关键变化能否被注意。当许多元素同时运动时，用户可能难以判断应该关注什么。将环境动态适当减弱，把主要变化留给人物和情节物件，有助于保持画面的层次。

2.3.2 操作参与与意义反馈

在互动作品中，部分变化由用户动作触发，动作对象和结果也成为叙事的一部分。拖动落花时，用户能够看见花的位置改变；尝试打开私匣时，用户可能接触到开匣、倒箱或拒绝搜检等不同结果。操作与情节行为的联系，使这些变化具有较明确的情境。

Murray对数字叙事中有意义行动的讨论，为理解这类参与提供了参照[9]。本研究据此考察动作产生了什么变化，以及变化如何回应当前情节。只负责播放下一张图像的点击，主要用于推进流程；使物件状态和人物立场显现的操作，则与情节表达更为直接地联系起来。

2.3.3 导航与观看自由

章节导航使用户能够确认当前位置、回看内容或切换路径。“下一幕”维持较为连续的情节顺序，镜面入口则连接另一组场景。两种方式同时存在，使作品能够在顺序阅读的基础上开放局部选择。

作品的自由程度还取决于具体规则。院落可以自由访问，章节仍有解锁条件，人物结局也保持既定安排。因此，本文将其理解为具有局部探索自由的互动叙事，重点分析选择怎样影响内容接触的顺序和数量。

2.4 本研究的分析维度

结合上述讨论，本文从文本内容、视觉呈现、观看路径和操作反馈四个方面分析作品。文本分析解释情节与意象的选择，画面分析关注人物、物件和环境，流程分析考察内容接触的先后与入口，交互分析则说明动作及其结果。

这些方面在具体场景中相互联系。例如，葬花的文本内容决定了落花和花囊的选择，构图影响拖动目标的位置，诗词展开与下一幕入口又共同决定了用户如何完成这一段体验。将它们放在同一场景内分析，可以较清楚地说明设计选择的依据及其影响。

2.5 本章小结

文学内容转入数字视觉作品后，情节经过筛选，人物和环境获得具体形象，观看顺序也受到界面与操作的影响。本文据此关注各项设计怎样在场景中配合，尤其考察物件变化、空间探索和动态显现如何参与叙事，为后文的案例比较与实践分析建立依据。

第三章 相关视觉叙事实践的比较与启示

3.1 案例选择与分析范围

本章选择旅顺博物馆藏孙温、孙允谟绘《红楼梦》画册、故宫博物院《韩熙载夜宴图》App及《清明上河图3.0》展演作为参照。画册与本项目共享文学题材，可以考察人物和生活环境的视觉呈现；后两项则分别涉及绘画的分层观看和数字空间拓展，为界面与体验流程提供参考。

案例分析依据馆方公开说明和能够核对的图像资料展开，讨论范围主要包括画面内容、展示层级和参与方式。本文尚未完成相关产品的完整操作或现场体验，因此对观众反应及实际体验效果保留判断。

3.2 《红楼梦》画册中的情节与空间

旅顺博物馆介绍，孙温、孙允谟绘《红楼梦》画册以程甲本小说为蓝本，通过连续画面呈现人物和事件[12]。画中同时容纳建筑、陈设及人物活动，使读者能够从生活环境理解情节。人物、事件与场所共同进入画面，为本项目思考情节的环境线索提供了参照。

园林和院落能够交代人物如何相处，生活用品又使抽象的关系落到具体对象。对数字设计而言，这些环境内容还可以成为局部入口，引出人物与物件的补充信息。画册所提供的参照主要在于人物与环境共同叙述的方式，网页则进一步通过显隐和触发安排内容出现的过程。

3.3 《韩熙载夜宴图》App中的分层观看

故宫博物院的发布资料将该App介绍为总览、鉴赏和体验等层次，通过文物影像、注释与媒体内容解释画作[13]。用户可以先接触整体，再观看局部细节和相关说明，这为数字作品中的信息安排提供了参照。

《风月宝鉴》在同一场景中安排画面与补充内容，涉及相近的信息层级问题。场景初次出现时保留整体氛围，热点帮助用户发现对象，文字在操作后展开，可以减少初始界面的信息拥挤。文学情境还包含持续的情绪变化，说明文字的位置与篇幅因此影响阅读后返回画面的过程。

3.4 《清明上河图3.0》中的空间拓展

故宫博物院公告列出了《清明上河图3.0》的互动长卷、沉浸剧场、球幕影院和人文空间等组成[14]。作品通过不同空间呈现绘画中的环境与生活，为观众提供多种接近图像内容的方式。

本项目采用浏览器中的横屏画幅，制作规模和观看条件与展演有较大差异，可参考之处主要在于全景和局部的连接。园林全景交代整体位置，进入院落后接触物件和事件，再返回园图时，观者对原来的空间便增加了一层认识。网页中的这一往返过程，可以在有限画幅内逐步补充内容。

3.5 案例比较与设计启示

三个案例使本项目能够分别从生活环境、信息层级和空间往返考虑叙事安排。人物所处的环境帮助解释行动，补充信息的进入时机影响观看，局部场景与整体路径的衔接又决定内容如何逐步展开。后文结合实际画面和流程，讨论这些安排在本项目中的具体作用。

3.6 本章小结

相关案例在不同媒介条件下安排图像与观看过程。纸本画册通过连续画面保留生活细节，数字产品可以逐层展开信息，大型展演又能通过不同空间延伸绘画内容。本文选取其中与横屏网页相近的设计问题，作为后续情节、场景和交互安排的参照。

第四章 《红楼梦》主题的视觉叙事设计构思与策略

4.1 主题定位与文本内容选择

4.1.1 人物情感与家族生活

本设计将宝黛情感放在贾府生活环境中加以呈现。人物的相识和往来发生于共同的生活空间，婚姻与离散又受到家庭关系影响。围绕这些内容安排场景，可以使人物经历和园林变化相互补充，形成从相遇、繁盛到失序、离散的情绪进程。

作品以宝黛情感作为较为连续的叙述线索，家族生活则通过园林营建、建筑探索和抄检进入。这样的内容选择保留了个人经历与生活环境的联系，也使有限篇幅内的表达有所侧重。家族线主要呈现大观园的繁盛与内部冲突，其叙述范围集中于园林生活的几个变化节点。

4.1.2 关键情节的选择

初见与共读用于交代人物关系的建立，葬花使黛玉的心绪与春末景物联系起来，婚礼和《终身误》则将情感放入家族婚姻安排中。冷月段落穿插其间，通过残荷、月色和人物隐去，提前引出离散的情绪。情感线由此兼有事件推进和意象过渡，两类段落共同影响观看节奏。

家族线先建立可游、可居的园林，再进入搜检私人物品的情境。选择抄检，能够把变化具体落到院落、私匣与人物应对上，使观者从日常生活接近家族内部的矛盾。它与前面的繁盛园景形成对照，也为随后雪景的寒意提供情境。

4.1.3 文学意象的提取

意象提取从物件的情节作用和跨场景变化入手。书连接共同阅读，金锁和通灵玉进入婚姻及人物身份的讨论，私匣保存与个人生活相关的物品；花、残荷和雪景则从自然形态与季节感受上延续情绪。院落和园图为这些物件提供位置，使人物生活拥有相对完整的环境。

其中，花的作用随场景发生变化。共读中的花参与相遇氛围，葬花中的落花成为被收集的对象，冷月段落的衰残植物又延续生命流逝的联想。设计通过这些变化联系前后画面，同时保留各幕的情节差异，使同类意象能够反复出现而有所推进。

4.2 风月宝鉴与双线观看

4.2.1 镜面意象的转化

风月宝鉴的镜面形式适合连接两种观看内容，作品据此将宝黛情感和贾府兴衰分别放置于正反两面。用户通过同一入口接近两组场景，镜面也同时承担作品识别和章节导航的作用。

这一划分来自本次设计对观看方式的安排，原著镜面意象与网页正反两线之间经过了重新解释。作品希望借助两种尺度接近人物处境：情感线关注人物相处及其变化，家族线补充他们生活的空间与冲突。镜面切换使两部分在界面中保持联系，也为观者返回和比较提供入口。

4.2.2 情节推进与园林探索

情感线按照章节推进，使人物相识、接近和错失逐步积累；家族线通过园图提供地点选择，使不同院落的人物与物件共同呈现生活环境。两条路径采用不同的内容安排，适应各自的表达任务。

现有情感线的章节较多，家族线则集中于兴盛和抄检。作品中的双线因而表现为较完整的情节路径与空间补充路径，两者在关键意象和结尾处相互呼应。这一结构的作用，可以结合两线实际承载的内容，考察切换是否帮助观者将个人经历放回环境之中。

4.2.3 两条路径的终局

雪后大观园被安排为两条路径共用的收束空间。从情感线进入时，前面的人物经历使雪景带有情缘消散后的失落；从抄检进入时，空寂园林又承接内部生活受到侵扰的寒意。进入文案保留不同来源，使同一幅景象能够回应两段经历。

系统允许观者在完成任一路径的指定转折后接触雪景，因此同一终局也可能被赋予不同理解。另一面的内容仍保留在导航中，用户可以继续回看和探索。作品提供了双线连接的条件，观者实际接触的内容则取决于其选择。

4.3 人物、环境与场景变化

4.3.1 构图中的人物与环境

人物场景和园林全景的观看重点有所不同。人物场景以姿态、物件与彼此位置吸引注意，园图主要依靠清楚的地点和道路引导探索。设计在横屏中安排这些内容，通过画面尺度和密度的变化，引导用户由人物接近其生活环境。

横向画幅也为诗词和操作留出了区域。人物、文字和热点之间需要保持适当距离，尤其在葬花等兼有拖动与阅读的场景中，放置目标必须清楚，诗词又需要可连续阅读的空间。画面中的空白因此与具体功能相连，既调节构图，也容纳阅读和动态变化。

4.3.2 色彩与环境状态

春日场景以浅绿、粉赭和米白表现较为明亮的环境，冷月和抄检降低明度并增加冷色，雪景则通过冷白与灰青呈现冬日空寂。色彩沿着整体情绪发生变化，人物与物件的状态进一步补充其中的原因。

园林的前后变化还通过事件获得更具体的含义。抄检使原本可供生活和交往的院落成为被搜查的地点，私人物件随操作显露或散落，环境的寒意由此与具体行动相连。背景转暗能够强化这一感受，人物的应对和物件变化则使其含义更为清楚。

4.4 交互动作与情境表达

4.4.1 交互对象的选择

作品优先选择情节中具有行动意义的物件作为操作对象。葬花涉及收拾落花，婚礼涉及揭开盖头，抄检涉及打开私匣和翻看物品，这些动作能够被转化为点击或拖动。观看者在触发变化时，也能够接触该情节中的部分行为及其后果。

这种参与保留了既定故事的走向，主要通过操作时机和反馈顺序影响观看。设计分析因此关注用户能够看见和触发的内容，包括物件是否发生变化、变化怎样与人物相连，以及文字在何时补足理解。

4.4.2 拒检与受阻反馈

秋爽斋的私匣保持关闭，与其他院落的开匣形成差异。用户尝试继续搜检时，受阻反馈与探春相关文字共同出现，使拒绝成为可感知的结果。人物立场由此进入操作过程，也使各院落在同一事件中呈现不同的应对。

明确的提示可以帮助用户将受阻理解为人物的拒绝。若缺少反馈，关闭的匣子容易被误认为没有响应的按钮。轻微的动作变化、适时出现的文字和返回入口共同承担说明，使用户能够理解当前结果并继续探索。

4.4.3 观看与阅读的节奏

点击、拖动和分页阅读的难度较低，连续出现时仍会积累时间成本。葬花包含重复收集，诗词占用阅读时间，过场又带有动态等待，每幕的操作频率因而与内容密度密切相关。较长的阅读段落可以减少额外提示，让用户将注意力留在文字与画面中。

提示位置也影响这一过程。靠近物件的说明便于发现动作对象，其位置又受到人物表情和诗句的限制；完成反馈交代当前阶段的结束，再将用户引向后续内容。通过这些安排，场景中的动作能够获得清楚结果，观看也有继续展开的余地。

4.5 本章小结

本章从情节与意象的选择出发，说明双线路径、场景对照和交互动作的安排。宝黛情感为作品提供连续经历，园林与抄检补充生活环境，物件变化则使部分文学内容进入用户操作。后文将结合实际画面和流程，检视这些构思已经形成的表达及其限制。

第五章 《风月宝鉴》数字视觉叙事设计实践

5.1 作品定位与整体架构

5.1.1 设计目标与预期受众

《风月宝鉴》以愿意通过图像和简短操作接触《红楼梦》的观看者为预期受众，并假设其对宝玉、黛玉等主要人物具有基本认识。作品选取有限场景，使观者能够沿人物经历进入园林生活，再通过抄检和雪景接触生活变化后的情绪。

作品目前依据这一受众预设处理场景联系和操作反馈。标题和简短说明帮助缺少原著知识的用户确认人物关系，其背景信息是否充分，仍有待面向不同熟悉程度用户的体验研究。

5.1.2 内容结构与体验流程

作品包括封面、开场、宝黛情感线、家族线、镜面导航、共享雪景和番外模块。情感线从初见、共读进入葬花、冷月、金玉良缘和《终身误》，再由出家与留白结束。家族线以营建和园林探索建立兴盛环境，通过抄检呈现内部冲突。

用户在场景中可以继续下一幕，也可以通过镜面查看另一条路径。章节以当前、已完成和未解锁等状态提示进度，雪后大观园作为独立共享空间出现在相应入口中。这样的流程使连续阅读、局部探索和回看同时存在，也要求各入口清楚说明其去向。

5.1.3 横屏网页载体

主体采用16∶9横屏舞台，通过浏览器呈现。横向画幅适合同时安排人物和环境，例如葬花场景可以保留近处黛玉、远处宝玉及中间的阅读区域，园图也能够在一屏内展开建筑与水系。画面缩小时，可用空间随之减少，文字大小和操作区域仍需依据视口协调。

主体场景使用HTML、CSS和JavaScript，番外模块使用React与TypeScript。图像按背景、人物和物件等层级拆分，程序控制点击、拖动、显隐和章节切换，使场景能够按照用户操作呈现不同状态。

5.2 视觉语言与界面设计

5.2.1 人物与场景

初见场景将宝玉与黛玉分置画面两侧，顽石和仙草与人物并置，中间保留文字区域，使人物相认与前缘意象联系起来。葬花场景采用近处人物与远处环境的层次，黛玉占据较大画面，宝玉出现在远景，诗词位于相对开阔的区域。人物尺度和位置的变化，使两幕拥有不同的观看重点。

婚礼将两名主要人物集中在中部，礼仪环境与周围人物构成外部背景；园林全景则缩小人物尺度，以建筑、道路和水系提供地点认识。作品在不同构图之间转换，淡彩、线条和纸本肌理承担整体风格的联系。现有画面在人物细节和空间处理上仍有差异，尤其是人物展示、园图与暗色场景之间，笔触和材质密度尚未完全协调。

5.2.2 色彩、线条与材质

作品以低饱和淡彩为主要色彩倾向，初见、共读和葬花多使用浅绿、粉色及米白。婚礼增加红色和金色，使仪式的热闹较为突出；冷月则转向灰青，残荷与水面带出衰残感，雪景以冷白延续结尾的空寂。

人物衣纹与建筑轮廓依靠线条交代，背景植物和远景采用较柔和的处理，使主体能够从环境中被辨认。纸本肌理为画面增加质感，在细节较密的区域也可能与轮廓、文字竞争。婚礼中的金色发光和暗部较强，与其他淡彩场景之间的差异尤其明显，是后续视觉统一中的一项具体问题。

5.2.3 横屏构图与界面层级

标题、动作提示、章节按钮和镜面入口分别承担定位、引导与导航，它们在同一画幅中分占位置，显示时机又随着场景阶段变化，共同影响主要人物和物件能否被清楚看见。明暗主题采用共同的界面规则，随背景调整文字和按钮颜色。

花囊在葬花中作为拖动目标，书页在共读中作为触发对象，提示围绕这些局部安排。镜面入口则长期承担路径切换，适合与场景热点保持区分。界面的连续性由外观、位置及状态共同维持，按钮与人物、文字之间的距离也影响场景变化能否被完整观看。

5.2.4 诗词与叙事文字

诗词采用分段或分页呈现，并以竖排形式置入画面；情境说明使用较短文字，交代物件与人物的联系。《葬花吟》篇幅较长，分页使一屏内能够保留人物和景物，也使阅读成为独立于收花动作的一段停留。

分页控制了单屏文字密度，也增加了阅读步骤，进度提示与继续入口因此成为阅读界面的重要部分。抄检中的文字又区分了原文摘句和设计概括，用不同内容补充当前院落的情境。网页摘句的底本仍待统一，分列和去标点等排版处理需要在保留文本含义的基础上核对。

5.3 人物情感线的场景叙事

5.3.1 初见与共读

初见先呈现顽石与仙草，用户分步点击后，人物形象和相认文字逐渐出现。信息由意象进入人物，使这一幕能够同时联系前缘与初见。对于熟悉原著的观者，这些物件可能唤起已有记忆；初次接触者则更依赖文字说明，才能理解它们与人物的关联。

共读场景以花和书页安排前后变化，先通过局部环境动态形成停留，再将注意引向共同阅读。两人围绕同一对象展开的关系成为场景重点，文字在后续出现，使用户接触到人物之间的精神接近。这一幕的操作主要用于引导观看，连续触发过多时，也可能打断共读所形成的停留。

5.3.2 黛玉葬花

葬花将四处落花设置为可拖动对象，花囊作为接收目标。用户移动并放入落花后，画面发生相应变化，诗词也随阶段展开。落花在这一幕中获得了具体去向，收集动作使观者停留于黛玉惜花的情境。

重复四次的安排使动作持续一段时间，也可能使用户把注意力转向数量和完成条件。花瓣的移动、消散及诗词展开延续这一幕的情绪，收花之后也保留了继续停留的内容。完成操作后，远景中的宝玉和后续阅读仍留在画面中，用户由处理落花转向观看人物与诗句。

拖动动作回应收拾落花的行为，诗词补充黛玉对身世与生命的感受，远景人物又使独处中的情绪与宝黛关系相接。这些内容随场景逐步展开，使操作完成后仍然保留了可以阅读和观看的部分。

5.3.3 冷月花魂

冷月场景以残荷、水面和月色为主要内容，花瓣及人物的变化使画面逐渐减少。在葬花之后进入这一幕，前面较明亮的植物与人物活动转向冷色和衰残形态，观看重点随之落在留下的环境中。

本设计将这一段作为命运预示和情绪过渡。它位于婚礼之前，时间性质与连续事件有所区别，若缺少明确提示，观者可能将其理解为已经发生的情节。因此，这一幕的画面表达与过场说明仍需共同检视，使意象联想和事件顺序能够被辨认。

5.3.4 金玉良缘与终身误

婚礼中的信息通过盖头、金锁和人物形象逐步展开。用户揭开遮盖后，再接近相关物件，仪式中的人物关系由此逐渐清楚。红色与金色使婚礼较为醒目，周围人物和礼仪背景又让个人情感处在家族生活之中。

《终身误》通过旧影、通灵玉和曲词回接前面的情感经历。通灵玉承担触发作用，旧影显现和曲词阅读将观看转向记忆与失落，使婚礼的热闹得到另一层补充。这一段的意义依赖前面场景的积累，物件和旧影与用户已经接触的情节相互呼应。

5.4 家族线的空间叙事

5.4.1 营建与园林探索

家族线从营建过场进入园林全景，建筑、水系和道路使大观园获得整体形象。用户通过热点接近局部信息，再返回园图继续选择地点，观看由整体位置逐渐深入到人物生活。

园图中的建筑名称能够帮助定位，与人物相关的内容则使这些位置获得进一步含义。现有家族线以园林生活为主要切入点，家族经济和更广泛的社会关系呈现较少，因此它的作用主要是补充情感线的环境，并通过抄检引出内部冲突。

5.4.2 抄检中的五处院落

抄检设置怡红院、潇湘馆、秋爽斋、稻香村和紫菱洲五处入口，各处独立记录查看和操作状态。用户可以自由选院，也可以返回园图后进入其他地点。相同的地图因此被不同经历逐步填充，已访问的地点还能够提示探索进度。

各院落围绕不同物件呈现人物差异。怡红院突出倒出衣物的动作，潇湘馆通过旧物联系人物往来，秋爽斋保持私匣关闭，稻香村提供较平静的查看结果，紫菱洲则以书信带出私人关系。这些内容分布在同一搜检情境中，使观者能够接触到各人的不同处境与应对。

5.4.3 倒箱与拒检

怡红院分为开匣和倒箱两个阶段，衣物由容器内部转为散落状态，画面通过局部物件的位移呈现动作后果。私人物品原先被收拢存放，随后暴露在外，搜检对日常生活的侵扰由此获得可见的表现。当前实现范围集中于匣子与周边物件，分析也以这一局部变化为依据。

秋爽斋的结果与之不同。用户尝试搜检丫鬟私匣时，匣子保持关闭，反馈和文字交代探春的拒绝。原著中探春允许搜查自己的箱柜，又拒绝搜丫鬟私物，关闭的私匣指向后者，相关文字进一步交代其立场。开匣与拒检出现在相似操作中，使人物差异通过反馈显现出来。

5.4.4 探索进度与章节结束

当前规则允许用户完成至少一处关键交互后，通过下一幕结束抄检；五处全部完成时，还会出现一次性的结尾文字。章节结束与完整探索因而对应不同的信息量，用户能够选择停留多久、接触多少院落。

这种安排减少了强制遍历的步骤，也使部分线索可能被遗漏。尤其在人物立场分布于不同地点时，较早离开的观者可能只看到一次开匣。后续需要通过实际体验观察入口和进度提示是否充分，并据此调整自由探索与内容完整性之间的安排。

5.5 双线导航与共享终局

5.5.1 镜面导航

镜面导航以中央图形连接周边章节节点，用户选择节点后查看其进入状态，再决定返回场景或切换另一面。当前、已完成和未解锁等状态使进度能够在同一界面中被辨认，镜面图形则维持正反两线的视觉联系。

中央图形的翻转和章节解锁使导航包含两项操作规则，初次接触时，用户既要发现切换入口，也要区分节点的选中与可进入状态。若状态区别不够清楚，用户可能将选中理解为可以立即进入。这一问题涉及图形表达与操作提示的配合，也影响回看和切换的顺畅程度。

5.5.2 共享雪景

完成《终身误》的指定交互，或在满足条件后结束抄检，都可以解锁雪后大观园。情感线保留主动观园入口，家族线通过下一幕转场进入，两条路径共用同一园景，并以各自的文案承接前面的经历。

此时画面留下环境，前面的人物和事件成为理解雪景的背景。由情感线进入，空园回应情缘失落；由抄检进入，雪景延续园林生活的变化。两线的联系目前主要集中在导航和终局，过程中的相互提示较少，这也限制了用户对整体结构的认识。

5.5.3 宝玉离场与留白

宝玉出家段落以雪中身影为主要观看对象，人物逐渐离场后，原先被占据的空间留下。前面多幕由物件和人物吸引用户操作，结尾则随着内容减少放缓节奏，使离散通过画面变化呈现。

随后的留白延续这一停顿，重看与番外入口提供继续选择。入口的出现时机和醒目程度需要与结尾协调，让用户能够辨认下一步，也为人物离场后的观看保留时间。空景所能承载的感受依赖此前经历，因此终局仍需与前面的情节连贯理解。

5.6 番外人物性情测试

番外以六道情境题和八种人物结果，引导用户从个人选择接近文学人物。题目围绕诗心、知己、才情、离合、本心和变化等内容，结果页延续人物形象及相关意象，使主体之外仍有重新接触角色的入口。

题目和结果之间采用设计化的匹配规则，用于形成文学人物联想，尚无心理测量验证。本文主要考察题目与角色特征的联系，以及结果页如何延续整体视觉。番外的参与语气较为轻松，与主体的悲剧结尾有所差异，独立设置入口可以使用户在完成主体后自行选择。

5.7 实现检查与设计反思

5.7.1 图层与场景状态

场景素材依据显示和操作要求，拆分为背景、人物、前景与独立物件，程序根据操作控制显隐、位置与后续阶段。章节完成和院落探索分别记录，使用户返回时可以接续部分进度；在本地存储不可用的情况下，系统保留本次会话内的状态。

状态处理直接关系到叙述能否顺利展开。文字还在显示时切入下一阶段，或返回园图后误记完成，都可能造成内容衔接错误。项目检查因而涉及中断、返回、重看和重复触发等情况，以核对界面反馈和用户操作是否一致。

5.7.2 检查材料与适用范围

项目保留了桌面、手机横屏和平板视口下的截图及运行记录，内容涉及导航、拖花、抄检和共享雪景。部分材料来自不同修改阶段，使用时需要对照当前代码，确认截图对应的入口与状态。早期居所和春冬场景的材料，可以用于过程回顾，当前流程则以现有实现为准。

移动端材料主要来自浏览器视口和触摸模拟，对实体设备上的阅读、拖动和工具栏变化仍需继续检查。上述记录能够支持局部功能核对，用户理解和情感感受需要另行观察。

5.7.3 设计中仍需解决的问题

情感线与家族线的篇幅差异，使作品较多依靠宝黛经历形成连续情绪，家族线对盛衰的说明则集中于少数节点。冷月段落的预示性质还需要更清楚的衔接，否则容易与事件时间混淆。人物、园图和暗色场景之间的材质差异，以及诗词分页与动态等待叠加后的节奏，也会影响整体观看。

后续整理还包括原著摘句的底本核对和素材制作来源。具有手绘质感的画面，需要结合原稿、生成或绘制文件及修改记录说明其形成过程。将这些材料与最终场景对应起来，能够使文学依据和创作取舍得到更准确的交代。

5.8 本章小结

本章结合场景和流程分析《风月宝鉴》的实现。葬花使物件移动与诗词阅读相连，婚礼通过逐步揭示展开人物关系，抄检利用开匣、倒箱和拒检呈现不同处境，镜面与雪景则连接两条路径。现有实践已经形成这些表达，同时在跨线衔接、视觉一致性和小屏节奏上保留了进一步调整的空间。

第六章 研究结论与展望

6.1 主要研究结论

本文以《风月宝鉴》互动网页为实践对象，围绕《红楼梦》的情节选择、意象呈现和用户操作展开研究。结合理论与案例分析，可以从本次设计中归纳出以下认识。

物件在情节中的作用，为文学意象的视觉呈现提供了具体依据。书、花、玉和私匣分别与共读、惜花、婚姻和搜检相连，观者由物件接触人物经历。意象在不同场景中重复出现时，形态和作用的变化能够延续情绪，例如花由环境中的生机转为被收拾的对象，随后又通过衰残植物引出消逝感。

情节顺序与空间探索适合承担不同的内容。情感线通过逐幕推进积累人物关系，家族线通过园图与院落补充生活环境，两者在导航和终局中汇合。现有双线仍有分量不均和过程联系较少的问题，用户实际接触的路径也会影响其对整体内容的认识。

与情节行为相联系的操作，使观看者能够触发部分叙事变化。落花被移入花囊，衣物由匣中散落，私匣因拒检保持关闭，这些反馈把行为结果呈现在画面中。部分点击主要用于推进播放，另一些操作直接改变物件状态，它们在各自场景中承担不同任务。

作品还显示出图像、文字与操作在时间上的相互影响。诗词阅读使用户停留，重复动作和动态等待又增加体验时长，探索入口则改变信息接触的顺序。后续调整将结合具体场景检视这些环节，重点处理当前内容是否清楚、继续方式是否容易辨认等问题。

6.2 研究局限

本研究主要依据文本、画面和流程展开，尚未通过独立用户研究验证理解与情感效果。案例资料以馆方公开说明为主，相关专著及专题文献仍需进一步精读，原著摘句也需要补足版本核对与引文定位。因此，本文所得主要属于对具体设计实践的分析与归纳。

作品方面，家族线对社会关系的呈现较为有限，两线联系集中于少数节点；不同场景的风格协调、意象段落的时间提示和小屏阅读也有待完善。素材制作与修改记录尚需系统整理，以便更充分地解释最终画面的形成。

6.3 后续研究方向

后续可以邀请原著熟悉程度不同的参与者体验作品，记录他们在路径选择、诗词阅读及抄检中的停留和疑问，再通过访谈了解其对双线、冷月段落和拒检反馈的理解。由此可以区分信息缺失、提示不清与节奏过慢等不同问题，确定修改的具体位置。

实体手机和平板上的检查同样需要补充，重点包括文字辨识、拖动目标、横屏提示及动态等待。同时，将原著摘句、场景图层与修改文件对应整理，有助于保留可追溯的创作过程。作品后续的完善将优先处理影响情节理解和观看连续性的问题，再根据研究结果考虑内容扩展。

参考文献

[1] 赵宪章. 文学图像论[M]. 北京: 商务印书馆, 2022.

[2] 曹雪芹著, 无名氏续. 红楼梦[M]. 程伟元, 高鹗, 整理. 中国艺术研究院红楼梦研究所, 校注. 4版. 北京: 人民文学出版社, 2022.

[3] 胡亚敏. 叙事学[M]. 2版. 武汉: 华中师范大学出版社, 2004.

[4] 罗钢. 叙事学导论[M]. 昆明: 云南人民出版社, 1994.

[5] 申丹, 王丽亚. 西方叙事学：经典与后经典[M]. 北京: 北京大学出版社, 2010.

[6] 龙迪勇. 空间叙事研究[M]. 北京: 生活·读书·新知三联书店, 2014.

[7] 刘思屹, 张志贤. 文化体验视角下数字博物馆的交互叙事研究[J]. 中国博物馆, 2024(5): 96-103.

[8] 刘芳, 吴振新. 文化遗产的数字叙事现象分析及应用建议[J]. 数字图书馆论坛, 2023(11): 46-52. DOI: 10.3772/j.issn.1673-2286.2023.11.006.

[9] MURRAY J H. Hamlet on the Holodeck: The Future of Narrative in Cyberspace[M]. Updated ed. Cambridge, MA: MIT Press, 2017.

[10] JENKINS H. Game design as narrative architecture[C]//WARDRIP-FRUIN N, HARRIGAN P. First Person: New Media as Story, Performance, and Game. Cambridge, MA: MIT Press, 2004: 118-130.

[11] RYAN M L. Narrative as Virtual Reality 2: Revisiting Immersion and Interactivity in Literature and Electronic Media[M]. Baltimore: Johns Hopkins University Press, 2015.

[12] 旅顺博物馆. 画说红楼——旅顺博物馆藏《红楼梦画册》展[EB/OL]. [2026-10-24]. https://lvshunmuseum.cn/mobile/service_Detail.aspx?ID=269.

[13] 故宫博物院. 让收藏在故宫里的文物“活起来”——《韩熙载夜宴图》App正式上线[EB/OL]. (2015-01-26)[2026-10-24]. https://www.dpm.org.cn/classify_detail/180639.html.

[14] 故宫博物院. 关于预约参观《清明上河图3.0》高科技互动艺术展演的公告[EB/OL]. (2018-05-25)[2026-10-24]. https://www.dpm.org.cn/classify_detail/246705.html.

附录 场景与交互对应表