快速回答: 当苹果引入系统级可着色图标并强制执行深色模式小组件时,传统的情绪追踪器失去了其主要的视觉工具:颜色编码的情绪(如红色代表愤怒,绿色代表平静)。在 ViviDiary,我们重新设计了我们的应用图标和 iOS 小组件,使其依赖于 Alpha 通道、对比度和表情符号轮廓,而不是固定的颜色。这确保了我们 3 秒的情绪记录无论用户在主屏幕上应用何种自定义色调,都能保持直观。

用于情绪追踪器的深色模式可着色图标设计,显示基于形状的 UI
用于情绪追踪器的深色模式可着色图标设计,显示基于形状的 UI

多年来,情绪追踪行业一直依赖一种共同的、不成文的视觉语言。绿色代表好。红色代表坏。黄色则介于两者之间。如果你看看流行的“年度像素”网格,你本质上是在看一个人类情绪的交通信号灯。

但是,当操作系统剥离了这些颜色时会发生什么呢?

随着操作系统级自定义功能的引入——特别是可着色应用图标和强制单色深色模式小组件——我们对颜色的依赖变成了一个巨大的用户体验负担。如果用户将他们的主屏幕调成紫色,我们精心挑选的“糟糕”红色和“极好”绿色都会变成相同的紫色阴影。界面崩溃了。

这就是我们如何取消颜色编码情绪、我们取而代之构建了什么,以及为什么剥离颜色实际上使 ViviDiary 成为一个更具同理心的产品的故事。

情绪追踪中颜色编码的拐杖

当我们最初构建 ViviDiary 时,我们依赖颜色是因为它很简单。这是一种认知捷径。如果一个巨大的绿色按钮就在你面前,你就不需要阅读标签。

然而,对情绪进行颜色编码一直带有隐藏的包袱。

首先,它本质上是带有评判性的。用刺眼的红色描绘“糟糕”的一天,隐含地发出了失败的信号,引发了一种微妙的内疚感。ViviDiary 的设计初衷是陪伴在你身边,而不是充当一个苛刻的教练。我们明确避免压力式的连续打卡、完成百分比或“你今天错过了”这种带有内疚感的通知。然而,我们的调色板却无意中引入了那种压力。

其次,它在模块化方面扩展性不佳。我们提供了一个 5 级基于名称的情绪系统(极好、好、还可以、低落、糟糕)。但我们也允许用户开启 22 手动表情符号模块和 4 HealthKit 自动类别。试图在 标准的 5 表情符号量表 上保持语义颜色的含义,同时整合自定义用户模块,使我们的界面变成了一个混乱的彩虹。

当苹果宣布可着色图标时,我们意识到颜色是我们必须抛弃的拐杖。

为 iOS 27 可着色图标进行设计

为了在单色、用户自定义色调的环境中生存,我们必须从根本上重新思考我们的视觉架构。我们不能再依赖色相;我们必须依赖形状、对比度和排版。

Alpha 通道的转变

在我们的 React Native 和 Expo 环境中,我们彻底检查了我们的资产管道。对于我们的 iOS 27 应用图标设计,我们放弃了扁平的彩色 PNG。相反,我们使用 Alpha 遮罩重建了我们的核心图标。

当操作系统应用色调时,它本质上是查看 Alpha 通道(透明度)来确定在哪里应用用户选择的颜色,以及在哪里将背景降级为黑色或深灰色。如果你的图标依赖于带有黄色笑脸的白色背景,那么蓝色的系统色调会将整个图标变成一个浑浊、难以辨认的蓝色方块。

我们重新设计了我们的 5 级情绪指标,使其仅凭轮廓和表情就能被瞬间识别。“极好”的情绪由微笑的特定曲线和睁开的眼睛定义,而不是因为它是绿色的。“糟糕”的情绪由沉重的眉线和向下弯曲的曲线定义,而不是因为它是红色的。

演进表情符号记录 UI

因为 ViviDiary 是模块化的——新用户开始时只有情绪开启,其他一切关闭——表情符号记录 UI 是用户与应用交互的主要方式。

我们转向了高对比度、形状优先的设计系统。当用户打开应用(或小组件)时,活动状态现在通过不透明度、比例和微妙的触觉反馈来指示,而不是颜色切换。这与我们即将推出的 Genmoji 情绪记录 功能完美结合,确保自定义用户生成的形状无论周围的 UI 主题如何,都能保持清晰易读。

显示高对比度形状而不是颜色的表情符号记录 UI
显示高对比度形状而不是颜色的表情符号记录 UI

我们拒绝的方法:“强制原始”方案

在我们致力于形状优先的重新设计之前,我们探索了另外两条路径。我们拒绝了这两条路径。

替代方案 1:强制使用原始颜色 苹果的 API 在技术上允许开发者在某些上下文中选择退出小组件着色,强制小组件无论用户的主屏幕设置如何,都以其原始颜色呈现。

我们在内部进行了测试。看起来很糟糕。如果用户花时间策划一个时尚的、深色模式的、单色的主屏幕,强行将一个明亮的、多色的小组件放入其中会让人感到傲慢。它大声疾呼:“我们的品牌比你的偏好更重要。”我们在不到一周的时间内就否决了这个想法。

替代方案 2:放弃交互式小组件 我们曾短暂考虑过完全从小组件中移除情绪记录,将小组件降级为纯粹的观察工具(例如显示你的每周镜像模式)。我们过去在小组件变得过于臃肿时,已经 砍掉了我们的复杂小组件。

然而,我们的核心承诺是低于 30 秒的签到时间。强迫用户每次想记录情绪时都打开应用增加了摩擦。我们需要小组件是交互式的,这意味着我们必须解决设计问题,而不是逃避它。

为 3 秒记录调整深色模式小组件

为了实现真正的 用于情绪追踪器的深色模式可着色图标设计,我们重点关注了小组件体验。

当用户与我们的小组件交互时,他们通常很匆忙。他们想点击“好”,为“家庭”选择一个表情符号,然后继续做别的事。

  1. 基础层: 深邃的纯黑色 (#000000),用于 OLED 屏幕,以节省电池并减少眼睛疲劳。
  2. 容器层: 半透明的灰色/着色表面,用于对相关模块进行分组(例如日常习惯与待办事项)。
  3. 操作层: 用于交互元素的高对比度白色或明亮着色的图标。

通过移除颜色编码,我们实际上提高了 基于手势的情绪记录 的速度。用户不再需要解析相互竞争的颜色;他们的眼睛会立即被屏幕上对比度最高的元素所吸引——即情绪本身的形状。

云同步、隐私和小组件架构

当你构建绕过主应用界面的交互式小组件时,数据架构和隐私就成了关键的对话。

我想完全透明地说明 ViviDiary 如何处理这些数据,因为目前在日记领域有很多误导性的营销。我们通过严格的数据最小化和在任何 AI 处理之前对你的文本进行去标识化来保护你的隐私。

对于 ViviDiary 来说,那是错误的。我们使用带有严格去标识化的云存储作为我们的核心架构,我们并不假装不是这样。

ViviDiary 是 使用 Supabase 进行云存储的。当你点击着色小组件上的情绪时,该数据会被安全地同步到云端。我们的隐私优先方法并非来自将数据困在你的手机上;它来自严格的 数据最小化和去标识化。

我们只收集你选择提供给我们的内容。因为应用是模块化的,如果你只开启了情绪模块,那这就是唯一被同步的数据点。

此外,如果你选择使用我们的 AI——这纯粹是一个可选的辅助工具,用于你想要更深入记录的日子,绝不是核心要求——你的日记文本在任何外部或 AI 处理发生之前都会被完全去标识化。AI 不会在没有你明确审查的情况下保存或确认任何内容。我们通过在数据处理前对其进行匿名化,结合强大的云安全和严格的数据最小化来保护你的隐私。

数据:基于形状的用户体验如何影响留存率

每当你移除像颜色这样的核心视觉元素时,你就有可能让你的用户群感到困惑。我们将基于形状、对色调友好的 UI 推送给了一组 10,000 名用户(涵盖了我们的免费层级和我们的高级 $2.99/月订阅者)以衡量影响。

结果让我们感到惊讶。

* 记录速度: 平均签到时间稳定在 24 秒。颜色的缺失并没有减慢用户的速度。
* 小组件参与度: 基于小组件的记录增加了 18%。那些在主屏幕上应用了自定义色调的用户,现在更有可能保留我们的小组件,因为它符合他们的审美。
* 定性反馈: 在用户访谈中,7/10 的用户表示,新界面感觉“更平静”且“不那么苛刻”。

最后一点至关重要。通过移除红/绿交通信号灯系统,我们无意中创造了一种更 视觉上适应性强的体验。

用户告诉我们,当记录“糟糕”的一天时,如果它没有发出愤怒的红光,感觉就不会那么令人沮丧。这与我们对 Focus 模块(日常习惯 + 待办事项)的理念完美契合。ViviDiary 中的日常习惯只是你想要注意并保持的事情——它保持一个温和的个人最佳记录,从不进行压力式的连续打卡。从 UI 中移除颜色编码的失败状态,强化了整个应用中这种温暖、非指令性的基调。

接下来是什么

取消颜色编码的情绪是操作系统更新带来的被迫之举,但它产生了一个更好的产品。它迫使我们依赖强大的排版、清晰的图标和高对比度。

接下来,我们正在研究如何将这种相同的形状优先理念带到我们的每周镜像功能中。目前,镜像依赖于数据关系来帮助你发现模式(例如,“当你标记‘阅读’时,你经常记录‘好’”)。我们正在探索如何在不依赖彩色条形图的情况下可视化这些模式,保持界面像记录体验本身一样平静和中性。

颜色是设计中的强大工具。但有时,移除它才是让用户真实情绪显露出来的最好方式。