IsleSoul 心屿

情绪疗愈三空间

三个空间,三种疗愈——在数字世界中安放你的每一种情绪。

SCROLL

项目概览

项目类型
交互媒体与心理疗愈数字产品
时间
2026.04
角色
交互设计 · 部分视觉 · 前端开发
工具
Figma · nano banana · trea · seedance · 海螺AI · Kimi API

IsleSoul 心屿是一个面向 18–30 岁年轻人的低门槛、私密、非临床情绪陪伴与睡前放松工具。它不替代心理治疗,而是把日常情绪困扰拆成三个更容易进入的任务流:想说、睡不着、想放空。

Positioning 非临床情绪陪伴

产品边界从“治疗”调整为低暴露、可匿名、随时可进入的情绪支持,避免给用户过重的心理负担。

Entry Point 睡前是低阻力入口

睡眠问题比心理求助更少污名,也天然适合白噪音、轻互动和短会话设计。

MVP Flow 想说 / 睡不着 / 想放空

三空间结构对应三类高频场景,让用户不用先判断自己“严重不严重”,而是直接选择当下需要的陪伴方式。

当情绪无法被命名时,一个空间比一句话更有力量。
三空间倾诉放松解压 数字疗愈角色化陪伴Vibe Coding

IsleSoul 心屿将情绪支持拆解为三种核心需求——说出来、静下来、动起来——并分别赋予一个角色空间。用户通过垂直滑动在三空间之间自由切换,每种空间提供不同的交互方式和感官体验。

三空间交互系统

念念空间界面

念念 · 倾诉

AI情绪对话

AI情绪对话陪伴,歌词式滚动回复。右上角情绪扫描仪通过5题测试智能推荐空间。

眠眠空间界面

眠眠 · 放松

白噪音疗愈

4种白噪音(森林/篝火/雨声/海浪),点击球体切换播放,声波动画随音律动。

松松空间界面

松松 · 解压

触觉解压交互

4种解压材质(泡泡/水晶泥/木鱼/泡泡纸),点击触发粒子动画与视频反馈。

交互流程

时长建议:25-30秒

当前流程

进入 APP

用户进入后默认落在念念空间,先用柔和情绪球与低刺激画面建立安全感,再引导进入倾诉、放松或解压路径。

设计流程

01
Research Framing

先确定产品边界:陪伴,而不是治疗

基于调研,心屿被定位为年轻人的低门槛、私密、非临床情绪陪伴工具。重点不是诊断或干预,而是帮助用户在睡前、独处或情绪上来时更容易开始自我安放。

产出:产品定位与目标人群
02
Task Definition

把需求转成三个可进入的任务流

调研建议将 MVP 聚焦为“想说、睡不着、想放空”。因此三空间不只是视觉分区,而是分别承接匿名倾诉、睡前放松和 3 分钟内轻互动解压。

产出:MVP 任务流
03
Visual System

让每个空间拥有明确的情绪角色

念念对应倾诉,使用更柔软、靠近陪伴感的暖色;眠眠对应放松,使用低刺激蓝紫色;松松对应解压,使用更明亮的黄色和触发感表情。

产出:角色球体与空间气质
04
Interaction Prototype

用垂直滑动把三个空间串成连续体验

用户不需要返回菜单反复选择,而是通过上下滑动在倾诉、放松、解压之间切换。情绪扫描仪作为快速入口,把模糊感受转换为推荐路径。

产出:可操作前端原型

最终成果

APP 完整交互演示:三空间切换、AI 对话、情绪扫描、白噪音与解压交互。
可操作原型:在这里直接体验心屿 APP 的情绪疗愈流程。

复盘与思考

我的职责

交互设计 · 部分视觉设计 · 前端开发(Vibe Coding)

技术难点

  • Vibe Coding还原设计:AI生成代码与Figma设计稿存在视觉偏差,通过截图对比逐像素调整CSS变量迭代逼近
  • 念念AI回答调性控制:通过System Prompt设定角色人格——温柔治愈的倾听者,回答简短(2-3句),优先共情而非解决问题,避免说教与机械感

改进空间

  • 眠眠空间可接入真实白噪音音频文件,替代视觉声波模拟
  • 情绪扫描结果存入本地存储,形成情绪日记
  • 优化为响应式布局,适配更多设备

工具链

Figma · nano banana · trea · seedance · 海螺AI · Kimi API · HTML/CSS/JS