1. 程式人生 > >充滿未來和科幻的介面設計FUI在國內還沒有起步在國外早起相當成熟

充滿未來和科幻的介面設計FUI在國內還沒有起步在國外早起相當成熟

 

所謂FUI可以是幻想介面(Fantasy User Interfaces)、科幻介面(Fictional User Interfaces)、假介面(Fake User Interfaces)、未來主義介面(Futuristic User Interfaces)、電影介面 (Film User Interfaces)的簡稱。不管F代表什麼,都是代表了未來和科幻的意義。

 

概念太深奧了?或許我們先來一打圖片就更容易理解。

 

溫馨提示:本文論點需要大量酷炫精美圖片作例證,所以移動裝置瀏覽可能消耗不少流量。

 

《鋼鐵俠》中的FUI

 

《普羅米修斯》中的大螢幕牆

 

《復仇者聯盟》中的FUI

 

 

還有《逆時營救》中的FUI

 

《攻殼機動隊》中的FUI

 

《鋼鐵俠》中的FUI

 

 

在我們的年代我們可能終生都無法得見我們這個年代的FUI變成現實。但我們看到了五六十年代科幻電影裡的神奇之物變成了現實:安德的遊戲寓言了iPad,星球大戰則給了好多戰鬥機靈感,少數派報告裡出現了leap motion和空氣投影的技術。所以科幻電影就像一艘巨大的外星飛船降臨到我們百般聊賴的現實生活,令人著迷和眩暈。FUI主要的目的就是在電影或遊戲中展示科技的發達,比如鋼鐵俠的HUD FUI。當然你可能會說,這些FUI就是瞎編唄,但是說的容易做得難,要知道讓八隻觸手的外星生物或者斯塔克土豪順利地操作什麼鋼鐵盔甲或者一艘從超人老家來的飛船並讓觀眾相信這些都是真的還是蠻難的:需要以使用者(不一定是地球使用者)為中心設計。

 

 

FUI字典

 

 

這裡還要向您解釋幾個名詞:

 

1、UI是什麼?UI就是User Interface,使用者介面。目前我們國內婦孺皆知的職業,過年也不用擔心家裡人問我是幹嘛的了。使用者介面的視覺設計師被稱為UI設計師。UI指的是一切介面,那麼外星材料介質應該也算其中的一種螢幕對吧?

 

2、Motion Graphic是什麼?MG可以理解為動態圖形,我們的FUI一定要動起來才更加炫酷。當然在做FUI的動態圖形時不僅要酷炫,還要符合該程式的功能。在FUI裡的MG可以使用C4D或AE等軟體完成。電影會先錄下演員的操作,再加入MG到畫面上。所以在演員操作前就應該與導演溝通好HOW DOES FUI WORKS。

 

3、HUD是什麼?HUD是Head Up Display,就是運用在航空器上的飛行輔助儀器。飛行員在戰鬥機上一秒不停觀察窗外的情況(不觀察很容易被敵機擊落啊),手上又要操作那些複雜的按鈕,雖然我這輩子可能永遠無法理解那些按鈕是幹嘛的。那這樣不會很忙嗎?一會兒看看窗外一會兒低頭操作,所以為了讓飛行員也像開黑一樣方便,軍方設計了Head Up Display系統,就是把資訊用鐳射或者DLP技術投射在飛行員面前的玻璃上。當然這種技術很快也被遊戲領域學習,我們玩得很多遊戲都有HUD設計,從最早的PONG遊戲開始到現在很多的VR遊戲和穿戴裝置。很多汽車廠商也開始了HUD的應用了,但HUD仍然大部分以遊戲和電影出現。很多設計師也以HUD設計指代FUI設計。

 

4、DLP投影是什麼?Digital Light Processing。指的就是在螢幕上投射到螢幕的技術。這個技術是美國德州儀器的專利技術,HUD主流使用的技術就是這個。

 

5、FUI使用的工具是什麼?很遺憾地告訴你,FUI的設計工具並不來自未來,而是我們熟悉的PS,AI,AE,C4D等軟體,是他們組成了看似複雜無章人類無從下手的介面,是他們在奧創襲擊鋼鐵俠時幫助鋼鐵俠扭轉了局面....除了這些常見的軟體之外也有需要完成真實可互動的FUI的需求,那就需要像openframework和cinder或processing來做了。

 

 

FUI的分工

 

 

Director 導演並不止一人,而是方方面面有各類的導演。一般好萊塢負責和FUI直接面對面打交道的是特效導演。國內情況類似。

 

FUI Designer一般FUI是以工作室來為單位承包的。那麼工作室一般都是特效工作室,FUI設計師有點像Graphic Designer一樣承辦平面方面的設計,比如按鈕和資料的平面設計。那麼這樣的設計通常也是有AI等平面軟體完成的。在好萊塢越來越多有UI designer Background的設計師加入了FUI設計團隊,那麼就會誕生出很多互動更可信的介面來。

 

Mg Designer 一般MG DESIGNER多為動效師出身,他們把平面視覺元素用C4D或者AE等軟體與演員的表演串聯起來,形成了完整的畫面。這些軟體對平面資訊都有加強,比如可以設定疊色和發光等效果,增強畫面炫麗的感覺。

 

specialists 專家團隊是一個真正硬科幻的核心。外星人的語言需要聘請語言學家來指導,可互動介面需要聘請軟體互動設計師來指導。好的電影是不會有明顯Bug的。國內的影視劇也在努力,我看到很多電視劇最後的人員名單裡有一些專家時我就感到很欣慰。但是FUI目前在國內的發展確實比較緩慢。

 

 

FUI的設計分類

 

HUD頭顯FUI

 

《蜘蛛俠》中的HUD

 

鋼鐵俠的盔甲、戰爭機器的盔甲、蜘蛛俠(鋼鐵俠老闆送的)的盔甲,這些在高智慧AI控制下的超級英雄們要藉助HUD看清對手,然後幫助瞄準,然後輕鬆KO一下外星怪物什麼的。所以HUD作為第一視角當然是FUI設計的第一門類啦。一般來說頭顯裡面應該有些什麼呢?飛行的時候起碼應該有飛機的那套吧?垂直高度、水平、目的地距離、盔甲內溼度、電量。如果劇情需要,我們還可以增加:電子郵箱、電話、瀏覽器(不然你以為他們怎麼搜尋怪物的資料?當然是Google一下了)這些功能。如果怪物在對面,我們還可以給超級英雄們提供這些服務:對手的損壞程度、我方盔甲損壞程度、武器庫、子彈數量、暴走模式(很中二的蜘蛛俠就有一個暴走模式開關)。當然盔甲有一個SIRI一樣的AI角色可以和主角對話,否則不夠drama。如果必要時AI的形象也可以出現在我們的頭顯上。不過我自己而言,重要的是電影出現畫面時主角的臉不要被FUI擋住。

 

 

大螢幕FUI

 

大螢幕是指牆體上的大型螢幕設計。在故事情節中指揮中心裡的角色想了解劇情的推進必須藉助於超大的螢幕。在大螢幕中除了一些實時畫面外還有幫助指揮官和觀眾理解狀況的說明,這種說明一般以FUI窗體的形式出現。比如在銀翼殺手2049中,就有這樣的FUI。注:大螢幕主要功能是顯示,不是操作。所以主要以資料圖表為組成部分,互動很少。互動一般會給一個鏡頭給大螢幕底下的一群工作人員。

 

 

各類手持裝置FUI

 

手持裝置其實和我們現實中使用的尺寸差不多:手機型,平板電腦型,大號平板電腦型手持裝置。雖然尺寸類似,但科幻世界中的裝置無疑可以做到極致:真正的全面屏,全息投影,薄到不像話。一般在電影拍攝時FUI介面都是以真正的透明玻璃或者乾脆無實物的狀態來表演。在我們加入特效時演員已經錄製完成電影了。所以我們需要考慮操作的便利性和合理性來配合演員的操作:人類手指食指點選區域的平均值是7mm,而如果是綠巨人這個量級的使用者那麼我們可能需要把按鈕設計的儘量大一點才更加科學。如果我們的使用者是那種開掛的外星人那麼可能左右手都可以同時操作非常複雜的介面。同時外星人由於智力普遍比人類強,所以也可能介面和按鈕比人類介面複雜很多倍,這樣觀眾會更覺得外星人的智慧之高。如果我們在創作一個光速飛船的控制板,那麼飛船或者螢幕中的影象佔黃金比例1/3就OK,旁邊應該是一些狀態資料;比如飛船的熱量、位置、座標、氣壓、各個艙的安全程度這些。同時還需要有可操作面板,如:飛船的電源,氧氣閥門,助推器開關,連線地球通話等功能。但是操作上不要有太強的重複感,除了按鈕之外還可以設計如開關,滑動開關,圓形控制器燈。如果劇情需要我們具體操作一個功能,那麼為了說明還有其他的功能,可以設計介面導航和麵包屑導航。

 

 

電腦FUI

 

我們說的電腦就是我們目前的微型計算機COMPUTER。在電影裡我想沒有贊助哪家也不希望出現被咬開的蘋果或者DELL的logo。介面自然也是如此。我們需要設計一個獨立的OS,一個不同於大家常見的windows或者蘋果系統,這個系統的性質如果是比如FBI或者神盾局的絕密系統的話,那麼即使是普通電腦的畫面也會出現一些我們電腦中不常見的東西:DNA圖譜,絕密檔案庫字樣,輸入密碼之類的。

 

 

桌面虛擬實景FUI

 

Halo-Wars-2 by toroskose

 

 

桌面虛擬實景的操作員通常比較雞賊。從攻殼機動隊裡的老頭子或者是戰狼2裡的指揮官,都是不負責出生入死的,他們在虛擬實景面前拖著下巴思考晚飯的盒飯是什麼。桌面虛擬實景表達的概念就是通過鐳射投射等技術投射在桌子上的虛擬場景沙盤模型。在這種設計中我們必須藉助一些3D軟體才能完成這部分地形設計。通常需要考慮這些領導沒事兒幹喊一句:拉近點兒 這種餿主意。虛擬實景不僅可以根據你的手來回放大縮小,還可以旋轉,顯示主角的位置和敵人的數量等。在一些情況下我們還要顯示等高線來表示高度。等高線越密集說明海拔越高。

 

 

DNA圖譜類FUI

 

《GNOSIS》 by VLadislav Lysenco

 

 

如果你被一隻實驗用的蜘蛛咬到了,那麼第一件事就是你身體裡的細胞產生了變化吧。單純這樣的畫面應該由三維特效師來做,可如果視角是科學家的某種儀器的話我們需要一些科幻窗體來解釋一下這些dna的變化。用圖形影象來註釋這些變化更容易讓觀眾明白這種劇情。

 

 

瞄準器FUI

 

《GNOSIS》 by VLadislav Lysenco

 

 

瞄準器在電影裡都是第一視角,所以高科技的瞄準器都會伴有一些HUD的輔助功能。比如風力、風速、溫度、溼度、對手的體溫、資料、準確度等。

 

 

全息投影FUI

 

全息投影技術目前應用起來非常的困難。有材料的成本太高、限制太多等問題。但是在科幻世界裡這個技術應該是非常簡單的技術了。鋼鐵俠的全息投影更是結合了kinect的體感技術,憑空捏捏就完成了工業設計了。

 

 

全景透視FUI

 

《銀河護衛隊》FUI by Territory Studio

 

 

值得一提的是國內的《逆時營救》是我認為目前國產科幻電影中FUI做的最好的。國產電影中的FUI目前大部分都停留在特效層面,是由特效師而不是FUI設計師完成的,欠缺互動考慮。