场景化设计-瑞幸咖啡APP设计案例详细解析

2021-12-05 12:39:30 浏览数 (1)

静电:今天我们来解析瑞幸咖啡的APP设计案例。瑞幸是我最近才开始喝开始用的,突然发现他家的丝绒生椰拿铁还真挺好喝,而且价格也不贵,相对于我这种一天一杯咖啡的人来说是再合适不过了。在之前一直都是使用的小程序来下单,这次下载了他家的APP,感觉还是可圈可点的。

PART.001

从菜单开始场景化设计

菜单决定了一个应用的属性

菜单是场景化设计的起始点,通过菜单,可以满足用户在不同场景下的需求。而瑞幸咖啡的主菜单则意图非常明显,它把自己定位为购物类型的应用,在首页,我们满足的是逛的需求,通过首页的推荐,将用户引入不同的入口中。 “菜单”这个选项则直接让用户开始点单,这是最简单粗暴的做法,毕竟用户大部分时候打开应用都是要喝咖啡的。

但是,瑞幸不满足于这点,中部菜单12.12和购物车,则倾向于让用户在购买咖啡的同时,可以买点别的,比如各种周边产品,咖啡杯子等等。也就是说,在卖咖啡的同时,也希望用户能下单把周边也买了,瑞幸的意图很明显,塑造自己的咖啡文化圈子。同时让这款工具类型的应用多了电商属性。

PART.002

从首页排版看场景化设计

突显高频功能,最大满足用户场景化需求

接下来看首页设计,首先,用户下单点咖啡是最强烈的属性之一。这个场景通常会在门店里进行,所以,打开首页,第一眼就看见下单按钮,可以让用户快速下单进行购买操作。所以,设计师将这些高频功能设计为瓷片区形式。“现在下单”和“领券中心”相互关联,因为瑞幸用户下单前都会先看是否有优惠券,而优惠券成为他们去购买咖啡的非常重要的动机。所以,领券中心就成为常态。将这两个高频功能放在一起,非常必要。

当然,这还不够,下方的新人优惠专享模块更是将新人用户死死的留在这里。喝一杯咖啡优惠这么多,而且优惠还一直不停。且附带购买任务。这就是瑞幸独特的留客方式,各种优惠券轮番轰炸,不管是新用户还是老用户,都不可抗拒。

所以,在设计过程中,高频功能始终占据重要位置,他们分别是“下单瓷片区”,“促销广告区”,“新人优惠专享”区。

PART.003

列表区设计-流畅阅读

列表设计需统一

瑞星咖啡APP的所有列表均采用卡片设计,灰色背景 白色卡片的形式看起来很常见。但是在配图上却有很多巧思,比如这个列表中的配图,版式一致,促销红色区域设计统一,这样的观感会让人阅读更加流畅,增加购买概率。

Tip:配图设计至关重要,统一版式设计是个好办法。

列表设计需统一 配图需一致

上方这个卡片列表则采用z字型错落设计,让用户浏览的时候不至于疲倦,符合用户的眼动规律,而这里的配图同样是纯色低保和颜色底色 产品图展示的方式,风格一致,不混乱。

包裹式卡片设计 更好布局

很多同学对用卡片后title无处安放表示不解,这里的模块设计提供了一种很好的示例。模块嵌套模块,多层模块可以很好的容纳Title部分的文字,让模块更加统一。然后,配图同样是纯色打底,这是页面不混乱的核心。

PART.004

菜单页设计-提升效率

左右分栏设计,提升用户选购效率

菜单页面采用了左右分栏的布局,加速用户点单的效率。最上部的“自提”和“外送”将大场景先进行细分,且这两个切换开关非常明显,用户容易识别。

下方左右分栏是电商类应用常见的布局方式,这种布局方式让用户不会频繁的跳页,增加用户的安全感和点餐效率。而左侧的品类并不单单仅仅是“品类”,而是融合了不同的“场景需求”,将热门产品拿出来单独归类,且加入类似于场景化“菜单”的设计,比如秋冬暖咖,圣诞限定等等,这也是一种很好的,也是很灵活的促销方式。

PART.005

我的页面-工具性及品牌感

我的页面 突显品牌感和功能性

我的页面是凸显品牌感的重要战场,头部瑞幸的深蓝色品牌色打底,配上鹿头纹理的会员卡模块,在宣扬品牌感的同时引导用户购入会员卡,增加客户黏性。

常用功能模块,设计师加入了下拉箭头,隐藏不太重要的功能,可以增加用户对主要功能的聚焦。当然,这种方式有利有弊,可能会导致一些功能无法被用户发现。但是,当内容过多时,下拉箭头隐藏部分内容是一个可取的做法,各位设计师小伙伴可以尝试,特别是在一些介绍内容过多的时候,都可以使用这种方式。

下方的常购模块,可以让用户快速下单常喝的产品品类。很贴心。

左下角的吉祥物,在不断的招手让你领券,那就领一张吧,毕竟不领券喝瑞幸可是很贵的。

PART.006

启动页面-凸显品牌专业度

请重视Logo设计和品牌建设

启动页面和闪屏是凸显产品品牌的非常重要地方,也是一款产品的门面。启动页面上精心设计的logo加上Slogan,以及闪屏页的漂亮宣传图,无时无刻都在将品牌视觉“钉”在用户心里,增加用户对品牌的认知,特有的蓝色,以及鹿头,无一不在强化这个印象。

Tip:各位小伙伴在做产品的时候,特别容易忽视的就是这个logo,不少同学甚至直接打个普普通通的文字作为logo,这让专业设计师或者面试官看到后,好感度瞬间将为零,请务必善待自己产品的标志,它太重要啦!

总之,作为设计师,我们在使用任何产品的时候,都要用心去观察它的排版,设计细节,这些细节不仅仅是视觉的表现,更关乎到它背后的目的是什么?这才是一个优秀设计师更应思考的深层次的问题。

先问为什么,再了解目标,最后再设计和排版。

0 人点赞