淘宝一千零一店:不失烟火气与精致,一起线上沉浸式探店

举报 2022-08

生活处处神奇开张

近期,淘宝宣布一千零一店项目正式上线,这也象征着线上沉浸式探店新模式的开启。


背景介绍

淘宝一千零一店是由淘宝出品的“大型云端探店综合体”,由商家自主报名+淘宝大数据筛选+行业专家+理事会专家评审共同打分精选的店铺进驻,首批入驻精选了30家重点店铺。回顾brief,需求其实很不简单。青木需要在淘宝这个云端世界里,做好美术设定并创造交互式极致探店体验。此外,项目的调性需要体现出淘宝味儿,有烟火气(划重点,后面要考)。接下来,我们将详细复盘整个项目,展示青木如何攻克设计和技术上的难关,将淘宝上那些独特的店铺以一种会发光的生活呈现给用户。


五大街区,一大难点

一千零一店项目一期内容涉及到5个主题街区,它们分别是:山野间——带你探索大自然万千形态;欢喜窝——装满值得带回家的小欢喜;匠人谷——领略极致匠心的原创手作;万花筒——给多元爱好的人设橱窗;软萌舍——暖萌日常的陪伴记事簿。每个街区都是一个主题集合,但是它们都有一个要求,要突出傍晚时分的烟火气,同时也不能失掉店铺的精致感,这是在执行中的设计难点。就以万花筒街区举例,来详细讲述设计同学如何拿捏好烟火气和精致之间的balance。

淘宝一千零一店


什么是烟火气

有点文艺的同学是这样理解烟火气的:一天当中最有烟火气息的时候非傍晚莫属,结束了一天的工作和学习,黄昏的光线像是有了魔法,把一切都变得松弛起来。设计同学get到的烟火气用法是:我们把傍晚时分的光作为街区的温柔外衣披上就行了。说起来简单,做起来还真是难!

淘宝一千零一店淘宝一千零一店


1、店铺渲染图

店铺设定,白膜和店铺的渲染图都确定后,就到了最难part。为了找到最精准表现烟火气的光,设计费了不少力气做光感调试。要准确打出傍晚时分的光,对渲染灯光和后期的挑战都非常大,给出的光要么很亮,要么很黑。傍晚的感觉很难把控,设计同学经过反复尝试和推敲,才呈现出最终的效果。烟火气的气质更难拿捏,而且还不能丢了精致,这就对建筑的材质和整体的氛围感要求非常高。另外,逛街当中店铺才是主角,所以街区阵地要突出店铺,我们的解决方法主要是将店铺高亮,把普通建筑模型简化、压暗。通过多次调整店铺大小和位置,且每次调整都从模型开始到渲染输出,才达到最终线上的效果。

淘宝一千零一店


2、街区光感调试

有了万花筒截图的打样,其它街区的最终渲染图也就顺利很多。

淘宝一千零一店


30家门店,30位个性老板

作为一千零一店项目的一期内容,每个门店的设计和店老板的设定也都下足了功夫。店铺的渲染角度都做了最优选择,即突出店铺特色又能跟店家的独特形象结合,让店铺的故事感扑面而来。如果用户有留意到图片右边的小黑板的话,会发现每家店的信息都不一样,更有逛街的沉浸感。

淘宝一千零一店
部分门店正面图


技术直呼难顶,PM说你可以的

逛街当然是要在街上走动才是在逛,所以这个云逛街要求有用户在街区走动。首先给技术的难题就是:当有了指定的目的地后,虚拟用户如何按照规划路线前往目的地。技术大大在这里尝试了很多方案去解决这个难题,包括预设路线、各种寻路算法,最后确定用A-star算法来自动规划最短路径。

逛街进店就是一个拿起放下的过程,如何在云逛街的时候也实现这一动作呢?我们技术大大在不同的单店做放大页,放有不同的点击热区(30 * 5)。另外还要解决的是如何制定方案使代码具有最大兼容性,并且不增加全流程的工作量。这里根据过往经验提出了色块图识别方案,只需额外配置一张单独的色块图,将用户的点击坐标转化成对应的色值,再从本地存储的映射中执行色值对应的事件。

让技术觉得最难顶的就是如何处理一个场景兼容两种手势的难题。展开来讲就是当场景既可以正常滑动改变可视区域,又能在一定条件通过滑动触发切换场景事件时,如何兼容两种手势,通过寻找和评估发现,没有完全符合需求的公开组件,所以我们技术大大自行开发了一款轻量滑动组件。(PM说得对,我们技术真的很可以)


一场沉浸式开业活动

不得不说淘宝有一些仪式感在身上,这次的一千零一店开业,全部按照正式的开业流程来。


1、预热

8月23日,淘宝发出了一千零一店的活动预热海报。

淘宝一千零一店


2、店铺招租

四张招租海报,其实有隐隐约约透露部分店家身份啦。

淘宝一千零一店


3、装修围挡

开业前最忙的就是装修了,一张围挡海报揭示开业在即。

淘宝一千零一店


4、开业花篮

开业要剪彩,红毯花篮都不能少。

淘宝一千零一店


写在最后

淘宝上汇聚了许许多多热爱生活的人,他们带着独特的生活气息、特色的人生体验组成了一千零一店。这些小而美的存在应该被看见,值得被记住。青木有幸将这些店铺独特的故事呈现,让用户从中感受每家店独特的烟火气息。这次淘宝的一千零一店项目被很多人说更像是一场元宇宙逛街初体验,打开淘宝,搜索“一千零一店”,希望大家逛得开心。

数英奖参赛项目说明 - Treedom ,设计公司

【背景与目标】

淘宝上有许多极致特色店铺不为很多人所知,他们需要被挖掘、被鼓舞、被看见。我们的目标是为这些有故事的极致特色店铺建设内容场域,打造云端探店综合体。肯定特色店铺的价值,帮助他们更好的呈现在用户面前,让他们被更多人看见,从而增加店铺流量并提升用户停留时长。在云端世界里,做好美术设定并创造交互式极致探店体验。

【洞察与策略】

“人间烟火气,最抚凡人心”本次项目以“烟火气场景”作为整体灵感,整个街区光感设定为傍晚的温暖阳光,还原平行街巷中的烟火气小店,在繁忙的工作之余,让用户线上就可以感受傍晚时分闲逛的惬意。

【创意阐述】

近几年掀起了一波探店热潮,探店对于很多人来说无疑是一次新奇的体验。而现实中的探店,却无异于拆盲盒,需要花钱、花时间、花精力去体验,找到的店铺或许是惊喜,又或许是惊吓。基于此,如果不用出门就可以“探店”,买到自己喜欢的东西,还可以了解店铺背后的故事,可以治愈当代人疲惫的身心。于是,围绕“傍晚”和“烟火气”两个关键词展开来讲“云端探店”的故事。

【结果与影响】

项目自上线以来,传播和曝光量已达到13亿。一千零一店凭借独特的互动体验和精致的视觉,深受大家喜爱,有人说被温馨的氛围治愈了,也有人说好的表现形式是这种贴近生活的细节和充满感动的故事。与此同时,很多有故事的店铺也被更多人发现和了解,打破传统线下逛街的刻板印象,让更多人爱上云逛街,享受沉浸式购物带来的快乐。

淘宝

Treedom

 
数英评分
8.5
我的评分
谢谢
数英评分
8.5
我的评分
    2022 数英奖 参赛信息
    参赛企业
    品牌
    参赛类别

    技艺单元-美术类(铜)

    技艺单元-互动制作类(银)

    终审评委(金、银、铜评级全部显示,无奖评级仅显示带评语者)
    技艺单元-美术类
    • 邓千军
      非常有情怀的案例,美术表现精致有趣,还带着黄昏落日的温度。我觉得这个才叫“逛淘宝店”。
    • 蒋彪 Cman
      视觉精致,给不同的店铺形态各异、却恰如其分的店铺装修,直观展现了商家特质,用夸张的美术手法,实现商业价值的赋能。美术和执行都切中了烟火气的核心,生活气息满满
    • 制作美观,执行繁复,不容易
    • 孙迪 Sandy
      美术很好
    • 柴逸飞
      场景素材和谐丰富,细节到位,艺术质感很棒。
    • 美术完成度很高,执行到位
    • 余子筠 Chee Guan
      店铺是真的精心设计,可惜其他设计部分失水准,复杂,也没呈现好。
    • 王威 Gavin
      美术加分,能看到很多用心的小细节,画面质感很出彩。
    • 美术功力了的,细节满满。
    • 刁勇
      风格多样
    • 还原了店面特色,增强了体验感。
    • 光影运用得很好,还能看出夕阳的感觉。
    • 梁伟丰 Leong
    • 执行佳
    • 形式很创新,画面也挺出彩,抓住了“烟火气”这一核心,线上探店的形式有元宇宙即视感
    • 丰富充实,感受到了加班的压力
    • 场景逼真,有身临其境之感。
    • 美术执行不错,让人眼前一亮。
    • 场景、店铺、人物各具风格,只是画面的精致度还不够好。
    • 美术形式上有点疲劳了
    • Sanji Sun
      看着就好辛苦啊。
    更多
    技艺单元-互动制作类
    • 柴逸飞
      烟火气十足的线上社区,浏览+社交+购买,一气呵成的用户体验,互动设置流畅自然,体系成熟,期待后期扩建。
    • Leou
      这个创意与执行,应该可以在淘内打造出风格独树一帜的元宇宙营销。对一千零一店未来的可拓展性有了更大的想象空间。
    • 照顾到一些需求,不出门也能逛,逼真有参与感。
    • 云端探店,新奇创造性强,很迎合当下,实施过程中应该花费了不少心思,才出现最后的精品。
    • 精致有特色,真实呈现在用户面前,体验感佳。
    • 路童 Kent Lu
      挖掘深刻,执行出彩
    • 陈露
      交互技术部分问题多,实施难度大,与创意视觉的结合度高。
    • 视觉不错。
    • 逛淘宝有了真实逛街的感觉,增加用户的参与感,画风可爱,希望入住的店家越来越多,更热闹一些,值得期待
    • 郑斯琦 Michael
      精致又用心的创意制作。
    • 蒋彪 Cman
      视觉精致,云端探店的体验交互也比较新奇
    更多
    专业评委

      专业评分

      专业评分已截止

      参与评论

      文明发言,无意义评论将很快被删除,异常行为可能被禁言
      DIGITALING
      登录后参与评论

      参与评论

      文明发言,无意义评论将很快被删除,异常行为可能被禁言
      800

      推荐评论

      暂无评论哦,快来评论一下吧!

      全部评论(0条)

      代理商
      Treedom

      Treedom

      广东 深圳

      南山区粤海街道高新区社区高新南一道009号中科研发园三号楼14-B

      行业:营销咨询

      官网:http://www.treedom.cn/