# 情绪记录App设计：原话、事件和评分分开读

原网页：https://www.jvds.cn/share/ui-design/nonarcissai-dialogue-cases-community-u141
语言：zh-CN
发布：2026-10-22
作者：界达设计工作室（JVDS）

NoNarcissAI的情绪记录App设计使用米白、浅粉和棕色，引用、录音与事件卡都有独立容器。温和的视觉之外，最有价值的安排是让原话与整理结果有不同身份；评分、试用与保存状态也需要各自说明。

## 核心结论

- 引用与输入分组保留语境，事件卡让记录与整理有不同身份。
- 零值、试用启动和保存分别解释，温和视觉不能代替状态。

## 引用和录音保持一个具体回应的语境

UI Kit里把上一条问题引用置于浅粉块，用户回复紧接下面，录音波形、计时与取消暂停发送则另列一组。收起录音组件和日期选择器也单独展示，圆角与棕色动作保持一致。

保留引用能帮助回看这句话在回应什么。语音与文字的来源可区分，取消当前片段也不必与删除整条草稿混成一件事。这种输入组件设计适合需要记录上下文的对话工具。

界达设计会沿录到一半改为文字的过程检查：什么还没提交，什么已经保存，取消影响哪个对象。当前素材是组件组合，没有完整操作回执，不能由波形判断音频已保存。

![对话引用、录音波形与日期选择组件](https://www.jvds.cn/upload/2026/1008/d187-tp/u141-i1.webp)

引用气泡下方录音控制｜取消、暂停和发送有各自状态与影响范围

## 事件卡有名称，零值还需说明状态

Cases页将事件逐张排列，前两张有名称，两项指标与彩条并列；第三张没有标题，两项为零，条带变灰。名称、指标和颜色在同一块区域，图形可快速呈现不同卡片。

第三张的零可能是有效结果，也可能是未录入或正在整理，画面没有给出明确名称。后续应先[确定状态](https://www.jvds.cn/share/ui-design/b2b-business-state-model)，再决定显示数值、占位或进度。灰色可以辅助，文字让含义独立可读。

这类情绪记录界面的数值需要来源和范围，还应回到支持它的记录。界达设计不依据指标判断人格或关系，数值精确不等于解释完整。原话、事件整理与他人故事也宜保持来源提示，不因统一圆角混在一起。

![Cases中两项指标与第三张灰色零值卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u141-i2.webp)

Case 3的两个0和灰条｜缺少标题与状态说明使零值身份不清楚

## 试用时间线把开始和结束摆出来

试用页在人像背景下列Today、两天后提醒、三天后结束，最后棕色开始按钮。旁边引导页用对话和音频示例创建事件，开始体验与记录一件事是两种动作。

时间线比只写免费试用更容易扫读，也应补真实开始结束、收费与[取消条件](https://www.jvds.cn/share/ui-design/saas-subscription-billing-ux)。开始创建事件时试用是否已经启动，需要在流程里说明，而不是由相邻两张图推断。

界达设计会让订阅与记录各自拥有结果反馈，事件保存后能认出对象，尚在整理时也有准确状态。柔和照片可以保留，试用条件和来源说明仍要有稳定位置。

![三天试用时间线与创建事件引导两屏](https://www.jvds.cn/upload/2026/1008/d187-tp/u141-i3.webp)

试用页的提醒和结束节点｜开始时间、收费与创建事件关系需明确

## 常见问题

### 未完成的事件卡能先显示零分吗？

应先说明状态。未录入、正在整理与有效零值不同，避免占位数字看起来像已得出的结果。

## 设计检查清单

- 明确取消录音影响哪段内容。
- 区分占位、处理中与有效数值。

## 让记录来源和状态更容易辨认

如果你的对话、情绪或日记产品需要整理输入与回顾，可以从原话、整理结果和保存状态开始讨论。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)