項目背景

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

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

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

項目成果

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

項目回顧

奶茶行業應該是國內發展最快互聯網滲透最深的一個行業了，得益于从业者以及消费者都是年轻人的缘故，各大奶茶品牌都非常重视品牌的线上宣传，在各自的官网上都花了很大的精力来展示和维护，力促拉近消费者和加盟商的距离，体现品牌专业度。

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

界面設計的思考

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

刪繁就簡，回归设计本质

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

我們希望網站能夠最大化的呈現用戶的可閱讀區域，所以在整个网站导航栏目的思考上，我们将导航放置于页面最右侧并采用类似面包屑的设计，而不是网页常见的平铺于网页顶部。

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

碎片化時代的思考

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

找到品牌優勢並無限放大

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

由於用戶對於單純的文字記憶力並不高，我们采用高清大图配以专属大标题的方式，让用户在浏览中更加直观了解品牌的优势。

優秀的品牌，数据会说话

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

沉浸式交互體驗的落地

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

良好的設計引導及合理的佈局思考已經讓用戶對於霸王茶姬這個品牌在視覺上有別於其他品牌的差異化的感官體驗和品牌認知體驗，但这还远远不够，我们还需要给用户更棒的互动体验。

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

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

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

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

優秀的作品源於對品質的高要求

3D建模+WebGL的运用

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

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

特別感謝阿亮童鞋的付出與努力❥(^_-)

體驗+现实的平衡

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

基於LBS的门店展示

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

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

更多細節請訪問霸王茶姬官網：www.chagee.com

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

歡迎來電諮詢：

琪琪：186-2817-6767  

光光：181-6003-7677