天貓打造15家線上快閃店:邀請你去地下層刷潮流副本
原標題:30天打造15家線上快閃店,我們做到了
3月26日,你上天貓刷副本了嗎?假如沒有,不妨現在就上淘寶/天貓APP搜索#天貓地下層#(目前已下線),體驗一下我們的開業第一彈?
本次活動,不正經制造×天貓潮LIVE攜手Subcrew、NPC等眾多潮牌,隆重推出#天貓地下層#限量副本,不需要1199,不需要6069,只需上天貓搜索#天貓地下層#,即可獲得免費公測資格!
2020年,天貓全新IP【天貓潮live】正式亮相。因眾所周知的原因,原活動計劃出現了變動。因此客戶希望能在線上讓用戶盡可能地感知到各家潮牌的潮流風格。
于是有了 “天貓地下層”這一IP的誕生。和淘寶二樓小劇場的設定不同,天貓地下層是偏向游戲互動類的,同樣作為一個虛擬空間,我們志在將#天貓地下層#打造成一個可供后期延展和長期運營的線上快閃店。
在#天貓地下層#面市之前,我們營銷了個“小懸念”——
加之一些游戲類大號的助攻,迅速引起了網友們的好奇和熱議。我們又迅速打造了一支懸念視頻,再次發酵傳播話題,以氪金手游為懸念,成功吸引了以男性為主的潮流玩家的注意。
懸念視頻
想了解天貓副本#天貓地下層#的制造流程嗎?來吧!
一、隱藏彩蛋
地下是亞文化的發源地,也是年輕群體向往的潮流圈,唯有回歸地下,才能真正探索潮流靈感:
在你瀏覽天貓網頁時,頁面會突然加速下滑,驚現一只正在搬貨的天貓,這也是我們故意設計的一顆彩蛋,隨后,頁面加速下墜,你偶然搭上了“盜夢空間”式的電梯,就這樣,你來到了地下潮流空間。
為了增強天貓搬貨這一動作的視覺效果,我們將天貓角色與倉庫分別單獨渲染再通過AE合成,讓天貓看起來就像是在把探著頭,努力把倉庫里的單品運送到頁面上的商品位里。
二、震撼視效
電梯門開啟之后,就到了我們戴著鐐銬地放飛自我的制造環節啦!
我們希望每個探店的用戶,在這里都能有一個身臨其境的沉浸式體驗,為此我們打造了三大全景場景——懸浮失重的廢墟地界、密林遮天的機動叢林,硬核暗黑的未來車間。
風格參考
全景體驗
為了實現更震撼的全景效果,開發小哥和天貓開發同學深入對接,探索了使用WebGL在天貓客戶端內實時渲染 VR 全景空間的可能性。
經過數次的場景素材迭代和性能優化后,最終選擇了舍棄一切模型數據,固定最終程序中交互攝像機位置和旋轉軸的技術實現方式,并將所有帖圖信息合并壓縮,達到視覺效果與性能負載的微妙平衡。
三、品牌賦能
我們為15家主理人潮店,打造個性化的門面設計。店鋪設計創造性融合品牌logo&屬性,汲取火箭、潛艇、太空艙、浮島、頭盔、導彈、裝甲車等機甲元素。只要你稍加注意,就能發現其中的設計妙思:
店鋪設定
SP操作流程
為解決項目制作時間倉促與工作量龐大的矛盾,三維的同學在多方權衡之后,決定優化調整整個制作流程。所以,這次三維是使用了c4d-sp-octane的流程,即在c4d建模后在substance painter上材質帖圖,這對于我們項目后期的迭代有大的幫助。
SUBCREW品牌館靈感,顧名思義,直接將品牌名字演繹成懸浮的鯊魚潛艇,在具象化品牌的名的同時,也賦予了品牌鮮明個性;
FILA FUSION的靈感,來源于它極具辨識度的品牌色,我們汲取FILA Logo上的經典撞色,打造了一艘正蓄勢待飛的、自帶復古風的FILA號飛艇。
DSP的靈感,來源于它與眾不同的紙袋人logo,在設計師的演繹下,不僅有了媲美瓦力的萌感,又憑空多了一分酷炫的機械風。
四、細節研磨
震撼的視效在于大場面打造,更在于小細節的研磨。
在這之中,我們重點加工了潮流主理人親臨自薦的頁面展示,把潮牌的靈魂人物,比如 CLOT Kevin Poon、NPC 李晨、潘瑋柏、STAYREAL阿信、不二良,打造成自帶流量的店招。為了讓潮流主理人和背景看起來更真實,更渾然一體,我們有意借用故障風格進行展示。
這三大場景的設計中,我們還對應三種不同的UI顏色,讓每個店鋪都有屬于自己的經緯度坐標(左右滑動坐標數值會發生改變)。
五、優化體驗
在潮流主理人親臨自薦之后,玩家應邀成為潮流品鑒官。我們設計了左劃右劃的魔性操作,用戶只需劃動手指,就能快速解鎖海量潮流裝備,輕松在線pick自己的潮流單品。(目前體驗仍在迭代中,請多多包涵)
流程設計
為了兼顧用戶體驗和商家調性,我們特意設計了黑白兩款風格的界面,黑色酷炫風,白色清新風,任君選擇。
六、周邊海報
我們還為【天貓潮live】開辟出的《潮品新季大賞》設計了系列周邊海報,海報取景于潮流實驗室的實驗桌上,微微發光的試驗臺/設計筆記及設定圖/潮流試劑/溶液,還有潮流聲波探測儀,這些工具可以幫你高效捕捉潮流靈感,將其收集到罐頭之中,成為你的獨家專享。
海報模板
細節展示
設計師為了滿足全網潮流品牌商家能夠輕松調用于自己的潮流單品展示,設計了通用的罐頭包裝紙模板,讓不同的商家可以根據自己的品牌特色撰寫自己的品牌SLOGAN加以運用。
專業評分
專業評分已截止
評論
評論
推薦評論
全部評論(5條)