外卖 App 设计:首页改版前后对比

外卖首页只有一个任务:让饥肠辘辘的人在几秒内找到一家餐厅。下面的初稿没能完成这个任务,不是因为哪一块丑,而是因为每一块都同时在要求关注。修复靠的不是新功能或新风格,而是不断做减法,直到每个部分只说一件事。

整个页面,改版前后

新手初稿

修复后

数一数,眼睛在看到第一家餐厅之前要处理多少东西。左边:一条完整的街道地址、两个顶部图标、带两个图标的搜索栏、有三行文案和一个按钮的渐变横幅、轮播圆点、五种颜色的五个圆环、带火焰图标的分区标题,还有一张照片上的三个标签。右边:一个地点名、一个购物车、一个搜索栏、五个方块、一个优惠和一张卡片。

右边没有缺少左边的任何功能。地址、搜索、分类、优惠和餐厅都还在,只是每一项不再和其他项争抢注意力。

修复 1:用一个词说清送到哪

之前

之后

初稿显示完整的街道地址 221B Baker Street,在图钉旁用小字号写着,还在单词中间被截断。修复后显示用户给这个地址起的名字“家”,字号很大,旁边的箭头表示可以更换。

没人打开外卖 App 是为了读自己的地址。他们只需要确认一件事:这单会送到对的地方吗?自己起的标签,比如家、公司、妈妈家,比街道名回答得更快,而且因为只有一个词,不管多长都清晰可读。完整地址放在点一下就能到的编辑页面上。

修复还去掉了顶部的个人资料图标。初稿里它出现了两次,一次在顶部,一次是“账户”标签页。同一个房间有两扇门,会让人怀疑它们通向不同的房间。

修复 2:一种形状,一种选中状态

之前

之后

之前,5 个分类各自待在一个圆圈里,圆环颜色各不相同:黄、绿、蓝、粉、紫。之后,方块共用一种形状和一个中性边框,只有选中的“披萨”,边框和标签用上品牌红。

界面中的颜色是一种信号,五种颜色就发出五种信号。浏览这一行的人不得不问:绿色代表什么?为什么寿司是蓝色?答案是什么都不代表,而这正是问题所在:装饰看起来像信息。

当颜色只用在一件事上,它才有意义。一个红色方块不用一个字就在说“你在这里”。其余的交给照片,因为美食照片本来就是屏幕上最丰富多彩的东西,不需要帮忙。

修复 3:一个优惠,一条信息

之前

之后

初稿横幅堆了“MEGA SALE!”、优惠内容、优惠码、最低消费和极小字号的“条款适用”,最后还有一个按钮。修复后保留 50% OFF,只说三件事:何时(仅限今天)、适用于谁(首单满 $20)以及优惠码,做成可以复制的按钮。

问题从来不在优惠本身。五折是个很好的下单理由,修复后它的大小不变。

变的是它周围的一切。“MEGA SALE!”和“50% OFF”把同一件事说了两遍。小字把四项信息用竖线隔开,塞进一行 9 px 的文字里。“立即下单”按钮无处可去,因为此时还没有可下单的具体餐厅。

现在优惠码本身就是操作。点一下就会复制 YUMMY50,这是一个人从这张横幅带到结账页唯一需要的东西。条款也移到结账页,它在那里才适用。

图片也变了。初稿把汉堡抠成圆形,悬浮在橙色渐变上。修复后在品牌红背景上拍摄,食物直接落在卡片上,而不是贴在上面的一张贴纸。

修复 4:一个标签,两项信息

之前

之后

之前,照片上有三个标签(免配送费、20% OFF、推广),下面的文字列出菜系、送达时间、配送费、价格档次、起送价和营业时间。之后,只有一个标签、名称、评分和两项信息:要多久,要多少钱。

列表里的餐厅卡片大约一秒就被读完,在这一秒里,人要决定两件事:我想吃这个吗,值得等这么久、付这笔配送费吗?修复后的卡片正好回答这两点。照片回答第一个。“25 到 35 分钟,配送费 $2.99”回答第二个。

旧卡片上的其他内容都是真实信息,只是不是第一眼需要的信息。菜系从照片上已经能看出来。$15 的起送价和晚上 11 点的打烊时间,只有选定之后才重要,所以应该放在餐厅自己的页面。

“推广”是给商家看的,不是给顾客看的,而三个标签并排会互相抵消。按优先级选出一个标签,才会被读到。

五处小修复

上面四处是大改动。下面这五处同样是深思熟虑的:

• 统一边距。 初稿左边用 12 px,右边用 16 px,所以没有任何东西和别的东西对齐。修复后两侧都是 20 px,屏幕上每条边缘都落在这条线上。
• 一套字体体系。 初稿的文字从 9 到 30 px,中间没有梯度。修复后使用 iOS 文字样式,从 11 到 22 pt,每个字号都有角色,没有小到看不清的字。
• 更安静的搜索栏。 初稿的搜索栏里有麦克风和筛选图标,占位文字长到被截断。修复后只保留一个图标和更短的提示:“菜品、餐厅或菜系”。
• 去掉轮播圆点。 横幅下的圆点暗示还有更多横幅。大多数人从不滑动,圆点只是多了一样要看的东西。一个优惠不需要圆点。
• 四个标签页,不是五个。 收藏离开了标签栏。收藏仍可通过每张卡片上的爱心完成,四个标签页让每个标签有更多空间,也更容易点中。

审视你自己的首页

把你的 App 首页放在这份清单旁边对照。每一个“否”,都是一个在大喊大叫的部分。

获取 Figma 文件

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

免费 Figma 文件

外卖首页,改版前后

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

在 Figma 中打开

FAQ

外卖 App 首页应该先展示什么?

先展示订单送到哪里、搜索栏、分类和一个优惠,然后是餐厅。每张餐厅卡片需要一张照片、名称、评分、送达时间和配送费。

一张餐厅卡片应该有几个标签?

一个。三个标签并排会互相抵消;选出对顾客最重要的那个,比如免配送费。

外卖 App 应该给每个分类用不同的颜色吗?

不应该。给每个分类相同的形状和中性边框,只把品牌色用在选中的那个上,这样颜色就表示“你在这里”。

如何设计能促成转化的促销横幅?

只把一个优惠说一次:折扣、适用对象和优惠码。让优惠码成为操作,点击即可复制,并把条款移到结账页。

外卖 App 应该有几个标签页?

最多四到五个。这里四个(首页、搜索、订单、账户)让每个标签有更多空间,收藏由每张卡片上的爱心处理。

来源

• 两个页面都是我们自己的作品,在 Figma 中设计和测量。表格中的数据来自 Figma 文件。
• 美食照片来自 Unsplash,作者为 Fernando Andrade、sina piryae、Mahmoud Fawzy、Anna Pelzer、Alana Harris、Thimotius Timmy 和 Poul Hoang。促销汉堡来自 Pexels 的 Elements Interactive,其影棚背景通过调色(未使用 AI)替换为品牌红。
• iOS 文字大小来自 Apple 的 Human Interface Guidelines, Typography。
• 最初作为轮播图发布在 App Brainy。