喜茶小程序产品设计体验分析

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
17543 23 126 2023-06-04

喜茶的视觉体验真不错,希望对大家有所帮助

前两天又有一个粉丝要我写一个喜茶小程序的产品分析,正好当天买了喜茶和FENDI联名的奶茶,看到喜茶的小程序做的很不错,不管是从视觉感受、体验设计都做的很不错。那么今天我将从5个纬度进行分析,希望对自己有所帮助,对你们也有帮助。


进入喜茶小程序的时候给我的感受是简洁、时尚、极致的设计风格,截了两张小程序内的两个界面。
确实做的还挺不错的,为什么给人感受不一样?接下来我们分析分析


1.版式
1.首先从下面的页面我们能发现,界面的排版只有卡片左边距留了20的安全距离,而卡片右边安全距离为0,这样特别的版式设计给人不对称的感觉,这样的设计能让用户记住,同时又有一点时尚范的感觉,很符合喜茶目标用户年轻人的审美。
2.同时产品的banner是3:2的比例,较为靠近黄金比例的尺寸。


1.点单页面,喜茶新增了新品推广位,一些新上的产品都会在推广位呈现,尺寸比例4:3,给人的感受像是线下海报一样,同时第三个广告位露出部分,让用户知道后面还可以左滑查看。同时推广页的右下角有个箭头指引,告知用户可点击。
2.看完这几个页面会发现,喜茶的基本上都是纯直角的设计语言,推广页是直角、标签是直角、按钮微圆角,直角的设计语言给人的感受是时尚、极致、极简的设计感受,个人非常喜欢。
3.但是点单页面的有点乱,标签的颜色过多,不够统一,图标的也非常的多,这样给人的感受就会比较凌乱,尽可能少的去表现,这样更加能提高用户的效率。


1.在点单页面用户上滑,推广位渐渐的往上消失,这样产品的展示会更多,利于用户挑选和寻找。
2.用户在选口味界面,发现每一个标签的内的文字左右的安全距离一致,依次排列,具有节奏感,页面给人感受简洁、易操作,同时用户可以选自己的口味,可进行保存,下次点直接就可以选择自己的口味。


在喜茶的百货界面能清晰发现每一个模块的都是不一样的,很多产品的商场页面都是一致的,而喜茶在产品的展示会以不一样的形式出现,每一个模块都有尺寸和排版的差异,这样给用户有种落错感,更加有设计。


2.会员页
1.喜茶的会员页给我眼前一亮的感觉,会员的背景用色都是明度高、纯度低的渐变给人的感受清新、淡雅的感觉。
2.会员页用户在切换的同时图标的颜色会跟着会员的颜色变化,特权的内容也会有不一样的变化,让用户有明显的等级感知。
3.切换到“黑卡”的时候,会发现会员页的“喜”字加上了质感。
4.会员卡上“喜”字提取了“喜茶”中的“喜”,跟其他产品的会员做了区分的同时又加深了品牌印象。


3.图标
喜茶有两种不同风格的图标,一种是比较极简,线性,差异性没有那么强,而另一种则是插画风格的图标,给人感受比较有趣,更有差异,极简则符合喜茶整体小程序的调性,而插画又丰富了页面的单调性。


4.动画
1.喜茶顶部的banner做非常不错,例如跟FENDI合作的会在首屏加入视频,用户一进入小程序就能看到能很好的吸引用户的注意。


2.用户在左右切换banner时,文字会先出现然后底部的图片渐渐出现,给用户感受自然、流畅的感受,好的动画效果能给产品加分,给用户留下好的感受。


5.字体
1.喜茶的数字字体是NeutraText-DemiAlt,每次进去喜茶看到他们的数字字体非常有独特性,给人的感受时尚、极致、有设计
2.部分界面和海报喜茶会用上方正悠宋,有点中国风、古风的韵味在里面,而且也非常有独特的设计美感,喜茶会应用在国风的海报以及会员页的“喜”字上,突出风格化。
3.好的字体能很好的提高产品的品牌感和设计美感,更能传达该品牌想传达的东西。


6.更多界面欣赏

总结
1.好的排版能给用户不一样的感受,不一定非要一模一样。
2.喜茶的会员提取了“喜“字,不仅加深了品牌印象,而且形成与其他产品的差异。
3.好的动画效果能给产品加分,给用户留下好的感受。
4.好的字体能很好的提高产品的品牌感和设计美感,更能传达该品牌想传达的东西。
5.喜茶的目标很明确,做年轻人的生意,所以喜茶整体的风格都很符合年轻人的审美,简洁、清新的设计风格,但是这种风格不一定每一个品牌都能成,在商业的角度需要考虑的太多太多,高级不一定能成!

感谢大家阅读~ 希望这篇文章对你有帮助

微信公众号:黄小伟设计

Powered by Froala Editor

全部评论:23

  • 爱飞的鸟

    2023-07-24 10:09

    @维生素C片: 设计师最烦听到的一句话:还可以再优化优化

  • 黄小伟

    2023-07-04 15:39

    @达也~: 哈哈哈哈,无非就是圆的变方,方的变圆,像苹果的工业设计一样,又回来了直角哈哈哈哈,太有意思了

  • 达也~

    2023-07-04 10:09

    别说看惯了圆角,这么直来直去的看上去乍一看还不错

  • 黄小伟

    2023-06-29 10:49

    @: 我更喜欢看品牌的优点,喜茶设计给我的感受确实还是很不错,包括一些品牌营销手段还是很不错的,但是上次我去喜茶点服务员的态度不是很好,这个需要注意

  • 2023-06-28 14:07

    总结:只要你名气够大,做啥都是对的 想法:作为一个不知名的设计师,其实我更想看到您对这一品牌的不同看法和见解

  • 几杯喵小贱

    2023-06-27 16:59

    @几杯喵小贱: 有的地方是大圆角,有的是小圆角,有的是直角,感觉很不统一,

  • 几杯喵小贱

    2023-06-27 16:58

    非常不喜欢很硬的直角,给人感觉很不舒服,颜色是清新淡雅的,但是界面给人很硬挺,不是很搭的感觉。

  • 修一雾山

    2023-06-25 15:34

    @维生素C片: 棒棒哒

  • 我是猜猜

    2023-06-20 10:03

    针对首页的两边不对称,我们公司开发说大厂做出来的东西被人数是设计,小厂做出来就是 bug

  • 黄小伟

    2023-06-15 09:21

    @维生素C片: 感谢支持,后续会输出更多好的作品出来的哈

  • 维生素C片

    2023-06-13 17:23

    设计师还是有设计想法和审美功底的,不过视觉体验上可以再优化优化~ 期待新的内容~

  • _COOKY_

    2023-06-12 16:55

    @一个专业的吃货: 了解了,感谢

  • _COOKY_

    2023-06-08 13:53

    @一个专业的吃货: 我想问一下你觉得这些奶茶手机端哪些方面比较难用呢,可以举几个例子吗?纯粹请教,因为我感觉我用起来点单功能跟美团外卖流程差不多,并没有很复杂,所以请教一下

  • 黄小伟

    2023-06-07 18:51

    @一个专业的吃货: 嗯嗯

  • 一个专业的吃货

    2023-06-07 17:15

    @黄小伟: 美团外卖也加了好多商业化的功能,但是一样觉得用起来得心应手。。。我觉得就是产品或者设计本着粗糙能用就行,没那么多讲究。。。可能他们的想法就是能用就行。。。话说回来,抖音加了这么多东西,还有美团加了这么多功能内容,一样简单好用。。。这个就很值得玩味了。。。可能专业的懂体验懂数据的设计师都在大厂吧。。。设计的本质还是简单好用,其次才是美观。

  • 黄小伟

    2023-06-07 16:14

    @一个专业的吃货: 你说的很对,国内的产品会越来越冗余,这个绝对的,一般一个产品的前期状态是最纯粹的、体验最好的,像我记得抖音前2年的产品很纯粹,公司为了商业化就会不断的往里面加东西,设计师们是基本没有办法的,但是我们只能去观察感受他们产品一些好的地方

  • 黄小伟

    2023-06-07 16:13

    @一个专业的吃货: 你说的很对,国内的产品会越来越冗余,这个绝对的,一般一个产品的前期状态是最纯粹的、体验最好的,像我记得抖音前2年的产品很纯粹,公司为了商业化就会不断的往里面加东西,设计师们是基本没有办法的,但是我们只能去观察感受他们产品一些好的地方

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票