咖啡 App 设计:点单首页改版前后对比

一个人打开咖啡 App 只想做一件事:点一杯饮品,然后去取。下面的初稿该有的东西都有,却一股脑全喊了出来:一长串门店信息、一个大谈积分的横幅、八个标签,还有每张照片下面的 ADD 按钮。改版后门店、积分和菜单都保留,只是让每一样各安其位,安安静静。

整个页面的改版前后

新手初稿

改进后

左边,人们依次遇到问候语、门店行、积分横幅、标签栏和一堆按钮,音量全都一样大。右边,每个区块只有一件事要读,每一行只有一个操作。

修改 1:地点只说一次

之前

之后

塞进盒子里的门店行,对比取餐卡。

初稿把门店塞进一行:“Downtown Store - 123 Main St (0.3 mi) - Open until 9PM”,54 个字符,小字号,装在末尾带箭头的边框盒子里。名称、街道、距离和营业时间一样重,眼睛得把整行读完才能找到需要的那一条信息。

改版把这一行变成取餐卡。“Pickup at Downtown”是标题,“0.3 mi · Open until 9 pm”是下面一行灰字,“Change”以品牌蓝放在右侧,是一个真正的操作。街道地址不放在首页。问候语放大成“Good morning, Leo”,感叹号也不见了。

可复用的规则:把长长的一行拆成标题、一条细节和一个操作。带箭头的盒子不如一个写着“Change”的词更明确地告诉你“点我”。

修改 2:积分变成进度

之前

之后

大喊大叫的横幅,对比进度条。

初稿的横幅从蓝色渐变到奶油黄,白色文字正好落在最难读的黄色一端。上面写着“You have 1,250 points! Redeem now for FREE drinks!!!”,下面的 Redeem Now 胶囊是白色的,配浅黄色文字。它告诉人们有积分,却没说离任何奖励还有多近。

改版是一张深蓝色卡片。顶部是“Rewards”和“1,250 points”,大字是“250 points to a free drink”。下方的奶油黄进度条填充 83%,也就是 1,500 中的 1,250,小字说明免费饮品在哪里。人们看到的是距离,这才是有意思的数字。

可复用的规则:积分余额是一个数字,进度是一个故事。先讲故事,再把数字放到一边。

修改 3:四个胶囊,选中一个

之前

之后

冲出边缘的八个标签,对比四个胶囊。

初稿有八个分类:Coffee、Tea、Cold Drinks、Seasonal、Bakery、Breakfast、Merch 和 Gift Cards。它们冲出右边缘,所以“Merch”被截成“Mer”,人们得横向滑动才知道还有更多。选中项只靠一条细下划线标记。

改版显示四个胶囊:All、Coffee、Cold drinks 和 Bakery。All 填充咖啡馆蓝,其余是白色,选中项一眼就能看出。其他分类不在这个页面上;真实的 App 会把它们放在 Menu 标签里,一次点击即可到达。

可复用的规则:筛选行应该能放进屏幕。如果要横向滚动才能展示自己的列表,那就少展示几个。

修改 4:每个商品一行

之前

之后

每张下面都有奶油黄按钮的卡片网格,对比三行列表。

初稿把商品做成卡片网格:大照片、名称、价格,以及一个大写的奶油黄“ADD +”按钮。标签栏下面,两行半卡片就占满了屏幕,按钮上的奶油黄在每张照片下重复出现,而“View Menu”链接是白底上的浅黄色。

改版把每个商品做成一行:60 px 的照片、名称、一行灰字和价格,右侧是一个圆形蓝色“+”。网格只能放两张半卡片的地方,一张卡片里能放三行,而且每行唯一的按钮就是加购按钮。“Full menu”用的是品牌蓝。

可复用的规则:当每个商品的操作都一样时,操作应该小而对齐,这样眼睛就能顺着一条边读名称和价格。

更细小的修改

• 统一的左边缘。 初稿的边距是左 14 px、右 12 px。改版两侧都用 20 px,区块之间 16 px。
• 真正的字号体系。 文字从 9 到 18 px 改为 iOS 的 11 到 28 pt。
• 四个标签,不是五个。 Home、Menu、Order、Rewards 和 Account 变成 Home、Menu、Rewards 和 Account。Order 标签离开了标签栏。
• 四色调色板。 咖啡馆钴蓝 #2342A8、深蓝 #15276B、奶油黄 #F3C77A 和奶油白 #F5EFE4,取代了渐变和灰色背景。

审视你自己的点单页面

FAQ

咖啡点单 App 首页应该先展示什么?

先是放在一张卡片上、带 Change 链接的取餐门店,然后是奖励进度,再然后是分类和热门商品。人们应该先看到在哪里点单,再看点什么。

如何设计会员积分板块?

用进度条和一行直白的文字展示距离下一个奖励还有多远,比如“250 points to a free drink”,并把余额放到一边。

菜单应该有多少个分类标签?

屏幕上不用横向滚动就能放下的数量,通常是四个。其余的放进 Menu 标签,一次点击即可到达。

菜单该用网格还是列表?

点单用行列表更好,因为名称和价格对齐在一条边上,每行只需要一个小加购按钮。网格更适合浏览照片。

加购按钮应该多大?

可点击区域至少 44 乘 44 点,即使可见的圆形更小。改版后的页面每行使用一个圆形蓝色按钮。

来源

• 两个页面都是我们自己的,在 Figma 中设计并测量。门店、地址、价格和积分都是虚构的。
• 菜单照片来自 Pexels,摄影师为 Duc Nguyen、Melissa Jansen van Rensburg、Marcelo Verfe、Juan Pablo Serrano、Skyler Ewing 和 Vinícius Vieira ft。
• Apple Human Interface Guidelines: Typography,改版页面所用的 iOS 字号出处。
• Apple Human Interface Guidelines: Accessibility,44 pt 触控目标尺寸出处。
• Kivetz, Urminsky and Zheng, The Goal-Gradient Hypothesis Resurrected,Journal of Marketing Research,2006,关于积分卡越集越满顾客购买越频繁。
• 最初作为轮播图发布于 App Brainy。