編者按：為什么所有的好萊塢科幻電影當(dāng)中，用戶界面看起來(lái)都是一樣透明、藍(lán)色 UI 乃至于全息投影？這種風(fēng)尚是如何流行開(kāi)的？它們對(duì)于未來(lái)的 UI 設(shè)計(jì)有影響么？目前全息影像發(fā)展到什么程度了？如果你厭倦了近期關(guān)于 AIGC 的持續(xù)熱炒，不妨來(lái)看看資深 UX 設(shè)計(jì)師 Daley Wilhelm 關(guān)于全息影像、未來(lái) UI/UX 的探討。

托尼史塔克像抓住真實(shí)物體一樣握住虛擬物品

科幻電影喜歡炫耀技術(shù)的巨大飛躍。最新的《阿凡達(dá)》電影中，蜘蛛型自走機(jī)器人可以在數(shù)周內(nèi)搭建一整座城市，在人體冷凍技術(shù)加持下，飛船可以將人類運(yùn)送到數(shù)光年以外的地方。在詹姆斯卡梅隆的想象中，我們可以將記憶下載，上傳到新的身體當(dāng)中，所有這些極為先進(jìn)的技術(shù)都是通過(guò)可觸摸的、透明單色的的全息影像來(lái)進(jìn)行控制的，而這個(gè)和好萊塢其他很多科幻電影中的界面如出一轍。

阿凡達(dá)

當(dāng)我們透過(guò)科幻電影窺見(jiàn)未來(lái)的時(shí)候，我們看到的是無(wú)所不在的語(yǔ)音助手，超凡脫俗的可穿戴設(shè)備和大量的全息影像和3D交互。在這其中，不知道是出于何種原因，這些全息圖幾乎全都是藍(lán)色的，漂亮地懸浮于桌面上方，每個(gè)路過(guò)的人都能看到。這種未來(lái)派的 UI 設(shè)計(jì)一直都令我困惑，因?yàn)樗雌饋?lái)很酷，但是實(shí)際并不實(shí)用。不過(guò)，好萊塢電影似乎極度癡迷于這種被藍(lán)光包裹的未來(lái)科技。

星球大戰(zhàn)中萊雅公主的全息投影

也許這種好萊塢設(shè)計(jì)公式源自于最早、最有影響力的科幻題材電影星球大戰(zhàn)系列。星球大戰(zhàn)當(dāng)中許多科幻元素為后來(lái)者提供了靈感，而后續(xù)的很多作品會(huì)自然而然在前輩的基礎(chǔ)上沿襲設(shè)計(jì)?！栋⒎策_(dá)》系列電影當(dāng)中，對(duì)于藍(lán)色全息影象就有著明顯的偏愛(ài)。

什么是全息影像

我們先重新回顧一下好萊塢對(duì)全息影像的呈現(xiàn)形式。通常在電影當(dāng)中，全息影像有兩種形態(tài)，平面全息圖和立體全息圖。平面全息圖其實(shí)早已出現(xiàn)，從平面的3D效果收藏卡到舞臺(tái)上的初音未來(lái)全息圖，都屬于這種平面全息影像。而在科幻電影當(dāng)中，投射到透明屏幕上的界面，也同屬于這類。

初音未來(lái)

然而，立體全息影像則截然不同。顧名思義，它是立體的，占據(jù)空間體積的，那么我們要如何讓光占據(jù)特定的空間，并且擁有三維立體的物體一樣的「特征」？如何讓光線停留在特定的地方而不是繼續(xù)向前投射？

而這正是物理學(xué)家 Daniel Smalley 這樣的人所研究的課題。受到星球大戰(zhàn)中萊婭公主的立體投影的啟發(fā)，他已經(jīng)能夠通過(guò)激光擊中纖維素粒子，在空中形成立體的 3D 蝴蝶輪廓，這個(gè)技術(shù)上的飛躍意味著全息影像已經(jīng)成為可能，但是距離鋼鐵俠手中可以交互、隨著手掌轉(zhuǎn)動(dòng)的立體投影太遠(yuǎn)，實(shí)在是相形見(jiàn)絀。樂(lè)觀點(diǎn)預(yù)測(cè)，我們有可能在 10 年內(nèi)看到一些擁有體積感、尺寸更大的全息影像，但是現(xiàn)在它依然是科幻電影和小說(shuō)里供人想象的未來(lái)。

最初打破常規(guī)的是《星際迷航》

值得注意的是，最初打破這種使用全息影像「慣性」的是早期的《星際迷航》系列的電影和劇集，影片中設(shè)計(jì)師采用了濃郁 60 年代設(shè)計(jì)語(yǔ)言的扎實(shí)顯示屏。

然而此后劇集和電影重啟的時(shí)候，又折返回去采用好萊塢的未來(lái)感全息 UI 界面，艦橋上懸浮著藍(lán)色基調(diào)的全息影像 UI 界面，最新的 USS Discovery 當(dāng)中，船員不再能夠透過(guò)硬質(zhì)屏幕和敵艦視頻語(yǔ)音，所有人直接在全息影像頻道里實(shí)時(shí)通話，還能便捷地進(jìn)行戰(zhàn)斗調(diào)動(dòng)。

然而如果真的要細(xì)摳設(shè)定的話，USS Discovery 的劇情所在時(shí)間段相反發(fā)生在柯克船長(zhǎng)掌舵之前的事情，但是看起來(lái)技術(shù)相反更加先進(jìn)，不過(guò)星際迷航粉對(duì)此倒是有一番詳細(xì)解釋，只是實(shí)際上主要原因還是好萊塢影視產(chǎn)業(yè)的發(fā)展的必然結(jié)果。

好萊塢對(duì)于全息影像呈現(xiàn)的著迷是理所當(dāng)然的，更加炫酷的視覺(jué)效果是必然的趨勢(shì)。復(fù)古的黑藍(lán)橙色如今也被藍(lán)色和白色為主的色調(diào)所取代。

漫威電影重塑了范式

設(shè)計(jì)蜘蛛俠套裝的界面就是經(jīng)典的藍(lán)白光影

漫威的科幻電影如今比以往任何時(shí)候都要主流。是的，這些包含令人難以置信的未來(lái)技術(shù)的超級(jí)英雄電影被歸類為科幻。甚至雷神所使用的魔法也已經(jīng)被堂而皇之被解釋為「被誤解的科學(xué)」，而這也進(jìn)一步推動(dòng)漫威將藍(lán)白色全息投影界面普及到整個(gè)漫威擴(kuò)展宇宙。

總部位于紐約的設(shè)計(jì)公司 Perception 是漫威電影中鋼鐵俠各色技術(shù)的創(chuàng)意源頭。每當(dāng)神盾局的尼克福瑞局長(zhǎng)在和全世界領(lǐng)導(dǎo)人爭(zhēng)論的時(shí)候，其實(shí)都是 Perception 的設(shè)計(jì)師在背后加班熬夜。當(dāng)蜘蛛俠在設(shè)計(jì)戰(zhàn)衣的時(shí)候，也是 Perception 的設(shè)計(jì)師建模渲染，并且操控哪些全息影像，而真正決定瓦坎達(dá)技術(shù)風(fēng)格走向和未來(lái)感是否充足的，同樣是 Perception 的工作人員。根據(jù)他們創(chuàng)意總監(jiān) John LePore 的說(shuō)法：

「了解電影所處的是哪個(gè)階段以及技術(shù)所屬的陣營(yíng)，對(duì)我們而言是很重要的。它是否屬于軍隊(duì)？如果是，那么我們需要添加更加扎實(shí)和實(shí)用的感覺(jué)。它是否是量產(chǎn)并且市售的產(chǎn)品？如果是，那么它需要有更加友好的界面。它是否是鋼鐵俠那樣專業(yè)人士所使用的設(shè)備？如果是，那么它所擁有的界面就會(huì)高度的個(gè)人化?！?

案例研究：Tony Stark 的界面設(shè)計(jì)

鋼鐵俠打開(kāi)了太多的標(biāo)簽頁(yè)

鋼鐵俠 Tony Stark 是億萬(wàn)富翁，天才發(fā)明家，花花公子，也是慈善家，但是他同樣是一位專業(yè)的用戶界面和用戶體驗(yàn)設(shè)計(jì)師。他設(shè)計(jì)的界面是適合他自己的，并且有著非常具體的需求，但是由于他本身同時(shí)也是科技企業(yè)的負(fù)責(zé)人，這也意味著他所設(shè)計(jì)的界面會(huì)在更廣闊的世界當(dāng)中使用。

接下來(lái)，我們按照時(shí)間順序來(lái)看看 Tony Stark 的用戶體驗(yàn)設(shè)計(jì)，以及它們?cè)诼钪嬷械难葑儭?

鋼鐵俠1（2008）

除了制造 MK I 的阿富汗山洞，這是 Tony Stark 的工作區(qū)域技術(shù)含量最低的版本。很多跑車被放置在這里，桌面上的 Mac 顯示器顯示著繁復(fù)的界面，他可以透過(guò)語(yǔ)音來(lái)命名人工智能 Jarvis 輔助操作：

他還有一支筆一樣的交互工具，方便他將屏幕上的設(shè)計(jì)文件直接拖放到桌子上，以全息影像的方式呈現(xiàn)，并且可以與之交互：

在 2023 年這種技術(shù)還無(wú)法實(shí)現(xiàn)。而其中最科幻的部分，就是他可以直接用手抓取，或者將特定的組件挑選出來(lái)，揉碎刪除。

Tony Stark 的這種展現(xiàn)方式，和如今的 HoloLens 2 在 AR 觸覺(jué)領(lǐng)域的探索類似，也許我們和這樣的交互方式已經(jīng)非常接近了。

鋼鐵俠2（2010）

在第二部當(dāng)中，Tony Stack 在國(guó)會(huì)聽(tīng)證會(huì)上，突然拿出的全透明手機(jī)，同樣出自 Perception的設(shè)計(jì)，而這種想法也一度讓現(xiàn)實(shí)世界中的科技企業(yè)感到興奮，三星甚至專門參考電影中的內(nèi)容，起草了一些關(guān)于透明手機(jī)的專利文件。

在這個(gè)場(chǎng)景中，Tony 使用這個(gè)手機(jī)直接入侵了現(xiàn)場(chǎng)的電子設(shè)備。

Perception 設(shè)計(jì)了一款帶有透明玻璃的咖啡桌，Tony 輕拍兩下即可啟動(dòng)，整個(gè)交互邏輯和我們?nèi)粘Ｊ褂糜|摸屏是高度一致的，滑動(dòng)，縮放，虛擬鍵盤，當(dāng)然，還有典型的藍(lán)色透明界面：

其實(shí)這類投影觸摸屏本身并不算什么新鮮技術(shù)，它們可以使用攝像頭、AI 感知來(lái)確定指尖的位置。另外，在發(fā)現(xiàn)新元素的場(chǎng)景當(dāng)中，Tony 大量使用了手勢(shì)交互來(lái)操控立體全息影像：

鋼鐵俠3（2013）

在《鋼鐵俠3》當(dāng)中，傳統(tǒng)顯示器徹底被淘汰了。Stark 的實(shí)驗(yàn)室中，所有的信息呈現(xiàn)都已經(jīng)使用全息影像了。這使得 Jarvis 所控制的投影區(qū)域比以往任何一部都要大。

在這一部當(dāng)中，Stark 使用全息影像重現(xiàn)了整個(gè)爆炸犯罪現(xiàn)場(chǎng)，在此過(guò)程中，Tony 穿行在全息影像中，使用極其詳盡的數(shù)據(jù)分析尋找線索，找到罪魁禍?zhǔn)?，他甚至不得不跳到工具箱的頂部，才能鳥(niǎo)瞰整個(gè)鏡像，與此同時(shí)，大量的輔助信息的窗口、新聞報(bào)道和數(shù)據(jù)在空中交錯(cuò)，提供信息支持。

使用整個(gè)房間來(lái)作為全息影像的載體是驚艷的，我們沒(méi)有除此之外更好的范例，這中技術(shù)也許可以借助如今的虛擬現(xiàn)實(shí)技術(shù)來(lái)進(jìn)行類比，但是全息影像無(wú)疑更加驚艷。

復(fù)仇者聯(lián)盟（2012）之后

進(jìn)入新階段之后，Stark 大廈當(dāng)中每個(gè)屏幕都已經(jīng)是交互式的全息影像了。即使是離開(kāi)自家實(shí)驗(yàn)室，在神盾局的天空母艦上，基于透明屏幕的平面全息影像也無(wú)處不在。

近期上映的《黑豹2》當(dāng)中，Shuri 的實(shí)驗(yàn)室里面也全都是全息影像，有2D的也有3D課交互式的。

瓦坎達(dá)的普通民眾使用的個(gè)人終端也不是我們熟知的智能手機(jī)，他們使用的是 Kimoyo 念珠手串，接聽(tīng)電話進(jìn)行溝通的時(shí)候，這個(gè)小巧的念珠會(huì)讓信息以3D全息影像的形式呈現(xiàn)出來(lái)。

為什么好萊塢偏愛(ài)全息影像

《銀翼殺手2049》中的超大型全息影像

電影當(dāng)中為什么會(huì)使用全息影像和透明界面？問(wèn)題的答案其實(shí)是顯而易見(jiàn)的。全息影像在體驗(yàn)上更加直觀，比起在手機(jī)上來(lái)回切換要更加令人愉悅，即使溝通的對(duì)象和你不在一個(gè)星球上，也同樣可以面對(duì)面地進(jìn)行溝通，這種無(wú)視空間且直觀的溝通方式，毫無(wú)疑問(wèn)是炫酷的。

為什么是透明的界面和藍(lán)色的光影？除了因?yàn)楸旧砜雌饋?lái)足夠具有科技感，而且也便于拍攝。但是從用戶體驗(yàn)的角度來(lái)審視，全息影像受到如此青睞也是符合邏輯的。

這種科幻美學(xué)符合預(yù)期

不管全息影像在好萊塢是如何衍生出如此多豐富多彩的呈現(xiàn)，它現(xiàn)在已經(jīng)成為了未來(lái)技術(shù)的一個(gè)代名詞?！躲y翼殺手》《星際迷航》《阿凡達(dá)》全都是針對(duì)未來(lái)的幻想，科幻作品所描繪的未來(lái)生活方式，無(wú)論好壞，都已然成為客觀存在的、大眾對(duì)于未來(lái)的共同想象，它們就是我們對(duì)于未來(lái)的期許。Pamela Sargent 將這種現(xiàn)象稱為「思想文學(xué)」，這些虛構(gòu)發(fā)明一直被我們重述，我們才能不斷想象、發(fā)明和驗(yàn)證，將之帶入現(xiàn)實(shí)。

不受傳統(tǒng)屏幕限制

Tony Stark 在電影中使用全息影像的妙處在于，所有的界面幾乎已經(jīng)不用受到傳統(tǒng)屏幕的限制，除了可以隨意變大變小，它們還能脫離傳統(tǒng)屏幕的存在，被拖拽出來(lái)，在全息影像中，隨意放置和縮放 ，這也是為什么 Tony 可以肆無(wú)忌憚地打開(kāi)如此之多的界面窗口。

而立體的全息影像則開(kāi)辟了新的可能性。如果我們都可以像瓦坎達(dá)人一樣使用全息影像聊天，那么原本高度依賴線下執(zhí)行的任務(wù)，很大概率可以在線上完成了，比如購(gòu)物。相比于使用 VR 和 AR 來(lái)預(yù)覽商品和效果，全息影像所提供的效果會(huì)更進(jìn)一步，這才是真正革命性的變化。而在《鋼鐵俠3》中，Tony 借助全息影像查看犯罪現(xiàn)場(chǎng)，就是立體全息影像的絕佳演示。

值得一提的是，即使最終能落地，全息影像并非全是優(yōu)點(diǎn)，有很多務(wù)實(shí)的問(wèn)題有待解決。

透明度界面其實(shí)有問(wèn)題

通常，我們認(rèn)為內(nèi)容通透干凈清晰是一個(gè)優(yōu)點(diǎn)，但是全透明的載體，無(wú)論是2D的屏幕還是3D的空間之下，所有的信息都是一覽無(wú)遺的，毫無(wú)隱私可言，無(wú)論你在做的是什么事情，都會(huì)徹底地向所有人展示。除此之外，這種高度通透的視覺(jué)信息，有很大概率會(huì)造成視覺(jué)疲勞，在光照充足的區(qū)域，全息影像要如何呈現(xiàn)，同樣是一個(gè)非常具體務(wù)實(shí)的問(wèn)題，如果無(wú)法解決高亮度情況下的信息呈現(xiàn)，那么全息影像就只能存在于暗室當(dāng)中了。

針對(duì)全息影像優(yōu)化

如今依然有網(wǎng)站還沒(méi)有針對(duì)移動(dòng)端屏幕進(jìn)行優(yōu)化，甚至沒(méi)有針對(duì)如今流行的高清屏幕進(jìn)行優(yōu)化。在全息影像開(kāi)始發(fā)展、走向民用之后，會(huì)逐漸開(kāi)始形成設(shè)計(jì)標(biāo)準(zhǔn)，那么咱們的數(shù)碼設(shè)備、網(wǎng)站、內(nèi)容都需要在這個(gè)標(biāo)準(zhǔn)下有意識(shí)地兼容才行。

手勢(shì)交互的遺漏

全息影像是需借助手勢(shì)來(lái)進(jìn)行交互的。但是，我們目前尚且沒(méi)有掌握所有的 iPad 手勢(shì)，又談何全息影像的交互呢？如果這項(xiàng)技術(shù)最終在現(xiàn)實(shí)世界流行開(kāi)來(lái)，那么我們需要面對(duì)它相對(duì)陡峭的學(xué)習(xí)曲線。與此同時(shí)，即使具備了成熟的全套交互操作，能夠像 Tony Stark 一樣進(jìn)行交互的人畢竟還是少數(shù)，多數(shù)人可能依然需要借助一些工具來(lái)更好地和全息影像進(jìn)行交互，包括但不限于鍵盤和鼠標(biāo)這些傳統(tǒng)的交互工具。

結(jié)語(yǔ)：全息影像是未來(lái)嗎？

電影中一直在使用平面全息影像和立體全息影像，因?yàn)樗鼈冊(cè)诖鬅赡簧峡雌饋?lái)很贊，為用戶提供了頗為不錯(cuò)的視覺(jué)享受。這種交互式、透明的藍(lán)色界面已經(jīng)透過(guò)好萊塢，成為了未來(lái)設(shè)計(jì)的代名詞。如果科幻作品代表了我們對(duì)于未來(lái)的愿景，那是不是全息影像就是設(shè)計(jì)的未來(lái)方向？

或許是。從我們目前在 VR 和 AR 領(lǐng)域的探索來(lái)看，用戶的確非常想觸摸虛擬屏幕，用戶也想像 Tony Stark 一樣操作虛擬物品，就像我們上面提到的 Microsoft HoloLens 2 那種混合現(xiàn)實(shí)交互的前進(jìn)方向。實(shí)際上，現(xiàn)在的技術(shù)人員也在盡力借助產(chǎn)品來(lái)彌補(bǔ)虛擬環(huán)境下的感官體驗(yàn)，對(duì)于如今的 VR 設(shè)備而言，手持控制器是必不可少的，用戶要靠它們獲得觸覺(jué)反饋。

當(dāng)下我們所擁有的技術(shù)是遠(yuǎn)落后于科幻作品的，但是指向這個(gè)方向的研究，是一直在推進(jìn)的，起碼我們現(xiàn)在已經(jīng)攻克了一部分全息影像的可用性問(wèn)題。

作者：陳子木