「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅片头动画


   全文共 2100 字,阅读需要10分钟

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

数字冰雪


2022年的冬奥会是奥运史上首次由云计算替代传统IT,承载奥运组织和运营的赛事,通过上云将奥运最核心的赛事成绩、赛事转播、信息发布等信息系统迁移到阿里云上。作为阿里云的设计师和数字巡展产品的孵化者,我们有强烈的使命感,希望能通过互动性、沉浸感、趣味性的方式,为广大用户带来不一样的数字冰雪体验,于是在北京冬奥会的云展平台上,我们打造了“阿里巴巴云展厅”虚拟展厅,用数字化的方式呈现冰雪与科技之美、铺设竞技与温暖的赛道。

1月25日,北京冬奥会倒计时10天之际,奥运史上首个云展厅“北京2022云展厅“正式上线,这是一个集奥运合作伙展示与线上趣味互动为一体的云聚合平台,由阿里巴巴集团提供技术和运营支持,为公众打造一个与奥运会零距离接触的线上会场!

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅广告图


同期,由阿里云设计中心和达摩院XR实验室携手制作的【阿里巴巴云展厅】也同步对外,借由虚拟现实技术,为观众呈现一个精彩纷呈的阿里冬奥线上空间。本次北京2022云展厅于1月25日上线后将一直陪伴公众直至3月13日北京冬残奥会闭幕。


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

冰雪数化


 间质感


在项目伊始,我们希望能在这次的项目中实现传统虚拟展厅与沉浸式数字空间的平衡,在有效传达信息的同时能让用户获得耳目一新的体验。因此在整体设计风格上,我们根据北京冬奥会的特点,在最初的设计基调上融入了冰雪、冰丝带和户外运动等元素,同时辅助温暖的橙色、科技元素来展现阿里巴巴集团的品牌心智。比如,展厅的质感选择上我们采用了冰雪、玻璃与金属相结合的搭配;在造型上则会以几何和曲线为主的简洁构造来体现运动感与科技感;而在整个展厅的采光设计中,我们以偏冷的自然光为主,与隐藏于结构中的橙色灯光相辅助,共同营造了明亮干净的视觉氛围。


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-空间质感设定


 体验设计


同时在体验设计层面,我们从冬奥会展厅面向的用户角度出发,将展厅设计为线性的浏览方式,以此来简化操作和提升体验。用户进入云展厅后,会依次经过【让精彩每天出彩】、【云上奥运@北京2022】和【阿里巴巴以电商服务全球奥运粉丝】三个展厅,其中每个展厅都会通过转场视频来衔接,使得用户的观展体验更加顺畅。


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-导览路线图


这也使得我们在思考展厅的空间设计的过程中,将不同的展厅通过户内外场景结合的方式依次连接在一起,这让观众的动线更加顺畅的同时,也使得展厅能够更加通透自由和富有层次。


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-空间设计总览


展厅1- 【让精彩每天出彩】

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅1-初始视角


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

展厅1-室内场景


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

展厅1-室内场景


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-衔接展厅一和展厅二的走廊


展厅2 -【云上奥运@北京2022】

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅2-入口


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅2-虚拟转播台


展厅3 -【阿里巴巴以电商服务全球奥运粉丝】

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅3 – 初始视角


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-展厅3 – 奥林匹克官方旗舰店


· UI设计


除此之外,UI界面的设计上我们采用了2D与3D空间结合的方式

  1. 空间层-在3D空间中展示最关键的一级信息(图片、视频、标题性文字),让用户像真正线下逛展般沉浸游览;

  2. UI层/内容层-在2D空间中通过醒目的标签绑定3D空间中位置信息来展示次要的二级信息,用户点击标签后可以看到该展位的详情内容;

  1. 声音层-为了配合UI视觉层的信息立体展示,我们植入虚拟人IP通过声觉层穿插讲解,给用户打造声光电立体沉浸的信息可视方案;


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-多层级信息结构图


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-虚拟IP声音层讲解


· 技术亮点


相较于传统三维全景展厅,我们本次采用了达摩院XRlab自研的三维渲染引擎,它强大的能力允许我们在视效和内容上做更多创新。在该引擎的加持下我们引入了基于真3D技术的虚拟云小宝讲解员,它可以在不同展位间移动,为观众带来生动的讲解。我们也在本次展厅设计中引入更多动画效果来丰富观众云逛展的体验,例如虚拟转播台的设计。


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-亮点1 — 全景技术与动态真3D的结合


针对本次展厅受众群体,我们打造了一个“动画引导+观众主动探索”结合的沉浸式展厅。观众进入云展厅后,我们会设置一个最佳视角的视窗来引导参观流程。当观众准备进入下一个展厅时,视角将自动匹配到转场动画的第一帧,以此来达到顺畅的观展体验。


动画引导+全景探索

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-主动引导型展厅结构


最终线上发布的效果

-PC端体验录屏


体验二维码

「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘-识别图中二维码即刻体验


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

冰雪之约


全面体验时代,数字世界,虚拟空间成为了商业数字化转型的潮流和必须。

阿里云设计中心的数字巡展产品致力于在虚拟/现实空间中运用最先进的表现技术对物理世界转译、重构,并进行沉浸式表现。不仅能有创造力地实现具有多元、丰富、有趣的视觉表现力的场景,还能用丰富的游戏化交互形式在保证趣味性的同时将信息准确传达给用户。

借助2022北京冬奥会的舞台,阿里巴巴为奥运打造首个云上展厅,将全景技术、真3D漫游、虚拟IP等前沿技术与创新设计结合形成全域XR综合营销体验链路,未来也将会有更多的企业、商业场景等待我们的发掘和探索。

数字巡展,虚实之间,沉浸生活。


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-数字巡展产品海报


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

过往案例


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-阿里巴巴云栖大会·互动导览


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-阿里云金融峰会·云上数舱


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-达摩院数字展厅·云游达摩


「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

-人工智能实验室线上展厅·云游AI



本期精彩内容来自:阿里云设计中心




「北京2022冬奥会·阿里巴巴云展厅」幕后设计大揭秘

本篇文章来源于微信公众号:AlibabaDesign

UI/UX

太“虎”了!各大品牌的新年借势海报创意很绝!

2022-2-2 8:30:00

UI/UX

AI 这个技巧,也太秀了吧!

2022-2-3 8:30:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索