全部案例
Cirsureas App

Cirsureas App

无线智能温度探针产品配套应用程序

改版设计 / 用户体验 2024

设计命题:把温度读数,变成下一步行动

做温度探针的配套应用时,我想到的是一边准备食材、一边偶尔看手机的使用情境。界面既要快速显示读数,也要让多支探针和各自任务容易辨认。我围绕这种注意力切换,安排信息的层级与位置。

Cirsureas 是无线智能温度探针的配套应用。这次改版围绕多探针识别、烹饪记录和 AI 定制菜单展开。我把设备、任务、提醒与记录复用视作一条连续的体验,重点解决用户在不同阶段需要反复确认的问题。

改版思路:从设备面板,走向任务工作台

我把改版的变化集中在设备分组、选择页面与功能导航上。底座和探针形成上下层级,复杂选择拥有独立页面,监测和管理则通过底部导航分开。视觉上也转向更明亮的底色,让当前任务成为重点。

改版前后对照 / 层级、选择与功能分区

改版前后对照 / 层级、选择与功能分区

我在新版中采用更明亮的色调,把底座与探针分层呈现,并通过独立选择页与底部导航组织内容。对照中想呈现的,是信息结构和阅读节奏的变化:设备归属更集中,选择过程更舒展,管理内容也有独立位置。

改版方向界面中的变化希望解决的判断问题
设备层级底座下面展开对应探针,保留连接和电量我正在看哪组设备、哪一个测量对象
任务设置在食材与目标页面集中选择,再开始烹饪我选择了什么,下一步会启动什么
功能分区烹饪主界面与更多、历史等入口分开正在监测时,怎样避免被管理功能打断

用户任务:同一位使用者,有三种注意力状态

我按使用情境拆解注意力:初次设置时,用户愿意停下来选择;烹饪中可能只看一眼手机;结束后才有时间整理照片和参数。三个阶段需要不同的信息密度,也不应被要求走同一条长流程。

使用情境需要确认的事可能遇到的阻力设计回应
开始之前哪支探针、什么食材、什么目标设备标识难辨,参数没有上下文设备分组、食材分类、目标选择
烹饪进行中当前状态、下一条提醒、是否要干预多任务竞争注意力,时间含义混淆总览、曲线、提醒分工展示
结束之后这次做了什么,下次怎样复用参数与成品照片分散,记录缺少识别点历史摘要、照片、自定义配置与选择性分享
  • 信息优先级我先让设备与任务成为识别点,再用数字和图形展开状态。
  • 使用节奏设置时可以仔细选择,烹饪中适合快速查看,记录页则允许慢下来阅读。

核心路径:让一次烹饪形成可回看的闭环

我把核心路径组织为“识别设备—建立目标—观察与干预—保留经验”。食材选择、历史配置与 AI 建议是不同起点,但都需要回到用户能够核对的目标与提醒。

  1. 识别设备确认底座、探针、连接与电量,再进入对应任务
  2. 建立目标选择食材或已有配置,核对目标后开始
  3. 观察与干预区分读数、趋势、提醒和结束操作
  4. 保留经验回看任务记录,补充照片,选择复用或分享

设备层级:先认对探针,再理解温度

我让底座成为分组容器,探针成为具体的任务单元。相同结构里可以出现待开始与烹饪中的内容,读者先认清归属,再查看进度。层级关系同时体现在间距、字号和卡片嵌套中。

设备总览 / 将连接关系变成可见层级

设备总览 / 将连接关系变成可见层级

我让 Repeater 作为上层容器,在下面展开对应探针。名称、连接、电量和任务状态按固定顺序排列,底座负责归组,探针负责具体阅读与操作。

连接详情 / 把归属和状态说清楚

连接详情 / 把归属和状态说清楚

我通过 Probe Box 弹窗展开底座与探针的关系,连接状态与名称紧邻。相近的行高、图标尺度和文字位置,让多个对象可以在一个紧凑区域内被连续阅读。

低电量 / 让异常指向具体对象

低电量 / 让异常指向具体对象

我把低电量提示组织成集中的说明区域,让状态图标、标题和文字共同形成视觉焦点。它沿用设备页面的基础语言,同时通过更强的对比提醒用户关注当前状态。

  • 识别结构我让设备名称、连接状态和读数保持邻近,形成完整的信息单元。
  • 状态语言图标、文字和辅助色共同表达状态,让设备卡片在不同场景下保持相同骨架。

任务起点:把“我要做什么”放在参数前面

单探针详情在未设置任务时仍展示当前温度,但用 Tap to Begin 提示缺少烹饪目标。随后先选择食材,再进入类别和目标页面。这让温度不再是孤立的输入框,而是依附于用户想完成的任务。

待开始 / 区分设备在线与任务未建立

待开始 / 区分设备在线与任务未建立

我在任务尚未设置时仍保留探针名称和读数,再用 No cook set up 与开始入口建立下一步。相同的主框架可以容纳不同状态,内容变化时页面仍有稳定感。

食材入口 / 用熟悉的对象缩小选择范围

食材入口 / 用熟悉的对象缩小选择范围

我用食材图标与名称组成六类入口,Previous Cooks 则提供另一种开始方式。图标带来熟悉感,统一的尺寸和排列让选择页既轻松又整齐。

目标选择 / 把选中结果放在启动动作之前

目标选择 / 把选中结果放在启动动作之前

我把食材子类、选中内容、温度刻度和 Start Cook 放在同一页。列表负责范围选择,刻度负责数值呈现,底部按钮收拢操作。几种组件通过共同的边距和强调色形成联系。

  • 页面节奏我让常规选择在独立页面中展开,局部确认则使用更集中的操作面。
  • 组件联系食材图标、选择项与温度刻度共享相近的边距和选中样式,让不同控件之间有整体感。

监测反馈:一个读数,不足以解释整个过程

总览回答“现在怎样”,曲线回答“刚才发生了什么”,提醒页回答“接下来关注什么”。三个视图共用同一探针和任务标题,能够减少切换后重新定位对象的成本。

任务总览 / 同时区分目标、当前值与时间

任务总览 / 同时区分目标、当前值与时间

我用中心环形图和大数字建立总览焦点,再把目标、当前值和时间分别放在周围。不同字号区分主次,环形结构提供整体感,适合短暂查看时快速找到核心信息。

升温曲线 / 让变化方向成为信息

升温曲线 / 让变化方向成为信息

我用紫色曲线与红色目标线形成对比,图例与标题保留在稳定位置。曲线拥有较宽的展示面,让变化本身成为主角,也与总览页的大数字形成不同阅读尺度。

回落曲线 / 保留峰值之后的过程

回落曲线 / 保留峰值之后的过程

我保留曲线在峰值之后的变化,让记录呈现完整的过程形态。与目标线、图例和任务标题放在一起时,图表既能独立阅读,也能回到当前烹饪的上下文。

  • 信息分工我用大数字承接快速查看,用曲线承接过程阅读,两种信息各有尺度。
  • 视觉联系任务标题、选中样式与主要操作保持稳定,让视图切换有共同参照。

提醒机制:按触发条件组织,而不是按弹窗组织

我用达温、冷却和时长三个条件组织提醒,分别配上图标与文字。它们可以共处一张列表,但各自有清楚的识别点。对于这种短信息,我更看重排列的规律,而不是增加更多装饰。

新增提醒 / 先表达条件,再填写参数

新增提醒 / 先表达条件,再填写参数

我将冷却温度与时长分别组织为表单单元,让条件选择先于参数填写。标题、输入区和说明保持邻近,主操作位于页面收尾,整体沿用应用的表单节奏。

活动提醒 / 给每条规则一个可辨认的位置

活动提醒 / 给每条规则一个可辨认的位置

我用红、紫、黄图标给不同提醒建立识别点,再配合名称与数值形成简短行单元。颜色增加扫读速度,规则排列则让多条内容放在一起依然清楚。

失效提醒 / 保留发生过的事

失效提醒 / 保留发生过的事

我把活动提醒与失效提醒分组呈现,历史条目仍保留在列表中。两组内容使用相近结构,通过标题和视觉强度区分,让当前关注与过去记录各有位置。

  1. 设置条件在独立区域选择温度或时长,相关参数就近排列。
  2. 查看列表用图标、标题和数值形成一个简短提醒单元。
  3. 阅读提示把触发信息集中呈现,让提醒拥有明确的视觉焦点。
  4. 回看记录活动项与历史项分组,保留列表的连续性。
  • 动作层级我让确认提示、管理提醒与结束任务采用不同的动词和位置,各自对应清楚的意图。
  • 组件复用提醒卡片、说明和按钮沿用共同规则,条件变化时仍然保留熟悉的样式。

结束任务:达温提醒之后,仍然需要明确的交接

我把目标达成与任务结束设计成不同的阅读时刻。达温提示聚焦当下状态,结束后的摘要负责整理过程,再引向记录与照片。几种页面既有连续性,也有不同的信息密度。

主动结束 / 在明确后果后再执行

主动结束 / 在明确后果后再执行

我让 End the Cook 进入一个集中的确认面。任务结束与普通查看有不同的操作重量,所以这里用独立标题和主次按钮形成短暂停顿,让决定拥有清楚的位置。

达温提示 / 保留尚未结束的提醒

达温提示 / 保留尚未结束的提醒

我把达温信息作为提示焦点,同时保留其他活动提醒。主提示与补充列表有不同的密度,既能快速读到当前结果,也能继续了解任务中的其他内容。

完成摘要 / 给下一步一个明确入口

完成摘要 / 给下一步一个明确入口

我把名称、时长、目标、峰值和提醒整理成完成摘要,再提供详情与照片入口。结束页因此也是记录的起点,数字摘要和后续内容自然接续。

  • 关键取舍我把结束动作组织为集中的确认,把普通查看和切换保持轻量。
  • 视觉延续任务名称、读数和提醒在不同页面中沿用相近的表达,让过程与结果相互关联。

配置复用:保存经验,不打断这一次开始

临时调整参数和保存可复用配置是两种意图。我将 Just Cook 与 Save & Cook 并列,让用户既能直接开始,也能为这套参数留下一个下次认得出的名字。

可选保存 / 把立即使用与长期复用分开

可选保存 / 把立即使用与长期复用分开

我用 Just Cook 与 Save & Cook 表达立即使用和保留配置两种意图,名称、类别与温度放在按钮之前。两条路径共享同一组参数,让选择保持集中。

配置列表 / 用名称找回自己的设置

配置列表 / 用名称找回自己的设置

我让自定义配置与标准选项沿用相近的列表结构,名称、选中标记和管理入口各有位置。它们既属于同一个任务语境,也通过分组保留了不同来源。

  1. 调整参数本次选择产生一套可确认配置
  2. 选择是否保存立即使用,或命名后保存并使用
  3. 再次找回按名称选择配置,核对当前目标后开始

烹饪记录:让参数与结果留在一起

我为烹饪日志增加照片信息,让参数与成品放在一起。数值说明做了什么,照片帮助回忆做成了什么;两者归于同一记录后,历史才更容易成为下一次选择的参考。

历史列表 / 用摘要缩小回忆范围

历史列表 / 用摘要缩小回忆范围

我用名称、日期、目标和时长组成历史记录单元。信息顺序和间距保持稳定,让多条记录可以连续扫读;详情中的照片则进一步补充这次烹饪的视觉记忆。

记录详情 / 把过程曲线与成品照片关联

记录详情 / 把过程曲线与成品照片关联

我把照片放在任务摘要与曲线之后,让参数、过程和成品在同一条阅读路径上相遇。数字说明过程,图片带来更具体的感受,两种内容互相补充。

选择性分享 / 明确哪些内容会离开当前页面

选择性分享 / 明确哪些内容会离开当前页面

我把详情、曲线和照片组织成可以分别选择的内容,已选数量靠近操作区域。分享在这里也是一次轻量的内容编排,让用户围绕不同信息单元决定呈现范围。

  • 整理节奏我在完成页提供照片入口,让过程记录和成品展示自然接续。
  • 内容选择详情、曲线与照片分别形成可识别单元,分享时围绕这些单元组织范围。

AI 辅助:把建议转换成可检查的配置

我把 AI 建议看成一种新的内容输入方式:对话承接想法,卡片把类别、目标和提醒整理出来,再由用户选择是否应用。我的设计重点,是让自由表达与结构化参数之间有一个看得见的过渡。

对话起点 / 让第一次提问有参照

对话起点 / 让第一次提问有参照

我用示例问题为对话建立起点,先从食材、做法和偏好这些熟悉的话题进入。页面保持轻量,输入区与示例内容拥有清楚的主次关系。

结构化建议 / 把将被应用的内容摆出来

结构化建议 / 把将被应用的内容摆出来

我把类别、温度与提醒收在建议卡片里,让长对话中也有一个稳定的阅读单元。继续调整与 Apply to Cook 分别连接探索和执行,卡片成为两种节奏之间的过渡。

历史入口 / 在需要持久记录时解释登录

历史入口 / 在需要持久记录时解释登录

我将对话历史与登录入口放在同一语境里,用说明建立账户和记录之间的联系。操作数量保持克制,页面集中表达当前可选的方向。

  1. 表达想法从食材、做法和偏好开始,用示例建立提问方向。
  2. 阅读建议通过卡片查看类别、目标与提醒。
  3. 选择应用以明确按钮把建议连接到任务设置。
  4. 回看对话历史入口集中保存上下文的阅读路径。
  • 结构化表达我用卡片收拢关键参数,让聊天中的信息拥有更稳定的阅读形式。
  • 操作层级继续对话和应用建议分别承接探索与行动,两种入口保留各自位置。

设备设置:让技术信息更容易接近

连接、权限与单位是偏技术的信息,我希望通过分组和图示把它们讲得更直观。设置页采用简洁列表,权限页集中展示状态,帮助页则回到具体设备与使用环境,三种表达各自承担不同内容。

设置入口 / 把连接、单位与通知分开管理

设置入口 / 把连接、单位与通知分开管理

我把连接、温度单位、声音、权限和语言组织成清楚的设置组。各行共享标签与控件位置,组间留白帮助区分用途,让技术选项也能保持轻松的阅读感。

权限状态 / 给排查问题一个起点

权限状态 / 给排查问题一个起点

我用蓝牙、定位等项目和对应状态组成权限页面,状态文字与操作入口保持邻近。它与普通设置页采用相近的骨架,重点则转向当前能力的查看。

情境帮助 / 用设备和环境解释连接限制

情境帮助 / 用设备和环境解释连接限制

我通过烤炉与探针示意,让连接说明回到具体使用环境。图形给文字提供参照,也延续了应用中食材图标与照片带来的生活感;设备信息不必只有技术术语。

  • 帮助表达我用设备与场景示意连接技术说明,让文字有具体的参照。
  • 功能分区烹饪、记录、设置和 AI 拥有相对独立的入口,主要监测区保持集中。

我的设计取舍:既像工具,也有生活感

这个项目既有温度、曲线和连接这样的工具信息,也有食材、照片与烹饪记录这样的生活内容。我希望两者在同一套界面里自然共存:数值清楚、操作直接,记录与图片则有更舒展的空间。

信息类型我的组织方式视觉重点使用节奏
设备与任务底座分组,探针独立呈现名称、层级与状态位置稳定快速认出当前对象
数值与曲线总览和趋势分别展开大数字与宽绘图区各有尺度快看状态,再细看过程
提醒与确认短列表与局部操作面图标、文字和按钮形成紧凑单元集中处理当下事项
照片与记录摘要、曲线与成品关联图片带来识别点,文字补充过程慢下来回顾与整理
AI 建议对话与参数卡片结合自由文本与结构信息区分层级从探索想法转向选择

我最想保留的,是这套界面在不同注意力状态下的适应性。抬头看一眼时,能找到需要的数字;愿意停下来时,又有曲线、照片和内容可以展开。对我来说,精致感来自这些尺度之间的协调。