设计流程 / Context
策划核心:二元路径解构
S (Situation): 博物馆展品信息过载且叙事单一,用户难以产生深层链接。
T (Task): 将复杂的 23 道工序转化为可感知、可参与的数字系统。
A (Action): 将工序拆解为生产侧(理性、钻研工艺原理)与生活侧(感性、追求情感共鸣),通过两种逻辑的设计缓解认知负担。
交互闭环策划
入画注册
建立初始情感链接,进入数字化叙事
身份智能判定
基于交互测试自动分发生产/生活路径
AR 识别判定
实物扫描触发动态孪生影像
数字资产生成
游览数据转化为个性化“成衣”数字档案
信息架构 (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 核心业务模块与双轨叙事切换逻辑
用户流程 (User Flow)
1. AI 智能分流
减少初次进入的认知负荷,将 23 道复杂工序根据用户画像简化为个性化路线。
2. 沉浸式任务闭环
以 AR 扫描作为物理与数字的桥梁,支持跳过机制以确保游览效率与体验灵活度。
3. 数据资产沉淀
基于交互数据的唯一性,将浏览过程转化为可保存的数字“成衣卡片”情感资产。
低保真逻辑 (Wireframes)
01_COVER_FLOW
02_QUESTION_ACTION
03_IDENTITY_PICK
04_PROCESS_VIEW
05_INTERACTIVE_SCAN
06_AUDIO_GUIDE
清晰的视觉反馈
针对博物馆场景,按键采用高对比度设计,确保在各种光线下均清晰可见。
短促的交互路径
遵循“三步触达”原则,减少层级深度,让用户迅速从现实切入数字解析。
零犹豫决策设计
减少并列选择,通过强引导代替用户做主,降低停留思考的认知成本。
严格遵循 UI 规范
对齐 8px 栅格系统,所有触控区域均符合主流移动端设计标准与人体工学。
视觉语言 (Visual Design)
我们将《耕织图》原画的古典线条与移动端毛玻璃 UI 规范相结合。提取“朱砂红”作为关键操作引导色,通过留白与宣纸质感建立起具有东方意蕴的数字化空间。
字体标准 / Typography
交互组件展示 / Components
Buttons / 确认按钮
Status Toggle / 状态切换
Cards / 身份选择
生活侧·叙事者
解构古画中的生活切片,感悟生产背后的社会情感。
高保真展示 (Hi-Fi Display)
01_Cover
02_Selection
03_Survey
04_Interaction_A
05_Interaction_B
06_Process_2
07_Asset
色彩一致性
严格遵循古籍色彩规范,建立生产理性与生活感性的二元功能分级体系。
古画沉浸感
利用宣纸纹理与平滑转场,营造“翻阅古籍、行走画间”的诗意数字化体验。
数字化重构
将传统平面美学与现代 UI 的毛玻璃、微阴影技术融合,提升信息传递效率。
情感化叙事
将枯燥的工序拆解为可感知的交互单元,建立用户与历史文化的深度情感共鸣。
项目展示视频
本视频详细展示了《耕织图》智慧博物馆从“入画注册”到“数字资产生成”的全过程闭环。通过 23 个工序节点的数字化解构,实现了多模态的深度沉浸体验。