【案例解析】超有设计感的喜茶GO应用，优秀应用UI界面赏析-

据说点击蓝色字体关注同学都升职啦

静电说：Hello各位小伙伴，新一期的案例赏析栏目又又又又来啦！今天我们要赏析的应用是啥捏？ 对！就是喜茶GO了！虽然静电喝喜茶很少，虽然上一次喝喜茶让我将近等了一个小时，虽然等的时候看店员一直在擦杯子一遍遍的擦就是不给你，虽然那之后就没有然后了，但是！不妨碍我赏析喜茶这款应用啊~哈哈哈。

说实话我还是很喜欢喜茶这样的设计风格的，因为他更有“设计感”，大留白的设计，更清爽的配图都让我很喜欢。

更多案例解析请点击这里查看

001.首页设计

在很多应用都追求窄轮播图的时候，喜茶之类的应用采用了大轮播图的设计，其实这主要取决于用户使用应用的场景，因为在喜茶的页面里，并没有过多需要展示的功能模块，这样的大轮播图是吸引用户下单购买某个产品的非常重要的一块，而更有质感和低调的背景色加上鲜亮的食材作为对比，让食物看起来更有美味，更具有冲击感。

在轮播图下方，设计师采用了跨栏设计的用户卡片，很少有应用将用户信息直接展示在首页，可见喜茶的场景是高度关联用户及等级内容的，而且将高频使用的会员码一并展示在右侧，充分说明会员系统是喜茶非常重要的一环。

喜茶的首页不像瑞幸咖啡那么繁杂，简单的几个卡片将高频场景展示了出来，比如“门店自取”和“外卖”两个栏目。

而下方低饱和度的卡片设计也是很多应用没有的，静电很喜欢这样的卡片风格，不刺眼，耐看而且具有吸引力，这对设计师的颜色使用提出了更高的要求。

静电特别想说说喜茶的轮播图，这些颜色都是属于比较难用的，容易显得脏的颜色，但是通过大面积留白的设计和展示，让这种低饱和度的渐变色也有了别样的感觉。不刺眼，但吸引人。

002.点单页面设计

点单页面不出意外依然是左右分栏的设计，这已经成为业界共识了。不同的是，点单页右侧的产品列表采用了一种比较创新的布局方式，文字模块的布局高度会比左侧的图片高度还要高，这个时候设计师再去加大行的间距，画面非常清爽，而且可读性很高。

而选规格页面采用了抽屉方式的交互效果，从底部抽拉上来，而不是跳页，避免用户产生损失厌恶情绪。

003.百货页面

百货页面同样采用灰色底加上白色卡片的方式，不同的是采用了类似于直角的卡片方式，但并不显得突兀，因为喜茶设计师把图片设计的非常清淡。

而需要强化的内容，设计师采用了一圈稍微深的描边来进行处理。而下方悬浮的购物车，采用更深的灰色，左侧用红色购物袋加强用户注意。其实这个设计真的出现在喜茶的袋子上，看图。这个算是视觉锤了吧~

然后是关于列表的嵌套卡片，灰色背景上使用白色卡片，白色卡片采用上下分栏，上方为配图，下方是文字和价格，喜茶设计师特别突出了价格和加入购物车的“+”按钮，而产品名，购买人数和价格间距比较大，更清爽，也不会显得构图散。

004.“我的”页面

我的页面采用头部背景+卡片跨栏形式，整体都是灰色设计但并不显得单调。而上方的曲线还有动画效果，这算是一个小小的创新吧！其实UI的创新都集中在小细节上。

而带有浅浅阴影的卡片和别致的引入第三方字体的英文数字字体，让画面更加具有设计感起来。

各位设计师小伙伴，喜茶算是这样的电商应用中设计的比较好的一类，大家可以将其中精彩的部分学起来哈。

另外大家也可以关注我的B站频道，同步的视频案例解析将会在5月17日晚上8:40推出，敬请关注哈。

在下方留言回复关键字

B站

获取地址吧

▼更多精彩文章▼

《静电的UI设计教室》6月班来啦

从2015年到2022年

40多期精心打磨与进化的

高含金量UI小班课程

追加多个大厂面试题作业强化训练

求职面试更加游刃有余

↓↓长按二维码加静电老师咨询↓↓