5000字解析!科幻电影中的「全息影像」是交互设计的未来么。

编者按:为什么所有的好莱坞科幻电影当中,用户界面看起来都是一样透明、蓝色 UI 乃至于全息投影?这种风尚是如何流行开的?它们对于未来的 UI 设计有影响么?目前全息影像发展到什么程度了?如果你厌倦了近期关于 AIGC 的持续热炒,不妨来看看资深 UX 设计师 Daley Wilhelm 关于全息影像、未来 UI/UX 的探讨。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

托尼史塔克像抓住真实物体一样握住虚拟物品

科幻电影喜欢炫耀技术的巨大飞跃。最新的《阿凡达》电影中,蜘蛛型自走机器人可以在数周内搭建一整座城市,在人体冷冻技术加持下,飞船可以将人类运送到数光年以外的地方。在詹姆斯卡梅隆的想象中,我们可以将记忆下载,上传到新的身体当中,所有这些极为先进的技术都是通过可触摸的、透明单色的的全息影像来进行控制的,而这个和好莱坞其他很多科幻电影中的界面如出一辙。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

阿凡达

当我们透过科幻电影窥见未来的时候,我们看到的是无所不在的语音助手,超凡脱俗的可穿戴设备和大量的全息影像和3D交互。在这其中,不知道是出于何种原因,这些全息图几乎全都是蓝色的,漂亮地悬浮于桌面上方,每个路过的人都能看到。这种未来派的
UI 设计一直都令我困惑,因为它看起来很酷,但是实际并不实用。不过,好莱坞电影似乎极度痴迷于这种被蓝光包裹的未来科技。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

星球大战中莱雅公主的全息投影

也许这种好莱坞设计公式源自于最早、最有影响力的科幻题材电影星球大战系列。星球大战当中许多科幻元素为后来者提供了灵感,而后续的很多作品会自然而然在前辈的基础上沿袭设计。《阿凡达》系列电影当中,对于蓝色全息影象就有着明显的偏爱。

什么是全息影像

我们先重新回顾一下好莱坞对全息影像的呈现形式。通常在电影当中,全息影像有两种形态,平面全息图和立体全息图。平面全息图其实早已出现,从平面的3D效果收藏卡到舞台上的初音未来全息图,都属于这种平面全息影像。而在科幻电影当中,投射到透明屏幕上的界面,也同属于这类。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

初音未来

然而,立体全息影像则截然不同。顾名思义,它是立体的,占据空间体积的,那么我们要如何让光占据特定的空间,并且拥有三维立体的物体一样的「特征」?如何让光线停留在特定的地方而不是继续向前投射?

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

而这正是物理学家 Daniel Smalley
这样的人所研究的课题。受到星球大战中莱娅公主的立体投影的启发,他已经能够通过激光击中纤维素粒子,在空中形成立体的 3D
蝴蝶轮廓,这个技术上的飞跃意味着全息影像已经成为可能,但是距离钢铁侠手中可以交互、随着手掌转动的立体投影太远,实在是相形见绌。乐观点预测,我们有可能在
10 年内看到一些拥有体积感、尺寸更大的全息影像,但是现在它依然是科幻电影和小说里供人想象的未来。

最初打破常规的是《星际迷航》

值得注意的是,最初打破这种使用全息影像「惯性」的是早期的《星际迷航》系列的电影和剧集,影片中设计师采用了浓郁 60 年代设计语言的扎实显示屏。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

然而此后剧集和电影重启的时候,又折返回去采用好莱坞的未来感全息 UI 界面,舰桥上悬浮着蓝色基调的全息影像 UI 界面,最新的 USS
Discovery 当中,船员不再能够透过硬质屏幕和敌舰视频语音,所有人直接在全息影像频道里实时通话,还能便捷地进行战斗调动。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

然而如果真的要细抠设定的话,USS Discovery 的剧情所在时间段相反发生在柯克船长掌舵之前的事情,但是看起来技术相反更加先进,不过星际迷航粉对此倒是有一番详细解释,只是实际上主要原因还是好莱坞影视产业的发展的必然结果。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

好莱坞对于全息影像呈现的着迷是理所当然的,更加炫酷的视觉效果是必然的趋势。复古的黑蓝橙色如今也被蓝色和白色为主的色调所取代。

漫威电影重塑了范式

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

设计蜘蛛侠套装的界面就是经典的蓝白光影

漫威的科幻电影如今比以往任何时候都要主流。是的,这些包含令人难以置信的未来技术的超级英雄电影被归类为科幻。甚至雷神所使用的魔法也已经被堂而皇之被解释为「被误解的科学」,而这也进一步推动漫威将蓝白色全息投影界面普及到整个漫威扩展宇宙。

总部位于纽约的设计公司 Perception
是漫威电影中钢铁侠各色技术的创意源头。每当神盾局的尼克福瑞局长在和全世界领导人争论的时候,其实都是 Perception
的设计师在背后加班熬夜。当蜘蛛侠在设计战衣的时候,也是 Perception
的设计师建模渲染,并且操控哪些全息影像,而真正决定瓦坎达技术风格走向和未来感是否充足的,同样是 Perception
的工作人员。根据他们创意总监 John LePore 的说法:

「了解电影所处的是哪个阶段以及技术所属的阵营,对我们而言是很重要的。它是否属于军队?如果是,那么我们需要添加更加扎实和实用的感觉。它是否是量产并且市售的产品?如果是,那么它需要有更加友好的界面。它是否是钢铁侠那样专业人士所使用的设备?如果是,那么它所拥有的界面就会高度的个人化。」

案例研究:Tony Stark 的界面设计

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

钢铁侠打开了太多的标签页

钢铁侠 Tony Stark
是亿万富翁,天才发明家,花花公子,也是慈善家,但是他同样是一位专业的用户界面和用户体验设计师。他设计的界面是适合他自己的,并且有着非常具体的需求,但是由于他本身同时也是科技企业的负责人,这也意味着他所设计的界面会在更广阔的世界当中使用。

接下来,我们按照时间顺序来看看 Tony Stark 的用户体验设计,以及它们在漫威宇宙中的演变。

钢铁侠1(2008)

除了制造 MK I 的阿富汗山洞,这是 Tony Stark 的工作区域技术含量最低的版本。很多跑车被放置在这里,桌面上的 Mac 显示器显示着繁复的界面,他可以透过语音来命名人工智能 Jarvis 辅助操作:

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

他还有一支笔一样的交互工具,方便他将屏幕上的设计文件直接拖放到桌子上,以全息影像的方式呈现,并且可以与之交互:

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

在 2023 年这种技术还无法实现。而其中最科幻的部分,就是他可以直接用手抓取,或者将特定的组件挑选出来,揉碎删除。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

Tony Stark 的这种展现方式,和如今的 HoloLens 2 在 AR 触觉领域的探索类似,也许我们和这样的交互方式已经非常接近了。

钢铁侠2(2010)

在第二部当中,Tony Stack 在国会听证会上,突然拿出的全透明手机,同样出自 Perception的设计,而这种想法也一度让现实世界中的科技企业感到兴奋,三星甚至专门参考电影中的内容,起草了一些关于透明手机的专利文件。

在这个场景中,Tony 使用这个手机直接入侵了现场的电子设备。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

Perception 设计了一款带有透明玻璃的咖啡桌,Tony 轻拍两下即可启动,整个交互逻辑和我们日常使用触摸屏是高度一致的,滑动,缩放,虚拟键盘,当然,还有典型的蓝色透明界面:

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

其实这类投影触摸屏本身并不算什么新鲜技术,它们可以使用摄像头、AI 感知来确定指尖的位置。另外,在发现新元素的场景当中,Tony 大量使用了手势交互来操控立体全息影像:

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

钢铁侠3(2013)

在《钢铁侠3》当中,传统显示器彻底被淘汰了。Stark 的实验室中,所有的信息呈现都已经使用全息影像了。这使得 Jarvis 所控制的投影区域比以往任何一部都要大。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

在这一部当中,Stark 使用全息影像重现了整个爆炸犯罪现场,在此过程中,Tony
穿行在全息影像中,使用极其详尽的数据分析寻找线索,找到罪魁祸首,他甚至不得不跳到工具箱的顶部,才能鸟瞰整个镜像,与此同时,大量的辅助信息的窗口、新闻报道和数据在空中交错,提供信息支持。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

使用整个房间来作为全息影像的载体是惊艳的,我们没有除此之外更好的范例,这中技术也许可以借助如今的虚拟现实技术来进行类比,但是全息影像无疑更加惊艳。

复仇者联盟(2012)之后

进入新阶段之后,Stark 大厦当中每个屏幕都已经是交互式的全息影像了。即使是离开自家实验室,在神盾局的天空母舰上,基于透明屏幕的平面全息影像也无处不在。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

近期上映的《黑豹2》当中,Shuri 的实验室里面也全都是全息影像,有2D的也有3D课交互式的。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

瓦坎达的普通民众使用的个人终端也不是我们熟知的智能手机,他们使用的是 Kimoyo 念珠手串,接听电话进行沟通的时候,这个小巧的念珠会让信息以3D全息影像的形式呈现出来。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

为什么好莱坞偏爱全息影像

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

《银翼杀手2049》中的超大型全息影像

电影当中为什么会使用全息影像和透明界面?问题的答案其实是显而易见的。全息影像在体验上更加直观,比起在手机上来回切换要更加令人愉悦,即使沟通的对象和你不在一个星球上,也同样可以面对面地进行沟通,这种无视空间且直观的沟通方式,毫无疑问是炫酷的。

为什么是透明的界面和蓝色的光影?除了因为本身看起来足够具有科技感,而且也便于拍摄。但是从用户体验的角度来审视,全息影像受到如此青睐也是符合逻辑的。

这种科幻美学符合预期

不管全息影像在好莱坞是如何衍生出如此多丰富多彩的呈现,它现在已经成为了未来技术的一个代名词。《银翼杀手》《星际迷航》《阿凡达》全都是针对未来的幻想,科幻作品所描绘的未来生活方式,无论好坏,都已然成为客观存在的、大众对于未来的共同想象,它们就是我们对于未来的期许。Pamela
Sargent 将这种现象称为「思想文学」,这些虚构发明一直被我们重述,我们才能不断想象、发明和验证,将之带入现实。

不受传统屏幕限制

Tony Stark 在电影中使用全息影像的妙处在于,所有的界面几乎已经不用受到传统屏幕的限制,除了可以随意变大变小,它们还能脱离传统屏幕的存在,被拖拽出来,在全息影像中,随意放置和缩放 ,这也是为什么 Tony 可以肆无忌惮地打开如此之多的界面窗口。

而立体的全息影像则开辟了新的可能性。如果我们都可以像瓦坎达人一样使用全息影像聊天,那么原本高度依赖线下执行的任务,很大概率可以在线上完成了,比如购物。相比于使用
VR 和 AR 来预览商品和效果,全息影像所提供的效果会更进一步,这才是真正革命性的变化。而在《钢铁侠3》中,Tony
借助全息影像查看犯罪现场,就是立体全息影像的绝佳演示。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

值得一提的是,即使最终能落地,全息影像并非全是优点,有很多务实的问题有待解决。

5000字解析!科幻电影中的「全息影像」是交互设计的未来么?

透明度界面其实有问题

通常,我们认为内容通透干净清晰是一个优点,但是全透明的载体,无论是2D的屏幕还是3D的空间之下,所有的信息都是一览无遗的,毫无隐私可言,无论你在做的是什么事情,都会彻底地向所有人展示。除此之外,这种高度通透的视觉信息,有很大概率会造成视觉疲劳,在光照充足的区域,全息影像要如何呈现,同样是一个非常具体务实的问题,如果无法解决高亮度情况下的信息呈现,那么全息影像就只能存在于暗室当中了。

针对全息影像优化

如今依然有网站还没有针对移动端屏幕进行优化,甚至没有针对如今流行的高清屏幕进行优化。在全息影像开始发展、走向民用之后,会逐渐开始形成设计标准,那么咱们的数码设备、网站、内容都需要在这个标准下有意识地兼容才行。

手势交互的遗漏

全息影像是需借助手势来进行交互的。但是,我们目前尚且没有掌握所有的 iPad
手势,又谈何全息影像的交互呢?如果这项技术最终在现实世界流行开来,那么我们需要面对它相对陡峭的学习曲线。与此同时,即使具备了成熟的全套交互操作,能够像
Tony Stark
一样进行交互的人毕竟还是少数,多数人可能依然需要借助一些工具来更好地和全息影像进行交互,包括但不限于键盘和鼠标这些传统的交互工具。

结语:全息影像是未来吗?

电影中一直在使用平面全息影像和立体全息影像,因为它们在大荧幕上看起来很赞,为用户提供了颇为不错的视觉享受。这种交互式、透明的蓝色界面已经透过好莱坞,成为了未来设计的代名词。如果科幻作品代表了我们对于未来的愿景,那是不是全息影像就是设计的未来方向?

或许是。从我们目前在 VR 和 AR 领域的探索来看,用户的确非常想触摸虚拟屏幕,用户也想像 Tony Stark
一样操作虚拟物品,就像我们上面提到的 Microsoft HoloLens 2
那种混合现实交互的前进方向。实际上,现在的技术人员也在尽力借助产品来弥补虚拟环境下的感官体验,对于如今的 VR
设备而言,手持控制器是必不可少的,用户要靠它们获得触觉反馈。

当下我们所拥有的技术是远落后于科幻作品的,但是指向这个方向的研究,是一直在推进的,起码我们现在已经攻克了一部分全息影像的可用性问题。

作者:陈子木

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/240509.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2023年3月7日 12:56
下一篇 2023年3月7日 12:58

相关推荐

  • 让界面交互贴近用户的直觉  

    什麽是直觉交互形式?可以从以下的几点了解: 基於用户的现实以及经验:也就是所见即所得,用户看到某个交互功能就知道如何操作; 符合用户的预期:用户点击某个交互按钮後,给予用户所预期的操作结果; 低成本的...

    2022年6月25日
    0252
  • 京东高手出品!如何提升设计价值:方法篇。

    UX/UI 设计师在日常工作中是否遇到以下疑问:1.方案由上游主导,设计师没有发挥空间怎么办?2.如何从设计视角出发梳理体验优化建议?3.如何向各方证明你的优化建议是有价值的?要回答以上问题,首先得理解设计价...

    2023年3月7日 SEO操作
    00
  • UI/UX设计作品集中的推理分析该怎么写?高手实操案例分析。

    作品集中的推导分析部分该怎么写,而不是套市面上的流程和模板?本文用2个实操案例,帮你做出有理有据的作品集推导。作品集放什么、怎么放,归根究底只要能展示出你独特的能力,我觉得都可以,比如你版式设计好,...

    2023年3月2日 SEO操作
    00
  • 4 个方面层层递进,分析如何设计 B 端产品的弹窗。

    在 2021 年终总结时发现这些年读了很多的文章,虽说也会通过各种工具记录整理,但还是会觉得零散。最好的输入是输出,今年给自己定的目标是写 10 篇文章。一来是把零散的知识整理归纳,串联知识结构;二来是通过...

    2023年3月2日 SEO操作
    012
  • 三个细节提升网页易用性

    提供便利的方法恢复或退出操作 简单来说就是切实地提升用户体验,站在一些细节角度上去提升。比如总是给用户提供选择返回上一步操作或安全、可识别的区域。又比如是可以采用恢复操作,而不是确认操作。最直观的就...

    2022年6月16日
    0154
  • 网页设计教程:学习交互设计的步骤是怎样?

    近年来,交互设计在网页设计中起着非常重要的地位。什麽是交互设计?简单来说就是网页与人进行交流互动的设计,能帮助用户解决问题,满足他们的期望。 很多网页设计师在考虑交互设计时,要麽从书本上学到些皮毛,...

    2022年6月25日 建站资讯
    0366
  • 浅谈用户使用情境分析

    对於用户使用情景的分析,其实是很多网页设计师会忽略的一个步骤,多的是以自己的主观角度去设计而已。但其实回过头,你会发现针对核心路径做仔细的梳理和数据分析时,有很多细节以及问题并非你所主观认为的那样...

    2022年6月16日
    0438
  • 为什麽要建议你要使用底部导航?

    首先你要明白,除了手机端的界面设计,平板端的界面设计也是会有难以交互的现象出现。有相关的研究表明,49%的用户都会习惯使用单手握持以及拇指来完成界面浏览和操作。这个研究表明,可以展开分析,对於热区的内...

    2022年6月25日
    0108

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息