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