干饭魔法书 · 微信小程序 · 独立产品案例

一日三问,一页作答。

今天吃什么,每天问三遍,却没有正确答案。
干饭魔法书只做一件事——替你把这一顿定下来。

角色:产品定义 · 交互设计 · 落地实现 周期:2026.07 – 2026.09 平台:微信小程序 + 云开发
12
完整页面
14
结构化菜谱
30+
云端接口
6
成长体系
SHOWCASE

换个角度,再看一遍。

滚动屏幕,手机随你转动——好设计,经得起立体地看。

一屏,只回答一件事 首页不堆功能,今天想吃点什么,这一个问题就够。
翻开,即揭晓 盲盒卡片有真实的翻开动效,把等待做成仪式感。
每一餐,都算数 经验、成就、日历,把做饭记成值得开心的小事。
ROTATE
-32°
继续滚动,看它转起来
01 / THE QUESTION

一个没有正确答案的问题,
每天要问三遍。

它不难,只是无穷无尽。我把这个日常决策拆成四层——前三层关于效率,最后一层关于关系。

PAIN 01

决策疲劳

吃什么每天要重复决定三次,没有正确答案,却要消耗真实的意志力。选择越多,越难定下来。

打开外卖 App 划了十分钟,最后还是点了昨天那家。
PAIN 02

内容不可执行

大多数菜谱产品停在“看”这一层:收藏了、看过了,但没有解决“我现在手里有什么、能不能做”。

收藏了两百道菜,但家里只有鸡蛋和番茄。
PAIN 03

营养盲区

年轻人对“这一顿够不够”缺乏判断依据,搜索得到的往往是广告或相互矛盾的说法。

减脂期晚上特别饿,到底能吃什么?搜出来全是带货。
PAIN 04

双人决策摩擦

两个人一起吃饭时,“随便”和“都行”是最难的题。决策成本翻倍,最后往往演变成“你点吧”。

我提议了三家,她说都不太想吃。

用户缺的从来不是菜谱,而是替他把这一顿定下来的那一下。 真正被消耗的不是时间,而是做决定的意志力—— 所以产品的主线,是抽签式的决策仪式

02 / THE ANSWER

把“随便”,变成“就它了”。

把“随便”,
变成“就它了”

产品不追求菜谱数量,也不做社区。它只承诺一件事: 在你不想再想的时候,给你一张敢替你拍板的菜单—— 并且这张菜单,是真的做得出来的。

一句话:替你做决定的菜单卡 不做:菜谱百科 / 美食社区 / 外卖比价
决策层

把开放问题收敛成 1 个答案。魔法盲盒直接用抽签的方式输出“一荤一素一主食”,把无限选择变成一次点击。

执行层

把菜谱变成能落地的清单。食材逐项勾选、替代建议、一周购物清单,解决“看完还是不知道怎么做”。

情绪层

让这件事被看见。等级、成就、干饭日历,把“我今天给自己做了饭”记录成一件值得开心的小事。

安全层

把边界说清楚。孕期、慢性病等敏感场景主动提示“仅供日常参考,不能替代医生建议”,不让功能越界成医疗建议。

03 / PROTOTYPE

一试,便知。

这台手机里跑的是按真实菜谱数据重建的可交互原型——搜索、抽盲盒、收藏、打卡,全部真的能用。

Play with it

点击左侧手机,或者直接跳到你想看的那一屏

建议的体验动线:
首页滑动 → 点开任意菜谱看营养与步骤 → 底部“做过了,打个卡” → 回到“我的”看经验值变化 → 切到“魔法盲盒”点卡片抽一席。全程约 2 分钟,能看完产品的完整闭环。
04 / STRUCTURE

四个问题,十二个回答。

页面不是按功能堆的,是按用户的路径铺的——从“不想想”到“做完了”,每个域回答一个问题。

决策域

CORE
我该吃哪一顿?
魔法盲盒抽签式决定一席菜单
一周菜单七天三餐 + 购物清单
冰箱救援从现有食材倒推菜谱
双人投票取两人偏好的交集

内容域

CONTENT
这一顿怎么做?
首页菜单搜索 / 分类 / 今日推荐
菜谱详情营养 · 食材勾选 · 步骤 · 替代
营养助手把问题翻译成搭配建议
菜谱编辑器新增自定义菜谱

成长域

RETENTION
为什么还要再来?
我的偏好设置与个人数据
干饭日历连续做饭天数与营养估算
魔法成就4 项成就 + 6 级经验
我的收藏想做的菜清单

系统域

SYSTEM
产品怎么变好?
反馈与共创建议被采纳奖励经验
偏好体系目标 / 忌口 / 厨具 / 预算 / 孕周
内容举报菜谱准确性兜底
数据导出与注销合规与隐私承诺
05 / DECISIONS

六个决策,一条主线。

所有功能都从同一个问题出发:这一步,有没有帮用户更快定下来?

01核心差异化

魔法盲盒 · 用一次抽签替用户拍板

把“选择”改成“抽取”——结果固定一荤一素一主食,结构比数量更重要。

02降低专业门槛

营养助手 · 把营养学翻译成这一顿怎么搭

四段式作答:营养亮点 → 这样搭配 → 推荐做法 → 需要留意,并直接挂上可做的菜谱。

03场景补全

冰箱救援 · 从现有的食材出发

以食材倒推菜谱,按“食材利用 3/4”排序,先回答“手里有什么”。

04提升使用深度

一周菜单 · 把单次决策升级成周计划

人数、预算、时长三个约束,生成七天三餐;每一餐可单独替换,自动汇总购物清单。

05留存设计

成长体系 · 让做饭这件事被看见

经验只来自真实行为:收藏 +8、打卡 +25。每一餐,都算数。

06闭环设计

共创反馈 · 把用户变成产品的合作者

反馈状态全程可见:未读 → 已读 → 已回复 → 已采纳;被采纳再奖励 60 经验。

06 / IN MOTION

边看边动,细节会说话。

下面每一个循环播放的动效,都对应小程序里真实存在的交互——不是装饰,是产品语言。

TONIGHT'S TABLEMENU DRAW
今晚,吃点不一样的 抽取一套菜单,也会偶遇创意灵感 轻触卡片,翻开今晚菜单
一荤 一素 一主食 ↻ 再抽一席

魔法盲盒 · 翻开即揭晓

抽签不是弹窗开奖,而是一次翻卡片的仪式感——翻开的正是小程序里的真实菜谱,每一席都按今晚模式真实筛出。

Lv.3 厨房术士+25
打卡做饭 +25 XP240 / 450

成长体系 · 每一餐都算数

打卡、收藏、收下整席都真的加经验——进度条涨上去的那一下,就是回下一次的理由。

孕期晚餐怎么吃更安心?
✦ 优质蛋白质 · 铁 · 叶酸
· 肉蛋全熟 · 搭配深色蔬菜

营养助手 · 一问就有答案

自由提问,直接返回四段式建议——识别到敏感场景时,免责声明会主动出现在最前面。

连续做饭 3 天

干饭日历 · 连续的热气

连续做饭的天数用一格格亮起来的日子来呈现——不催促,不排名,只是替你记得。

— 今晚模式 先选方向,再抽取
疏脂模式 高蛋白模式 均衡家常模式 孕期友好模式
口味偏好 · 不辣
按当前模式,从 14 道真实菜谱中筛出这一席

今晚模式 · 先定方向再抽取

随机之所以可信,是因为前面有真实约束——模式、口味、忌口层层收窄,抽出的每一席都有依据。

番茄土豆炖牛腩
番茄土豆炖牛腩428 kcal · 32g 蛋白质
已收藏 · +8 XP

我的收藏 · 心动一下

点一下收藏,红心跳起、经验入账——想做的菜自动进清单,每个行为都会被即刻奖励。

07 / DESIGN SYSTEM

颜色会说话,材质有温度。

暖调纸张打底,玻璃拟态承载信息,强调色只留给真正需要被看见的地方——所有色值都来自小程序的真实样式表。

色彩 · Color

所有色值均取自小程序各页面样式表与 app.wxss,网页与产品保持同一套。

纸张底
#EBE8E2
纸白高光
#F7F5F2
墨色正文
#27312F
灰墨次要
#68736E
陶土红 · 主
#C3655E
亮珊瑚 · 控件
#FF817B
暖金 · 次强调
#CDB276
金穗 · 数据
#FFD07B
鼠尾草 · 辅助
#B5C6BF
深墨绿 · 遮罩
#687166

字体 · Typography

不用额外加载字体,全部走系统字体栈,中文在 iOS / Android 上都能保持同一种手感。层级靠字重与字号对比拉开,不靠颜色。

46rpx / 800
品牌标题
干饭魔法书
29rpx / 800
区块标题
今晚,吃点不一样的
26rpx / 400
正文
酸香开胃的一锅暖胃家常菜
21rpx / 400
辅助说明
默认:肉类 1 · 蔬菜 1 · 主食 1
18rpx / 800
英文 Kicker · 字距 0.14em
MENU JOURNAL

材质与圆角 · Material

四种被反复复用的材质。玻璃拟态卡负责承载信息,纸张底负责让眼睛休息,深墨遮罩负责让图片上的文字始终可读。

玻璃拟态
backdrop-filter: blur(28rpx)

白底 46%–78% + 1rpx 白色描边 + 内侧高光,叠在图片上时依然清晰。

纸张底
#F3F0EB → #DFDCD5

页面主渐变,配合两处 radial 光晕(珊瑚 / 鼠尾草)制造呼吸感。

深墨遮罩
rgba(8,10,10,.88)

底部强、上部弱的线性遮罩,保证菜名在任何食物照片上都可读。

暖金按钮
#F7DFBD → #E5B38A

只用于“翻开”这类关键动作,是全站唯一的高饱和正向按钮。

圆角规范

16rpx 标签 / 24rpx 卡片 / 30rpx 主视觉 / 999rpx 胶囊。层级越靠外,圆角越大,形成包裹感。

08 / ARCHITECTURE

看不见的地方,更要讲究。

页面只管展示,逻辑按域拆成服务,云端一个入口。任何一层挂掉,用户都不应该看到白屏。

展示层WeChat Mini Program
12 个页面 3 个自定义组件 自定义导航栏 Skyline 渲染 4 项 TabBar 750rpx 响应式
逻辑层按领域拆分的 Service
cloudApiService · 云端接口统一入口 cloudSyncService · 同步与降级 storageService · 本地持久化 recipeService · 菜谱检索与排序 nutritionAdvisorService · 营养建议 levelService · 经验与等级
数据层微信云开发 · 单云函数
mealApi recipe.* magic.* advisor.ask weekly.generate fridge.match checkin.* achievement.get feedback.* analytics.*
降级通道保证永远有可用界面
wx.cloud.callFunction 失败 → HTTP 接口兜底 云端不可用 → 本地 Storage 继续工作 反馈提交失败 → 本地缓存待同步 图片加载失败 → 渐变兜底文案
// 所有云端能力收敛成一个 action 命名规范:域.动作
const cloudApiService = {
  drawMagicMenu: (payload) => call("magic.menuDraw", { ...payload }),
  askAdvisor:    (question) => call("advisor.ask", { question }),
  matchFridge:   (ingredients) => call("fridge.match", { ingredients }),
  awardExperience: (type, key) => call("experience.award", { type, key })
};

// 调用层自带降级:云函数 → HTTP 接口,失败也不让用户看到报错
async function call(action, payload) {
  try {
    const res = await wx.cloud.callFunction({ name: "mealApi", data: { action, payload } });
    if (res.result?.ok) return res.result.data;
    throw new Error(res.result?.error?.message);
  } catch (e) {
    return callByHttp(action, payload); // 通道二
  }
}
DATA MODEL

菜谱是一等公民

每道菜谱携带 12 个可检索字段:分类、口味、难度、时长、份数、预算、厨具、适用模式、孕期友好、过敏原、替代建议、四段营养数据。所有推荐算法都建立在这套结构上,而不是散落在各页面的 if-else。

ANALYTICS

先埋点 再优化

关键行为全部上报:菜谱浏览、搜索词长度与结果数、盲盒抽取、营养提问长度、是否触发免责声明。设计时就预设了“这个功能怎么衡量”。

GOVERNANCE

内容与运营可控

云端配置站点名称、首页问候语、公告、维护模式与最低客户端版本。菜谱支持后台增删改,不需要重新发版就能调整内容。

从一句生活洞察,到一套能点、能跑的产品——
一个人,一套 AI 协作流程。

09 / RETROSPECTIVE

知道边界,才知道方向。

哪些做对了,哪些还不够,以及下一步往哪走。

做对了什么
  • 主线足够收敛。只解决“替你决定这一顿”,没有掉进“什么都想做”的坑。12 个页面全部服务于这条主线。
  • 结构先于界面。菜谱的 12 个字段让盲盒、冰箱救援、一周菜单能共用同一套筛选内核,功能增加时成本是线性而非指数。
  • 仪式感是可被记住的差异点。“翻开魔法书”把一个枯燥的筛选动作变成了有记忆点的体验。
  • 把安全边界前置。营养类产品最容易越界,主动声明“不替代医嘱”反而提升了可信度。
!我会改进什么
  • 菜谱量级还不够。14 道菜能验证逻辑,但撑不起日常使用。下一步应该先把内容供给做到 200 道以上,或者打通外部菜谱源。
  • 缺少真实用户数据。目前埋点已就位,但还没有足够样本验证“盲盒接受率”这个最关键的指标。
  • 没有社交与分享。“今晚的菜单”是一张天然的分享卡,这是当前最低成本的获客机会。
  • 营养建议还是规则式匹配。下一步应该接入大模型做真正的语义理解,并把规则引擎降级为兜底。
下一步路线(按优先级)
P0

把菜谱供给做到规模化
没有量级,再好的决策机制也跑不起来。

P1

菜单分享卡
把今晚吃什么,变成一张可以转发给朋友的图。

P2

接入大模型营养对话
规则引擎退居兜底,提升长尾问题的覆盖。

P3

家庭协同
双人投票升级成多人菜单与分工,切入家庭场景。