Museum Interaction Design

《耕织图》
智慧博物馆

基于 23 道农耕与蚕织工艺的数字化转译,通过身份智能判定系统,为用户打造沉浸式的中国传统生产美学体验。

Digital Twin UX Portfolio

设计背景 / Background

《耕织图》是记录中国古代农业技术的宝库,但其静态形式难以吸引年轻一代观众。我们需要一种新型的交互媒介。

核心痛点 / Painpoints

知识门槛高(术语晦涩)、参与感弱(单纯看图)、视角单一(缺乏现代关联)。

设计目标 / Objectives

通过“身份角色化”降低准入门槛,利用“多模态交互”增强知识趣味性,建立个人情感链接。

00

设计流程 / Context

策划核心:二元路径解构

S (Situation): 博物馆展品信息过载且叙事单一,用户难以产生深层链接。

T (Task): 将复杂的 23 道工序转化为可感知、可参与的数字系统。

A (Action): 将工序拆解为生产侧(理性、钻研工艺原理)与生活侧(感性、追求情感共鸣),通过两种逻辑的设计缓解认知负担。

交互闭环策划

01

入画注册

建立初始情感链接,进入数字化叙事

02

身份智能判定

基于交互测试自动分发生产/生活路径

03

AR 识别判定

实物扫描触发动态孪生影像

04

数字资产生成

游览数据转化为个性化“成衣”数字档案

01

信息架构 (Information Architecture)

graph TD
    Root((耕织图 APP))
    Home[01 主页模块 Home]
    Gallery[02 展厅模块 Gallery]
    Collection[03 物品栏模块 Collection]
    Profile[04 个人主页 Profile]
    Root --> Home
    Root --> Gallery
    Root --> Collection
    Root --> Profile
    Home --> H_Brand[品牌与导览入口]
    Home --> H_Logic[核心逻辑层]
    H_Logic --> H_Reg[身份注册 Action]
    H_Logic --> H_AI[智能判定节点 AI]
    H_AI --> H_Path[路径推荐]
    H_Path --> H_Choose[自主选择]
    H_Choose --> H_Prod[生产侧路径]
    H_Choose --> H_Life[生活侧路径]
    Gallery --> G_Map[23步地图索引层]
    Gallery --> G_Node[核心体验节点:织]
    G_Node --> G_AR[AR 扫描探索 - 核心交互]
    G_AR --> G_AR1[识别判定]
    G_AR --> G_AR2[成果解锁]
    G_Node --> G_Multi[多模态内容层]
    G_Multi --> G_Audio[音频讲解]
    G_Multi --> G_Game[任务与游戏 - 含跳过机制]
    G_Node --> G_Switch[双轨叙事切换器 Perspective Switch]
    G_Switch --> G_Comp[补齐另一视角内容]
    G_Comp --> G_QA[简易卡片问答交互]
    G_QA --> G_Return{逻辑回归:返回生产侧}
    Collection --> C_StateA[状态A: 未游览态]
    C_StateA --> C_Guide[引导提示 - 空状态设计]
    Collection --> C_StateB[状态B: 已收集态]
    C_StateB --> C_Archive[工序节点存档 Step Items]
    C_StateB --> C_Output[核心产出: 专属成衣卡片]
    C_Output --> C_Data[基于多维交互数据生成]
    C_Output --> C_Share[下载与分享组件]
    Profile --> P_Archive[成长档案与勋章]
    Profile --> P_History[游览历史记录]
    style Root fill:#B22D24,stroke:#8C2721,color:#fff,stroke-width:3px,font-size:20px;
    classDef mainNode fill:#F9F2E7,stroke:#B22D24,color:#2A2A2A,font-weight:bold,stroke-width:2px,font-size:18px;
    class Home,Gallery,Collection,Profile mainNode;
    classDef subNode fill:#FFF,stroke:#B22D24,color:#2A2A2A,font-size:15px,stroke-width:2px;
    class H_Brand,H_Logic,G_Map,G_Node,C_StateA,C_StateB,P_Archive,P_History,H_Choose subNode;
    classDef leafNode fill:#FDFBF7,stroke:#A89060,color:#2A2A2A,font-size:13px,stroke-dasharray: 5 5;
    class H_Reg,H_AI,H_Path,H_Prod,H_Life,G_AR,G_AR1,G_AR2,G_Multi,G_Audio,G_Game,G_Switch,G_Comp,C_Guide,C_Archive,C_Output,C_Data,C_Share leafNode;
    classDef qaNode fill:#FFF5F5,stroke:#B22D24,color:#B22D24,font-size:14px,font-weight:bold,stroke-width:2px;
    class G_QA qaNode;
    classDef returnNode fill:#F0FFF4,stroke:#38A169,color:#2F855A,font-size:14px,font-weight:bold,stroke-width:2px;
    class G_Return returnNode;
    linkStyle default stroke:#B22D24,stroke-width:1.5px;
                

系统全链路架构图:涵盖 01-04 核心业务模块与双轨叙事切换逻辑

02

用户流程 (User Flow)

开始:身份注册 决策点 1 身份智能判定 (AI) 自主选择 系统推荐 B. 用户自主选择 A. 接受系统推荐 确定游览方向 (生产侧 / 生活侧) 进入 23 步骤交互地图 (定位: 第17步-织) 决策点 2 交互参与决策 跳过任务 系统引导二次挽留 参与体验 核心功能: AR 扫描探索 物理识别 -> 逻辑判定 -> 解锁成果 决策点 3 视角切换 (双叙事) 点击切换 浏览另一侧视角内容 生成专属成衣卡片 决策点 4 下载保存 直接返回 【我的物品】板块

1. AI 智能分流

减少初次进入的认知负荷,将 23 道复杂工序根据用户画像简化为个性化路线。

2. 沉浸式任务闭环

以 AR 扫描作为物理与数字的桥梁,支持跳过机制以确保游览效率与体验灵活度。

3. 数据资产沉淀

基于交互数据的唯一性,将浏览过程转化为可保存的数字“成衣卡片”情感资产。

03

低保真逻辑 (Wireframes)

首页

01_COVER_FLOW

问题回答

02_QUESTION_ACTION

界面选择

03_IDENTITY_PICK

工序界面

04_PROCESS_VIEW

工序交互

05_INTERACTIVE_SCAN

工序讲解

06_AUDIO_GUIDE

清晰的视觉反馈

针对博物馆场景,按键采用高对比度设计,确保在各种光线下均清晰可见。

短促的交互路径

遵循“三步触达”原则,减少层级深度,让用户迅速从现实切入数字解析。

零犹豫决策设计

减少并列选择,通过强引导代替用户做主,降低停留思考的认知成本。

严格遵循 UI 规范

对齐 8px 栅格系统,所有触控区域均符合主流移动端设计标准与人体工学。

04

视觉语言 (Visual Design)

我们将《耕织图》原画的古典线条与移动端毛玻璃 UI 规范相结合。提取“朱砂红”作为关键操作引导色,通过留白与宣纸质感建立起具有东方意蕴的数字化空间。

朱砂 #AC2425
靛蓝 #0B437C
宣纸 #F8F3E7
琥珀 #DACFB5
金褐 #C3B38B

字体标准 / Typography

Noto Serif SC / Medium / 26px 用于主标题、画卷意境词
Noto Serif SC / Medium / 20px 用于重要交互按键
Noto Sans SC / Regular / 14px 用于正文、导航辅助说明

交互组件展示 / Components

Buttons / 确认按钮

Status Toggle / 状态切换

生产侧
生活侧
生产侧
生活侧

Cards / 身份选择

生活侧·叙事者

解构古画中的生活切片,感悟生产背后的社会情感。

#体验 #生活逻辑 #情感
05

高保真展示 (Hi-Fi Display)

11首页

01_Cover

12界面选择

02_Selection

13问题回答

03_Survey

14工序界面 交互

04_Interaction_A

15工序界面 交互

05_Interaction_B

16工序界面2

06_Process_2

10工序界面

07_Asset

色彩一致性

严格遵循古籍色彩规范,建立生产理性与生活感性的二元功能分级体系。

古画沉浸感

利用宣纸纹理与平滑转场,营造“翻阅古籍、行走画间”的诗意数字化体验。

数字化重构

将传统平面美学与现代 UI 的毛玻璃、微阴影技术融合,提升信息传递效率。

情感化叙事

将枯燥的工序拆解为可感知的交互单元,建立用户与历史文化的深度情感共鸣。

PROJECT SHOWCASE

项目展示视频

本视频详细展示了《耕织图》智慧博物馆从“入画注册”到“数字资产生成”的全过程闭环。通过 23 个工序节点的数字化解构,实现了多模态的深度沉浸体验。

100% Closed Loop
4K Resolution