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