ag登录入口|(集团)点击登录

沉溺式网页新体验:霸王茶姬奶茶网站建立
笑笑###

    

项目配景

霸王茶姬是北京茶姬餐饮办理有限公司旗下的新中式国风茶饮品牌,以原叶鲜奶茶为主打,掩盖纯茶、鲜果茶及周边相干衍消费品等,将西方文明与茶事传承、创新联合一体,打造西方新茶铺。

第一家门店于2017年11月17日降生于云南省昆明市五一起。四年工夫里,品牌飞速发展为云南地域头部茶饮品牌,并连续在广西、贵州、上海、福建、四川等都会落地,同时在马来西亚、泰国和新加坡等地开设门店30+,并掀刮风潮,成为茶饮市场中为数未几的做极致、原创的中式文明、带着中国茶文明烙印已出海的品牌。现在环球门店已打破360+。

2021年霸王茶姬举行全新品牌晋级,固然之前霸王茶姬曾经有一个官网,但受制于现在的设计程度及制造条件,曾经无法跟高品牌晋级的脚步,于是决议举行新网站的改版,制造一个切合品牌需求及当下潮水的新官网。

项目效果

接纳3D建模+webGL技能完成的首页沉溺式交互体验↑



项目回忆

奶茶行业应该是国际开展最快互联网浸透最深的一个行业了,得益于从业者以及消耗者都是年老人的缘故,各大奶茶品牌都十分器重品牌的线上宣传,在各自的官网上都花了很大的精神来展示和维护,力促拉近消耗者和加盟商的间隔,表现品牌专业度。

怎样提现与其他奶茶品牌的差别化又凸显品牌的次要特征不是一件容易的事变,但作为一家专注互联网10+的企业,ag登录给出了ag登录的回答。


界面设计的思索

Theo MandeI在关于界面设计的著作中,提出了3条“黄金规矩”,即置用户于控制之下;增加用户的影象包袱;坚持界面分歧性。ag登录在举行霸王茶姬官网的设计历程中充实遵照了该设计原则,突出重点增加用户的影象包袱。


删繁就简,回归设计实质

在官网第一屏的设计上,重点举行品牌曝光,联合霸王茶姬新奇的茶杯3D建模动效,动态联合张弛有度,让用户的视觉聚焦到ag登录想要转达的信息,目中所及脑中所想皆只要霸王茶姬,消弭其他要素对用户欣赏网站的搅扰。

ag登录盼望网站可以最大化的出现用户的可阅读地区,以是在整个网站导航栏目标思索上,ag登录将导航安排于页面最右侧并接纳相似面包屑的设计,而不是网页罕见的平铺于网页顶部。


异样在思索导航睁开形态的时分,为了增长整个网站的通透感,ag登录利用了配景含糊的结果,既能区分导航内容又增加了信息支解,使得导航不论在哪个页面和板块被翻开,都可以在视觉上糅合为一体。


碎片化期间的思索

以后互联网用户留意力碎片化的期间,想要破局用户增加,吸援用户的存眷就一定要适应期间。在首屏举行了品牌曝光后,ag登录盼望用户在往下体验的历程中能让用户对品牌有更多深化的理解。以是在品牌宣传刚需和不捐躯用户欣赏体验的条件下,关于该段地区必要展示的内容、内容的字数限定、笔墨的巨细乃至笔墨的行距及笔墨的颜色ag登录都举行了充实的思索,让用户的可阅读性更强。


找到品牌上风并无穷缩小

霸王茶姬作为新中式国风茶饮品牌,除了具有美满的供给链,还拥有天下最大的无机乌龙茶园、无净化的阳鲜明奶牧场和39个生态果园鲜果等其他品牌不具有的上风。

由于用户关于单纯的笔墨影象力并不高,ag登录接纳高清大图配以专属大题目的方法,让用户在欣赏中愈加直观理解品牌的上风。


良好的品牌,数据会语言

人们关于数字的敏感度远高于其他笔墨和图片,依据霸王别姬品牌的开展进程,在这一块的处置方法上,ag登录整理了品牌的一些要害数据,接纳门路式的左右结构辅以扼要笔墨阐明,这些都是霸王茶姬品牌开展至今效果沉淀。


沉溺式交互体验的落地

依据美团大数据表现,奶茶行业约有75%的相干消耗来自20岁到35岁的年老人,他们对体验感、故事性、互动性、创意性等元素十分感兴味。

精良的设计引导及公道的结构思索曾经让用户关于霸王茶姬这个品牌在视觉上有别于其他品牌的差别化的感官体验和品牌认知体验,但这还远远不敷,ag登录还必要给用户更棒的互动体验。

ag登录希冀一切进入到霸王茶姬的用户,用所有的精力可以投入到以后官网的体验举动中,不被其他信息搅扰大概打断,同时可以发生高度的愉快和充分感。


在整个首页的体验上,ag登录以3D模子作为一个切入点,带入整个霸王茶姬品牌的介绍、开展进程、产品上风及中心产品,经过用户与页面的深度交互,让整个画面与用户视觉发生一种追随感,而不是伶仃的呈现的页面上。


依据霸王茶姬自己产品素材尺寸以宽屏为主的特点,蜀美在该页面放弃了传统的垂直式欣赏形式而接纳程度体验的方法,力图愈加完善的展示霸王茶姬的产品。

同时在程度欣赏的同时,ag登录增长了视觉差的转动结果,让整个画面在体验的时分更有条理感。


良好的作品源于对品格的高要求

3D建模+WebGL的运用

在最后举行网站筹划阶段,关于网站的创意设计阶段,ag登录可以将网站筹划为平凡的图片banner幻灯片切换大概一个展示视频播放的情势,霸王茶姬恰好有一些十分高清且质量很高的宣传素材支持,但基于客户关于本次改版的器重以及爱蜀美团队对本身品格的要求,ag登录为客户保举了3D建模+WebGL的创意方法,并失掉了客户的高度承认。

颠末建模师和前端交互设计师的不懈高兴,在对灯光、材质、动画举行调解了N个版本后终于做出了两边都很得意的交互体验结果。

分外感激阿亮童鞋的支付与高兴❥(^_-)


体验+实际的均衡

由于网站接纳了少量的高清素材及建模文件,会对网站的加载速率有更高的要求,为此ag登录接纳了资源预加载+webP图片+CDN减速的方案来办理这个题目,同时也为了在加载时期整个网页不至于一片空缺,ag登录接纳svg技能对霸王茶姬的logo举行了一个绘制loading动画,完善的均衡了由于加载题目大概招致的用户体验差的题目。


基于LBS的门店展示

相比其他一些餐饮品牌间接依据省郊区把门店所有展示出来,必要用户主动选择地点都会的门店信息,本次改版ag登录为客户提供了基于LBS的智能门店展示方法,可以依据拜访者的天文地位获取到地点都会,保举出用户地点都会的门店情势。而且思索到前期的门店数据的更新维护,ag登录也为客户提供了背景一键更新门店数据的功效,增加用户前期的维护本钱。


台上一分钟,台下十年功,网站上另有种种体验细节都是爱蜀美团队为进步用户得意度而做出的高兴,也十分感激品牌方霸王别姬在本次项目中赐与爱蜀美团队的创作自在度支持及专业性的承认,给了ag登录更多的发扬的空间。

更多细节请拜访霸王茶姬官网:


假如您的企业官网恰好也遇到数据增加乏力的题目,想要进步网站的转化率大概必要一个愈加切合企业品牌抽象的网站,大概ag登录恰好可以办理您的题目。

接待来电征询:

###  

###