Moodiy: 以可视化方式感受、追踪,并理解你的情绪

用设计读懂情绪——以直观的视觉与交互方式,将情绪体验转化为可理解、可追踪的心灵语言。

Background

App简介

Moodiy 是一个互动心理健康日志,旨在将情感追踪转变为直观且引人入胜的体验。与传统的基于文本的日志记录不同,Moodiy 使用 表情符号拖放互动AI 驱动的洞察视觉情感分析,帮助用户轻松理解他们的情感,并以同情心进行反思。

Research

痛点陈述

  • 文字式日记带来的高认知负担

  • 缺乏Direct Manipulation,缺乏趣味

  • 反馈有限,缺少长期情绪洞察

Research

文献研究

在开始设计前,我们查阅了相关研究论文与 UX 设计案例,以了解为何大多数心理健康类日记应用难以保持用户的长期参与。我们从心理效能与用户体验两个角度对既有研究进行了分析。

用户的视角
  • 文字密集的记录方式在用户能量低落时会造成较高的认知负担。

  • 缺乏视觉反馈,使用户难以察觉或反思自己的情绪模式。

  • 用户希望日记体验更加个性化、灵活,并能够真实表达情绪。

设计与研究视角
  • 研究显示,基于经过验证的治疗模型所设计的应用程序能有效提升情绪健康(Lecomte et al., 2020)。

  • 当以自适应方式设计时,AI 辅助反思能够支持用户建立持续的情绪记录习惯(Kim et al., 2024)。

  • 当用户能够获得实时洞察与情绪趋势的可视化总结时,参与度会显著提升(Smyth et al., 2018)。

Research

竞争分析

Daylio
只能输入一种情绪, 灵活性较低, 违反了“Flexibility & Efficiency”原则
Reflectly
以强制性提示限制用户操作,违反了“User Control & Freedom”原则
Journey
ChatGPT said: 完全依赖文字输入、未提供可视化提示,违反了“识别优于回忆”原则。
Ideation

开发解决方案

|

HCI 理由
  • 识别优于回忆(Recognition Rather Than Recall)
    以表情符号为基础的选择方式能够降低认知负担,让用户通过选择而非生成情绪描述来表达感受。

  • 灵活性与使用效率(Flexibility and Efficiency of Use)
    拖曳多个表情符号的交互方式,使用户能够更准确地呈现复杂、多层次的情绪状态。

  • 美观与极简设计(Aesthetic and Minimalist Design)
    干净的界面搭配清晰的视觉反馈,不仅提升可用性,也让整体体验更直观舒适。

设计方案
  • 拖拽输入表情,实现快速情绪记录

  • 允许用户拖拽多个表情符号,以呈现更复杂的情绪状态

  • 每个表情代表一种颜色,多种颜色混合生成新表情,增加趣味

Ideation

心情板

我们参考了多款心理健康与日记类应用的视觉设计,研究色彩、字体与布局如何影响用户的情绪感受。目标是打造一个既平静又富有表达力的界面——让整体体验更有人性、亲和力与反思感。

Ideation

初步概念

我们首先绘制了情绪日记应用的核心架构与线框图。在这一阶段,设计仍采用传统的表情符号选择与文字记录方式。当时尚未引入直接操作或情绪混色的概念——重点仅在于通过表情或文字进行情绪记录。

Ideation

低保真设计

在低保真阶段,我们细化了页面结构,并测试了情绪记录、AI 指引与统计等关键界面。这一阶段帮助我们明确了信息层级与交互流程,记录方式仍以点按为主。但根据研究结果,用户需要一种更具表达性与参与感的记录互动方式。

Ideation

高保真设计

在高保真阶段,我们从静态记录进化到更具互动性的情绪驱动日记。用户不仅可以拖拽多个表情来呈现复杂心情,还能观看颜色混合来可视化情绪细微差异,并获得 AI 生成的反思摘要。此次迭代将可用性与情感化设计融合,使自我情绪反馈变得更直观

Final Demonstration

简易商业广告

我们制作了一段短篇宣传视频,用以传达 Moodiy 的核心概念与情绪价值。影片呈现了用户如何通过表情轻松表达情绪、以视觉化方式追踪模式,并获得 AI 的引导支持——让自我反思成为简单而可持续的日常习惯。

Final Demonstration

细节讲解视频

为了从 HCI 的角度评估设计,我们制作了一段讲解影片,从启发式评估、认知直接性与用户反馈等面向分析 Moodiy。影片详细说明了我们的设计如何降低认知负担、强化直接操控,并与可用性原则保持一致。

Design Evaluation

优点

1. 低认知负荷的情绪记录 - 基于表情符号的输入使记录变得快速而轻松——尤其在低能量的时刻特别有帮助。

2. 情感表达的灵活性 - 用户可以选择多个表情符号来代表复杂或混合的情感,而不是仅限于一个。

3. 通过人工智能提供个性化反馈 - 人工智能生成的洞察帮助用户理解情绪模式,并提供相关建议以支持自我照顾。

Design Evaluation

缺点

1. 情绪复杂度可能被过度简化 - 对于不符合预设表情的情绪,用户可能难以找到准确的表达方式。

2. 情绪洞察界面可能带来认知负担 - 统计页一次性呈现较多数据,可能让部分用户感到压力或不知从何看起。

3. AI 建议缺乏深度个性化 - AI 的建议可能显得泛泛而谈,无法完全贴合用户的真实情境与需求。

Design Evaluation

潜在的改进策略

1. 扩展表情库与自定义功能 - 允许用户创建并标注属于自己的表情套组,以更贴合个人的情绪词汇。

2. 多层次情绪输入 - 通过将表情拖拽至不同距离来“加权”情绪强度,使复杂情绪的表达更具层次感。

3. 表情历史与智能推荐 - 根据用户最近或常用的表情组合提供快速复用与智能建议,帮助反映长期的情绪模式。

Create a free website with Framer, the website builder loved by startups, designers and agencies.