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

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

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

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