寻路元宇宙，淘宝设计师的新体验探索
mp.weixin.qq.com元气满满的 淘宝设计
， 
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwOTwjmAO3heuiba8cYH9rO88MU6wiazSL82lULGowJhSibhR2leZI864BsgG8h5SNYP0WtXqnZArL9ibA%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
看过酷炫的元宇宙体验、创意、3D设计趋势分析，本篇以“TAOLIVE-CITY未来城”为例，为大家系统介绍淘宝设计师如何构建消费元宇宙，走进实战中的元宇宙机制、空间、界面设计。一起看看在虚拟世界里购物看直播是一种怎样的体验吧~
#01
解构沉浸式体验
经过10年移动互联网发展，今天的消费者期待耳目一新的体验，希望比以往更沉浸、主动地参与到消费场景中。品牌、商家和主播希望通过更新颖的方式体现差异化、树立自身的影响力。那么到底什么才是理想的沉浸式体验，如何结合数字技术打造沉浸式体验呢？
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdTFsFDphcEbE4FmzDPThEHG8AB9fv6lmScIicibe2grVauwyob0PJiaWfQ%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
▲ 行业背景
迪士尼乐园是通过沉浸体验将想象世界带入现实的典范，人们体验娱乐设施、观看表演、享受美食、消费周边产品，游乐其中收获乐趣、幸福感与成就感。
以此为例，我们可以从中提炼出沉浸式体验的几个要素：多元角色的实时参与、事物的多维度感知、丰富多样的内容场景。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdfKMKia3zj920kkcIXgbOibtKxichgmJfvwzUaNnia7UmAGwDUJHbRNuZFQ%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
▲沉浸式体验要素
结合体验要素对比线上消费体验，可以看出基于手机界面交互的传统移动购物，在角色参与、感知维度以及娱乐内容方面都不如线下丰富。因此在新体验中增强用户和他人的参与感、强化触及事物感知表现力，增加丰富的娱乐内容成为重要方向。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdsibOjrsjYNIEZqNDoqiasrBicpZX4eSRzUWMCoRU08UicWn71PJn910V4A%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
▲ 从体验要素对比消费体验
#02
TAOLIVE-CITY
未来城
去年11月，淘宝直播正式上线了TAOLIVE-CITY。在这个基于消费场景构建的平行世界里，用户不仅可以在虚拟商圈走街串巷，还可以看到各种精彩的直播内容、进入品牌和主播的专属空间，参与互动。
视频加载失败，请刷新页面再试
?imageUrl=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACIAAAAqCAMAAADhynmdAAAAQlBMVEUAAACcnJycnJycnJyoqKicnJycnJycnJycnJycnJyfn5%2BcnJydnZ2enp6kpKSdnZ2cnJyenp6cnJycnJycnJybm5t8KrXMAAAAFXRSTlMAyeb3CNp3tJRvHIEtJhBgqztWRJ%2Bp5TqGAAABCklEQVQ4y5WTi27DIAxFAUMhgTzX8%2F%2B%2FurB2pdKI0x0pSoRuruyLbf7gF3PBaDE6X44LyY0D1SJQsfd9PpMM%2FCJx60v8SmV1HMSi1lKyA1n0jnwWSO08l04uJbxpBmTrpDtbGB6fmxC6Tc4BHv9aZDJdJsHW9w43Jez9x8T5M4l31WZsJn2bsYY%2BnUum2lQkGIVANPZ4FCLWOJImSTgjZE2SkU9crmu57mj9JBc93Qzj9R1d3HSG5bN5MRsnUzcGKK8Ns02z%2BDa7rYQE4bUE2PG1C6kVnkCyf0pwX8%2FjwbyxCLhcHpKTFkvkwK3pRmXtRrVFoTGYLvN%2Bt0EUl0qrRaF1pFBz0anp%2FptvNB4SY1XDAVMAAAAASUVORK5CYII%3D&valid=false#alt=) 刷新
▲ TAOLIVE-CITY视频
接下来我们一起看看在TAOLIVE-CITY中，是如何设计沉浸式体验的~
1.体验模式
以往的互动产品具有很强的目标导向性，比如浏览页面获得奖励，用户按要求独自在不同的小程序和页面间切换。相比这种被动执行、不连贯的体验，我们希望打造一个多人在线的开放世界。-
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwNqetSFYlGROK5ugsicicYhsZyCzjSnKSMp2kx0OzrnYLdadlQj4pyNuy0eV9bHtnSXarCwxDrsxlmQ%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgd5QwucLarljp0eS5Wavp6Qg0ia8qf0wYmLOkdbwUJSI3Z6uibwfMF7auA%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 开放世界构成模式
用户可以在开放空间里自发地与其他人一起逛，进行娱乐、社交、购物，甚至互相自由发挥出新玩法。同时通过装扮、升级自己的专属空间，满足个性化诉求。平台在搭建公共空间的同时，会协助商家主播等生态伙伴搭建私域空间，进行粉丝运营、新品发布等事件营销。-
2. 空间场景
场景需满足功能属性，同时也兼顾用户的情绪感受，希望让用户感受到一个新奇有趣充满想象力的世界。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4Q3FpPjug9OXCfpuZdqrqyjjwkrYiaG82OMJaov7o06Ktibn2iasTOrvB9g%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QE2erItILTbcBicrLg6tQKcCnvUGDskBy5NicZIcdwickUVp4CJPBPdDZw%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 场景美术设定
在整体的城市规划中，除商业街品牌展示、摩天轮帐篷区的主播展示、舞台的内容娱乐等功能型场景外，植物园、水晶岛这样能让用户感觉放松休闲和奇幻未来的场景也包容其中。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwMxPM4uzvYqKK44QR6kXlYXkABusNibNVf14WeNla7nnhia1x5aAej18Jdd0zHWV4eRcl1yib1gWrQfw%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwMxPM4uzvYqKK44QR6kXlYXYytxDrhwA8B65a9Lo0sNbvQomjrsx1BxEXVa6esMFHAG7RdT5U2zSg%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QTiaZYb3o86vn2ITPBZcfibtaE4aU30PIzaAv1e2ypKHTgabNhML2Mylw%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 部分场景效果
3. 人物动态
依托淘宝人生的大量免费服饰道具，用户可以穿着各异地在未来城活动，避免场景中人物形象同质化。高度自定义的个性装扮让用户对虚拟形象更有自我认同和归属感。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdQaciaoxhVHetTHrQOjm8gnjYpaZgbm8dQxKbOocvSWdLLUGZQCmA2MA%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 人物形象和动态
将数字形象引入未来城时，设计师还为人物配置了东张西望、伸懒腰等“小动作”让形象的日常情绪更饱满、真实感更强。选择不同性格标签触发特定的走路特效，一眼就能认出兴趣相投的伙伴，增添用户间的趣味性。
4. 互动体系
作为一个数字消费场景，我们希望用户在这里释放天性、发现乐趣，能完成生活中无法实现、超出想象的事情，也希望给品牌和主播带去客户帮他们成长。因此我们构建了相对完整的互动体系，服务营销和娱乐各细分目标，打造游戏化的体验互动场。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdZkibdM7ZjkDfLVfF3qib8B1dCUvpjuKxcV2aMH6PcQzHSqakWaTkCI3Q%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 业务目标和互动设计
通过做任务抽扭蛋的方式串联产品基础功能，在场景埋藏红包彩蛋、向特定营销点位引流，融入摩天轮观景、走秀、烟花等玩法提升趣味性、引发用户的传播和内容创作热情。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwNqetSFYlGROK5ugsicicYhsZHReWLus3ib2ibm48EdUq8V6JwJibHTnvuVm5xsDlibG9IH1v55HyrHKRrg%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwNqetSFYlGROK5ugsicicYhsZP5wUFldbzGOA3cITAA2bj2BWbibOibTCZeh7vrbBNuj2cWtX88zYs0bA%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwNqetSFYlGROK5ugsicicYhsZE2ibeaOGVFQYic6kL8vFNR1vywUic2CSegpmbVKCJ2sYmryliahUlRYDlw%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwNqetSFYlGROK5ugsicicYhsZ4NZkDLP89DAwImjH3mjjibVz51ibnW7iaiaP7EtcXkjoWS2Ma1ykb9HHOA%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwNqetSFYlGROK5ugsicicYhsZN9dYyFic0icHXXybd5JIjbU4X9xJJH0L4z7dQ9TbYR4WznZtXZhejAZA%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 部分互动效果
5. 消费体验-
为了构建更实时、沉浸的消费体验，我们将淘宝直播的大量实时品牌、主播内容融入未来城。通过算法对直播流中的主播进行抠像置入场景，结合3D化的直播展台和卖点展板，提升虚拟空间的内容融入感及用户临场感。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdy2ASQKN3yicJ0tM1G6NciaYf73P9qQoV9ypB76H3VMEHicsBFEJUt5P7w%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
▲ 3D化直播效果-
我们希望商品也不再是隔着屏幕的一张2D图片，而是能在环境中立体化感知的一件物品，通过3D模型直观的感受到商品材质、尺度，结合互动唤起用户的好奇心和购买欲望。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QJEHB0EsVhia1DQhD9wAoyicDqKopwepq5Ng387fFHaa7OPDPKpY3pXaA%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QjFM0iatLROLaVqaPbopP2Cf8icU3SXOianibBslZaOyAQoc7RKpHDJwDnQ%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QzwgxnQ07EQBicR54kp63aXuo2M4AS6kibL8oicJ4c96NZTTovJnI0CqQg%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 商品展示
6. 品牌空间
在整个未来城项目中，我们也在不断探索如何为用户打造超越现实的虚拟逛店体验，进而为商家提供一个全新的3D品牌营销互动场景。
在空间设计上，我们基于不同行业品牌的属性和特色，构建了差异化风格的空间模板，为用户带来丰富的感官刺激，促成商家低门槛高效接入。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QAGdV8g6der2XdsxB1O3os9qiaZu0AEET9NAwtwhENsxldT5OsO6vAsQ%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_gif%2FwmHsWeibDlwPnOo1xraOXb8z25QF7RW4QibDw9GF5uvstw47rucBvzooh5sosWiajibWaCjRRETTFvoTFT31sEgNJQ%2F640%3Fwx_fmt%3Dgif&valid=false#alt=%E5%9B%BE%E7%89%87)▲ 店铺效果图
内容体验方面，通过限时排队抽奖、NPC客服、特色商品展示、实时直播融入等信息和互动设计，提升用户参与度，强化品牌感知。分别在双11和年货节期间成功吸引天梭，阿迪达斯，雅诗兰黛，海蓝之谜，六福珠宝，长城汽车等20+头部品牌商家，开启了元宇宙商家合作的新模式。
7. 兼容性体验
为了兼顾宽广的互动视野和用户日常手机握持习惯，我们设计了兼容横竖两种操作方式的交互框架。将用户信息、通用功能、核心业务功能进行归类，结合双手交互方式、触控范围、操作频率划分界面布局。强化参与热度相关的互动信息、突出开放世界的氛围感，同时为未来功能延伸预留拓展空间。
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwPbLBmScoUBN67tHl6bfQgdGzwcEeiaZ5QgfBcp6T3D60pJ77pnlNZSCkiaCaWLpa6iblmUhHw8oicwgQ%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
▲ 主界面交互框架
写在最后
潮起潮落终有时，不论是去年的风风火火还是今年的趋于理性，沉浸的虚拟体验大势所趋，也终将回归用户价值。技术和体验的成熟，需靠我们每一个从业者持续探索，愿途中的我们永保好奇与耐心、早日在未来相遇！-
本期编辑：未来城设计小分队
//////END//////
?imageUrl=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FwmHsWeibDlwO97sTc56geNqjH60vfvnTKLNCLo6icgdOu5IqmPHocPb6aOsNMVfP48sKVBT8UonvuibjPQPtIuoicQ%2F640%3Fwx_fmt%3Dpng&valid=false#alt=%E5%9B%BE%E7%89%87)
淘宝设计，一个服务于全球亿万消费者体验的设计团队，致力于让设计触动人心，让商业美而简单。欢迎加入我们，公众号后台回复“招聘”，了解最新招聘信息。
淘宝设计
淘宝设计，一个服务于全球亿万消费者体验的设计团队。引领用户体验，让设计触动人心，让商业美而简单。
250篇原创内容
公众号
，
跳转到 Cubox 查看
