跨界设计 | 沉浸式新媒体

真正的沉浸是思维的沉浸,环境的营造只是想象力的引路人。

在传统行业打滚数年后的设计师,总是难以回避灵气和匠气的博弈,日常创作逐渐走入某种定式,失去了挑战Brief的胆量和与打破规则的底气。与此同时,异军突起的新媒体互动设计却似乎毫无包袱,以一股体验式的视觉狂潮快速站稳了自己的商业位置,既保留了创意人的酷,也能为新型体验创造服务。

2012年,Random International的作品《雨屋》正式开启了大众对沉浸式体验的认识,近年随着teamLab、Punchdrunk等互动体验展演的火爆,沉浸式新媒体设计不仅成为了炙手可热的包装概念,同时也透露出人们对于新型互动的好奇心与强需求。提起新媒体作品,我们通常会自动联想到黑科技和脑洞,却容易忽视这些作品除了具有前卫的艺术性表征,同时也暗含着严谨而延展的设计内核。

2019年初夏,Mindpark邀请了两位数字媒体界的先锋代表:Moment Factory与Studio Swine,和我们共同探讨了沉浸式设计在商业性实践与实验性探索上的思路与价值。

Moment Factory

透过数字篝火,人们重聚在一起

总部位于蒙特利尔的Moment Factory是一家专业打造沉浸式互动体验设计的多媒体公司,以跨界和合作著称的他们拥有一个超350人的庞大团队 。自千禧年成立以来,MF已经成功打造了近400个场景设计商业项目,客户包括微软、索尼、NFL、麦当娜等,形式从立体光雕、数据互动到空间展览、演唱会工程都样样精通,几乎每个作品在面世时都颠覆了人们对惊艳的定义。

Demo Reel ©️Moment Factory

Moment Factory的业务主要分为三大模块:内容、互动与场景。植根于公众场域创作的他们,善于根据场地的特点策划和开发因地制宜的故事内容,继而在声光电的效果设计上加强环境与人之间的联结,最后两者结合形成互动闭环以构造出全局的沉浸式体验。

©️Moment Factory

Moment Factory的工作流也基于这三大模块多线程并行。与传统行业不同的是,客户对于MF而言并不是甲方爸爸,而是项目的共创者。他们会邀请客户参与并确认每一个设计环节,一来可以增加客户对项目的认知与信任度,二是考虑到多媒体物料制作成本较高,也预防阶段性推翻对项目进程造成影响。

©️Moment Factory

AURA AT THE NOTRE-DAME BASILICA
因地制宜的创造性内容

“Aura”是Moment Factory耗时超过一年,动用超过100人团队制作的梦幻级沉浸式光雕作品。它集合了极其精确的视效投影技术及独立打造的交响乐声效,为蒙特利尔圣母大教堂打造了40分钟震撼而灵动的超感官体验。

AURA ©️Moment Factory

基于天主教堂自身“诞生-受难-升天-审判”的故事脉络,AURA的设计概念以the Path of Light(光明之路)为主线,并根据建筑动线分为the Birth of Light(光的诞生), the Obstacles(苦路), the Open Sky(升天)三个章节。

©️Moment Factory

在确定故事线与情绪板同时,考虑到教堂内部结构的复杂性及壁画的还原准确性,团队使用3D扫描重塑建筑模型,并进行了大量的动效推演及真实光影测试,最终利用自研的工业投影体系,让建筑实体与投影内容的结合达到型与神的高度统一。

Behind the Scenes ©️Moment Factory

在细节的雕刻上,作品对主殿圣像的层级结构进行分解,营造出空间错位的效果;另外也对苦路长廊的画像进行精准投影,以光的扩散作为线索,一步一步引导观众的视线,展开故事叙述。

Behind the Scenes©️Moment Factory

无论是故事设定还是效果设计,Aura都根据教堂题材顺势而为,在不破坏建筑原有气质的前提下,放大环境硬件中的可用元素,从而达到“概念-动线-效果”的全方位合一。视觉互动的起承转合不但将观众的沉浸式体验最大化,同时也升华了圣母大教堂的神性与历史精神。

LOS ANGELES AIRPORT(LAX)
环境与人的联结

LAX项目是Moment Factory在2013年为洛杉矶机场打造,以时间旅行为主题的商业项目。它既是全美最大的机场多媒体环境设计项目,也是品牌体验极致拓展的空间实验。

虽然洛杉矶机场整体以“时间旅行”作为品牌主题,但出发者和到达者的动线终归不同:除了机场主体以外,旅客的体验还涉及到另外两个环境——旅行目的地和洛杉矶。因此,本项目根据不同的触点(登机口与到达大厅)针对性地设计了不同互动内容,让出发者与到达者都能找到与环境的联结和延伸,使整个机场体验形成通路。

Moment Factory 为登机口都设计了实时更新的互动墙,不但能捕捉行人的动态并融入画面,更能实时切换目的地的本土特色内容作为动画元素,使准备出发的游客身未动而心先远。

THE PORTALS ©️Moment Factory

与登机口不同的是,到达大厅的巨幕内容则根据机场的建筑结构设计,以跳水、跳跃等蒙太奇片段营造出洛杉矶惬意、清爽、惊喜的城市品牌形象;系列影片也同时在长廊和行李大厅中展映,以保持品牌语意的一致性与连续性。

WELCOME WALL©️Moment Factory

在机场中央,MF团队还打造了一个呼应主题的重点装置——时间钟楼。除了播放实时更新的故事短片外,设计师考虑到屏幕过于虚拟和冷感,故以机械咕咕钟为灵感,让钟楼和环绕屏幕在准点切换真人报时舞蹈,既达到提醒旅客时间的作用,也让他们在候机的空隙获得环抱式的娱乐化体验。

TIME TOWER ©️Moment Factory

从手稿到成型,LAX项目历时16个月,在三个大洲拍摄了超过4小时的视频内容。而且因为机场常年不能关闭,也极大增加了项目的施工与调试难度。

©️Moment Factory

《通用设计法则》中曾提到,“沉浸”即是让人专注于当前环境,并在设计者提供的目标情境中进行互动而获得愉悦,从而忘记真实环境的存在。Moment Factory十分善于提取及串联实体环境与观众之间的触点,利用不同的互动技术对每一个触点进行感官的复合强化,并以完整的叙事结构对品牌进行包装,才屡屡在Lumina、Kontinuum等系列作品中打造出连贯又有趣的体验心流。

对互联网产品设计而言,我们能调用的触点也许仅有区区一屏,但用户在获取虚拟体验时的沉浸式感知却和实境式体验是相似的,因此设计师也可以参考以下几点:

· 利用五感塑造场景:不仅从视觉层雕琢,更要调动触觉(设备震动、阻尼感)、听觉(声效、音乐、声场) 等感官以模拟真实世界中的物理反应,打破虚拟环境和实境的时差和次元壁。

· 减少环境干扰项:收起不必要操作,最大化界面视野,让用户尽可能全程聚焦在目标场景。

· 强化叙事性引导:利用开屏动画、转场动效、角色故事等元素增加场景代入感并进行自然过渡。

· 即时性反馈:给予用户简单而反馈感强的任务,以延续他们对互动的把控感和积极性,从而增加用户在环境中逗留的时间和意愿。

We do it in the public.
We bring people together.

过去,由于娱乐产品的复制成本较高,人们大都以群体形式到电影院或剧院里进行活动,因此促进了社交互动与环境共融。但随着媒介的升级,娱乐不仅从大众走向个人,同时也将个人和群体进行隔离,使个人和社群、环境之间的互通性越来越弱。Moment Factory坚持在公共场域中探索新型的体验形式,正是因为他们坚信娱乐活动虽然可以由个人进行,但沉浸式的情感体验仍旧需要透过真实环境下的社交互动来完成。利用数字篝火为体验设计融合升温,才能让人们真正地共聚与共享真实的情感和生活。

STUDIO SWINE
用转瞬即逝创造世界

如果说Moment Factory利用新媒体在环境创意、娱乐性与商业价值之中找到了发展的平衡,Studio Swine则是利用新媒体设计的实验性为人们开辟了观察世界的全新角度。

Studio Swine中的“SWINE”全称是Super Wide Interdisciplinary New Explorers,意味着无限跨界与探索主义。它由新派英国艺术家Alexander Groves及日本建筑师Azusa Murakami于2011年创立,作品领域涵盖思辨设计、装置艺术、电影、雕塑等。他们的创作以独特的世界观、空间感及美学体系征服了世界各大顶尖艺术展览,伦敦V&A博物馆、巴黎蓬皮杜艺术中心与威尼斯双年展等都曾邀请他们展出。

©️Studio Swine

在西方,越来越多像Studio Swine这种设计师团队选择以跨界的形式进行研究及创作,他们也不再拘泥于设计与艺术之间的所谓界限,逐渐衍生出了新的设计流派与理论。传统行业的设计焦点往往会落在商业策略与Design Thinking上,而新形态的设计则更多地向批判性与未来性上倾斜。

An Unresolved Mapping of Speculative Design ©️Elliott P Montgomery | EPMID.COM

2013年前后,英国设计师Anthony Dunne和Fiona Raby提出了Speculative Design(思辨性设计)来概括此类在艺术与设计之间的交叠学科。对比起传统设计基于现有场景来解决现有问题,思辨性设计旨在扩充场景的可能性,以引导人们想象和思考未来社会生活、生产的状态或矛盾。Speculative Design以设计作为跨领域的思维实验及方法,不仅突破了媒介、工艺的疆域,选题上也常常挑战甚至跳脱社会伦理、文化定式、现世哲学的桎梏,而这种敢为人先的创作理念也是此类作品争议性的源头。

Redrawn from Speculative Design Practice ©️ Ivica Mitrović | Speculative.hr
NEW SPRING

New Spring是Studio Swine与COS合作的装置互动项目,作品以意大利建筑的拱廊结构及樱花树在四季中的形态为意象设计,并将气泡比喻花的绽放与凋亡,旨在讨论时间与物质的瞬息性。在创作伊始,设计师提出了一个假设场景:在未来,物质将越来越多,而空间越来越少,植物与园林可能朝着机械化、人工化的方向发展,那么我们要怎么去模拟四季变化下生物从生到灭的过程呢?

COS x NEW SPRING ©️Studio Swine

为了全感官地营造未来园林的场景感与沉浸感,除了樱花树的意境外,Studio Swine更与化学家合作,研制出带有混合香味且不会立即爆破的气泡,为互动者带来意料之外的触感体验。在听觉上,编曲家Gavin Singleton也特意为展览场景打造了专属的音乐EP。

©️Studio Swine

2018年,Swine Swine再度利用气泡作为原型,以世界上最小且最古老的生物之一——蓝细菌的光合供氧为主题,制作了高达9米的大型环境装置Infinity Blue来模拟地球大气层的历史,礼赞蓝细菌赐予了地球第一口呼吸。雕塑中内嵌32个旋涡气孔不断喷发出圈装烟雾,用以比喻光合作用生产氧气的过程。

Infinity Blue ©️Studio Swine

HAIR HIGHWAY

和场景设计不同,影片同样也是另一种常见的沉浸式表现手法。近几年越来越多的新媒体作品采用纪录电影、开放式互动短剧、VR短片等形式对作品进行呈现:一是影片能突破作品篇幅,更全貌地介绍项目背后的概念与调研故事;二来基于自媒体环境的蓬勃,作品能以较低的复制成本获得更高的传播度;三则是影片天然的叙事结构能快速激活观众的代入感。

Hair Highway(丝绸之路)是以纪录片与家具设计复合呈现的极富争议性的新媒体实验。Studio Swine意识到在自然资源逐渐减少的情况下,人类毛发作为一种代谢物质,也许可以成为新型的可再生资源。基于这个洞察,他们尝试以头发作为原料去创造一种近似木料的全新媒材,以挑战现有的美学标准和诠释物质的可能性。

Hair Highway ©️Studio Swine

亚洲人头发的生长速度是热带硬木的16倍,而中国作为热带硬木最大的进口国也是人类毛发最大的出口国,因此也被他们选为了项目的起源地。两人在创作过程中不仅探访了9个位于山东的假发工厂,更拍摄大量假发制作的工序与买卖流程作为纪录片的生态调研资料。

©️Studio Swine

Hair Highway以丝绸之为概念,用树脂封印毛发制作出一种模拟琥珀、玳瑁纹理的板材,并糅合清代及上海20年代装饰主义的纹理设计与西方抽象几何的轮廓特征,创造出了一套极具古典神韵的系列家饰。

©️Studio Swine

不破不立,Studio Swine的作品始终紧扣着三个思辨性的特征:探索时间性、想象未来社会的形态、创造新型的物质组合,以新锐的角度挑动人们的思维的底线,而量产和商业化却从不是他们眼中的第一要义。或许怪诞,或许不安,但设计在他们的哲学里只是一条探索世界的未竟之路,而不是一个实用主义诞下的结果。

新媒体的特点之一,就是他基于时间的艺术形式。新媒体的表现很多都是时间累积的缩影,每一帧,每一个图层,每一个数据库的建立,以及观众在与之互动的时候也同时在进行一个时间的旅行。我希望互动是更加内隐和内省的,而不是仅仅基于科技的娱乐程度。

——著名新媒体策展人 Richard Castelli

从对娱乐效果喜闻乐见,对创作理念心悦诚服,再到如今被作品激活出新的灵感、批判或讨论,受众与作品之间的互动升维或许才是创作者最乐意观望的局面。沉浸式新媒体设计为人们提供了孵化情感和思想的超感官空间,而互动场域中的人才是成就作品的最终环节。

真正的沉浸是思维的沉浸,

环境的营造只是想象力的引路人。

参考文献  |

Moment Factory. http://momentfactory.com

Studio Swine. http:// www.studioswine.com

Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design. Rockport Pub.

Dunne, A., & Raby, F. (2013). Speculative everything: design, fiction, and social dreaming. MIT Press.

Mitrović, I. (2019). Introduction to Speculative Design Practice – Speculative. [online] Speculative.hr.

腾讯设计师:如何让你的设计稿100%还原?

视觉设计师作为展示产品最终形态的执行层,产品上线前走查视觉与交互还原是必经环节,而留给设计师走查修改的时间其实非常少,有时候为了配合产品上线时间,通常只能牺牲一些细节,在下一次迭代进行优化。为了每一次上线的产品都能够得到更好地还原,这就需要设计师去了解开发到底是根据哪些规则还原我们的设计稿,以及在每一次制作和交付设计稿的时候,我们应如何设定好每一个细节的规则。

开发:这里已经完全对齐了。

视觉:看起来还没完全对齐,我的图也没有切错吧?

开发:字体大小和间距都是按照视觉稿来的。

视觉:这里间距偏差这么大,为什么不按照视觉稿?

开发:视觉样式好多,每个设计师的间距好像都不一样。

视觉:……

我们经常会听到身边的设计师与开发小哥的一些对话,关于对齐、大小、间距等设计还原问题经常会讨论很久,有时甚至会觉得,几个像素的间距是不是没有必要这么纠结。以我较常接触的云产品官网为例,云产品官网体量庞大,单个页面或信息模块的样式复用可高达上百个子产品页面,此时第一个模块设计的规范性、扩展性、复用性则变得尤为重要,所以为了让设计方案更加合理,为了让合作更加高效,这里总结一些设计经验,与大家一起探讨。

本文将从以下三个方面,思考作为视觉设计师,应当如何让设计更加合理有效:

视觉处理(设计) 设计逻辑(方法) 交付走查(合作)

视觉处理

1. 字体结构

网页设计中,我们总避免不了与字体打交道,字体也是我们在设计中经常容易忽视的部分,而经常出错的原因往往是因为我们对文字的理解不够清晰。相比西文字体,中文字体结构复杂,字库庞大,网页的渲染效果会比西文字体艰难很多。

但无论是中文还是西文,我们经常需要用到的无非是字体大小、字重、字色,还有就是经常被我们忽视的行高和行宽,我们从西文字体提取三个最主要的因素,即字高、行高、行宽。基于西文字体的结构转换为中文,我们可以理解为,字高指的就是我们肉眼所能看到的字体的实际高度,而行高指的是字高+上边距+下边距,反过来说,行高减去字高除以 2 就能得到我们的上下边距,行宽指的就是整个文本的宽度。

举一个图文模块的例子,图(1)中我们肉眼所看到间距,在我们做标注时,看到的其实是图(2)中的三个色块,我们实际给到开发的标注,是色块的尺寸和色块之间的间距,以及详细的文本属性。

2. 文字行宽

关于行宽,以设计 banner 的标题及描述文字为例,定义行宽是为了让文本在极限宽度的时候进行换行,再固定好配图的尺寸,从而得到文本与配图之间的间距,定义行宽、行数、字数,能够更好地为运营人员规范输出的文案,避免因字数过多或过少所造成的视觉不平衡。

当我们处理无序列表时,四个短句文本,长短不一,同样我们需要限制一行文本宽度,定义一行能承载的最多字数,以及跟产品确认可能出现的最多字数的情况,确认模块设计的可行性,保证后续运营人员在替换文案的时候不会出错。

以上两个例子都是我们设计文字经常出错的地方,正确的定义规范,无论是交付开发或者其他下游,都能保证模块设计的可扩展性及规范化,保证最终上线质量。

3. 图标视错觉

关于图标,这里提到一个几何学错觉的概念,视觉上的大小、长度、面积、方向、角度等几何构成,和实际上测得的数字有明显差别的错觉,称为几何学错觉。人眼所接受的视觉平衡,往往不是设计软件上精准的对齐,我们总是会通过调整间距、大小或角度来补齐一些负空间,让画面保持视觉平衡。

以客户案例的卡片样式为例,客户案例在 to B 产品中是必不可少的模块,我们的客户 logo 有的圆形,有的长方形,有的纯文字,尺寸差距比较悬殊,这种情况下我们需要给他限制一个高度,在这个高度以内,再根据 logo 本身的体量来调整图形的大小,处理好 logo 的视觉平衡,最后红色区域是 logo 的实际尺寸,蓝色区域则是我们实际给到开发的尺寸,从开发的角度来看其实就是占位符,而规范的作图则是把占位符的透明度调整为 0,以占位符为实际有效作图区。

UI 设计中通常以「向右箭头」来表示当前链接可跳转,使用箭头作图时,当我们把箭头和文字右对齐,箭头其实会更加的往外突出,这时候我们会人为的往里边推 1 至 2 像素,最后实际给到开发的也应该是红框的尺寸,也就是 16×16 的占位图尺寸。

「按钮」也是 UI 设计中常用的组件,当我们在按钮里使用图标加文字时,由于文字的体量更大,整体重心会往右偏,所以我们通常会认为让图标和文字整体往左偏移,使整体的视觉更加平衡,实际给到开发的,也是两个不同等的边距。

设计逻辑

1. 理性的设计

在 iOS 和 Android 的设计规范中,都有提到过使用「8点栅格」的概念,即建议使用 8×8 的网格系统进行设计,我们都知道 0.5px 的渲染在屏幕上会变模糊,之所以使用 8 的倍数是因为市场上主流的屏幕都能被 8 整除,使用 8 点栅格能够最大程度的让我们所设计的内容样式在屏幕上保持高清显示,而在日常的网页设计中,我其实更加倾向使用 4 点栅格系统。

我们以下图 4 组数列为例,大家可能都曾使用过上面三组蓝色数列中的数值应用到设计中,或以 5 为倍数,或以 10 为倍数、或以偶数为设计逻辑,而实际上以 5 为倍数则会包含奇数,奇数会导致控件文字对不齐,当 5 的倍数和偶数同时使用时,则会出现类似 14、15、16 这种相差为 1 的相邻数,这样会导致我们的尺寸规范不好定义规则,难以形成逻辑,而使用 4 的倍数,他们的公差为 4,不会出现奇数,也不会出现相邻数。

我们再看看一些通用的尺寸定义,例如常见的 icon 设计尺寸都是以 4 为倍数。

常见的网页栅格及其所均分的卡片和间距,也都是 4 的倍数,如果我们的控件尺寸,图标尺寸和间距都使用 4 的倍数来定义,那所有的信息模块自然都能更好的相互适应,层层递进的逻辑关系也会更加明显。

我们把 4 点栅格的设计逻辑套用到卡片设计上,第一眼我们可能比较难去评判两者的好坏,但仔细看,我们就会发现第一个卡片的按钮没有水平对齐,相互之间的间距尺寸也是没什么逻辑性。假如今天调整一个 8px 的间距,明天调一个 10px 的间距,设计师走查起来也很难发现有问题,对接的开发也难以有一个可以参考的规范标准。而相对的,以 4 为倍数,我们会发现所有的信息都会完美对齐,而且倍数为 4 的每个数值之间公差为 4,即使设计稿微调了 1px 我们都能很快发现,开发在还原设计稿时也会有一个衡量标准。

网格设计在报纸、杂志、海报等平面设计领域中也是十分常见的设计手法,通过建立网格,考究每一个信息模块在页面中的摆放位置,大小占比,颜色占比,从而使得页面信息保持秩序、均衡。

使用 4 点栅格系统,通过理性、秩序、逻辑的设计方式赋予画面秩序感以及阅读体验,而以 4 为倍数,每个数字之间都相差为 4,不会太大,也不会太小,同时保持着秩序,让设计更加理性。对于团队合作,设计师与开发也将更有默契,不必再为不清不楚的间距浪费时间。

交付走查

1. 有效切图

关于切图,切图之前应跟开发确定好输出的格式和尺寸,确定应该用 SVG,一倍图或是两倍图。SVG 体量小渲染质量好,单色使用时还能替换颜色,PNG 则通常用在实景图,一倍图和二倍图则根据实际需要进行输出。

如果要做分层动画,那我们就需要分层切图,如果桌面端和手机端样式差别较大,那我们需要和开发沟通好如何实现,是否需要特殊切图,所有的特殊切图和特殊样式,我们都应该提前跟开发沟通好。

2. 交互细节

如果某个控件或信息模块交互样式较多,那我们可以有一个空白画板来清晰地标注这些状态和样式,很多开发在还原过程中都是一手视觉稿一手交互稿,但视觉设计师作为展示产品最终形态的执行层,很多情况下,视觉阶段依然会有很多需要跟交互和产品沟通修改的地方,所以为了避免遗漏修改点,视觉稿应该呈现最完整的设计细节,这样也会很大程度上节省开发的时间,减少出错的几率。

当页面内容有一定的更新频率,我们则需要标明视觉样式规范,以及后续的运营规则,完整的收尾,可以避免产品经常过来寻求上线素材和规范。有些需要隔三个月或半年才上线的需求,清晰的标注也能帮助我们快速回忆起需求背景,让我们在日常工作中保持头脑清晰,有条不紊,这其实也是在给我们自己节省时间。

3. 重构稿走查

走查还原的时候,在 Chrome 浏览器的空白处右键点击检查,找到里面的 Computed 窗口,我们可以找到具体的文字、间距、投影等属性,有时候一些比较细微的调整,我们可以双击具体的数值进行调整,调整到自己满意之后再把具体的数值给到开发,这样就不用在我们摇摆不定的情况下,造成双方的困扰。

最后,在预发布的时候,我们可以利用 SwitchHosts 的客户端来配置开发环境进行体验,保证最终上线的效果。