VOL.2 看阿里设计师如何玩转 2020 云上云栖 — 云上展厅篇
在整个经济社会建设当中提供一种全新的贸易基础设施，帮助我们的商家、合作伙伴通过数字平台和会展平台的结合，展现给全世界新的商业力量，打造数字会展新基建。
逍遥子
01
项目背景
2020，迎接我们的注定是一个不平凡的当打之年。一场来势汹汹的疫情，改变了很多人的生活，也改变了商业会展的举办方式。根据中国会展经济研究会的数据统计，从2011年到2018年，我国的各类会展无论在面积还是场次一直保持着稳定、持续地增⻓。而随着疫情的到来，会展需求继续增⻓的背景下，会展形式的重心将逐渐从线下往线上转移。本次云栖大会正是适应了新的形式，由之前的线下完全转移到了线上举办。而在疫情逐渐缓解，消退的后疫情时代，我们通过技术+设计结合的形式，输出高质量的3D化、场景化、产品化、组件化的设计素材以及最新的3D/WebXR技术，以更丰富的形式和更沉浸的体验，让本次云栖大会成为线上的科技盛会。同时，我们积累的经验、技术以及形成的解决方案也将在之后满足不断涌现的全新的线上会展的业务需求。
02
项目难点
A. 全新的线上官网设计挑战
本次云栖大会首次在线上举办，覆盖了百余场演讲和论坛。以“3+300”的内容场次设置，为全球科技人带来三场主论坛和展厅、100场分论坛和专场、100个城市站点线上线下联动和100大新品发布，涵盖云计算、人工智能、机器学习、量子计算、芯片、AIoT、组织协同、新零售、新金融、数字政府等领域。无论内容还是形式上，较往年有很大不同。
面对海量的线上内容，从品牌的透出、满足客户及用户需求的多样性、线下场景线上创意设计还原、对大会各议程及亮点通过创新设计手段表现，这都是设计的执行核心。
B. 直播呈现
2020年的疫情催熟了直播行业，各大直播平台不断推陈出新，想要趁着发展的浪潮占据线上云栖的一席之地，就不得不在“体验式直播”上下功夫。
传统的大会直播往往是线下搭建舞台+线下拍摄，在媒体端呈现的效果跟看新闻无异。如何打破屏幕与时空的边界，把远在屏幕前的观众拉回到大会现场，把演讲内容立体化的萦绕在观众眼前，成为本次大会区别于线下的重大挑战。
因此，“绿幕”拍摄+虚拟演播厅的呈现形式应运而生——线下企业的各类创新通过直播给用户带来全新的体验，直播的内容边界和商业模式边界，都被打破，直播给了我们更丰富的参会体验，同时商业上也在进化。
C. 云上展厅
本次云栖大会有多个展厅，包括云游达摩、天猫精灵、云游AI实验室、云栖科技空间等。阿里云设计中心主要负责云游AI实验室和云游达摩。
对于云游AI实验室，难点主要在于:
如何表达 A.I.Lab 在视觉计算，特别是三维重建方面的技术和产品能力;
如何让 A.I.Lab 成为一个好玩的“游乐场”;
完整的线上素材实践与工程化开发优化。
对于云游达摩展厅，难点主要在于：达摩院线下展厅设计已经基本完成，因为疫情的原因导致无法在云栖大会时开放参观，因此需要将线下展厅转换为线上展厅。那么面临的主要挑战就是如何在已有线下展厅的基础上，传达达摩院的愿景、使命。
03
设计过程
A. 官网设计过程
对于线上大会的视觉呈现，我们通过开场视频的视觉冲击力透传云栖大会全速重构的概念，调动用户的好奇心；通过“我的云栖”动效的增加，联同本次大会的会议订阅功能，让用户可自行定制云栖议程，使用户有更强的参与感，实时性和互动性，吸引用户沉浸其中。
同时⻘橙奖在本次云栖大会上进行了颁奖直播。
B. “体验式直播”——绿幕设计过程
嘉宾演讲内容作为对外传播的核心，在确认“体验式直播”这个目标后，如何打破屏幕与时空的边界，让观众有沉浸式的体感，成为我们要解决的关键问题。我们放弃了所有线下舞台的录制方法，通过日常积累的【绿幕拍摄解决方案】经验，为直播呈现设计出全新的“头号玩家”般的未来科技空间。
一方面通过超大型绿幕舞台对演讲嘉宾进行拍摄：
另一方面建模渲染出与大会主KV一致的虚拟动态场景：
二者结合，迅速把观众代入到一个集技术与艺术美感为一体的沉浸式科技时空。
C. 云上展厅设计过程
当大会被搬到了线上，展会、展览的数字化也成为必不可少的亮点元素。在互联网高速发展的今天，数字化转型已然成为会展业的必然趋势，利用3D建模技术+VR全景技术再插入视频及图文解说，参观者在终端上无需安装任何软件及插件，只需要一条链接就可以实现与线下参观完全一样的感官体验。再也不用去线下被温度计指着说：“请出示健康宝”了。
本次大会的云上展厅版块可谓百花⻬放。其中两大云上展厅【云游AI实验室】、【云游达摩】在与业务团队的合作攻坚下，首次对外开放。
1. 云游AI实验室
我们通过创意设计、互动体验设计、glTF线上素材规范与流程输出、代码实现技术选型与难点指导攻克。基本上最为核心的技术+设计均由阿里云设计中心完成，而相对较为执行和繁复的部分则由供应商团队一起完成。
当接到这个 A.I.Lab 的展厅需求后，脑海里第一个浮现的画面是充满科技感的《攻壳机动队》电影画面；而内容层面主要是传达实验室的三大核心技术产品——全息城市、全息店铺、云上展厅。技术与设计的碰撞最终形成“空中未来智慧城市”概念的火花。
设计草图:
建模:
代码调试:
上线效果:
2. 云游达摩
云游达摩展厅由于内容和线下实体展馆已经完成设计，因此主要的设计优化集中在UI设计以及线下转线上的互动体验设计和优化，这部分由阿里云设计中心完成。而技术选型和工程化落地则由供应商团队独立完成。
众所周知达摩院的气质兼具科技与武侠感，在展厅酷炫科技⻛的外表下希望让参观者感到浓浓的人文情怀，因此在设计时我们将武侠人物与交互引导进行设计结合，仿佛有个虚拟的大侠导游在屏幕上引导你游览。
开屏加载动画:
交互引导图标:
上线效果:
04
云游AI实验室的技术实现
为了更好地展现 A.I.Lab 在三维重建方面的领先核心技术和产品能力，我们选择了在Web端通过互动3D的方式做展示。主要的核心技术栈选择了较为常用的three.js。在开发落地过程中，遇到了以下的技术难点并逐一克服，同时部分功能沉淀后可在之后项目中不断复用。
A. glTF流程
three.js引擎支持的格式非常多，但传统的3D模型格式没有针对线上使用做优化，文件大小会非常大。因此我们采用glTF格式，它的特点是最大程度的减少了 3D 模型文件的大小，提高了传输、加载以及解析 3D 模型文件的效率，并且它可扩展，可互操作。
B. 技术实现细节
1. 从C4D到three.js的轨迹点动画
2. 多点位点击出现的优化
3. 扫描线效果
4. 自定义orbit controls组件
5. 多端适配
05
整体效果
1. 云游AI实验室效果
2. 云游达摩展厅效果
06
结语
今年云栖大会的主题是“全速重构”，在技术大咖们“全速”敲击代码之时，设计师们也无不通过创意的“重构”、表现形式的“重构”、互动体验的“重构”为大会添砖加瓦。
我们在本次云栖大上首次运用了全域云会展的解决方案。除了新颖的官网设计以及绿幕直播技术的运用以外，阿里云设计中心-云展项目组在云游达摩、云游AI实验室、云栖科技空间等云上展厅上提供了设计及技术支持。其中【云游AI实验室】历经从0到1的设计与开发。在这个过程中，我们每个人从专业的⻆度，结合计算设计理论，首次通过三维重构的信息转译方式，打破设计和技术的边界，创造性地打造了一个集互动和游览于一体的线上沉浸式体验;在保证信息内容有效传达的同时，带给用户难忘的视觉交互体验，为今年的线上云栖注入新的科技元素。
在这为期不到两个月的项目周期里，我们顺利完成了重塑线上会展的第一步。随着新技术的发展和普及，全面上云的可能性将会更多，要学习和探索的路将会更⻓。希望我们在全域云会展的探索和实践中能为正在阅读的你带来启发，我们也期待着更多的声音与交流。
扫一扫立即体验
我知道你今天会留言跟我们聊聊
也知道你的留言会被某一个明天翻牌
