CraftingIllusionsDigital

Gravita 引力笔记
AI 辅助学习与知识管理
把知识记下来，
也把关系看明白。

为课程学习和自主复习设计的网页原型。
将学习材料、知识关系与复习任务连接起来。

产品交互 · 信息可视化 · 品牌与 UI · 动效 · 组件系统
概念设计 / 可运行原型 / 2026
PRODUCT DESIGN CASE STUDY
GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
01 / 22

GRAVITA
产品价值
从零散笔记，到清晰的知识网络

看清知识结构、整理零散笔记、找到复习重点。

01 / 知识很多，结构不清
看见整体

在图谱中查看主题、联系和掌握情况。

02 / 笔记零散，整理费力
协同整理

AI 辅助整理，学习者核对、修改和追问。

03 / 复习分散，缺少重点
聚焦复习

根据掌握情况，优先回顾薄弱知识。

原型使用演示数据；实际学习效果有待验证。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
02 / 22

GRAVITA
设计范围
设计全览：从交互到视觉系统
01
信息可视化
看清知识结构

节点状态 / 主题布局 / 分层浏览

查看 05—08 页
02
原型与交互
串联学习任务

页面流程 / AI 分工 / 操作反馈

查看 04、09—14 页
03
品牌视觉
建立品牌识别

主标志 / 辅助图形 / 助手图标

查看 15—16 页
04
UI 设计
明确页面主次

五个核心页面 / 层级 / 深色界面

查看 09—14 页
05
动画设计
让操作有反馈

待机 / 旋转 / 开合 / 减少动态

查看 17 页
06
规范与组件
保持界面一致

色彩 / 字体 / 间距 / 共享组件

查看 18—20 页
GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
03 / 22

GRAVITA
原型架构
学习流程：记录、整理、理解与复习
学习材料
文本 · 图片 · 课件 · 录音
知识空间
01
记录

保存原始内容

02
核对

检查整理建议

03
探索

定位知识关系

04
理解

阅读定义与来源

05
复习

回顾薄弱知识

回到知识空间
继续补充、重新理解
UI 01
严谨的信息骨架

固定导航、清晰分栏与字阶，让学习内容保持主次。

UI 02
克制的空间质感

烟黑层级与柔和边缘光区分浮层，让正文保持清晰。

UI 03
年轻的局部亮色

面向学生，用少量荧光青与品牌橙点亮关键操作。

结构说明

五个核心页面，围绕 AVL 知识点演示主要流程；AI 整理面板可在编辑页内展开。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
04 / 22

GRAVITA
信息可视化 / 概览
知识图谱：先看全貌，再找重点
01
浏览主题

相近内容集中展示，打开即可查看整体分布。

图谱占据主工作区，导航退到边缘；先建立知识空间，再提供局部操作。

02
识别重点

节点大小、颜色与形状区分知识特征。

以暗底托出节点和细线；聚焦时提亮关联，把视觉中心交给当前知识。

03
查找知识

筛选掌握状态，悬停查看名称，点击查看关联。

筛选、指标与输入采用悬浮层，保留后方关系的连续性。

方案取舍

采用「固定导航＋自由图谱」，不把关系拆成等权卡片；强调网络结构，同时用筛选控制密度。

398 节点 1,568 关系图谱演示数据
GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
05 / 22

GRAVITA
信息可视化 / 编码
节点与连线，各自表达什么
已掌握

青色 · 圆点与细环

学习中

银灰 · 圆点

薄弱

橙色 · 圆点与缺口环

新增

黄色 · 菱形

大小 → 关联数量

关联越多，节点越大。

粗细 → 联系强弱

强联系更醒目，次要连线更轻。

亮度 → 活跃程度

活跃度与掌握状态分别呈现。

节点形态放大示意；悬停可查看名称和状态。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
06 / 22

GRAVITA
信息可视化 / 布局
按知识主题布局，位置保持稳定
基础结构
平衡与调整
二叉搜索树
AVL 平衡因子
红黑树
遍历方式
旋转操作
堆 / Heap
01
同类知识靠近

相关知识聚集在同一区域。

02
跨主题保留联系

连线呈现不同主题之间的关联。

03
状态改变，位置不变

复习后仍能在原来的位置找到知识点。

布局原则示意 / 非完整节点数据

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
07 / 22

GRAVITA
信息可视化 / 探索
分层浏览：从图谱到知识详情
01
概览

只保留完整图谱，观察主题分布。

02
聚焦

放大当前知识网络，识别直接与间接关联。

03
节点详情浮层

再次点击聚焦节点，原位查看摘要与掌握状态。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
08 / 22

GRAVITA
交互设计 / 记录
笔记编辑：专注记录，按需整理
01
书写区优先

正文集中展示，常用工具置于底部。

大面积连续书写区配合弱分隔，减少卡片边界对文本阅读的切割。

02
助手按需展开

默认只显示悬浮球，不遮挡正文。

球体集中承载品牌与动效，编辑工具保持平静，让辅助入口可见但不抢正文。

03
留在当前页面

边看笔记，边检查整理结果。

整理面板原位展开，用同一套烟灰材质连接书写与审阅。

方案取舍

把 AI 作为编辑中的侧向辅助，而非替换整页的对话屏；保留笔记作为视觉主体。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
09 / 22

GRAVITA
交互设计 / 人机分工
AI 负责辅助，学习者负责确认
学习者
记录材料
核对结果
修改并确认
理解与复习
AI 助手
识别材料
提取内容
整理知识
生成建议
发现联系
供人核对
辅助回顾
提示重点
不打断记录

整理结果按需展开

由学习者确认

生成建议可以修改

保留资料来源

随时返回原文核对

人机分工设计示意。当前 AI 整理与回复为模拟内容，未接入真实模型。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
10 / 22

GRAVITA
交互设计 / 整理
AI 整理：结果可编辑，对话可继续

直接修改，
也能继续追问。

01
直接编辑

点击摘要、知识点或易错点即可修改。

02
继续追问

用自己的话说明需要怎样调整。

03
原位核对

整理面板与笔记留在同一页面。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
11 / 22

GRAVITA
交互设计 / 核对
资料核对：对照来源检查 AI 结果
01
左侧核对材料

原始资料与来源列表保持可见，便于检查生成内容。

来源与建议并列，利用左右位置关系表达「依据—结果」，方便视线往返对照。

02
右侧审阅建议

分别检查摘要、知识点和 AI 解析置信度。

通过标题、间距和分隔线组织内容，避免每段都套一层玻璃卡片。

03
确认后再返回

审阅后返回图谱；关系数据的完整更新尚未实现。

确认动作与普通编辑工具拉开视觉权重，让流程的决定点更明确。

方案取舍

选择可对照的双栏审阅，不把生成结果当作默认正确的答案；保留人工判断的位置。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
12 / 22

GRAVITA
界面设计 / 理解
知识详情：定义、关系与来源
01
先理解

定义、掌握状态、核心要点。

用字号、字重与段间距组织阅读；正文采用 15px / 1.8 行距，避免只靠颜色分层。

02
再连接

相关图谱延续主页位置关系。

主栏承载解释，侧栏保留关联，先读懂一个知识点，再展开网络。

03
可追溯

原始材料与学习历史持续可见。

来源与历史降为辅助层级但不隐藏；窄窗口中移到正文之后。

方案取舍

采用「正文主栏＋关联侧栏」，而非均匀卡片网格，让长内容拥有稳定的阅读路径。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
13 / 22

GRAVITA
界面设计 / 复习
复习中心：优先回顾薄弱知识
01
优先级明确

优先列出薄弱或较久未复习的知识。

用醒目的数量与清晰的列表层级建立次序，辅助数据退后，不增加无依据的小图表。

02
呼应品牌

用连接图形延续知识图谱的视觉风格。

连接图形以低亮度置于标题背后，保留空间感，同时让数量和文案优先。

03
状态保持一致

复习列表与详情页使用相同的掌握状态。

沿用颜色、形状和文字标签，避免进入复习页后重新学习一套状态语言。

方案取舍

用任务列表承接复习，不重复铺开复杂图谱；品牌感来自图形与材质，而非新增装饰。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
14 / 22

GRAVITA
品牌视觉 / 标志
品牌标志：用节点与连线表达连接

CONNECT · ORGANIZE · UNDERSTAND

BRAND CONCEPT

节点代表知识，
连线表达关联。

开放轮廓寓意知识持续积累。
橙色节点形成鲜明的识别点。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
15 / 22

GRAVITA
品牌视觉 / 应用
品牌应用：统一风格，区分用途
主标志

导航识别 · 保持完整

独立展示连接图形，突出开放轮廓与橙色识别点。

辅助图形

复习与输入场景 · 低干扰

将节点关系延展为背景，低亮度衬托文字和数据。

助手图标

延续标志形态 · 识别 AI 助手

球体区分可交互入口，内部连接图形延续品牌语言。

延续标志形态
→
适应不同场景
→
各有用途，风格统一
GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
16 / 22

GRAVITA
动效设计 / 助手
助手动效：待机轻缓，操作有反馈
助手动效 / 状态与节奏

外框保持稳定，
内部回应操作。

18s
待机缓慢旋转

只转动内部图案，外框保持静止。

900ms
悬停响应一圈

旋转一圈，配合开合与短暂光效。

稳定的外轮廓，配合内部图案旋转与短暂光效。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
17 / 22

GRAVITA
视觉规范 / 色彩
色彩规范：突出重点，保留层次
选色依据

学习场景深色中性层级承载笔记与知识关系，保持严谨、清晰的信息结构。

目标人群面向年轻学生，以少量荧光亮色增加活力，避免界面过于沉闷。

操作识别亮色集中用于记录、保存与知识状态，让关键操作更容易被发现。

背景
#050505
内容
#121212
浮层
#171717
控件
#1C1C1C

大面积中性色
衬托正文与界面层次

荧光青#57F1E3

主要操作 / 直接关联

记录学习内容
品牌橙#FF5B2B

品牌识别 / 保存操作

保存
提示黄#F0E753

新增状态 / 少量提醒

新增
使用规则
亮色只强调关键动作
色彩搭配文字与形状
状态语义保持一致

色值来自当前产品；橙色在品牌与薄弱状态中结合文案区分，黄色不承担正文阅读。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
18 / 22

GRAVITA
组件系统 / 复用
组件库：类型、状态与使用规范
GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
19 / 22

GRAVITA
视觉规范 / 基础
界面规范：字体、行距与圆角
01 / 字体与字号
苹方
中文 · PingFang SC
Aa 0123
西文 · Inter
AVL 平衡因子
25px / 520 · 页面标题
知识点摘要
16px / 550 · 内容小标题
理解左右子树的高度差。
15px · 详情正文
AI 摘要与知识关系
14px · 紧凑内容
原始资料 · 学习记录 · 操作说明
12–13px · 辅助文字
02 / 行距与阅读
正文 / 1.8 倍行距

平衡因子用于衡量左右子树的高度差。
适当的行距，让定义与要点更容易阅读。

15px 字号 → 27px 行高
1.5
内容小标题
1.75
AI 整理正文
1.6
辅助说明

中文优先使用系统黑体；Windows 使用微软雅黑，其他环境回退无衬线字体。

03 / 圆角与组件
6px
关系条目
13px
操作按钮
18px
内容卡片
20px
助手面板

小控件轮廓紧凑，内容容器更舒展；悬浮球采用正圆。

示例放大展示；数值对应当前产品界面的实际样式。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
20 / 22

GRAVITA
AI 辅助 / 实现
AI 辅助流程：从风格探索到交互原型

工具链：ImageGen 视觉探索 → Figma 设计决策 → Codex 前端实现 → Chrome 交互验证。

01
ImageGen · 视觉方向
生成候选风格

输入图谱密度、光感与材质约束，比较多种方向。

02
Figma · 设计决策
确定界面规范

由我调整高亮色、尺寸、层级与间距，形成高保真稿。

03
Codex · 前端实现
搭建页面与组件

将设计稿转成可运行页面，再按反馈修改代码与样式。

04
Chrome · 交互验证
检查并持续迭代

验证跳转、状态、动效与不同窗口尺寸，发现问题后回到设计。

保留空间感

采用暗底、真实节点与局部光感；不引入行星或装饰轨道。

收敛材质表现

保留烟灰表面与柔和上缘光；弱化大面积蓝紫光和强斜向反射。

明确操作层级

内容与工具以中性色为主，亮色集中在关键操作与知识状态。

发现问题 → 调整设计 → 再次检查
持续迭代
设计师：方向、取舍、细节与验收
AI：视觉探索、代码与修改辅助

首组为前期生图原稿，后续为当前网页。取舍依据：烟黑材质参考与项目迭代记录；非用户测试结论。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
21 / 22

GRAVITA
交付范围
交付总览：品牌、界面、组件与原型
5
核心页面
图谱 · 编辑 · 核对 · 详情 · 复习
6
设计模块
交互 · 可视化 · 品牌 · UI · 动效 · 规范
1
可运行原型
可在浏览器中操作体验
01
品牌资产

标志 · 辅助图形 · 助手图标

查看展示
02
知识可视化

节点状态 · 主题布局 · 关系层级

查看展示
03
页面与交互

五个核心页面 · AI 整理面板

查看展示
04
视觉规范

色彩 · 字号 · 间距 · 材质

查看展示
05
组件库

按钮 · 输入 · 工具栏 · 面板

查看展示
06
助手动效

待机旋转 · 操作反馈 · 减少动态

查看展示

AI 服务接入、真实资料解析与学习效果验证仍待完成。

GRAVITA / KNOWLEDGE IN MOTION
产品与价值 / 交互与视觉 / 系统与交付
22 / 22

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
UI / VISUAL DESIGN CASE STUDY
云间梦境
Cloud Reverie

用 AI 辅助创作，
设计一段轻松的独处时光。

视觉探索
UI 规范
IP 动效
我的工作

原型与交互 · UI 与视觉 · AI 协作与精修

声音陪伴概念项目 · 为聆听与放空设计

云间梦境 · 设计作品集
项目概览
01 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
02 / 工作范围
从风格探索到可展示的界面

我定义方向、交互与规范，借助 AI 制作素材和网页，再逐项校准。

首页
发现
01
原型与交互

页面结构 · 操作路径 · 状态反馈

查看对应章节
02
UI 与视觉

风格探索 · 规范制定 · 组件整理

查看对应章节
03
AI 与精修

提示词约束 · 产出筛选 · 参数校准

查看对应章节
05
场景素材
03
内容布局
08
组件类别
05
动作探索
03
已接入角色状态

视觉资产：5 组场景　·　界面规范：8 类控件　·　动效：5 种探索 / 3 种已接入状态

云间梦境 · 设计作品集
工作范围
02 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
03 / 原型与交互
从聆听到探索，播放状态保持连续

将页面结构、核心路径与操作反馈一起确定。

01
首页聆听

选择场景，开始播放

02
进入发现

保留当前曲目与状态

03
切换内容

探索声音与轻活动

04
回到首页

继续控制当前播放

播放状态连续

首页 ↔ 迷你播放器

收藏路径闭环

场景 → 我的小岛

设置随时恢复

默认 → 自选 → 恢复

四个真实页面状态直接并列，去除设备外框；原型与交互由我定义，Codex 辅助实现。

云间梦境 · 设计作品集
原型与交互
03 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
04 / AI 创作流程
从视觉方向到可运行网页

完整呈现输入、生成、设计决策、实现与验证。

01 / 结构与布局
依据手绘原稿重绘
确定信息结构与控件位置

先梳理首页与发现页的信息层级，确定角色、播放进度和操作控件的位置。

02 / 生成方向
Image Gen
产生视觉候选

保持已确定的布局，探索柔紫、淡粉、乳白与冰蓝的配色及材质。

03 / 设计决策
Figma
筛选并精修规范

我确定按钮、字号、间距、描边和状态，形成可实现的高保真稿。

04 / 实现与验证
Codex + 浏览器
完成可运行网页

按规范实现页面，再逐项检查对齐、播放状态、导航与细节。

完整流程
确定信息结构与控件位置
AI 生成视觉候选
人工筛选与精修
代码实现与浏览器验证

AI 负责扩大候选与辅助实现；信息结构、控件布局、视觉取舍、交互状态和最终验收由我完成。

云间梦境 · 设计作品集
AI 创作流程
04 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
05 / 风格探索
从配色探索到视觉收敛

保留信息结构，逐步校准配色、角色与材质。

01
信息结构
→
02
珠光配色
→
03
角色与层次
→
04
场景与控件
→
05
视觉收敛
→
最终取舍
柔紫珠光 · 轻盈陪伴

再进入 Figma 校准字号、间距与状态。

提示词怎样推动优化
先锁定结构，
每轮只修改明确变量。
01　分清参考图的用途

手绘稿只规定信息位置；风格图只规定配色与材质，不导入它的布局和功能。

02　写清必须保留的内容

保持两屏比例、角色大小与位置、文字层级、波形和播放控件，不新增界面元素。

03　把修改范围说具体

保留冰蓝底色，向柔紫、浅粉和乳白调整；角色改为半透明珠光，避免不透明蓝色塑料感。

04　发现偏差 → 定点修正

屏幕比例偏宽 → 单独校正比例；
材质偏离 → 只改配色与角色质感。

依据保存的两轮生成提示词提炼，非逐字引用。五张图均为历史生成稿，点击可查看原图。

云间梦境 · 设计作品集
风格探索
05 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
06 / 素材体系
五组场景，独立角色与网页控件

生成素材分别管理，再按界面结构组合。

01
雾光海岸
02
听雨小屋
03
晚风森林
04
月光云湾
05
浮光花庭
角色独立

同一形象，适配不同场景

波形独立

沿用原型波形、光点与时间

控件独立

尺寸、颜色与状态可统一调整

云间梦境 · 设计作品集
素材体系
06 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
07 / 首页视觉
角色居中，操作分层

环境信息 → 角色陪伴 → 场景进度 → 播放控制。

01
轻量环境信息

天气文字顶部对齐，弱化背景装饰

02
角色成为视觉中心

柔和材质与留白，突出陪伴感

03
完整播放组件

波形 / 已播放进度 / 时间 / 播放控制

08:24
30:00

可拖动进度、切换播放状态 · 无音频演示

云间梦境 · 设计作品集
首页视觉
07 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
08 / 发现页视觉
固定导航与播放器，切换内容布局

场景、声音与轻活动共用同一套视觉规则。

秘境漫游

场景大图 · 导航与底部播放保持一致

声音拾集

声音网格 · 导航与底部播放保持一致

片刻放空

轻活动列表 · 导航与底部播放保持一致

云间梦境 · 设计作品集
发现页视觉
08 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
09 / 色彩与材质
由场景提取色彩，用语义规范应用

视觉来源 → 设计判断 → 语义角色 → 使用约束。

视觉来源

天空、水面、云朵场景与珠光角色，提取柔紫、粉白和冷蓝的色彩关系。

设计判断

围绕聆听与放空场景，弱化强对比装饰；深紫文字保障信息层级，珠光强调播放主控。

证据边界

参数来自当前网页与历史稿；舒适感是设计目标，尚未通过正式用户测试验证。

语义角色 / 色值
应用与约束
核心文字
text / primary · #36325E

场景标题与正文；浅底承载阅读

辅助信息
text / secondary · #6E678C

说明与导航图标；避免叠在复杂图像上

选中与进度
accent / selected · #9C91D0

与描边、图标共同表达状态，不用于小正文

基础底色
surface / base · #EEE6EE

衔接天空场景，承托内容层

材质高光
material / highlight · #FFFFFF

图标和轮廓；必须落在有明暗层次的控件上

主控材质

145° 渐变 · 2 px 白色轮廓
局部高光与紫色投影统一复用

色彩使用规范

文字、状态与材质分层管理。
选中状态同时使用图标或描边。
透明组件在最终场景中复核可读性。

纯色对比 · 当前色值计算

主要文字 / 底色　9.69 : 1
辅助文字 / 底色　4.32 : 1

辅助小字需加深或置于更浅承载面；
不将上述比值视为整页可访问性认证。
云间梦境 · 设计作品集
色彩与材质
09 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
10 / 字体与布局
字号、间距与尺寸形成统一尺度

产品规范与作品集排版分开记录。

Noto Sans SC Light / 300
22 / 30
场景标题
雾光海岸
17 / 26
内容标题
把心事放远
15 / 22
导航控件
我的小岛
13 / 20
场景说明
雨会落一阵子。
11 / 16
辅助信息
海面很安静

字号 / 行高单位为 px；文字样本放大 2 倍展示。

主播放 · 72 px
迷你播放 · 44 px
探索入口 · 39 px
产品间距
8 px
播放器间距
12 px
活动卡片内边距
16 px
图文间距
24 px
活动卡片圆角
393 × 852
原界面设计基准
244 × 340
场景卡片
2 px
白色卡片边框

作品集另采用 1920 × 1080、12 列网格；此页主体参数来自产品界面。

云间梦境 · 设计作品集
字体与布局
10 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
11 / 组件库 · 导航与内容
同一组件，清楚呈现不同状态

直接提取原网页控件，按状态与构成整理。

01
导航与收藏入口
返回 / 标题 / 收藏入口

15 / 22 px 字号 / 行高 · 返回、标题、收藏固定同一层级

02
分类切换
秘境漫游 / 选中
声音拾集 / 选中

44 px 高度 · 三项等分；单选切换内容，保留底部播放

03
场景卡片
未收藏
已收藏

244 × 340 px · 2 px 白边；收藏用空心 / 实心爱心区分

04
片刻放空入口
缩略图 / 标题 / 说明 / 箭头

12 px 内边距 / 16 px 图文间距 · 整行可点，箭头指向详情

组件标本来自原网页透明导出，保留自身材质；按解剖、尺寸、状态与行为整理，键盘焦点使用独立轮廓。

云间梦境 · 设计作品集
组件库 · 导航与内容
11 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
12 / 组件库 · 播放与声音
播放反馈在各处保持一致

播放、暂停与选中状态并列展示。

05
播放控制
默认 / 可播放
播放中 / 可暂停

72 px 主控 / 44 px 辅助 · 播放与暂停图标互换，位置不变

06
波形进度
波形 / 当前位置 / 已播与总时长

0–30 min · 渐变 + 光点表达进度；支持拖动与方向键调整

07
迷你播放器
暂停
播放

44 px 主控 · 跨页面保留曲目与进度，点击不重置播放

08
声音内容卡
默认
已选中 / 播放

22 px 圆角 · 选中描边 + 暂停图标，不仅依靠颜色识别

组件标本来自原网页透明导出，保留自身材质；按解剖、尺寸、状态与行为整理，键盘焦点使用独立轮廓。

云间梦境 · 设计作品集
组件库 · 播放与声音
12 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
13 / IP 形象与动效
保留形象特征，延展五种动作

我约束轮廓、材质与表情，用 AI 探索动作，再筛选与编排。

01
安静呼吸
02
轻轻挥手
03
害羞靠近
04
困倦入睡
05
微笑转圈
固定轮廓：柔软体型 / 小手 / 波浪底部
固定材质：半透明珠光
固定表情：发光双眼 / 无嘴巴
5 种动作探索

寻找表情与姿态的变化范围

3 种网页角色状态
待机
微笑
入睡

动作探索素材与网页接入状态分别统计，不将所有探索视为已实现功能。

云间梦境 · 设计作品集
IP 形象与动效
13 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
14 / 动效制作
生成关键帧，再修正表情与节奏

以微笑转圈为例：固定体型，检查侧面遮挡与背面眼睛。

01 / 初始生成 · 发现问题
身体转回，眼睛未跟随

第 12 帧仍朝右，
与前一帧的左侧面不连续。

02 / 定点修正 · 校准朝向
眼睛贴合面部转向

只改对应帧的朝向；
保留体型、材质与其他帧。

03 / 表情与节奏 · 最终成片
微笑 → 转圈 → 恢复

在朝向正确的基础上统一笑眼，
让侧面遮挡、背面无眼与首尾衔接一致。

6 秒循环 · 原画编排，非三维模拟

真实历史过程：初始原画 → 第 12 帧定点修正 → 笑眼与节奏迭代。两组局部放大均对应原画第三行第四格。

云间梦境 · 设计作品集
动效制作
14 / 15

CLOUD REVERIE
UI / VISUAL DESIGN · AI 辅助创作
2026 / SELECTED PROJECT
15 / 交付总结
从生成效果到可复用的 UI

将视觉探索、界面规范、原型和动效整理为一套交付物。

视觉资产

5 组场景 · 独立角色素材

界面与规范

8 类组件 · 色彩 / 字体 / 尺寸

IP 与动效

5 种动作探索 · 3 种已接入状态

01
用约束控制生成

明确保留与修改范围

02
用规范连接界面

把风格落实为组件参数

03
用对比完成精修

将视觉差异逐项核对

个人概念项目，尚未开展正式用户测试。后续验证：文字可读性、功能理解与动效舒适度。

云间梦境 · 设计作品集
交付总结
15 / 15

乘物以游心 ／ 信息系系庆展览
AI DIALOGUE · VISUAL FEEDBACK

建系成果资源可视化 · AI 对话设计

让一次提问，
有看得见的回应。

从待机到回答，用光效、色彩与信息层次，
让观众感知对话正在发生。

我的角色
AI 对话交互与色彩方案设计参与者
原方案视觉
金色光环 × 紫色核心
吸引注意，建立对话焦点
01
吸引提问
→
02
聚焦等待
→
03
展开回答
清华大学美术学院信息系系庆展览 · 团队方案阶段
01 / 09

项目背景 ／ 建系成果资源可视化
01 — PROJECT CONTEXT

展览内容

让建系以来的成果资源，被看见、被探索

这是一个信息系系庆展览项目。我们将建系以来积累的成果资源进行可视化组织：观众可在长桌的数据河流中浏览整体脉络，也可通过墙面的 AI 对话进入相关内容。

数据河流
浏览建系成果脉络
×
AI 对话
围绕成果内容提问
同一光感
线性延展
环形聚焦
浏览
触摸
提问
关联
体验路径

线性长桌 浏览建系以来的成果
环形主屏 提问并关联相关资源

空间呈现
长桌与主屏共同组成成果资源可视化展览
现场互动
观众沿长桌浏览并触发内容
团队项目：清华大学美术学院信息系系庆展览 · 建系成果资源可视化
02 / 09

个人参与 ／ 职责与成果导航
02 — ROLE & OUTPUTS

我的角色

我参与的，是对话过程与色彩表达

AI 对话交互与色彩方案设计参与者

01
交互反馈

参与待机、检索、生成与回答阶段的视觉表达推敲。

02
色彩关系

参与金、紫、湖蓝与深色的选择及状态应用。

03
视觉衔接

用粒子、流线与光晕连接数据河流和 AI 对话。

职责边界

团队整体方案作为项目语境；本案例重点呈现本人参与的交互反馈与色彩设计方向。

成果导航

对话过程、等待反馈、回答层级与状态色彩

对话状态分镜
待机 → 检索 → 生成 → 回答
查看 05 ↗
等待阶段反馈
背景退让，中心状态突出
查看 06 ↗
回答信息层级
正文、关键词与关联成果
查看 07 ↗
状态色彩体系
品牌识别与阶段可读性
查看 08 ↗
个人参与范围依据现有资料归纳 · 具体交付记录与团队署名可在补充资料中继续完善
03 / 09

设计主线 ／ 让视觉承担交互反馈
03 — ATTENTION

从展陈问题推导视觉节奏

一次对话，三次注意力转移

大尺度展陈中的信息密度高、观看距离变化快，对话过程还包含等待；每个阶段都需要重新明确视觉焦点。

问题来源
大尺度展陈
入口需要远距离可见
×
成果信息密集
避免与对话主体争夺注意
×
生成过程不可见
等待阶段需要状态反馈

依据展陈场景与 V0506 交互分镜进行任务分析

01
开始之前
AI
输入你的问题
↑
吸引提问

先注意到 AI 中心，
再找到提问入口。

视觉重点
中心形象 + 提问提示
→
02
等待回答
AI
视觉重心收拢
聚焦等待

背景逐步退让，
生成状态成为视觉中心。

视觉重点
主体变化 + 生成反馈
→
03
回答出现
AI
展开回答

从回答正文向外，
延伸到关键词与相关成果。

视觉重点
回答正文 + 成果关联
模型推导
先发现入口 我要问什么？
→
再确认状态 系统是否在回应？
→
最后理解内容 回答与成果如何关联？

三个观看任务，对应三次视觉主次重组。

结构图依据 V0506 分镜重绘 · 用于解释视觉关注点，不代表用户测试结果
04 / 09

交互过程 ／ 从待机到回答
04 — SEQUENCE

看见变化，理解状态

一问一答之间，让状态连续可见
01 / 待机引导
中心与背景共同吸引注意，引导观众开始提问。
02 / 检索过渡
输入界面与外环逐步隐去，让注意力聚焦中心。
03 / 生成反馈
环形视觉与文本变化，让等待过程持续可见。
04 / 回答展开
回答、关键词与关联成果出现，承接本次提问。
原方案分镜并列展示 · 用于说明状态关系，非真实 AI 运行录像
05 / 09

视觉效果设计 ／ 检索过渡
05 — FOCUS

第一个关键变化：减少同时出现的信息

让背景退一步，让处理状态站到前面

通过输入控件、外环与成果背景的渐隐，把注意力逐步引向中心。

A
待机：入口与成果背景同时可见
↓
提交问题后，画面开始收拢
B
检索：中心主体突出，背景逐步弱化
画面拆解

从“整体可探索”，过渡到“中心可感知”。

成果背景
外环与控件
中心主体
背景退让 → 中心突出
01
成果背景
缩放、淡出
02
输入控件与外环
渐隐、退让
03
AI 中心主体
保持焦点

设计要点
多个元素协同显隐，形成从外向内的观看顺序。

原分镜画面 + 本次补绘的图层关系图 · 渐隐描述依据 V0506 第 5 页
06 / 09

视觉效果设计 ／ 回答呈现
06 — EXPANSION

第二个关键变化：把回答连接到成果

用五个相关成果，接住一个问题

中心承接回答，外围展开关联；文字、词云与声音共同构成反馈。

01 / 原方案画面
中心
AI 形象与回答正文
外围
关键词与成果卡片
02 / 信息结构重绘
相关成果 01
相关成果 02
相关成果 03
相关成果 04
相关成果 05
AI
回答正文
输入区域
关键词
关键词
关键词
关键词
1

先理解回答
中心区域承接本次提问

→
2

再看成果关联
向外延伸至相关成果与关键词

语音与波形
原方案包含朗读反馈，波形随语音变化

五张相关成果卡片及语音设想见 V0506 第 5 页 · 结构图为作品集补绘，卡片名称为示意
07 / 09

色彩设计 ／ 用强弱与位置引导观看
07 — COLOR

色彩随着视觉任务重新组织

保留金紫识别，让色彩随状态展开

观察重点：哪些颜色留在中心，哪些颜色退入背景，哪些颜色在回答时向外展开。

01
待机 · 吸引
金色外环 / 紫色核心
色彩结构示意

金色光环形成入口焦点，
紫色核心延续 AI 形象。

02
生成 · 聚焦
紫色环形 / 背景弱化
色彩结构示意

紫色环形成为主要识别，
背景信息弱化，留出观看空间。

03
回答 · 展开
金紫保留 / 湖蓝展开
色彩结构示意

金紫中心保持连续性，
湖蓝在周围形成更开阔的层次。

色彩选择过程
从品牌识别到状态配色
资料截图已按信息重点重新裁切
01

品牌锚点
以清华紫建立基础识别。

展览
洋红 · 紫 · 湖蓝
成果
蓝 · 靛蓝
人物
绿 · 深绿
02

内容辅助色
河流曾按展览、成果、人物扩展多组色域。

鎏金
凝夜紫
朔黑
03

AI 主色收敛
金色强化焦点，紫色保持识别，深色承载背景。

V0506 状态色
#FFD12A
#621FF8
#86F1FF
#171717

用亮度、位置、形态与显隐共同区分状态，避免只靠颜色传达。

局部截图来自 V0424 色彩规范；状态色依据 V0506 第 4–5 页 · 可读性为方案层面的视觉分析
08 / 09

项目总结 ／ 从资源到体验
08 — SUMMARY

最终呈现

让建系成果，在浏览与提问中重新连接

数据河流呈现整体脉络，AI 对话回应个体兴趣；视觉反馈让等待、生成与回答都有清晰状态。

最终空间效果图 · 团队方案
01
成果资源可视化

把建系以来积累的内容组织为可浏览的整体脉络。

02
浏览与对话衔接

从长桌探索进入 AI 提问，再关联到相关成果。

03
我的参与

以交互分镜与色彩关系，强化对话过程中的状态反馈。

最终空间效果图来自 V0506 第 6 页 · 视觉效果以团队方案为准
09 / 09

INTERACTIVE MEDIA ART
声音 × 壁画 × 交互

新媒体艺术交互作品

天宫
伎乐团。
以乐入画，让壁画重现色彩

以敦煌七乐器音乐为线索，通过 TouchDesigner
联动观众操作、音乐播放与壁画人物还原。

查看交互逻辑
↗
七种乐器 · 一场共同完成的演奏
我的角色
项目负责人
负责工作
交互设计 / 人物形象绘制 / 交互程序实现
交互工具
TouchDesigner
天宫伎乐团 / 作品概览
01 / 09

01 / 创作构想

让观众参与壁画的还原

把观看壁画变成一次音乐互动：跟随提示触发乐器，让声音与人物色彩共同出现。

01
从壁画中寻找视觉依据

观察人物的服饰、配饰与持器姿态，
为乐伎形象的重新绘制建立参考。

服饰与配色
持器与姿态
头饰与衣纹
装饰与细节
02
用音乐建立参与感

七种乐器对应声音与人物画面，
观众的操作成为壁画还原的一部分。

互动前 人物尚未恢复色彩
→
互动后 乐伎逐步呈现
看见提示
→
敲击乐器
→
听见音乐
→
壁画还原

以音乐为线索，让观众同时感知声音与画面的变化。

天宫伎乐团 / 创作构想与视觉参考
02 / 09

02 / 人物复原

先整理构图，再完善人物细节

以壁画中的演奏关系为依据，整理人物轮廓，并将配饰、纹样与服饰特征带入绘制。

01线稿与构图
保留演奏姿态
补全人物轮廓
组织群像关系
02配饰与纹样提取
细节落实到人物

将头饰、耳饰和衣纹
融入群像绘制。

天宫伎乐团 / 人物复原与绘制过程
03 / 09

03 / 动态设计

让演奏姿态延续到动态画面

围绕人物动作与衣饰变化制作动画，使重绘后的乐伎在壁画场景中演奏。

01人物动作设计

通过连续姿态推敲人物动作，
使身体、手臂与衣饰的变化相互配合。

静态绘制
→
动作设计
→
群像动画
02群像动态成果
实际动效 · 可播放
人物动作与壁画背景结合，形成完整的演奏画面。
天宫伎乐团 / 动画制作
04 / 09

04 / 壁画与乐器

七位乐伎，七种乐器

将壁画参考、人物重绘与乐器绘制关联起来，为音乐交互准备视觉内容。

壁画参考
人物组合与演奏关系
↓ 人物重绘
让画中的乐器成为交互入口

以敦煌七乐器音乐为线索，
将每种乐器的声音与相应人物画面关联。

01箜篌
02琵琶
03阮咸
04唢呐
05排箫
06答腊鼓
07横笛
乐器声音
＋
人物画面
＝
一次交互反馈
天宫伎乐团 / 壁画参考与重绘成果
05 / 09

05 / 交互逻辑

跟随音乐提示，唤醒画中的乐伎

音乐时序给出提示，观众敲击对应乐器，TouchDesigner 将输入转化为声音与画面的联动。

♪
音乐控制 / TouchDesigner

七种乐器的声音与画面，沿音乐时间线协同呈现

音乐进度示意
箜篌
琵琶
阮咸
唢呐
排箫
答腊鼓
横笛
演奏开始
提示对应乐器 → 等待观众参与 → 联动声音与人物
演奏结束
01 / 提示
对应乐器亮起

沿音乐时间线提示对应乐器，观众看到当前可以参与的位置。

02 / 参与
观众敲击乐器

观众敲击亮起的乐器，传感器将操作信号传入 TouchDesigner。

03 / 反馈
音乐与人物回应

对应音轨加入演奏，人物恢复色彩，声音与视觉共同回应观众。

敲击输入
→
信号接收
→
TouchDesigner
→
声音 + 画面

三个阶段按音乐时序衔接；实际互动效果可播放视频查看。

实际交互效果 / 人物由灰色状态转为彩色
天宫伎乐团 / 交互方案设计
06 / 09

06 / 交互实现

用 TouchDesigner 串联声音与画面

将音乐时序、传感器输入与人物视频连接起来，让一次操作同时产生听觉和视觉反馈。

01
时序控制

按演奏进度设置触发区间，
控制对应乐器的提示。

02
信号判断

接收传感器输入，判断观众
是否触发当前乐器。

03
声画同步

控制对应音轨加入演奏，
播放相应人物的彩色画面。

左侧为项目演示资料中的实际制作记录。

天宫伎乐团 / TouchDesigner 制作记录
07 / 09

07 / 场景呈现

将乐伎带回壁画的空间

通过场景建模与画面组织，让人物、壁画背景和场景收尾共同构成完整的观看体验。

01场景与建模

结合洞窟空间参考，整理模型、材质与壁画的呈现关系。

空间参考
→
模型与材质
→
场景呈现
02场景收尾
场景视频 · 可播放
通过场景转换与镜头变化，完成作品的收尾表达。
天宫伎乐团 / 场景制作与最终呈现
08 / 09

08 / 现场与参与

当观众加入，演奏才有了回应

在现场操作中感受声音与壁画的关联，观看人物随着交互逐步恢复色彩。

现场演示 / 播放视频，观看实际操作与声画反馈
现场操作
投影反馈

我的职责 / 项目负责人

连接视觉制作与交互体验
交互设计
人物形象绘制
交互程序实现

负责交互设计、人物形象绘制，
以及音乐与视觉反馈联动的交互程序实现。

天宫伎乐团 / 新媒体艺术交互作品
09 / 09

视觉与实践 / 光影与场景
01 / LIGHT & SCENE
光影与场景设计

广州全运会 · 李白诗词展

广州全运会
开幕式特效
效果图
李白诗词展
纸雕灯设计与现场
展墙设计
现场呈现
效果图 / 设计图 / 现场记录
01 / 05

视觉与实践 / 展览与物料
02 / EXHIBITION & PRINT
展览视觉与物料

穹天玉宇 · 藻井沉浸式体验空间

视觉与物料设计
易拉宝
文件夹 / 线稿
文件夹 / 影像
纸袋
外部空间设计
现场视觉呈现设计
物料设计 / 空间设计 / 展会现场
02 / 05

视觉与实践 / 海报与图形
03 / POSTER & GRAPHIC
海报与图形设计

虚戈幻境 · 苏轼展 · 校研究生会

虚戈幻境
海报 / 现场
苏轼展
海报 / 印章
校研究生会周边设计
海报设计 / 展览图形 / 印章设计
03 / 05

视觉与实践 / 品牌与文创
04 / IDENTITY & MERCH
品牌视觉与文创

G219 公路 · 怒江

辅助图形
标识设计
标识方案
手提袋
保温杯
咖啡杯
马克杯
马克杯组合
文化墙 / 线路图
视觉识别 / 辅助图形 / 文创应用
04 / 05

视觉与实践 / 品牌与文创
05 / IDENTITY & PACKAGING
品牌视觉与文创

崇信 · 崇香塬红牛肉 / 社会实践

品牌标识
鲜切牛肉包装
品牌礼盒
牛肉干包装
品牌应用
海报应用
店铺应用
清华大学乡村振兴工作站赴甘肃崇信支队 · 2025.02
05 / 05