食谱 App 设计：首页改版前后对比

食谱 App 一开始就握着屏幕上最好的资产：好看的食物。下面这版初稿有真实的食谱和不错的照片，然后用一个列了四样东西的搜索框、一道彩虹般的分类、主图上的小号大写字母，以及每一行的三个图标把它们挤得喘不过气。修改版保留了所有内容，只是把空间还给了食物。

整个页面的前后对比

新手初稿

修改后

左边的页面想提供很多东西，而且一股脑全告诉你。右边，同样的食谱按厨师查找的顺序出现：找、筛、选，然后再逛。

数一数一个人在挑晚餐之前得读多少东西。初稿里有：带副标题的问候语、一个搜索框、一个筛选按钮、一个铃铛、六种颜色的分类标签、照片上的标题、一行五项信息的大写字母、照片上的两个按钮，然后四行里每行三个图标。修改后的页面每一步要求得更少，数字可以证明。

修改 1：让搜索说清它能找什么

之前

之后

列了四样东西还放不下的占位文字，对比两样东西加一个筛选。

初稿的占位文字是「搜索食谱、食材、菜系、ch...」，在第四个词中间被截断了。占位文字是搜索框能说的唯一一句话，所以它应该说明这个框能干什么，而且要放得下。初稿的清单放不下，被截断的提示看起来就像个错误。

修改版只写了人们真正会输入的两样东西：食谱或食材。其他的，比如菜系或饮食偏好，交给旁边的筛选按钮。

筛选按钮也从填充陶土色的方块变成了白色方块。填充按钮是这一行里最吵的东西，而它却是筛选，不是搜索。铃铛离开了这一行，上移到问候语旁边，所以这一行就是一个搜索框加一个按钮。

修改 2：所有分类统一一种样式

之前

之后

五种颜色、各带图标的五个分类，对比一种样式和一个填充标签。

当每个分类都有自己的颜色，颜色就不再有任何意义。早餐是桃色，午餐是绿色，晚餐是紫色。这些都没法告诉厨师哪一个正开着，而且初稿根本没有选中状态。

修改版里每个标签都是白色的朴素样式，被选中的「全部」用品牌陶土色填充。现在颜色只传达一件事：什么正开着。

标签也变大了，更容易点中，而且这一行在可滚动的右边缘渐隐。初稿里这一行直接在屏幕边缘被切断，「纯素」被劈成两半。渐隐的意思是「还有更多，滑动吧」。硬切什么也没说。

修改 3：信息放到照片下面

之前

之后

浅色盘子上的标题和五项大写信息，对比下方卡片上的标题和三项带图标的信息。

初稿在浅色盘子和浅色桌面上放了 15 px 的标题和一行 9 px 的白色大写字母。盘子是这张照片的全部意义，而文字压在上面，用的还是在它上面最容易消失的颜色。这一行承载着厨师做决定所需的信息：时间、难度和份量。它们偏偏是照片上最难读的部分。

修改版把文字挪到照片下方的卡片上，用深色字体。决定今晚做不做的三项信息保留了位置，每项配一个图标：时钟代表 30 分钟，柱状图代表简单，两个人代表 4 人份。人们只需学一次这些图标，之后一眼就能读完这一行。修改后的卡片去掉了热量和评分，它们可以放在食谱详情页。

照片上的按钮也从两个，爱心和分享，变成了一个收藏。这正是厨师想从食谱卡片得到的操作，因为收藏就是食谱日后被做出来的方式。

修改 4：一行就是一道食谱、一个时间和一个难度

之前

之后

四行各带主厨署名和三个图标，对比三行带时间、难度和两个安静的图标。

初稿的每一行都有缩略图、名称、一行包含时间、难度和「主厨 Anna」的文字，以及三个图标：爱心、书签和分享。爱心和书签是表达「我喜欢这个」的两种方式，而一个四行的列表把这个选择印了十二次。

修改版里每一行有更大的照片、名称，以及一行时间和难度。右侧是两个图标，分享和收藏，用浅灰色，在你需要之前不会碍事。第一道食谱展示了收藏后的状态：书签填充为品牌陶土色，与被选中的分类同色。「热门食谱」标题缩短为「热门」，因为这个 App 本来就是关于食谱的。

修改后的列表显示三道食谱而不是四道，所以卡片在标签栏上方有了空间。

更小的修改

• 四个标签页，不是五个。 首页、搜索、收藏和我的，取代了首页、搜索、收藏、计划和我的。
• 统一边距。 初稿左边用 14 px，右边用 12 px。修改版两侧都用 20 px，区块之间 14 px。
• 更短的问候语。 「嗨 Maya！你今天想做点什么？」变成了「Maya，做点什么好呢？」。
• 一种品牌色。 陶土色 #C8553D 用于被选中的标签、已收藏的书签、当前标签页和小标签文字。其他东西都不上色。
• 真正的字号体系。 文字从 8 到 18 px 改成了 iOS 的 11 到 22 pt 字号。

审查你自己的食谱 App

获取 Figma 文件

这个免费文件包含作为组件的两个页面、每项修改的前后对比组、颜色变量和 iOS 文字样式。

免费 Figma 文件

食谱 App 首页，改版前后

两个页面以及每个修改过的部分，均为 Figma 组件。免费，仅可查看，复制到你的草稿即可使用。

在 Figma 中打开

FAQ

食谱 App 首页应该展示什么？

一个说明自己能找什么的搜索框、一行分类、一道带时间、难度和份量的精选食谱，以及一个简短的热门食谱列表。热量、评分和主厨署名可以放在食谱详情页。

食谱搜索栏应该写什么？

用尽可能少的字说明这个框能找什么：「搜索食谱或食材」。把它能找的所有东西列一长串只会被截断，多出来的内容应该交给筛选。

食谱 App 里的分类标签应该是什么样？

全部使用同一种样式，被选中的标签用品牌色填充。让这一行可以滚动，并在边缘渐隐，让人看出还有更多。

食谱的时间和难度应该放在哪里？

放在照片下面，一行里每项配一个小图标：时钟代表时间，等级图标代表难度，人形代表份量。食物照片上的文字很难读，还会遮住菜品。

食谱列表的每一行应该有几个图标？

两个或更少。收藏和分享就够了，安静的灰色能避免它们与菜品抢戏。

来源

• 两个页面都是我们自己在 Figma 里设计和测量的。用户、主厨和食谱列表都是为这次练习编造的。
• 照片来自 Pexels，摄影师为 Tamra Creatives Agency、Willians Huerta、Kei Scampa、Ana Palade、adrian vieriu 和 Surendra Shrestha。
• Apple Human Interface Guidelines: Typography，修改后页面使用的 iOS 文字大小出处。
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum)，关于图片和背景上的文字。
• 最初作为轮播图发布于 App Brainy。