天猫打造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条）