创意提案|沉浸式古籍文化学习 Web 应用

残云阁

以手拂云,以心补卷,让古籍从“被阅读”变成“被唤醒”。

《残云阁》是一座云端古籍修复空间。它不把传统文化做成目录、搜索框和长篇阅读,而是让用户通过拖拽残页、擦去云雾、展开卷轴、钤印入藏,在一个低门槛却高仪式感的流程中自然进入古籍世界。


云深不知处
残字待修人
经史子集
散入烟霞
拨云见字
补卷成书
沉睡千年的文字,于指尖重见天光。
01 / POSITION

项目定位

面向全年龄段学生与古文化爱好者的沉浸式古籍修复研习馆,以 PC 端为核心体验场景,同时兼容移动端触控。

不是阅读器

传统古籍产品强调目录、检索和全文展示。《残云阁》强调“修复动作”,让学习发生在手部参与之后。

不是知识闯关

产品不依赖积分、签到、排行榜,而以“补全残卷”“落印入藏”的仪式感建立长期使用动机。

不是单一人群工具

一套交互覆盖启蒙、进阶、专业三级内容,让幼儿、小学生、中高学生、大学生及研究者都能进入同一座阁。

一句话定义:用古籍修复的沉浸交互,重新组织传统文化学习。
02 / CREATIVE CORE

核心创意

把“看古籍”变成“修古籍”。宣纸、残云、碎页、卷轴既是视觉语言,也是交互机制。

创意命题

古籍学习的难点不只是内容深奥,更是入口生硬。用户常常先面对密集文本、陌生字词和学术距离。《残云阁》把入口改成可感知、可完成的动作:拼残、拂云、展卷、入藏。

体验转译

  • 拖拽残页,象征补全残卷。
  • 擦去云雾,象征拨云见字。
  • 卷轴展开,象征典籍苏醒。
  • 朱砂钤印,象征修复完成。
  • 藏入书阁,象征个人知识资产沉淀。
03 / WORLD

世界观与空间架构

残云阁是一座悬浮于云海之上的千年藏阁。因岁月侵蚀,阁中典籍散为残页,被烟云遮掩。进入者皆为修书人。

拂云修复台

默认首页与核心交互区。用户打开即进入一张俯视宣纸修复台,残页在云雾中轻微浮动。拼接、擦拭、展卷、研习都在同一空间内完成,尽量减少传统 UI 打断。

藏云藏书阁

个人收藏与留存空间。已修复典籍以书脊形式归入“经、史、子、集”四层博古架。随着修复数量增加,空阁逐步被填满,形成可见的学习积累。

04 / JOURNEY

两分钟完整体验闭环

全程无注册、无登录、无前置弹窗。每一卷都可以在短时间内完成从修复到研习再到入藏的闭环。

STEP 01入阁

页面加载后直接进入修复台,云雾中散落当前难度残页。

STEP 02选级

顶部淡墨按钮切换启蒙、进阶、专业,内容即时刷新。

STEP 03拼残

拖动残页至目标区域,靠近后自动吸附,补成卷轴底本。

STEP 04拂云

长按擦去墨色云雾,隐藏文字逐步显现。

STEP 05展卷

完成擦拭后触发立体卷轴展开,并落下一枚朱砂印。

STEP 06研习

切换原文、注释、翻译、故事四种阅读模式。

STEP 07入藏

卷轴收起归入藏书阁,成为用户私人藏书。

05 / CONTENT

全年龄段内容分层

采用“统一交互逻辑 + 三级内容深度”。操作不变,只调整文本、碎片数量、云雾厚度和学习配套。

启蒙级

让孩子先喜欢靠近

适配幼儿园与小学生。内容以唐诗绝句、成语典故、神话故事、蒙学选段为主。残页 3-5 片,配拼音、大字、童趣翻译和大幅水墨插画。

关键词:轻、明快、低挫败。

进阶级

让课内知识变得可触摸

适配初中生与高中生。内容围绕课标文言篇目、宋词元曲、《史记》《战国策》等经典选段。残页 6-8 片,强化字词注释、直译意译和背景补充。

关键词:文言、考点、理解。

专业级

让研究者看到版本深度

适配大学生、博士与古文化爱好者。内容覆盖诸子百家、二十四史、善本残篇、地方志与游记。残页 8-12 片,支持注本切换、版本源流和文献索引。

关键词:善本、注疏、文献。

原文模式

纯古籍原文呈现,最大化保留古卷质感。

注释模式

重点字词标注释义,悬浮或点击查看详细注释。

翻译模式

卷轴左右分栏,左侧原文,右侧白话翻译。

故事模式

补充历史典故、文人轶事与文化背景。

06 / DESIGN

视觉与听觉设计

以“宣纸为骨、残云为韵、水墨为形”为设计原则,避免廉价网红国风,建立沉静、雅致、有修复感的书卷气。

材质系统

  • 底层:半生熟宣纸纹理,带纤维、帘纹与纸浆颗粒。
  • 中层:岁月风化层,包含泛黄、毛边、虫蛀斑点。
  • 顶层:柔和天光漫射,中心略亮、边缘稍暗。

动效原则

  • 云雾极慢漂浮,每秒移动不超过 5px。
  • 残页轻微浮动,悬停产生细小倾斜。
  • 擦拭边缘羽化,模拟云雾散开。
  • 切换空间采用卷轴收起与展开。
宣纸白#F5EFE0
松烟墨#2C2C2C
花青#4A6FA5
赭石#A0522D
朱砂印#B22222
云雾灰rgba(80,80,80,0.15)
07 / VALUE

参赛亮点与长期价值

《残云阁》的价值不只是一个漂亮界面,而是一种可扩展的传统文化学习范式。

交互创新清晰

用“修复”替代“阅读入口”,让用户先通过身体动作建立参与感,再自然进入知识理解。

内容扩展稳定

经史子集分类、三级难度、四种学习模式构成可长期扩充的内容框架。

技术落地可控

核心效果均可由 Vue、Canvas、CSS 动效和本地存储实现,MVP 范围明确,不依赖重型 3D 引擎。

最终愿景:让每一次学习都像亲手修复一卷古籍,让每一次完成都成为私人藏书阁中的一枚印记。

残云未散,典籍将醒。

《残云阁》以审美治愈感降低传统文化学习门槛,以修复仪式感增强停留与复访,以工程化架构支撑长期内容扩展。它既是一个 Web 应用,也是一座可持续生长的云端书斋。