前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >场景化设计-瑞幸咖啡APP设计案例详细解析

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

作者头像
用户5009027
发布2021-12-05 12:39:30
6.1K0
发布2021-12-05 12:39:30
举报
文章被收录于专栏:静Design静Design

静电:今天我们来解析瑞幸咖啡的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,这让专业设计师或者面试官看到后,好感度瞬间将为零,请务必善待自己产品的标志,它太重要啦!

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档