# 食谱应用设计：照片之外把份量排清楚

原网页：https://www.jvds.cn/share/ui-design/nutrirecipes-meal-shopping-u056
语言：zh-CN
发布：2026-10-14
作者：界达设计工作室（JVDS）

NutriRecipes的食谱应用设计用大照片让人先认出一道菜，再用短字段和人数控件把它变成可准备的内容。菜单页与采购页沿用绿色顶部和白色卡片，但排列方式不同：一个先设规模，一个逐项列食材，任务分工很清楚。

## 核心结论

- 菜品照片与短字段配合，适合快速辨认和比较。
- 人数天数先于餐次出现，让菜单规模有明确设置位置。
- 采购清单提供数量和编辑入口，个人条件另在账户页分组。

## 大照片下面的信息并没有挤成一团

Eggs with peppers详情用彩椒与鸡蛋的近景铺满上部，收藏心形留在白色圆形中。下方白色区以弧形接入，菜名、评分和短字段各有位置。照片丰富，文字区却足够简单，食物和资料不会互相压住。

时间、能量和XE排列成一行，素食、鸡蛋、蛋白质等标签再放到下一组。列表卡也沿用相似字段，图片尺度较小，名称和评分仍清楚。这样的重复便于比较，但缩写应有解释，营养数字也要说明对应一份还是整道食谱。

Ingredients下面的人数加减挨着食材范围。加号为绿色，减号为白色，当前人数位于中间。这组控件的位置值得借鉴：份量会影响食材，放在食材附近比藏到设置页更容易理解。

![NutriRecipes彩椒鸡蛋详情与沙拉列表：大照片、短字段、标签、Ingredients和人数加减](https://www.jvds.cn/upload/2026/1008/d187-tp/u056-i1.webp)

详情中下部｜照片过渡到白底资料，人数控件紧接食材标题。

## 先决定几人几天，再挑餐次

Plan your menu用两张浅灰卡分别设置人数和天数，文字标签留在卡片顶部，数字与加减在下方。相似控件仍能通过“人”和“日历”小图标区分对象，读者不用猜第二组是不是另一种份量。

餐次放在更下面，Lunch选中时用黄色底与绿色圆形标记，Breakfast保持浅底。菜单规模和餐次分成两个阶段，先确定要规划多大范围，再选择内容。界达设计认为，这个顺序适合多天菜单，单道食谱人数则需要单独说明与整份计划的关系。

人数改变后的重新计算没有在图中展开。后续可以显示哪些菜和食材受影响，再保留手动修改的差别，让一次调整仍属于原来的计划。图表不必复杂，[变化范围](https://www.jvds.cn/share/ui-design/b2b-business-state-model)需要读得清楚。

## 清单给现实调整留了入口

Purchase把Vegetables与Fruits分成组，食材名称下面有数量和单位，每行右边提供编辑和删除。清单允许修改，是很贴近日常准备的安排：计算结果可以作为起点，家里已有的食材或临时替换仍需要处理。

黄色[保存提示](https://www.jvds.cn/share/ui-design/notification-toast-banner-inbox-ux)直接说明保存位置，并提供Change，反馈比只有一个勾号具体。但当前提示覆盖了下方项目，建议为它留独立空间或在短时间后收起。保存位置要明确，正在核对的数量也不能被挡住。

合并食材时还可以保留来源，明确某项来自哪些菜。单位、人数与来源读得清楚后，采购清单才不仅是一串数字，也能让用户回头修改原计划。

![NutriRecipes采购与菜单规划手机页：分类食材数量、编辑删除、黄色保存提示及人数天数和餐次选择](https://www.jvds.cn/upload/2026/1008/d187-tp/u056-i2.webp)

两张手机中部｜菜单先设规模，清单按项目核对数量。

## 收藏与个人条件分成两组

账户页用黄色人物卡开头，My Content先放收藏食谱缩略图、Meal Plans和个人资料；Diet & Preferences再放目标、饮食档案、避免食材与过敏项。内容和条件分组，回看时更容易知道自己要找哪种设置。

上方知识文章仍沿用大照片与白底正文，不与个人条件混成一张卡。类似食谱产品可以继续说明条件在哪些搜索和计划里生效，让用户知道修改影响什么。图中的健康宣传文字并不是本篇认可的专业结论，内容适用性仍应独立审核。

![NutriRecipes知识文章与账户页：照片文章、黄色人物卡、收藏缩略图和饮食条件列表](https://www.jvds.cn/upload/2026/1008/d187-tp/u056-i3.webp)

账户页下部｜个人内容与饮食条件分组，文章保留独立阅读页。

## 常见问题

### 食谱份量控件放哪里更清楚？

靠近食材或营养口径，并让改变人数的范围明确。单菜人数和多天菜单人数是不同设置，更新时最好显示影响内容。

## 设计检查清单

- 核对菜品短字段的份量单位。
- 区分单菜人数与菜单整体人数。
- 检查保存反馈是否挡住最后几项食材。

## 正在规划食谱或日常饮食产品？

菜品浏览、菜单计划和采购清单需要不同信息密度，也需要一致的份量关系。界达设计提供UI/UX设计与网站设计、开发服务，可以与你一起梳理产品页面与内容。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可以一起梳理界面、内容和开发需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)