项目背景

霸王茶姬是北京茶姬餐饮管理有限公司旗下的新中式国风茶饮品牌，以原叶鲜奶茶为主打，覆盖纯茶、鲜果茶及周边相关衍生产品等，将东方文化与茶事传承、创新结合一体，打造东方新茶铺。

第一家门店于2017年11月17日诞生于云南省昆明市五一路。四年时间里，品牌飞速成长为云南地区头部茶饮品牌，并陆续在广西、贵州、上海、福建、四川等城市落地，同时在马来西亚、泰国和新加坡等地开设门店30+，并掀起风潮，成为茶饮市场中为数不多的做极致、原创的中式文化、带着中国茶文化烙印已出海的品牌。如今全球门店已突破360+。

2021年霸王茶姬进行全新品牌升级，虽然之前霸王茶姬已经有一个官网，但受制于当初的设计水平及制作条件，已经无法跟上品牌升级的脚步，于是决定进行新网站的改版，制作一个符合品牌需求及当下潮流的新官网。

项目成果

采用3D建模+webGL技术实现的首页沉浸式交互体验↑

项目回顾

奶茶行业应该是国内发展最快互联网渗透最深的一个行业了，得益于从业者以及消费者都是年轻人的缘故，各大奶茶品牌都非常重视品牌的线上宣传，在各自的官网上都花了很大的精力来展示和维护，力促拉近消费者和加盟商的距离，体现品牌专业度。

如何提现与其他奶茶品牌的差异化又凸显品牌的主要特色不是一件容易的事情，但作为一家专注互联网10+的企业，我们给出了我们的答案。

界面设计的思考

Theo MandeI在关于界面设计的著作中，提出了3条“黄金规则”，即置用户于控制之下；减少用户的记忆负担；保持界面一致性。我们在进行霸王茶姬官网的设计过程中充分遵循了该设计准则，突出重点减少用户的记忆负担。

删繁就简，回归设计本质

在官网第一屏的设计上，重点进行品牌曝光，结合霸王茶姬别致的茶杯3D建模动效，动静结合张弛有度，让用户的视觉聚焦到我们想要传达的信息，目中所及脑中所想皆只有霸王茶姬，消除其他因素对用户浏览网站的干扰。

我们希望网站能够最大化的呈现用户的可阅读区域，所以在整个网站导航栏目的思考上，我们将导航放置于页面最右侧并采用类似面包屑的设计，而不是网页常见的平铺于网页顶部。

同样在思考导航展开状态的时候，为了增加整个网站的通透感，我们使用了背景模糊的效果，既能区分导航内容又减少了信息分割，使得导航不管在哪个页面和板块被打开，都可以在视觉上糅合为一体。

碎片化时代的思考

当前互联网用户注意力碎片化的时代，想要破局用户增长，吸引用户的关注就必然要顺应时代。在首屏进行了品牌曝光后，我们希望用户在往下体验的过程中能让用户对品牌有更多深入的了解。所以在品牌宣传刚需和不牺牲用户浏览体验的前提下，对于该段区域需要展示的内容、内容的字数限制、文字的大小甚至文字的行距及文字的颜色我们都进行了充分的考虑，让用户的可阅读性更强。

找到品牌优势并无限放大

霸王茶姬作为新中式国风茶饮品牌，除了具备完善的供应链，还拥有世界最大的有机乌龙茶园、无污染的阳光鲜奶牧场和39个生态果园鲜果等其他品牌不具备的优势。

由于用户对于单纯的文字记忆力并不高，我们采用高清大图配以专属大标题的方式，让用户在浏览中更加直观了解品牌的优势。

优秀的品牌，数据会说话

人们对于数字的敏感度远高于其他文字和图片，根据霸王别姬品牌的发展历程，在这一块的处理方式上，我们整理了品牌的一些关键数据，采用阶梯式的左右布局辅以简要文字说明，这些都是霸王茶姬品牌发展至今成果沉淀。

沉浸式交互体验的落地

根据美团大数据显示，奶茶行业约有75%的相关消费来自20岁到35岁的年轻人，他们对体验感、故事性、互动性、创意性等元素非常感兴趣。

良好的设计引导及合理的布局思考已经让用户对于霸王茶姬这个品牌在视觉上有别于其他品牌的差异化的感官体验和品牌认知体验，但这还远远不够，我们还需要给用户更棒的互动体验。

我们期望所有进入到霸王茶姬的用户，用全部的精神能够投入到当前官网的体验行为中，不被其他信息干扰或者打断，同时能够产生高度的兴奋和充实感。

在整个首页的体验上，我们以3D模型作为一个切入点，带入整个霸王茶姬品牌的介绍、发展历程、产品优势及核心产品，通过用户与页面的深度交互，让整个画面与用户视觉产生一种跟随感，而不是孤立的出现的页面上。

根据霸王茶姬本身产品素材尺寸以宽屏为主的特点，蜀美在该页面摒弃了传统的垂直式浏览模式而采用水平体验的方式，力求更加完美的展现霸王茶姬的产品。

同时在水平浏览的同时，我们增加了视觉差的滚动效果，让整个画面在体验的时候更有层次感。

优秀的作品源于对品质的高要求

3D建模+WebGL的运用

在最初进行网站策划阶段，关于网站的创意设计阶段，我们可以将网站策划为普通的图片banner幻灯片切换或者一个展示视频播放的形式，霸王茶姬刚好有一些非常高清且质量很高的宣传素材支持，但是基于客户对于本次改版的重视以及爱蜀美团队对自身品质的要求，我们为客户推荐了3D建模+WebGL的创意方式，并得到了客户的高度认可。

经过建模师和前端交互设计师的不懈努力，在对灯光、材质、动画进行调整了N个版本后终于做出了双方都很满意的交互体验效果。

特别感谢阿亮童鞋的付出与努力❥(^_-)

体验+现实的平衡

由于网站采用了大量的高清素材及建模文件，会对网站的加载速度有更高的要求，为此我们采用了资源预加载+webP图片+CDN加速的方案来解决这个问题，同时也为了在加载期间整个网页不至于一片空白，我们采用svg技术对霸王茶姬的logo进行了一个绘制loading动画，完美的平衡了由于加载问题可能导致的用户体验差的问题。

基于LBS的门店展示

相比其他一些餐饮品牌直接根据省市区把门店全部展示出来，需要用户自动选择所在城市的门店信息，本次改版我们为客户提供了基于LBS的智能门店展示方式，可以根据访问者的地理位置获取到所在城市，推荐出用户所在城市的门店形式。并且考虑到后期的门店数据的更新维护，我们也为客户提供了后台一键更新门店数据的功能，减少用户后期的维护成本。

台上一分钟，台下十年功，网站上还有各种体验细节都是爱蜀美团队为提高用户满意度而做出的努力，也非常感谢品牌方霸王别姬在本次项目中给予爱蜀美团队的创作自由度支持及专业性的认可，给了我们更多的发挥的空间。

更多细节请访问霸王茶姬官网：www.chagee.com

如果您的企业官网正好也遇到数据增长乏力的问题，想要提高网站的转化率或者需要一个更加符合企业品牌形象的网站，也许我们正好可以解决您的问题。

欢迎来电咨询：

琪琪：186-2817-6767  

光光：181-6003-7677