食光 App 高保真交互稿
一个以「语音 + AI」为第一交互的家庭食材管家。本稿覆盖 五大 Tab / 14 屏 App 界面 + 1 屏食光贴设备端 UI， 并单列一章拆解 AI 营养师「小食」的对话状态机、流式回复 UI、兜底策略与人格尺度 —— 这是本产品体验成败的真正分水岭。
为什么这个 App 长这样
厨房是一个「手是湿的、注意力是碎的、停留是短的」场景。传统 App 的表单式录入在这里必然失败。 我们把交互重心从「点」挪到「说」，把 App 的角色从「记账本」改成「会接话的搭子」。
底部导航固定五项，中间「小食」做凸起处理 —— 它不是一个平级的 Tab，而是贯穿全站的能力入口， 在任意界面长按也可唤起。
临期看板
采购清单
语音优先
三环闭环
商城
- 新鲜 · 绿 #0E9F6E —— 剩余保质期 > 7 天
- 临期 · 琥珀 #E08A00 —— 剩余 ≤ 3 天，进入首页优先流
- 已过期 · 红 #DC3F45 —— 只提供「丢弃 / 已吃掉」两个动作，不推荐入菜
- 运动 · 蓝 #2F6FED / 睡眠 · 紫 #7357E6 —— 仅用于健康 Tab，不进入食材语境
- 语音（主） —— 冰箱贴端 + App 端，采购归家时批量说，一次进 5–10 项
- 拍照（辅） —— 一次识别 ≤20 项，适合外卖买菜到货开箱
- 扫码 / 手动（兜底） —— 预包装食品扫条码带出品名与保质期
- 三者共用同一个「待确认暂存区」，用户只需要确认一次
- 画布 375×812，外框圆角 44px、深色边框 10px，含灵动岛与 Home Indicator
- 所有食材名 / 菜名 / 数值均为可推敲的真实内容，无占位块
- 图标 100% 内联 SVG path，无外部 CDN、无图片文件
- 数字为演示用估算值，正式版需接真实营养数据库校准
设计规范条
与 assets/css/tokens.css
完全同源。App 端字号阶梯独立于文档端，移动端最小可读字号锁定 10px（仅用于角标/日历格）。
#0E9F6E#E08A00#DC3F45#2F6FED#7357E6#F26B22#F7F4EC#12211B规则：一屏之内状态色最多同时出现 3 种；红色只用于「已过期」与「删除」，不得用于营销强调（营销用暖橙）。
15 屏完整走查
按信息架构分组呈现。每屏均为 375×812 真实排版，无占位块；下方标注设计意图与关键交互点。 灰底表示可滚动区域被外框裁切 —— 这是真实滚动位，不是缺内容。
01冰箱首页
用「省了多少钱」代替「有多少库存」当第一屏眼球位 —— 家庭用户对省钱的感知远强于对数据完整度的感知。临期三档卡片流置顶，正常库存下沉。
- 左侧 5px 状态色条是唯一的紧急度编码，红→琥珀→绿从上往下排，扫一眼就知道今天该动谁
- 过期项不给「做成菜」入口，只给「丢弃 / 已吃掉」两个动作，避免 AI 推荐吃过期食材的合规风险
- 右下 FAB 点击后 45° 旋转并展开三种录入方式，语音项加深色标签置于最近手指处（费茨定律）
02拍照识别录入
一次拍摄批量入库，适配「买菜到货开箱」场景。识别不是黑盒 —— 每个框都亮出置信度，让用户知道该复核哪一个。
- 置信度 ≥90% 走绿实线框直接入库；<80% 走琥珀虚线框并在清单中标「待确认」，点击进二选一
- 仍在推理的目标用白色虚线 + 骨架微光，明确区分「没识别到」与「正在识别」
- 确认按钮承载数量（"确认 12 项入库"），把不可逆操作的后果写在按钮上
03语音录入（App 端）
与冰箱贴共用同一套语义解析。核心是「边说边落地」—— 用户说完第一样，屏幕上第一张卡就已经生成，不必等整句结束。
- 转写文本已确认段用黑字、未确认尾句用灰字，视觉上直接暴露 ASR 的流式边界，减少"它到底听没听懂"的焦虑
- 数量、储存区、保质期三个槽位自动填默认值并可点「改」，不打断语音流
- 连续说模式下静音 1.2s 切分一条，静音 4s 自动结束；主按钮明写「入库 3 项」
04食材详情
环形进度把「还剩几天」从数字变成一眼可感的面积，临期食材一眼可辨。
- 环的颜色跟随状态色语义自动切换（绿 → 琥珀 → 红），数字与环双编码，色觉障碍用户也可读
- 「今天转冷冻可延长至 60 天」是 AI 主动给的可执行挽救方案，而非单纯的储存百科
- 左侧色条对应 12 色食材分区，App 色 = 冰箱贴色，两端一致
05清冰箱菜谱推荐
推荐排序的第一权重不是「好吃」，而是「能救下多少钱」。每张卡都把「用掉几样临期 / 省多少钱」摆在标题下方，让推荐动机透明。
- 食材匹配度写成 5/6 已有 而不是百分比，缺的那一样直接点名，用户能立刻判断要不要买
- 含过期主料的菜谱不隐藏而是置灰并说明理由 —— 隐藏会让用户以为系统没算到
- 顶部深绿横幅是「批量决策」入口：一次接受 4 道菜的组合，减少逐条选择的疲劳
06菜谱详情
菜谱页真正的转化点不是步骤，而是「缺的那一样怎么办」。把匹配度做成进度条 + 缺料点名 + 一键加购，形成 菜谱 → 采购 → 库存 的闭环。
- 钠含量单独标成琥珀色 —— 中国家庭膳食最大的隐性问题是钠超标而非热量超标
- 底部常驻双按钮：「排进计划」是低承诺动作，「开始烹饪」是高承诺动作，权重按宽度 1:1.4 分配
- 做法步骤只展示前 3 步 + 展开，烹饪态会切换为大字号防溅屏常亮模式
07一周膳食计划
7 列 × 三餐的全周视图，牺牲一点字号换取「一眼看完一周」的全局感。三餐用三种底色区分，长按卡片拖拽换位，落点用绿色虚线格明示。
- AI 排餐不是黑盒：顶部明写依据哪位成员的哪条约束（妈妈低 GI、女儿忌花生），可追溯才敢用
- 「待排」空格保留人的决策权 —— 系统不把一周填满，留白邀请用户参与
- 底部四环用红色满环 + 118 数字表达超标，而不是把环画到 100% 截断，避免误导
08采购清单（家庭协同）
按超市货架动线分组，而不是按添加时间 —— 用户在超市里是按区域走的。谁加的用彩色头像标记，已买项划线并把头像降透明度。
- 小食自动加的条目用深绿 AI 头像与家人头像区分，并可追溯到来源菜谱（如「牛腩煲」标签）
- 勾选是实时多端同步的：爸爸在超市勾掉，妈妈手机上立刻划线，避免重复购买
- 底部悬浮双按钮不占用列表空间，「分享清单」一键生成可转发给家人的采购清单
09AI 营养师「小食」对话 · 门面屏
全稿最重要的一屏。它要同时完成四件事：证明 AI 真的读了你家的冰箱、给出可执行的方案、标清知识来源与能力边界、并且随时可以反悔。 任何一件缺失，用户都会退回到「这不过是个套壳聊天框」的判断。
回答之前先亮出三枚绿色 chip：查了食材库 42 项、营养库、成员档案「王秀兰」。这不是装饰 —— 它把「AI 的答案基于什么」摊开给用户看，是信任的地基。
四条食材以结构化卡片嵌在气泡里，带状态色圆点。用户能验证 AI 说的「明天到期」是真的， 也能直接点进食材详情页。
正文分成 ①②③ 三条短句逐字流出，末尾光标闪烁。文本一结束立刻挂 4 个 chips， 其中「问真人营养师」用暖橙 —— 这是 ¥3000 档的自然入口，不做弹窗打断。
AI 已经替用户把菜排进了今晚（主动执行而非等确认），但底部立刻出现带倒计时的撤销条。 先做，再给后悔药，比「你确定吗？」的确认弹窗顺手得多。
来源行做成气泡内的虚线分隔小字，而不是页脚免责 —— 它必须紧贴着结论出现，才有约束力。 文案固定两段式：「依据《中国居民膳食指南（2022）》· 成人 2 型糖尿病膳食指导」（说明依据）＋ 「小食不做医疗诊断，用药与治疗请遵医嘱」（划定边界）。涉及慢病的每一次回答都强制附带。
10真人营养师服务 · ¥3000/年 转化页
¥3000 是全站客单价最高的一档，不能靠一张价目表卖出去。这一屏的说服顺序是： 先锚定市场价 → 再讲多了什么 → 再给具体的人 → 最后给一个几乎零成本的第一步。
- 价格锚定写在头部：市场价 ¥6000–50000 划线对比 ¥3000，把「贵不贵」的判断框架先立好
- 差异点标题写成「这一档比 ¥398 多了什么」而不是「服务包含」—— 用户此刻真正的问题是升级差价买到了什么
- 营养师是具体的人：姓名、RD 资质徽章、从业年限、擅长领域、服务次数与评分。信任来自具象，不来自形容词
- 底部 CTA 左侧挂「15 分钟免费初诊」降低第一步门槛，把决策从「花 3000」变成「先聊 15 分钟」
- 可约时段直接铺在页面里，避免「先付费再发现约不上」的挫败 —— 供给透明是高价服务的必要条件
11健康闭环仪表盘
健康页不是「图表展览」，而是「行动入口」。三环同心圆把食养 / 运动 / 睡眠拧成一个综合分，任何一圈掉到阈值下，立刻变成一条可执行建议，而不是一串数字。
- 三环用同圆心而非三个独立图表，用户一眼看出「今天拖后腿的是哪环」—— 本屏是运动 80% 最低
- 数据来源芯片化标注（食光贴 / 手环 / 体脂秤），解决「这数哪来的」信任问题，也为后续付费做铺垫
- 异常项不诊断、只提醒 + 给出口：标红 + 记档案 + 「问问小食」，把医疗边界与转化同时处理好
12家庭成员档案
所有「个性化」都从这里长出。同一冰箱、同一份菜谱，对糖尿病人和 6 岁孩子要给完全不同的答案——档案是「小食」能开口说话的前提。
- 每位成员一张卡：关系 + 年龄层 + 忌口 / 过敏 / 慢病标签，标签色统一复用全站状态色（红 = 禁忌 / 疾病）
- 儿童 / 老人模式不是功能，是呈现策略：老人模式放大字号、弱化操作，孩子模式过滤危险建议
- 档案与冰箱联动 —— 小食看到「牛奶」会先想起小满牛奶过敏，这是 AI 价值最容易被感知的瞬间
13商城 · 食光优选
商城不是流量变现，而是「食养方案的线下延伸」。卖的不是货，是让方案落地的耗材——药膳包、可擦写标签、保鲜盒，都和前面 14 屏强相关。
- AI 预选：底部「小食为你挑的」把商城和菜谱缺口连接，从「人找货」变成「方案推货」
- 分类只留 3 个（药膳食材 / 保鲜收纳 / 储存收纳），不和综合电商比 SKU 广度，只做食养场景的纵深
- 价格用场景单位标注（7 日量 / 3 卷装），让用户对「一次买多少」有预期，降低退货
14设备管理 & 会员定价
四档会员不是功能列表，是「你想让小食帮你到哪一步」的选择题。设备状态（电量 / 固件）前置，让用户在被提醒「该买耗材」之前就看到原因。
- 设备行用进度条而非数字堆：电量 82% 一眼可读，异常色自动变琥珀 / 红
- 当前档位（AI 膳养方案 ¥398）高亮描边，其余三档做对照，续费决策有锚点
- 四档命名对应四个能力台阶：免费 → 基础 → AI → AI + 真人，让用户理解「贵在哪、多买了什么」
15食光贴设备端 UI（1.69″ 240×280 圆角屏）
设备端不是 App 的缩小版，而是「最低交互路径」：没有列表、没有设置，只有时钟 / 聆听 / 答复三种状态。它存在的意义是—— 人站在冰箱前，不用掏手机也能完成一次对话。
- 三态限定：待机（常亮时钟 + 临期）、聆听（呼吸光环 + 波形）、播报（短句 + 图标）。状态少到「看一眼就懂现在能做什么」
- 确认感优先：唤醒即给视觉 / 听觉反馈（光环亮起），避免「它到底听见没」的家庭场景焦虑
- 不抢话：播报只给结论不给过程；需要展开时引导回 App，小屏不承载长文与决策
- 硬件参数：1.69″ 圆角 IPS、240×280、ESP32-S3，磁吸 / 3M 贴于冰箱门；离线可响应「今天吃什么」「还有几天过期」等本地命令词
AI 交互专项 · 「小食」的设计纪律
食光机的差异化不在模型，而在交互纪律：语音优先、每次回答都通向一个动作、不确定就确认、所有 AI 写入都可撤销、不做医疗诊断。下面四块是落到像素上的硬规则。
① 小食的多轮对话状态机
一次「帮我安排今晚」背后是七八个状态在跳转。关键是低置信度必须回到澄清、绝不能猜，以及任何产出动作前先经过「可执行」这一关—— 它决定要不要弹撤销条。
② 流式回复的五个 UI 状态
LLM 的输出是「流」不是「页」。用户从提问到看到完整答案之间，至少有五段可设计的等待—— 每段都要给确定性反馈，否则会被理解为「卡了」。
③ 兜底与错误态 · 体面是设计出来的
语音家庭的失败率天然高：听不清、说错、断网、问到医疗边界。这些不是「异常分支」，而是每天都要走到的主路径，必须设计得比成功路径更体面。
④ 拟人化尺度 · 小食的人格规格
「有温度」不等于「卖萌」。小食的人格是克制、专业、可依赖—— 像一位住在冰箱上的营养师邻居，而不是客服机器人或二次元偶像。
- 角色定位
- 懂营养的家庭膳食助手；不是医生，也不是搜索引擎。
- 称呼口吻
- 自称「小食」，用「咱们 / 您」拉近距离；不过度卖萌、不堆 emoji、不叫「宝子」。
- 知识边界
- 只给食养建议，不诊断疾病；涉及用药 / 治疗一律引导真人营养师。
- 主动与克制
- 只在临期、异常、计划空缺时主动提醒；不每天推送、不制造焦虑。
- 出错时
- 明说「我不确定」，给可撤销动作，绝不假装笃定。
- 情绪温度
- 用户焦虑（如血糖异常）先共情再给方案，不冷读一串数字。