編者按:為什么所有的好萊塢科幻電影當中,用戶界面看起來都是一樣透明、藍色 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 設備而言,手持控制器是必不可少的,用戶要靠它們獲得觸覺反饋。

當下我們所擁有的技術是遠落后于科幻作品的,但是指向這個方向的研究,是一直在推進的,起碼我們現在已經攻克了一部分全息影像的可用性問題。

收藏 28
點贊 42

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。