您當前的位置:首頁 > 動漫

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

作者:由 AALab 發表于 動漫時間:2018-09-19

2008年,漫威選擇了一個二線演員拍攝了一個二線漫畫人物——鋼鐵俠,卻勢如破竹,漫威電影宇宙剛剛破殼就成為票房收割機。鋼鐵俠,託尼·斯塔克(由小羅伯特·唐尼飾演)正常人類,毫無超能力,僅僅憑藉科技也能夠拯救世界。這或許是更貼近新世紀大眾們的幻想吧。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

當然,鋼鐵俠所使用的科學技術在現實世界裡還沒有發展起來,或者僅僅有概念和雛形。但是,託尼·斯塔克的現代化工作室、鋼鐵俠機甲、新鮮科技的小玩意,無疑不令人嘖嘖稱奇。如果說電影《

鋼鐵俠

》是一場視聽盛宴,那具有未來感的使用者介面(User Interface)便是主力之一, 電影界通常簡稱其為FUI。

什麼是FUI?

UI似乎還好理解,

使用者介面Use

r Interface 就是我們和系統之間進行資訊交換和互動的介面。所謂FUI可以是幻想介面(Fantasy User Interfaces)、

科幻介面

(Fictional User Interfaces)、假介面(Fake User Interfaces)、

未來主義

介面(Futuristic User Interfaces)、電影介面 (Film User Interfaces)的簡稱。

舉個簡單的例子,一部六十年代的科幻電影,

庫布里克

天才的《2001:太空漫遊》中,裡面預言了幾十年後的iPad,宇航員在執行

火星

任務時,使用IBM Tele Pad看新聞,這裡的UI也是FUI。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

FUI在科幻電影中是十分的常見。F當然可以指fiction(科幻),同時F也是fantasy(幻想)、futuristic(未來的)。總而言之, FUI主要就是用來展示科技的發達,一方面表現先進生產力視覺上該有的樣子, 另一方面也為電影敘事提供了更令人信服的情景。

其實,F也可能暗指fake(假的)。實現FUI的工具並不“科技“,通常是我們熟悉的PS、AI、AE、C4D等設計軟體。當然了,如果需要真實可互動的FUI,設計師們也會使用openFrameworks、cinder或processing。

FUI在《鋼鐵俠》中的應用

《鋼鐵俠》三部曲分別拍攝於2008、 2010和2013年,雖然仍是美式超級英雄的故事模版, 反派也涵蓋了不甘心的合作伙伴、競爭對手、為父親報仇的科學狂人、被冷落而逆襲的懦弱青年,我們卻可以清晰地看到主人公在

機甲技術

和自我認識上的成長。由於不同的背景,影片中FUI出現的場景、頻率和色調搭配在三部作品中也不大相同。

在《

鋼鐵俠1

》(2008)中,FUI的色彩比較單一。託尼·斯塔克的工作室環境有多臺電腦環繞,青色的原色基調,用來烘托科技感和主人公對研發機甲的專注程度。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

在設計機甲時, 3D的設計模型被直接投射到工作臺上方的空間中,託尼·斯塔克透過手勢檢視模型的位置、設計零件。這簡直是設計師的夢想呀。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

更炫酷的出現了。 託尼·斯塔克沉默地用筆安裝操控一個黃色抽象原點的位置,令其直接飛到了發揮功能的位置,不知道是這裡資訊傳遞的方式是意念傳輸,還是設計軟體本來就有智慧屬性。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠使用的FUI中,HUD(Head Up Display,平時顯示器)的原創設計得到了業界的普遍好評,影響了很多電影。託尼·斯塔克的機甲頭盔會實時反饋外部資訊,輔助其操作,這種技最早使用於戰鬥機飛行員,很快被遊戲領域借鑑。從PONG遊戲到很多的VR遊戲和穿戴裝置,我們都能看到HUD的應用。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

現實生活中飛行員使用的HUD

鋼鐵俠的設計團隊希望能夠展示一個具有三維深度的HUD,HUD應該建立在曲線模型上。其靈感來源之一是《2001:太空漫遊》。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠HU

D的另一創新之處是創造了頭盔內的有機虛擬環境。電影中,觀眾可以看到託尼·斯塔克與他的AI JARVIS之間進行的對話。同時,HUD在銀幕上的展示跟隨託尼·斯塔克的動作而轉動。HUD的出現、螢幕中展現的引數會根據機甲動作時的需求出現和消失,這創造了更真實的體驗。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

當機甲在空中翻轉的時候,HUD分成了明顯的兩個層次。顯示機甲引數的監視系統依舊與託尼·斯塔克保持在同一個

座標參考系

中,而螢幕中心不斷旋轉的則是機甲的相對地面的角度。這是Mark II的第一次試飛,JAVIS說還有100多萬兆的計算才能飛行,所以有很多不穩定的情況,HUD這樣的動效設計也符合敘事邏輯。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

此外,在HUD的動效展示中,導演增加了許多主觀鏡頭,讓觀眾透過託尼·斯塔克的眼睛去看,帶入感更強,配合鋼鐵俠此起彼伏的飛行和戰鬥,觀影者的感官進一步得到刺激。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

FUI背後的技術支援

完成這一系列的動效並不簡單, 設計團隊The Orphanage在NUKE中設計了一套具有70多個元素的系統,甚至包含了演員眼球中反射的影象。模型還可以被翻轉到演員的背面觀察這些UI設計,幫助設計師體驗HUD使用者的視角。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

電影敘事決定FUI

Mark II的HUD設計基調是青色的,這是自90年代以來科幻電影FUI常常使用的顏色。而在Mark III中,HUD的主題顏色進化為白色,綠色、紅色的引數或警報得到強調,比如電池餘量,這也是在Iron Monger的交戰中十分重要的表現戰鬥程序的道具。

當Mark II被更新至Mark III,HUD的設計明顯變得精緻了,這本身也是故事發展的一部分。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

不同的顏色也表達了不同的人物性格。 不滿付出回報比的父輩合作伙伴,俄巴迪亞·斯坦,穿著的Iron Monger的HUD便是火紅色的主題,展現了人物陰暗的性格和復仇的怒火。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

到了《鋼鐵俠2》,

斯塔克

痴迷於開發鋼鐵俠機甲,自我也進一步膨脹。因而,相比於第一部電影中單色調的FUI,這部影片中FUI的色彩也豐富了許多。 裝置上,也脫離了硬體,很多FUI都是空間投影的形式。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

當他和小辣椒Pepper在爭論的時候, 他們周圍充滿著彩色的機甲設計圖。斯塔克甚至將廢棄的電子設計影象廢紙一樣團成一團,投進牆上根據斯塔克需要變化成飛鏢盤的垃圾桶。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

除了3D設計圖,斯塔克還利用全息攝影的技術將父親建造的工廠羅盤直接掃描成為資訊圖, 發現了新的元素,解救了鈀元素中毒的生命危機。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

此外,在影片中,

託尼·塔斯克

的仇敵伊凡·萬科生活在莫斯科,境況不佳。 因而,他在本土的工作室有一種

賽博朋克

的風格。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠3

》(2013)中,超級英雄因為在

紐約大戰

中受到了挫折,開始懷疑自己。因此,影片並沒有著重敘述機甲的研發,這也為影片最後託尼·斯塔克拋棄鋼鐵盔甲的禁錮,重拾自信做鋪墊。影片中唯一比較集中使用FUI的情節出現在斯塔克對其昔日貼身保鏢遭受的恐怖襲擊的資料的分析。

此次的投影更加誇張,斯塔克等比還原了恐襲現場,調取資料即時生成立體的

柱狀圖

。這種三維的增強現實(

augmented reality

)的應用是一種十分有效的資料分析形式。

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

鋼鐵俠電影裡那些漂亮酷炫的動畫介面 | FUI

不難發現,鋼鐵俠三部曲中的FUI離我們的生活並不遙遠,甚至僅僅是現實科技的華麗版本。 從2008年到2013年,斯塔克使用的計算機工具脫離硬體的限制,介面更有設計感,不也正發生在我們的生活中嗎?我想,這樣的FUI設計也增添了這部超級英雄電影的寫實元素,使觀眾們更能感同身受吧。

——

演算法藝術實驗室

探索數學與程式設計在設計與藝術中一切之可能

用運算和美學讓你變更酷

探索程式設計和數學在藝術和設計中一切可能性,形式不限,藝術創作,跨界合作,展覽展示,品牌活動等。建設和維護中國本土創意程式設計和演算法藝術社群、開展線上教學、舉辦社群活動、策劃舉辦藝術展覽、挖掘發現本地社群裡值得被傳播的人和事透過自媒體進行傳播。

標簽: FUI  斯塔克  HUD  機甲  託尼