沉浸式網頁新體驗₪↟:霸王茶姬奶茶網站建設
笑笑 2021-10-20

    

專案背景

霸王茶姬是北京茶姬餐飲管理有限公司旗下的新中式國風茶飲品牌▩◕•▩,以原葉鮮奶茶為主打▩◕•▩,覆蓋純茶✘✘、鮮果茶及周邊相關衍生產品等▩◕•▩,將東方文化與茶事傳承✘✘、創新結合一體▩◕•▩,打造東方新茶鋪•··↟。

第一家門店於2017年11月17日誕生於雲南省昆明市五一路•··↟。四年時間裡▩◕•▩,品牌飛速成長為雲南地區頭部茶飲品牌▩◕•▩,並陸續在廣西✘✘、貴州✘✘、上海✘✘、福建✘✘、四川等城市落地▩◕•▩,同時在馬來西亞✘✘、泰國和新加坡等地開設門店30+▩◕•▩,並掀起風潮▩◕•▩,成為茶飲市場中為數不多的做極致✘✘、原創的中式文化✘✘、帶著中國茶文化烙印已出海的品牌•··↟。如今全球門店已突破360+•··↟。

2021年霸王茶姬進行全新品牌升級▩◕•▩,雖然之前霸王茶姬已經有一個官網▩◕•▩,但受制於當初的設計水平及製作條件▩◕•▩,已經無法跟上品牌升級的腳步▩◕•▩,於是決定進行新網站的改版▩◕•▩,製作一個符合品牌需求及當下潮流的新官網•··↟。

專案成果

採用3D建模+webGL技術實現的首頁沉浸式互動體驗↑



專案回顧

奶茶行業應該是國內發展最快網際網路滲透最深的一個行業了▩◕•▩,得益於從業者以及消費者都是年輕人的緣故▩◕•▩,各大奶茶品牌都非常重視品牌的線上宣傳▩◕•▩,在各自的官網上都花了很大的精力來展示和維護▩◕•▩,力促拉近消費者和加盟商的距離▩◕•▩,體現品牌專業度•··↟。

如何提現與其他奶茶品牌的差異化又凸顯品牌的主要特色不是一件容易的事情▩◕•▩,但作為一家專注網際網路10+的企業▩◕•▩,我們給出了我們的答案•··↟。


介面設計的思考

Theo MandeI在關於介面設計的著作中▩◕•▩,提出了3條“黃金規則”▩◕•▩,即置使用者於控制之下;減少使用者的記憶負擔;保持介面一致性•··↟。我們在進行霸王茶姬官網的設計過程中充分遵循了該設計準則▩◕•▩,突出重點減少使用者的記憶負擔•··↟。


刪繁就簡▩◕•▩,迴歸設計本質

在官網第一屏的設計上▩◕•▩,重點進行品牌曝光▩◕•▩,結合霸王茶姬別緻的茶杯3D建模動效▩◕•▩,動靜結合張弛有度▩◕•▩,讓使用者的視覺聚焦到我們想要傳達的資訊▩◕•▩,目中所及腦中所想皆只有霸王茶姬▩◕•▩,消除其他因素對使用者瀏覽網站的干擾•··↟。

我們希望網站能夠最大化的呈現使用者的可閱讀區域▩◕•▩,所以在整個網站導航欄目的思考上▩◕•▩,我們將導航放置於頁面最右側並採用類似麵包屑的設計▩◕•▩,而不是網頁常見的平鋪於網頁頂部•··↟。


同樣在思考導航展開狀態的時候▩◕•▩,為了增加整個網站的通透感▩◕•▩,我們使用了背景模糊的效果▩◕•▩,既能區分導航內容又減少了資訊分割▩◕•▩,使得導航不管在哪個頁面和板塊被開啟▩◕•▩,都可以在視覺上糅合為一體•··↟。


碎片化時代的思考

當前網際網路使用者注意力碎片化的時代▩◕•▩,想要破局使用者增長▩◕•▩,吸引使用者的關注就必然要順應時代•··↟。在首屏進行了品牌曝光後▩◕•▩,我們希望使用者在往下體驗的過程中能讓使用者對品牌有更多深入的瞭解•··↟。所以在品牌宣傳剛需和不犧牲使用者瀏覽體驗的前提下▩◕•▩,對於該段區域需要展示的內容✘✘、內容的字數限制✘✘、文字的大小甚至文字的行距及文字的顏色我們都進行了充分的考慮▩◕•▩,讓使用者的可閱讀性更強•··↟。


找到品牌優勢並無限放大

霸王茶姬作為新中式國風茶飲品牌▩◕•▩,除了具備完善的供應鏈▩◕•▩,還擁有世界最大的有機烏龍茶園✘✘、無汙染的陽光鮮奶牧場和39個生態果園鮮果等其他品牌不具備的優勢•··↟。

由於使用者對於單純的文字記憶力並不高▩◕•▩,我們採用高畫質大圖配以專屬大標題的方式▩◕•▩,讓使用者在瀏覽中更加直觀瞭解品牌的優勢•··↟。


優秀的品牌▩◕•▩,資料會說話

人們對於數字的敏感度遠高於其他文字和圖片▩◕•▩,根據霸王別姬品牌的發展歷程▩◕•▩,在這一塊的處理方式上▩◕•▩,我們整理了品牌的一些關鍵資料▩◕•▩,採用階梯式的左右佈局輔以簡要文字說明▩◕•▩,這些都是霸王茶姬品牌發展至今成果沉澱•··↟。


沉浸式互動體驗的落地

根據美團大資料顯示▩◕•▩,奶茶行業約有75%的相關消費來自20歲到35歲的年輕人▩◕•▩,他們對體驗感✘✘、故事性✘✘、互動性✘✘、創意性等元素非常感興趣•··↟。

良好的設計引導及合理的佈局思考已經讓使用者對於霸王茶姬這個品牌在視覺上有別於其他品牌的差異化的感官體驗和品牌認知體驗▩◕•▩,但這還遠遠不夠▩◕•▩,我們還需要給使用者更棒的互動體驗•··↟。

我們期望所有進入到霸王茶姬的使用者▩◕•▩,用全部的精神能夠投入到當前官網的體驗行為中▩◕•▩,不被其他資訊干擾或者打斷▩◕•▩,同時能夠產生高度的興奮和充實感•··↟。


在整個首頁的體驗上▩◕•▩,我們以3D模型作為一個切入點▩◕•▩,帶入整個霸王茶姬品牌的介紹✘✘、發展歷程✘✘、產品優勢及核心產品▩◕•▩,透過使用者與頁面的深度互動▩◕•▩,讓整個畫面與使用者視覺產生一種跟隨感▩◕•▩,而不是孤立的出現的頁面上•··↟。


根據霸王茶姬本身產品素材尺寸以寬屏為主的特點▩◕•▩,蜀美在該頁面摒棄了傳統的垂直式瀏覽模式而採用水平體驗的方式▩◕•▩,力求更加完美的展現霸王茶姬的產品•··↟。

同時在水平瀏覽的同時▩◕•▩,我們增加了視覺差的滾動效果▩◕•▩,讓整個畫面在體驗的時候更有層次感•··↟。


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

3D建模+WebGL的運用

在最初進行網站策劃階段▩◕•▩,關於網站的創意設計階段▩◕•▩,我們可以將網站策劃為普通的圖片banner幻燈片切換或者一個展示影片播放的形式▩◕•▩,霸王茶姬剛好有一些非常高畫質且質量很高的宣傳素材支援▩◕•▩,但是基於客戶對於本次改版的重視以及愛蜀美團隊對自身品質的要求▩◕•▩,我們為客戶推薦了3D建模+WebGL的創意方式▩◕•▩,並得到了客戶的高度認可•··↟。

經過建模師和前端互動設計師的不懈努力▩◕•▩,在對燈光✘✘、材質✘✘、動畫進行調整了N個版本後終於做出了雙方都很滿意的互動體驗效果•··↟。

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


體驗+現實的平衡

由於網站採用了大量的高畫質素材及建模檔案▩◕•▩,會對網站的載入速度有更高的要求▩◕•▩,為此我們採用了資源預載入+webP圖片+CDN加速的方案來解決這個問題▩◕•▩,同時也為了在載入期間整個網頁不至於一片空白▩◕•▩,我們採用svg技術對霸王茶姬的logo進行了一個繪製loading動畫▩◕•▩,完美的平衡了由於載入問題可能導致的使用者體驗差的問題•··↟。


基於LBS的門店展示

相比其他一些餐飲品牌直接根據省市區把門店全部展示出來▩◕•▩,需要使用者自動選擇所在城市的門店資訊▩◕•▩,本次改版我們為客戶提供了基於LBS的智慧門店展示方式▩◕•▩,可以根據訪問者的地理位置獲取到所在城市▩◕•▩,推薦出使用者所在城市的門店形式•··↟。並且考慮到後期的門店資料的更新維護▩◕•▩,我們也為客戶提供了後臺一鍵更新門店資料的功能▩◕•▩,減少使用者後期的維護成本•··↟。


臺上一分鐘▩◕•▩,臺下十年功▩◕•▩,網站上還有各種體驗細節都是愛蜀美團隊為提高使用者滿意度而做出的努力▩◕•▩,也非常感謝品牌方霸王別姬在本次專案中給予愛蜀美團隊的創作自由度支援及專業性的認可▩◕•▩,給了我們更多的發揮的空間•··↟。

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


如果您的企業官網正好也遇到資料增長乏力的問題▩◕•▩,想要提高網站的轉化率或者需要一個更加符合企業品牌形象的網站▩◕•▩,也許我們正好可以解決您的問題•··↟。

歡迎來電諮詢₪↟:

琪琪₪↟:186-2817-6767  

光光₪↟:181-6003-7677

粗暴玩虐蹂躏性奴视频,国产成人8x视频网站,xxxx丰满少妇高潮,激情无码亚洲一区二区三区