生活处处神奇开张

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

背景介绍

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

五大街区，一大难点

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

什么是烟火气

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

1、店铺渲染图

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

2、街区光感调试

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

30家门店，30位个性老板

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

部分门店正面图

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

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

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

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

一场沉浸式开业活动

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

1、预热

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

2、店铺招租

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

3、装修围挡

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

4、开业花篮

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

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

注：本文来源网络转载，如侵权，联系我们删除！