智能咖啡冲煮场景与手机 App 数据界面

UI/UX设计|设计实习生|2026.04—06

智能咖啡冲煮 App 体验优化

项目概览

本项目面向手冲与意式咖啡场景,围绕器具与 App 联动的完整使用过程,优化了数据呈现、操作反馈和用户体验。

我的工作

负责冲煮中与冲煮后的核心流程优化,并完成手机与 iPad 的响应式设计、组件规范整理,协同产品与开发推进方案上线。

项目成果

实时数据看板冲煮数据更清晰
多端适配方案支持手机与 iPad
55 项体验改进完成审查与优化建议
向下滚动查看项目

01 / PRODUCT POSITIONING

产品定位

智能咖啡秤、咖啡器具通过蓝牙连接手机 App

App 通过蓝牙连接无屏智能咖啡秤,帮助用户设定参数、辅助冲煮,并记录、回顾与分享每一次咖啡冲煮。

APP

社区

  • 查看 / 收藏 / 分享咖啡冲煮配方

冲煮

  • 准确记录咖啡冲煮参数
  • 实时参考冲煮水流 / 浓度参数
  • 复刻咖啡配方,提升冲煮技巧

我的

  • 详细记录每一次冲煮的配方
  • 收藏他人的咖啡配方

02 / AUDIT & SYNTHESIS

问题梳理与归纳

审查记录共有 55 条,其中筛选出 17 条直接围绕冲煮链路的问题,以及 7 条与配方详情和曲线相关的问题。

55 条体验审查记录的表格截图
冲煮链路体验问题的筛选截图
55

优先级依据

  1. 01用户价值优先
  2. 02投入产出比优先
  3. 03业务战略优先
01

核心冲煮链路

  • 重要数据分散,页面缺少清晰的视觉结构
  • 部分界面元素不易识别
  • 缺失初始状态和防错环节
02

整体视觉统一性优化

  • 产品缺少统一的视觉语言与组件规则
03

未来新功能规划

  • 拓展咖啡豆业务,建立连接“咖啡豆—配方—冲煮记录”的豆仓功能

03 / CORE BREWING JOURNEY

核心冲煮链路

沿着一次完整冲煮,在同一张流程看板中对应展示关键界面与 UI / UX 问题。

  1. 01预设参数粉重 · 粉水比 · 目标值
  2. 02冲煮准备进入冲煮
  3. 03实时查看冲煮数据冲煮进行中
  4. 04结束并保存完成冲煮
  5. 05记录配方并分享冲煮后回顾
冲煮准备阶段的原始 App 界面SMART BREW

UI 问题

  • 页面信息层级混乱

  • 缺少约束边界,视觉上杂乱

UX 问题

  • 开始冲煮前无提醒,直接开始计时

实时查看冲煮数据阶段的原始 App 界面SMART BREW

UI 问题

  • 核心数据散乱

  • 暂停 / 保存按钮较小,且不符合常规使用习惯

  • Icon 和文字排列不统一

UX 问题

  • 缺失操作异常时的数据防丢提示

结束并保存阶段的原始 App 界面SMART BREW

UI 问题

  • 核心数据散乱

  • 暂停 / 保存按钮较小,且不符合常规使用习惯

  • Icon 和文字排列不统一

UX 问题

  • 缺失操作异常时的数据防丢提示

  • 进度条无法展示咖啡液重量超出的部分

记录配方并分享阶段的原始 App 界面

UI 问题

  • 数据展示效率低

  • 配方篇幅过长

UX 问题

  • 缺少具体时刻下的数据查看窗口

04 / BREWING INTERFACE REBUILD

核心冲煮界面重构

重排关键数据、目标进度、曲线与操作,让冲煮信息更快被读懂。

01

UX / UI · 信息层级与操作反馈

重构后的手冲冲煮界面
STEP 01

重构信息层级

  1. 01

    通过分区建立从核心数值、目标进度到实时曲线的稳定阅读路径。

  2. 02

    依据信息关注优先级,突出注水量或萃取量等核心数据,将时间与实时流速作为辅助信息。

优化操作体验

  1. 01

    在进度条目标值之后增加溢出区间,使用户在实际数据超过目标时仍能判断偏差。

  2. 02

    使用更符合用户认知的播放、暂停、重置与保存控件。

01

UX / UI · 信息层级与操作反馈

重构后的手冲冲煮界面
STEP 01

重构信息层级

  1. 01

    通过分区建立从核心数值、目标进度到实时曲线的稳定阅读路径。

  2. 02

    依据信息关注优先级,突出注水量或萃取量等核心数据,将时间与实时流速作为辅助信息。

优化操作体验

  1. 01

    在进度条目标值之后增加溢出区间,使用户在实际数据超过目标时仍能判断偏差。

  2. 02

    使用更符合用户认知的播放、暂停、重置与保存控件。

02

UI SYSTEM · 模式适配

适配后的意式冲煮界面
STEP 02

适配手冲与意式使用场景

  1. 01

    保持手冲与意式模式的信息架构和操作逻辑一致。

  2. 02

    针对不同冲煮方式适配参数、单位、进度反馈与曲线。

05 / JOURNEY EXPERIENCE COMPLETION

链路体验补全

沿着完整冲煮流程,补充关键状态、操作反馈与防错机制,让体验从开始到保存自然衔接。

01 / 准备 · 冲煮开始

从准备提示到自动计时

体验断点

倒计时结束后缺少明确的开始信号,用户需要自行判断何时注水、何时计时。

补全方式

倒计时结束后提醒开始注水;检测到重量变化,系统自动开始计时。

倒计时冲煮开始前的倒计时界面
等待注水提示注水并等待重量变化的冲煮界面

06 / DESIGN SYSTEM

设计系统

将界面优化沉淀为可复用的字体、图标、组件与色彩规则,为不同冲煮模式和设备尺寸建立一致的视觉语言。

01TYPOGRAPHY
中文与英文字体规范
02ICONOGRAPHY
产品通用图标规范
03COMPONENTS
标签按钮与冲煮操作控件状态
04COLOR TOKENS
产品语义色彩规范
  1. 01

    跨平台字体规范

    iOS:中文使用 PingFang SC,英文与数字使用 SF Pro;Android:中文使用思源黑体,英文与数字使用 Roboto。

  2. 02

    统一线性图标风格

    Icon 风格与品牌的线性简约语言保持一致,以线性元素为主。

  3. 03

    功能导向的色彩体系

    以黑色为背景色、橙色为主色,其余辅助色服务于功能需求,用于区分不同参数类型。

TYPE · ICON · COMPONENT · COLOR

07 / MULTI-DEVICE ADAPTATION

多设备适配

以三套布局约束适配不同设备,保持一致的信息层级与操作效率。

01

重新组织,而非等比放大

iPad 端重新分配模块空间,并针对字号、间距、导航、图表与操作控件进行适配。

  • 字号与间距
  • 模块与导航
  • 图表与控件
02

两套平板约束

iPad mini 使用 768 pt 紧凑约束;iPad Pro 使用 810–1024 pt 宽屏约束,并保持相同的信息结构。

  • 紧凑平板
  • 宽屏平板
  • 结构一致
iPhone320–428 pt紧凑手机约束
iPhone 冲煮界面
iPad mini768 pt紧凑平板约束
iPad mini 冲煮界面
iPad Pro810–1024 pt宽屏平板约束
标准及大尺寸 iPad 冲煮界面

Viewport width / 逻辑宽度(pt)

320 pt428 ptiPhone
768 ptiPad mini
810 pt1024 ptiPad Pro

08 / FUTURE FEATURE PLANNING

CONCEPT / INTERNAL REVIEW · 未上线

未来功能规划:咖啡豆仓

以新增的咖啡豆一级入口为起点,连接咖啡豆建档、库存管理、冲煮调用与自动库存同步。

01

新增一级功能入口

在发现、游戏、冲煮与我的之外,新增“咖啡豆”入口,集中承载豆仓能力。

02

建立数字咖啡库存

统一记录咖啡豆信息、养豆状态与剩余重量,让当前库存清晰可见。

03

连接豆仓与冲煮

在冲煮参数预设中直接选择豆仓咖啡豆,减少重复填写并建立使用关联。

04

持续同步库存变化

冲煮完成后按实际用量扣减库存,使咖啡豆信息、冲煮参数与使用记录保持一致。

09 / CORE EXPERIENCE & INTERFACE

CONCEPT / INTERNAL REVIEW · 未上线

核心界面展示

围绕咖啡豆的录入、库存管理与冲煮使用,设计一条连续的数字化管理链路。

BEAN INFO 01 / 基础信息
填写咖啡豆基础库存和烘焙信息的手机界面
BEAN INFO 02 / 补充信息
填写咖啡豆存储、风味和产地信息的手机界面

01 / 建立咖啡豆档案

分组填写,降低建档负担

基础库存优先填写,烘焙、风味与产地信息按需补充,让建档更快也更完整。

基础库存
名称、重量、价格
烘焙与存储
日期、程度、存储
风味评价
评级、标签、笔记
产地信息
产地、豆种、处理法

02 / 管理当前与历史库存

快速掌握库存状态

豆卡集中呈现养豆状态与剩余重量,并支持搜索、排序、移入历史和删除。

  • 搜索与排序
  • 养豆状态
  • 剩余重量
  • 调整顺序
  • 历史与删除
EMPTY / 空状态
咖啡豆仓空状态手机界面
CURRENT / 当前豆仓
当前咖啡豆仓手机界面
HISTORY / 历史库存
历史库存手机界面
01 / 未选择咖啡豆
未选择咖啡豆的冲煮预设手机界面
02 / 选择咖啡豆
从咖啡豆仓选择咖啡豆的手机界面
03 / 同步库存
选择咖啡豆后自动同步库存的冲煮预设手机界面
  1. 01 冲煮预设
  2. 02 选择咖啡豆
  3. 03 自动更新库存

03 / 与冲煮流程联动

在冲煮前直接调用豆仓信息

用户可以在冲煮参数预设中选择豆仓内的咖啡豆。完成选择后,当前豆名与剩余重量进入冲煮上下文;冲煮完成后,系统按实际用量更新库存。

本方案处于内部评审阶段,库存同步通过冲煮预设界面状态表达,不虚构上线结果。