亚运元宇宙体验馆设计

01.业务背景&策略

为庆祝杭州亚运会的举办，淘天集团在手机淘宝和手机天猫双端同步承办了3D亚运互动场。为更好的体现杭州的特色亚运。在业务初始策略上，要求围绕【运动】【杭州文化】两个核心点出发，构建线上场。

▲ 业务核心策略

为实现这个策略要求，通过创意收拢，最终业务团队决定通过复刻虚拟的线上3D杭州亚运场馆。让用户能够在杭州地标景点上进行赛事运动比拼，让更多人体验运动，感受杭州文化，激发情感共鸣。

▲ 业务核心策略

02.设计挑战

业务策略定义之后，对于设计师来说，最大的挑战在于，区别于传统的电商2D互动做法，如何定义构建3D维度下的互动体验。让用户在一个开放式的3D空间中能够沉浸其中体验，并愿意持续不断地玩下去。

同时3D项目的制作复杂度也是数倍于2D项目。

为完成这一挑战，手淘设计师们在项目中所做的事情包含有：

1. 体验大图规划

2. 空间规划

3. 美术创意&制作

4. 互动玩法设计

5. ....

通过这样多管线的协作，来构建一个有足够丰富体验内容的元宇宙场馆

▲ 设计内容范畴

而面对如此多的体验内容，设计师该如何串联这些内容，来形成一套完整的体验。决定了这个项目是否具备成功的基础。

同时也因为3D项目的复杂性，与传统2D项目的只能通过平面界面进行内容体验不同。3D项目下除去基础的UI框架，还存在空间，角色等维度，所以更需要前期规划好体验大图。

▲ 体验落地大图

3D互动与2D互动设计之间的首要差异点，在于3D所带来的空间维度。如果我们不能设计好用户在3D世界中的方向感，那么用户就很可能在其中迷失，最终退出。

在普遍的游戏场景设计中，为解决方向感的问题，通常都会通过【引力模型】进行解决。即在空间环境中通过不同强度的建筑物或者VFX 特效来创造 用户视觉吸引力。通过不同强度的安排，来引导用户去往我们想要TA去的地方

▲ 引力模型示意

同理，在亚运项目的初期空间规划中，为了保证用户体验动线的顺畅，以及方向感的构建。我们使用引力理论的方法论，搭建起了整个3D场的空间白模，通过白模测试的方式，来验证用户动线以及所有功能点位安排的合理性。

▲ 白模测试录屏

通过这样的白模测试，我们能够从中明确的几个点：

• 大体的空间尺度：这个场馆的面积应该多大，内容丰富度适中，不会造成空间太大导致没有内容

• 用户体验引导动线：作为一个开放空间，从用户出生开始，要引导他去往什么地方，优先体验哪些功能，看到什么内容。

• 功能点位分布位置与强度：哪些点位安排在最醒目的位置，不同建筑物之间的视觉强度层次区别，为后续美术制作定义标准

最终，基于白模测试验证，来构建了整个场馆400㎡的空间规划图

▲ 空间布局规划图

01.建立完整的世界观框架

亚运街区连接的不仅是虚拟和现实，更是给每一个普通人和亚运建立一个更深刻的连接。在美术设计上，需要满足大众对亚运的期待，对城市的热爱，以及对自身作为参与者的自豪感。

因此，我们希望能将杭州特色景观和现代化城市风光相结合，用亚运风潮和数字化做点缀，设计一个杭州亚运会。

▲ 图片素材来自网络

02.美术风格设定

在美术风格上，我们希望能够尽量还原真实的场景，保留大众对现实杭州的理解，同时进行一些风格化的处理，将整体美术基调保持在近未来之上，增加更多科技未来的设计元素。

▲ 图片素材来自网络

03.场景美术效果展示

最终，基于前期美术风格中对于写实，科技未来的风格设定，从原画，模型，地编等美术管线来还原实现虚拟杭州的元宇宙世界

▲ 单体建筑原画设计

▲ 建筑模型展示

▲ 实机场景效果展示

04.场景音效氛围制作

同时，作为一个全方位的3D体验场，听觉通道也是能够给予用户强烈体感的手段。为了能够给予用户更加沉浸和真实的感受，分别针对主版图，互动场设计制作了符合场景美术的BGM，强化沉浸体感。

在音乐制作上，继承了美术创意中对于【运动】+【杭州文化】的基础定义，整体的音乐编曲结构上以偏为欢快的节奏为基座，同时在乐器编排上加入了古筝，箫，笛子，琵琶等中国古风乐器。来强化杭州文化的的体验感受。

亚运场馆中涉及到的人物角色分为：NPC、用户形象、互动游戏形象三个部分。

其中NPC的设计基于杭州历史文化名人来打造，他们在场景中承担着接待指引、互动讲解、道具展示等操作演示的工作。

为了能够充分还原这些文化名人的音容相貌，同时契合普通用户对于历史的认知，我们从史料插画 / 电影 / 动漫等不同作品对几位古人的塑造汲取灵感，创作了白娘子、西施、白居易、苏东坡四位NPC。

▲ NPC角色设计

用户形象方面，为了满足人物丰富性和服装多样性，一共设计了三套不同的服饰，每套服饰两种不同配色。

在服装样式和色彩上，我们参考了亚运会官方色彩系统，以清新明亮自然柔和的配色为主。

有别于实际运动员的服饰，对于线上用户来说他们的着装可以不受物理特性的影响，因此我们希望服装造型上略微夸张和未来一些，充满机能感，更好的表达杭州亚运会面向未来的特点。

▲ 图片素材来自网络

▲ 角色服装设计

此外，对于三个互动游戏：赛艇、田径、霹雳舞，我们也根据赛事内容和运动特点设计了专属于游戏的运动员服饰，当用户进入游戏时，就会换上参赛服装进行多人pk，专业服装更加具有沉浸感。

▲ 互动服装设计

01.互动玩法选型

互动作为体验中非常重要的一环，我们希望用户能够在感受杭州特色场景和文化的同时，参与并体验到紧张刺激的亚运特色项目。

玩法上我们选择简单易上手、有阶梯难度的玩法，且挑选有趣新颖、可结合线上互动的比赛项目作为原型，最后确定皮划艇，障碍跑，霹雳舞这三个项目。核心玩法集中为障碍竞速（RAC）及音游（MUG）类型。

▲ 北山街田径效果图

▲ 杨公堤赛艇效果图

▲ 断桥霹雳舞效果图

02.互动机制/链路

整个亚运场馆互动的最终目标是「争取最好成绩」，在核心的互动机制设计上，我们定义为「赛事比拼 - 获得成绩 - 提升等级 / 获得奖励 - 奖励兑换」，如此循环。

用户完成比赛获得代币和星级；代币可以兑换商品奖励，亚运决赛门票，互动道具。星级可以解锁荣誉称号，提升个人和城市排名。

▲互动机制设计

在体验链路设计上，配合整体游戏机制，设计完整的【地图选择 - 匹配用户 -游玩互动 - 成绩结算】体验链路

▲用户体验链路

▲荣誉称号及排名

03.丰富互动可玩性

同时，为了避免用户在重复的游玩过程中，失去兴趣。为了丰富互动可玩性，做出如下的设计。

1. 保证新鲜感。为增加互动的挑战性及新鲜感，使用了「关卡拼贴」，通过随机化生成的方式，保证用户打开每一关都是不同的。保证用户游玩的新鲜感

▲分段制作，随机拼贴生成关卡

2. 增加多人MMO比拼。互动上线早期为单人赛，后期升级为多人比拼等。单人阶段用户熟悉玩法，了解机制。发展到后期，多人竞赛更具有趣味性，奖励更高，吸引用户反复挑战。

▲多人MMO效果

4. 真实高质量还原的体验，霹雳舞互动中，我们也请到了专业的霹雳舞参赛者进棚进行分段动作捕捉。在后期基于不同的音乐特性，将每段动作进行拼接，来形成模拟真实的霹雳舞舞蹈。

▲动捕现场照片

04.简洁清晰的互动UI设计

▲字体构成

▲UI界面集合

最终，该项目在亚运期间，整个双端合计达到了破千万级别的PV。得到了用户的认可。

以上就是在整个3D项目中，淘宝设计师所付出制作的所有内容。回顾整个项目，我们能够体验到的是3D项目与2D项目在设计上的区别。

3D体验最大长处在于其对于体验真实性的还原，能够让用户更加身临其境的体验。而同时也带来了非常多的挑战：包括，如何降低3D互动体验的成本，如何让电商用户更好理解3D世界的玩法...

随着AIGC和空间技术的不断发展，未来3D的制作成本将会不断降低。未来也会有越来越多3D的互动形式出现。我们也会一直不断努力，探索3D下的互动体验设计。