項目背景
霸王茶姬是北京茶姬餐飲管理有限公司旗下的新中式國風茶飲品牌，以原葉鮮奶茶為主打，覆蓋純茶、鮮果茶及周邊相關衍生產品等，將東方文化與茶事傳承、創(chuàng)新結合一體，打造東方新茶鋪。
第一家門店于2017年11月17日誕生于云南省昆明市五一路。四年時間里，品牌飛速成長為云南地區(qū)頭部茶飲品牌，并陸續(xù)在廣西、貴州、上海、福建、四川等城市落地，同時在馬來西亞、泰國和新加坡等地開設門店30+，并掀起風潮，成為茶飲市場中為數不多的做極致、原創(chuàng)的中式文化、帶著中國茶文化烙印已出海的品牌。如今全球門店已突破360+。
2021年霸王茶姬進行全新品牌升級，雖然之前霸王茶姬已經有一個官網，但受制于當初的設計水平及制作條件，已經無法跟上品牌升級的腳步，于是決定進行新網站的改版，制作一個符合品牌需求及當下潮流的新官網。
項目成果
采用3D建模+webGL技術實現的首頁沉浸式交互體驗↑
項目回顧
奶茶行業(yè)應該是國內發(fā)展最快互聯網滲透最深的一個行業(yè)了，得益于從業(yè)者以及消費者都是年輕人的緣故，各大奶茶品牌都非常重視品牌的線上宣傳，在各自的官網上都花了很大的精力來展示和維護，力促拉近消費者和加盟商的距離，體現品牌專業(yè)度。
如何提現與其他奶茶品牌的差異化又凸顯品牌的主要特色不是一件容易的事情，但作為一家專注互聯網10+的企業(yè)，我們給出了我們的答案。
界面設計的思考
Theo MandeI在關于界面設計的著作中，提出了3條“黃金規(guī)則”，即置用戶于控制之下；減少用戶的記憶負擔；保持界面一致性。我們在進行霸王茶姬官網的設計過程中充分遵循了該設計準則，突出重點減少用戶的記憶負擔。
刪繁就簡，回歸設計本質
在官網第一屏的設計上，重點進行品牌曝光，結合霸王茶姬別致的茶杯3D建模動效，動靜結合張弛有度，讓用戶的視覺聚焦到我們想要傳達的信息，目中所及腦中所想皆只有霸王茶姬，消除其他因素對用戶瀏覽網站的干擾。
我們希望網站能夠最大化的呈現用戶的可閱讀區(qū)域，所以在整個網站導航欄目的思考上，我們將導航放置于頁面最右側并采用類似面包屑的設計，而不是網頁常見的平鋪于網頁頂部。
同樣在思考導航展開狀態(tài)的時候，為了增加整個網站的通透感，我們使用了背景模糊的效果，既能區(qū)分導航內容又減少了信息分割，使得導航不管在哪個頁面和板塊被打開，都可以在視覺上糅合為一體。
碎片化時代的思考
當前互聯網用戶注意力碎片化的時代，想要破局用戶增長，吸引用戶的關注就必然要順應時代。在首屏進行了品牌曝光后，我們希望用戶在往下體驗的過程中能讓用戶對品牌有更多深入的了解。所以在品牌宣傳剛需和不犧牲用戶瀏覽體驗的前提下，對于該段區(qū)域需要展示的內容、內容的字數限制、文字的大小甚至文字的行距及文字的顏色我們都進行了充分的考慮，讓用戶的可閱讀性更強。
找到品牌優(yōu)勢并無限放大
霸王茶姬作為新中式國風茶飲品牌，除了具備完善的供應鏈，還擁有世界最大的有機烏龍茶園、無污染的陽光鮮奶牧場和39個生態(tài)果園鮮果等其他品牌不具備的優(yōu)勢。
由于用戶對于單純的文字記憶力并不高，我們采用高清大圖配以專屬大標題的方式，讓用戶在瀏覽中更加直觀了解品牌的優(yōu)勢。
優(yōu)秀的品牌，數據會說話
人們對于數字的敏感度遠高于其他文字和圖片，根據霸王別姬品牌的發(fā)展歷程，在這一塊的處理方式上，我們整理了品牌的一些關鍵數據，采用階梯式的左右布局輔以簡要文字說明，這些都是霸王茶姬品牌發(fā)展至今成果沉淀。
沉浸式交互體驗的落地
根據美團大數據顯示，奶茶行業(yè)約有75%的相關消費來自20歲到35歲的年輕人，他們對體驗感、故事性、互動性、創(chuàng)意性等元素非常感興趣。
良好的設計引導及合理的布局思考已經讓用戶對于霸王茶姬這個品牌在視覺上有別于其他品牌的差異化的感官體驗和品牌認知體驗，但這還遠遠不夠，我們還需要給用戶更棒的互動體驗。
我們期望所有進入到霸王茶姬的用戶，用全部的精神能夠投入到當前官網的體驗行為中，不被其他信息干擾或者打斷，同時能夠產生高度的興奮和充實感。
在整個首頁的體驗上，我們以3D模型作為一個切入點，帶入整個霸王茶姬品牌的介紹、發(fā)展歷程、產品優(yōu)勢及核心產品，通過用戶與頁面的深度交互，讓整個畫面與用戶視覺產生一種跟隨感，而不是孤立的出現的頁面上。
根據霸王茶姬本身產品素材尺寸以寬屏為主的特點，蜀美在該頁面摒棄了傳統(tǒng)的垂直式瀏覽模式而采用水平體驗的方式，力求更加完美的展現霸王茶姬的產品。
同時在水平瀏覽的同時，我們增加了視覺差的滾動效果，讓整個畫面在體驗的時候更有層次感。
優(yōu)秀的作品源于對品質的高要求
3D建模+WebGL的運用
在最初進行網站策劃階段，關于網站的創(chuàng)意設計階段，我們可以將網站策劃為普通的圖片banner幻燈片切換或者一個展示視頻播放的形式，霸王茶姬剛好有一些非常高清且質量很高的宣傳素材支持，但是基于客戶對于本次改版的重視以及愛蜀美團隊對自身品質的要求，我們?yōu)榭蛻敉扑]了3D建模+WebGL的創(chuàng)意方式，并得到了客戶的高度認可。
經過建模師和前端交互設計師的不懈努力，在對燈光、材質、動畫進行調整了N個版本后終于做出了雙方都很滿意的交互體驗效果。
特別感謝阿亮童鞋的付出與努力?(^_-)
體驗+現實的平衡
由于網站采用了大量的高清素材及建模文件，會對網站的加載速度有更高的要求，為此我們采用了資源預加載+webP圖片+CDN加速的方案來解決這個問題，同時也為了在加載期間整個網頁不至于一片空白，我們采用svg技術對霸王茶姬的logo進行了一個繪制loading動畫，完美的平衡了由于加載問題可能導致的用戶體驗差的問題。
基于LBS的門店展示
相比其他一些餐飲品牌直接根據省市區(qū)把門店全部展示出來，需要用戶自動選擇所在城市的門店信息，本次改版我們?yōu)榭蛻籼峁┝嘶贚BS的智能門店展示方式，可以根據訪問者的地理位置獲取到所在城市，推薦出用戶所在城市的門店形式。并且考慮到后期的門店數據的更新維護，我們也為客戶提供了后臺一鍵更新門店數據的功能，減少用戶后期的維護成本。
臺上一分鐘，臺下十年功，網站上還有各種體驗細節(jié)都是愛蜀美團隊為提高用戶滿意度而做出的努力，也非常感謝品牌方霸王別姬在本次項目中給予愛蜀美團隊的創(chuàng)作自由度支持及專業(yè)性的認可，給了我們更多的發(fā)揮的空間。
更多細節(jié)請訪問霸王茶姬官網：www.chagee.com
如果您的企業(yè)官網正好也遇到數據增長乏力的問題，想要提高網站的轉化率或者需要一個更加符合企業(yè)品牌形象的網站，也許我們正好可以解決您的問題。
歡迎來電咨詢：186 0284 5267
