01 / 一句话定位

情绪回响

RESONANT SCENES

观看项目影片 ↗

我设计了一项互动体验,将私密的情绪转化为可见、可触发且可聆听的实体。

情绪回响
04

第一次迭代:摄像头 手势识别 与粒子反馈

该项目最初采用基于摄像头的交互系统识别。手部动作、张开和挥手被映射到浏览器中粒子的位移、膨胀、聚集和颜色变化上。这一阶段证实了一个重要的假设:用户愿意通过身体动作而不仅仅是按动按钮来参与情感表达。 然而,程序生成的二维视觉效果主要由粒子、线条、波纹和几何图形组成。即使为情绪分配了不同的颜色、速度和运动规则,其结果往往仍然像是一个技术演示。 因此我意识到,情感体验不仅需要动态反馈,还需要一个能够承载事件、角色和空间关系的视觉叙事。

第一次迭代:摄像头                                 手势识别                                               与粒子反馈 — image 1

羞耻情绪 粒子效果版

第一次迭代:摄像头                                 手势识别                                               与粒子反馈 — image 2

难过情绪 粒子效果版

第一次迭代:摄像头                                 手势识别                                               与粒子反馈 — image 3

兴奋情绪 粒子效果版

05

第二次迭代: 加入交互硬件

为了将交互从屏幕上的手势转变为一种物理握持的体验,我设计了一个可摇晃的球形物体。 该原型使用 MPU6886 运动传感器来读取加速度、旋转和摇晃行为。一块 CoreS3 开发板及其发光显示屏被放置在透明或半透明的塑料球体内。反光织物或类似的反光材料旨在使屏幕光线在球体内漫射和倍增,从而营造出一种封闭感和内部发光的效果。 摇晃球体可以驱动体验的两个阶段: 在生成人工智能图像之前,它控制基于浏览器的情绪粒子和程序化的二维动画; 在人工智能图像出现之后,它继续控制图像的运动、颜色、局部效果以及后续的视觉变化。 这个原型强化了握持、重量、惯性和摇晃之间的身体联系。它还引入了“将情绪捧在手心”的象征性理念。 然而,为 CoreS3 开发板、MPU6886 传感器和持续照明供电需要电池。电池、开发板、接线、安装结构和塑料外壳共同增加了球体的尺寸。一个本应被自然握持的物体,逐渐变得过大、过重,且依赖于维护。 该硬件还带来了新的障碍: 用户必须与设备在同一物理空间; 系统需要充电和维护; 不同的握持尺寸受到球体大小的限制; 这种体验无法轻易进行远程分享; 每次演示都依赖于硬件的完全就绪。 这次失败并没有让我放弃具身交互。相反,它澄清了该项目真正需要保留的内容:并非球体本身,而是摇晃能使情绪场景对身体做出响应的这一种关联。 因此,下一个设计目标变成了: 移除专用的球体,同时保留摇晃的动作;消除设备的障碍,同时保留身体的参与。 交互操作最终被转移到普通智能手机内置的运动传感器上。现在,用户只需打开一个网址,授予运动数据访问权限,并轻轻摇晃手机,即可进入同样的涵盖视觉、声音与五个阶段的情感体验。

第二次迭代:                                              加入交互硬件 — image 1

使用 Wi-Fi 通信同步硬件与网页界面。

第二次迭代:                                              加入交互硬件 — image 2

方案2的交互硬件架构图:使用RGB LED灯带根据检测到的每种情绪发出相应颜色的光。

06

从本地到云端 生成AI图像

在进行硬件实验的同时,我还探索了用于图像生成的本地部署 ComfyUI 工作流。本地部署允许对模型节点、工作流结构和某些视觉参数进行控制,同时减少了对外部服务的直接依赖。 然而,该项目需要的不仅仅是生成一张普通的“情绪图片”。系统需要理解参与者具体经历了什么、事件与情绪之间的关联、何种空间隐喻是合适的,以及哪些动作或物品应该出现在场景中。 例如,“我得到了期待已久的机会,却突然感到空虚”和“我失去了一段关系,因此感到空虚”,两者可能都被归类为麻木或失落,但它们需要完全不同的叙事图像。 仅靠本地图像工作流无法始终如一地执行这种事件级别的语义转换。因此,最终的处理流程演变为: 具体的个人事件 → 语言模型对事件与情绪关系的解读 → 结构化的视觉提示词构建 → Seedream 云端图像 API → 个性化的情感场景 云端生成提升了系统理解具体事件、人际关系和视觉隐喻的能力。但它也引入了网络依赖以及可能接近三十秒的等待期。

从本地到云端                                                             生成AI图像 — image 1

在代码片段里调用语义模型和图像生成模型的 API。

从本地到云端                                                             生成AI图像 — image 2

使用 ComfyUI 根据用户体验生成的 Image1:由于其语义理解能力有限,它只能在受到我设计的提示词约束下生成抽象图像。

从本地到云端                                                             生成AI图像 — image 3

使用 ComfyUI 根据用户体验生成的 Image2:尽管它生成图像的速度快于云端方案,但却未能达到预期的治愈效果。

从本地到云端                                                             生成AI图像 — image 4

当我最初开始使用 API 生成图像时,我限制了每种情绪的输出方向;这导致具有相同情感标签的不同经历生成了几乎相同的图像,从而无法实现预期的互动效果。

从本地到云端                                                             生成AI图像 — image 5

因此,我让语义理解模型根据用户的体验,向图像生成模型发送具体的、基于图像的叙事;然而,在调试阶段,人工智能图像生成中常见的问题依然会出现。

从本地到云端                                                             生成AI图像 — image 6

调试期间进行的 API 调用次数:DeepSeek 是一个性价比很高的语义理解模型。

07

等待页面:从二维动画到 图像驱动场景

个性化人工智能图像出现之前的等待体验经历了两次重大转变。 第一阶段完全依赖于浏览器生成的二维动画,包括粒子、曲线、波纹、色块和几何运动。这些效果对运动有即时响应,但缺乏足够的视觉精致度与叙事深度。 在第二阶段,我通过统一的提示词系统创建了一个包含十四个情绪场景的图库。然后使用浏览器代码来对每张图像的局部区域进行动画处理,或者修改图像本身的特定视觉属性。 这种方法保留了两个系统的优势: 人工智能生成的图像提供了角色、空间、物品和叙事关系;

等待页面:从二维动画到                                                     图像驱动场景 — image 1

网页生成等待页面情绪一:喜悦

等待页面:从二维动画到                                                     图像驱动场景 — image 2

网页生成等待页面情绪二:羞耻

等待页面:从二维动画到                                                     图像驱动场景 — image 3

最终版本:通过统一提示词系统生成的十四个情绪场景 共享一致的视觉语言: 温暖的米色、低饱和度的蓝灰色以及克制的暖光照明; 纸质、水彩或带有细微颗粒感的表面纹理; 静谧的电影般空间,具有清晰的前景、中景和背景关系; 始终如一的极简火柴人角色; 用作情感隐喻的日常物品; 克制的留白,避免视觉上的空洞; 通过距离、光线和物品关系来传达情绪,而不是夸张的面部表情。

10

声音设计:环境底音、触发音 与情绪推进

声音设计从最初每次摇晃时播放的几乎难以察觉的合成器音调,演变成了一个完整的情感声音系统。 最终的声音结构由三个层次组成: 环境底音(Ambient bed):连续的合成器音层、白噪音、雨声纹理或充满氛围感的室内底噪; 动作瞬态音(Action transient):由摇晃产生的清晰可辨的撞击声、水滴声、破裂声、低频打击声或静电脉冲声; 情绪尾音(Emotional tail):将事件声音与环境音重新连接起来的和弦、铃声、混响与延迟效果。 在每一次有效的摇晃期间,环境底音会短暂减弱,为交互声音腾出听觉空间,随后再恢复到固定的基础音量。各种情绪不再共用一种通用的音高滑动效果。每一种声音都是根据场景物品和情绪走向专门设计的。 随着五个阶段旅程的推进,声音逐渐从单薄封闭变得更具空间感和层次感,与疗愈性的文字和视觉的转变同步发展。