心情日记 Mood Diary — 案例研究

App · Mobile · Data MOOD DIARY
记录心情:五种情绪状态
统计分析
会员特权
首页:心情与经期日历

Mood Diary

Fast capture, calm visuals — emotion turned into readable data.

A quiet interface for understanding how you feel.

心情日记 · 平静 私密 洞察

UI/UX Design · 2024 SCROLL TO EXPLORE ↓

01

Project
Overview

能不能少问一点,
却拿到最有用的信息?

大多数心情记录 App 问得太多、给得太少。冗长的表单、花哨的日历和泛泛的建议,让人觉得自己像个录入员,而不是被理解的人。

答案是一个一键记录心情的方案:围绕五种情绪状态与影响因素展开,再配上经期记录,以及完全本地、私密的洞察推送。

My Role
UI Designer
Year
2024
Type
Mobile App · 情绪健康
Platform
iOS / Android

Core Concept · Consumer

Fast capture. Calm visuals. Data as emotion.

轻量化案例

Fast Capture一键记录:五种情绪状态 + 影响因素,减少录入负担。
Calm Visuals克制的色彩与留白,让记录这件事本身不制造压力。
Data as Emotion把记录沉淀为本地、私密的个人洞察,而不是泛泛建议。

Design Focus · 设计重点

  1. 01

    Data as Emotion

    情绪看不见,记录完就忘,难以自察。

    心情与周期双图表,把零散记录变成可回看的趋势。

  2. 02

    Fast Capture

    坚持记录靠的不是决心,是门槛。

    一屏一步的记录流,操作即反馈,二十秒完成一次记录。

  3. 03

    Calm Visuals

    健康类产品容易显得医疗化、有压力。

    柔和色板与插画语言,情绪先被安抚,再被分析。

A journal
that doesn't
ask too much.

02

Core
Features

One tap
to remember
how you feel.

整个体验由四个界面承载,每个界面只做一件事,不多加一件。

  • 01

    一键记录

    五种情绪状态,几秒就能记完

  • 02

    影响因素

    经期、冲动消费、备注等

  • 03

    经期日历

    平静的月视图,心情与经期一目了然

  • 04

    经期设置

    周期与经期长度,按你的节奏来

  • 05

    洞察推送

    把规律总结成一句人话

  • 06

    隐私优先

    数据默认只留在本地设备

03

Design
Principles

01

Default
Calm

默认平静

低饱和渐变、充足圆角与柔和留白让界面保持安静,主角始终是当下的情绪,而不是界面本身。

02

Privacy
First

隐私优先

心情与经期数据都很敏感。所有内容默认只留在本机,文案也从不暗示 App 在评判你或在分享你的数据。

03

Insight
Over Noise

洞察而非噪音

不把用户埋进图表里,而是把趋势总结成简短的人话——是可以立刻行动的规律,而不是需要解读的仪表盘。

04

One Tap,
One Thought

一次点击 · 一个念头

打开 App、选一个状态、需要的话再加一个影响因素——水还没烧开,打卡就已经结束了。

产品层
一点即记录、一眼就明白,核心闭环尽可能短。
视觉层
柔和的渐变与圆角卡片,让界面安静、不带评判感。
体验层
洞察以一句话的形式出现,而不是图表——今天就能用得上。

04

The
Interface

「 一点就记完 」打开 App、选一个状态、需要的话再加一个影响因素——水还没烧开,打卡就已经结束了。

Screen 01

Home

Today at a glance.

打开首页,一眼看到今天的心情与经期;核心指标与待办永远第一屏可达。

首页:心情与经期日历

Screen 02

Mood
Check-in

Five states. One tap.

点一下记录,从五种状态里选一个;需要时再补充影响因素。

记录心情:五种情绪状态

Screen 04

Insights

One sentence, not a dashboard.

心情、经期与影响因素结合成一句简短的人话;需要看趋势时才展开图表。

统计分析:心情图表与周期趋势

Motion — Interaction in Time · 动态演示

05

Complete
System

Every screen.
One system.

登录、个人资料、统计、等级、会员与设置——这些「必要但不常来」的页面同样是低饱和、少层级,不抢走主流程的注意力。启动页到首页只隔一次登录;通知与隐私设置集中在一页。

启动页
01 / Splash启动页
登录页
02 / Login登录
我的
03 / Mine我的
个人资料
04 / Profile个人资料
等级介绍
05 / Level等级
会员特权
06 / Member会员特权
设置
07 / Settings设置
首页 · 有记录
08 / Home首页 · 有记录
首页 · 空状态
09 / Empty首页 · 空状态
记录 · 选择情绪
10 / Check-in记录 · 选择情绪
记录 · 影响因素
11 / Factors记录 · 影响因素
记录 · 完成
12 / Done记录 · 完成
经期设置
13 / Cycle经期设置
支付成功
14 / Pay支付成功
基础信息
15 / Info基础信息
心情曲线
16 / Mood Chart心情曲线
周期趋势
17 / Cycle Chart周期趋势
启动页问候
18 / Welcome启动页问候

06

A Moment
in the Day

22:47

A quiet moment before sleep.

把一次记录放回它真正发生的时间点:睡前两分钟打开首页,点一下选了「有点累」,顺手补上「睡眠不足」,然后看到这周的心情曲线已经悄悄动了一下。

01从打开到记完只要两步,不用先填资料,也不用先选模板。
02影响因素全部可选:累了就不写,写了就让下一次回顾更准一点。
03数据不急着下结论,攒够一段时间再用一句话告诉用户趋势。

Step 01

打开首页

睡前打开首页,今天的心情与周期一屏看完。

首页 · 有记录

Step 02

选择情绪

点选一个情绪状态,需要时再补影响因素。

记录 · 选择情绪

Step 03

添加影响因素

记完立刻能看到本周趋势,不用等一周。

记录 · 影响因素

Step 04

查看趋势

会员解锁完整回顾与更细的提醒节奏。

统计 · 心情曲线

07

Visual
Language

「 插画替用户说出说不出口的那部分 」心情是抽象的。图表能说明状态,却很少让人愿意停下来多看两眼。

于是节气、节日与日常场景被画成了同一套插画:统一笔触、统一暖调,出现在首页卡片、记录页空状态和内容页顶部。它们不只是装饰——冷启动时它是第一句问候,空状态里它是继续记录的那级台阶

春分节气插画
01 · 春分节气插画SPRING EQUINOX · 节气头图
春分 · 插画方案二
02 · 春分 · 插画方案二紫调版本,色温更低,留给夜间主题与推送头图使用。
节日海报
03 · 节日海报同一套元素重排成竖版海报,字体与图形比例不变。
重阳节 · 节日插画
04 · 重阳节 · 节日插画暖橘为主色,节日当天替换头图。
重阳节 · 方案二
05 · 重阳节 · 方案二青绿配色,横版与方版位之间复用。
寒假 · 假期主题
06 · 寒假 · 假期主题冷蓝底色提示「假期模式」。
开学季 · 返校主题
07 · 开学季 · 返校主题出现在当天的记录卡与分享图上。
内容插画 · 陪伴
08 · 内容插画 · 陪伴引导问题「我有一只陪伴我的宠物」的配图。
内容插画 · 暖心学校
09 · 内容插画 · 暖心学校场景插画统一线条粗细与色温,把空状态的距离感压下去。

案例结束 · END OF CASE STUDY

心情日记 / 感谢阅读

一款温柔、私密的情绪健康 App:几秒记下心情,读懂经期,把每天的打卡变成属于你的洞察——尽量少问,却给出真正能行动的东西。

一键记录心情五种情绪状态影响因素经期记录本地隐私