情绪记录App设计：Carely的亲切感从哪来

Carely这套情绪记录App设计，最讨人喜欢的是记录开始前的那一点轻松感。猫头鹰待在有窗户、绿植和地毯的房间里，往下就是一排表情。画面邀请人慢慢看，记录的入口也没有藏起来。

核心结论

• Carely把角色放进日常房间，让情绪记录有了亲切的开场。
• 首页从彩色场景过渡到白色卡片，表情和记录数据仍然清楚。
• 聊天短句给人一个开头，自由输入让复杂的感受也能说出来。

这间小房间，让首页多了一点生活感

首页的亲切感，很大一部分来自房间里的普通物件。窗边有两把椅子，墙上挂着画，柜子旁放着绿植。猫头鹰站在地毯中央，像这个空间里的一个住客。看起来热闹，却没有把记录页面变成一张独立的插画海报。

仔细看手机内部，头像、问候和日期留在左上角，预约卡紧接在场景下方。用户既能看看角色，也能读到与自己有关的信息。做吉祥物设计时，这个细节很实用：角色得进入实际页面，和文字一起待得住。

绿色房间与紫色角色之间的对比也很舒服。紫色继续用在预约卡上，角色的颜色于是和功能区接了起来。做类似界面时，先把一张真实卡片放进插画里，比只看一组角色立绘更容易发现配色是否合适。

往下看，颜色安静下来了

首页把信息较多的部分放回白底，这是这套设计拿捏得好的地方。上面是房间，到了“Daily mood log”，背景变得简单，一排圆形表情很容易被看见。再往下，分数、日记和睡眠记录各有自己的卡片。

界达设计认为，这个过渡值得借鉴。插画里已经有家具、角色和光影，数据区若继续用同样复杂的背景，小字就很难读。这里留出白底，让视线从看场景转到找信息。

不过，六个表情里有两个绿色笑脸相当接近。它们都可爱，但各自代表什么，单看图还拿不准。这张情绪记录界面若继续打磨，建议先给这两个选项补上简短名称，选中后再让人写一句补充。表情的细节还在，选择也更踏实。

聊天页最实用的，是那些不长的短句

聊天页给出的几句话，是一个容易忽略的好细节。“I’m Feeling happy”“My mind feels light”等短句排在输入框上方，下面保留“Ask anything...”和发送按钮。画面很丰富，开始说话的地方却明确。

图里“My mind feels light”这一项用绿色突出，同一句话也出现在右侧的消息气泡中。短句如何变成一句对话，画面给出了具体例子。如果晚上只想留一句“今天有点累”，现成选项又不贴切，下方的输入框就有用了。

以界达设计的经验来说，预设短句和输入框放得近，评审时就能一起检查：短句是否太长，横向排列是否容易发现后面的内容，输入框是否足够显眼。这些问题落实到一张屏幕上，比泛泛地说“降低表达门槛”清楚得多。

仅凭静态图，无法判断点选短句后是否允许编辑、何时发送。若能先编辑，再由用户确认发送，表达会更从容；键盘弹出时，最近一条消息和发送按钮的位置也值得单独检查。

介绍网站也接住了这套视觉

介绍网站沿用了App里的房屋、猫头鹰和绿色景观，下载按钮与部分文字用紫色强调。看到网站，再看到手机界面，很容易认出它们属于同一套产品。

功能卡、文章封面和问答区也在这套视觉里各有位置。尤其是白底功能卡，保留了插画的气氛，又给说明文字留出干净的地方。对于健康类App界面设计，这是一种可参考的处理：品牌形象延续下去，功能介绍仍然读得明白。

常见问题

情绪记录App适合用大面积插画吗？

适合与陪伴、日常记录相关的页面，但要给输入和回看留出清楚的位置。Carely把房间放在首页上部，记录区域转为白底；借鉴时也要检查小屏上能否及时看到入口。

情绪记录只用表情够不够？

表情适合快速选择，复杂感受还需要文字补充。相近图标最好配上能分辨的名称，并让用户修改刚才的选择。

App和介绍网站怎样保持一致？

沿用角色、主色和插画风格，文字区按各自任务安排。Carely的网站延续了房屋与猫头鹰，又用白色功能卡讲清产品内容，适合用来观察这种配合。

设计检查清单

• 把角色和真实卡片放在一起，检查文字是否仍好读。
• 在较小的手机屏幕上，找一次情绪记录入口。
• 逐个解释表情含义，给难分辨的选项补上名称。
• 点选聊天短句，再打开键盘，检查编辑与发送的位置。