為什麼科幻電影里見到的軟體界面 (FUI) 都是扁平化 (Flat Design) 風格?

或者籠統地說這是「扁平化」風格不夠嚴謹慎密。但,找到一個更合適的描述之前,我們能就用這個詞嗎,這個問題關注的重點是,為什麼 FUI 都這個風格?成因是什麼,有什麼歷史?

Fantasy User Interfaces, Fictional User Interfaces, Fake User Interfaces, Futuristic User Interfaces. Regardless of what the F stands for, they all represent the same thing, the user interfaces and heads up displays found in many popular movies and television shows. Most FUIs are not actual computer programs but simply animations being played back at the correct time or added in post production. These graphics and animations are designed in applications like Adobe Illustrator, Adobe After Effects and Maxon Cinema 4D. Kit FUI is an IMDb-like database that makes it easy to find screenshots, videos and the designers of these FUIs. via Kit FUI - Noteloop (強烈推薦此網站)


說都是為了讓你看不懂,所以不明覺厲,這是不準確的。至少有一部分還是合理的。

據我觀察,在透明的介質中顯示UI在科幻電影中是很常見的。因為如果使用一般的屏幕顯示軟體的UI,那主角在看屏幕的時候觀眾就只能看到主角的後腦勺了,這種情況下幾乎很難同時拍到主角的正面人臉和屏幕上的軟體UI。而透明的顯示介質則很好地解決了這種問題,再加上透明介質的顯示系統在現實中不常見,所以,採用這種方式來展示軟體UI也可以帶來更多的未來感。

擬物的UI已經被現實證明其在非透明顯示系統中的成功。但為透明顯示系統所設計的UI現在仍然不多見。那麼問題就來了,在透明介質上直接套用現在的擬物UI合適嗎?

日常生活中有很多按鈕是裝在不透明的牆上的,所以我在不透明的屏幕上顯示一個立體的按鈕可以讓用戶很快地聯想起「按鈕」這個概念。但,我們的生活中很少見到裝在透明的牆上的透明的按鈕,所以你確定在透明的顯示器上顯示一個立體的按鈕可以讓用戶很快理解那是一個按鈕?不會被誤解成透明玻璃板上的一坨水或者果凍嗎?

還有一種情況是主角需要透過屏幕去觀察外面的情況,透明屏幕上顯示的東西只是用來輔助他做出某些判斷的,比如鋼鐵俠的頭盔上的軟體UI和類似於戰鬥機駕駛艙中顯示在駕駛員前面的瞄準系統的UI,如果設計成那種立體的擬物UI,比如把瞄準用的紅色框框顯示成立體的機械式瞄準框一樣的東東,你不覺得顏色變化過於豐富會導致實用性下降嗎?

擬物的UI企圖讓用戶將UI和現實中的物品建立映射,幫助用戶理解UI的含義,但並不是所有的場合都需要這樣的設計,因為就像透明介質表面的透明按鈕一樣,有些東西在日常生活中是不存在的,而且,有的時候功能比「易於理解」更重要。


看了上面一圈,沒有一個對的!!!!!!
原因很簡單,這些科幻界面,就是現實生活中,專業顯示器界面的延伸

這種科幻風格,只是專業設備上的界面,不會出現在日常的應用上面,普通人是用不了的。這與iOS、wp7的所謂「扁平化」沒任何關係,更不會證明什麼「扁平化還是擬物化哪個是趨勢」。

可以參考一些專業的顯示器,如醫院的呼吸監測系統、胸透掃瞄器,機場雷達系統,戰鬥機的hud顯示器等:

↑醫療專業

↑醫療專業

↑坦克內部顯示器

↑坦克內部顯示器

↑戰鬥機座艙顯示器

↑戰鬥機座艙顯示器

這些界面這樣設計的原因只有一個:

最直接、準確的顯示數據,不加任何干擾

而科幻電影中操作的設備、載具,其界面就是上面這類的延伸,在此基礎上更複雜化,設計出更新穎、幻想顯示數據的模型。

——————————
我自己是愛死這種界面了,看科幻電影,一是機械設定,而是FUI設定。臨摹過一個界面:

原圖在此:

原圖在此:AdvancedUI: Status Screen


「部分科幻電影上的軟體設計純粹是為了讓你看不懂……試問天天面對命令行的極客需要擬物界面嗎?」

開始不太同意這個答案,想反對一下,後來發現人家一開始就說了「部分科幻電影」,那我就來補充一下「另外一部分「吧。

科幻中的操作界面也不一定就非得是《黑客帝國》那樣的命令行。全息投影+體感交互也是很常見的一類,比如《少數派報道》和《鋼鐵俠》里的那種:

這些都不是命令行,而是一種GUI。

這些都不是命令行,而是一種GUI。

再比如《三體 II》中地球艦隊飛船的操作界面:

這艘太空巨艦,體積相當於三艘二十一世紀海上最大噸位的航空母艦,幾乎
是一座小城市,但既沒有駕駛艙和指揮艙,也沒有艦長室和作戰室,事實上,任
何特定功能的艙室都沒有,艦上的艙室幾乎都一樣,都是規則的球形,只是大小
不同。在艦上的任何位置,都可以用數據手套激活全息顯示屏,這在已經超信息
化的地球世界都很少見,因為在那裡,全息顯示也是很昂貴的東西。同時,在任
何位置,只要擁有相應的系統許可權,就可以調出完整的各級指揮界面。包括艦長
指揮界面,也就是說,艦上的任何地方都可以成為駕駛艙、指揮艙、艦長室或作
戰室,甚至包括廊道和衛生間!在章北海的感覺中,這很像二十世紀末計算機網
絡系統的演變,那是由客戶,伺服器模式,向流覽器/伺服器模式的轉變,前者
只能在安裝了特定軟體的計算機上才能對伺服器進行存取,而後者,用戶可以在
網路任何位置的計算機上訪問伺服器,只要有相應的許可權就行。

我覺得這裡的指揮界面不太可能是純粹的命令行,圖形化方式能直觀地顯示各種戰場信息,讓指揮者的思維集中在分析戰場形式並做出決策。參考後面艦隊遭到水滴攻擊時的另一段描寫,發現很多諸如數據處理和命令執行的細節工作都被分派到了低級別的船員那裡,它們的處理結果將匯總起來以簡潔直觀的方式在指揮界面上顯示。所以,作戰的時候指揮官是在打星際,而基層船員是在做信號處理作業。

另外,我也覺得這些被虛構出的操作界面和現實中的扁平或擬物沒太大關係,重要的是突出未來感,所以在這些界面里扁平或擬物的元素都有不少,比如《鋼鐵俠》的界面風格看起來很扁,但戰甲的模塊是以擬物方式顯示的,所以簡單的把它們劃入某一類是不合適的。

==============update================

相比界面風格,我倒是覺得這些界面顯示出一種功能上的「扁平化」。現實中如果我想訪問一個文件(或啟動一個程序,其實是一回事),需要先找到到這個文件。因為現在系統中的文件都是按層次結構組織起來的,這就意味要按一個路徑找過去才能訪問到文件。就像「前者只能在安裝了特定軟體的計算機上才能對伺服器進行存取」一樣,這也是只有在特定位置才能執行的操作,而這些科幻作品中的界面大多沒有這個限制,只要你有許可權,界面上隨手拉一個框框出來就能完成操作。
現實中使用一些快捷鍵(或手勢)可以達到類似的效果,省去了定位文件的過程,直接看到結果,但比起科幻作品中的描述還是弱爆了,嗯,這樣就突出了未來感。

最後,其實每次看到這樣的問題我的第一反應都是……

但是這和隨口就說「認真你就輸了」的傢伙一樣讓人討厭,故事是虛構的,但是討論故事並因此而獲得的快樂是真實的。─=≡Σ((( つ??ω??)つ

但是這和隨口就說「認真你就輸了」的傢伙一樣讓人討厭,故事是虛構的,但是討論故事並因此而獲得的快樂是真實的。─=≡Σ((( つ??ω??)つ

==========update==========
今天看到了這麼一篇文章 20130715早讀課:讓界面扁平不如讓信息層級扁平 感覺挺適合放在這裡和大家分享的


我們公司的軟體產品基本都是這種風格,我們做的公安指揮調度中心的大屏幕調度台軟體,醫療行業和製造業的數據軟體,還有證券金融業的軟體,這些行業的用戶關注不是按鈕和邊框,他們只在乎數據,所以這種風格的界面最適合他們,並且我們把數據都圖形化去實現,有些做成動態的數據圖形。科幻電影里的那些界面,其實風格和實用不矛盾,炫和實在也不矛盾。關鍵在於電影里為了突出效果而可以的做了很多繁冗複雜的動態動畫,就是滿篇幅的元素都在動,動的還特別快,看著很誇張而已。這樣設計很有設計感,很酷,但實際情況是沒有這麼多數據量和動畫,因為機器和軟體都跑不動,而且過多的數據不符合人體工學,在快速識別上不現實,電影里的用戶都是宇宙飛船的戰鬥員,受過專業訓練,或者是斯塔克這種智商超群的科學家,大腦才能同時處理這麼多數據。實際生活中,尤其是那些調度中心的公務員,你要做成這麼複雜,他們早瘋了。不過未來的界面設計是有可能這麼誇張,因為這種風格本身沒什麼問題其實,在專業領域已經很常見。


看到樓上有人 說不可能請專業的設計師來做,你還真說錯了,鋼鐵俠等幾個大片中的那些界面,還真是專業的設計師做的,fake UI 這類的設計師有不少,來個栗子:.work | GMUNK

還有國外的一些良心科幻片是國內的那幫洗錢電影沒法比的,別用國內那幫水貨的眼光去猜測國外的一些良心製作,不少現實中的產品來自於科幻片也不是鮮例了,對吧。

回歸正題,扁平化一直被用來襯托未來的世界,而扁平化的流行是不是基於科幻電影,誰又能說個明白呢


1,從交互和展現內容的角度看。電腦里的科技系統,大部分都是數據分析型的,並不是提供給普通的用戶,而是用於專業人員的數據分析。因為是未來,所以大部分的操作已經不需要滑鼠點點某個按鈕,而是用手勢直接操作數據,包括分割數據、刪除數據(手掌捏住猛的甩出屏幕)、調取數據等手勢。我們現在討論的扁平化、擬物化,大多是對輔助界面元素、控制項的風格的定義。沒有人給某個數據加上某個木材的質感吧!
2,除了個別的電影里的系統外,大部分的,還是停留在過去的黑客帝國模式上吧,刷刷的代碼,和變換的看不懂的代碼。為了不存在的東西,特意做一套真正的系統,估計成本和周期也很長。

P.s. 最近看的《速度與激情6》裡面的追蹤界面雖然看上去很高端,但是界面框框都是紅色的,看上去,好像就在到處報錯一樣,這種界面感覺應該就是隨便搞個人設計下裝裝樣子,沒怎麼特意去設計。


兩個原因:

  1. 扁平化的設計更多是為了更好地呈現內容和數據,避免過多視覺元素對信息辨識造成干擾。
  2. 在某些電影場景中(體現科技感),扁平化的設計能更好地配合場景畫面。

電影中的 FUI 大多數出現於作戰指揮、監視、觀測等較為專業的應用場景,對信息展示高度敏感,扁平化的呈現無疑是優選的方案。如下圖

出自《エウ?ァンケ?リオン新劇場版:破》

出自《エウ?ァンケ?リオン新劇場版:破》


電影中為了表現出科技感,往往會設置一些效果場景,如增強現實。在這種場景下,扁平化的設計對視覺的干擾較小,且不會跟畫面主要內容「搶鏡」。如下圖

出自《Psycho Pass》

出自《Psycho Pass》

貼一張大學時臨摹的界面,看起來更清楚一點。


我就吐槽下,不是科幻電影「都」這樣,只是你看的科幻電影比較新——好吧,是我看的電影比較舊……
老機械戰警(94):

老全面回憶(90):

老全面回憶(90):

黑客帝國1(99)

黑客帝國1(99)


我沒記錯的話,題目里這種風格在科幻電影里流行起來是《阿凡達》帶的頭(←此處憑印象說的,存疑。評論里 @罈子鴉 提醒的是,應該是少數派報告在前。)


部分科幻電影上的軟體設計純粹是為了讓你看不懂。

但也有一部分做了許多人性化的全息投影的特效,目的還就是讓你看懂!但即使是這部分電影鏡頭裡,還是有題主所謂扁平化設計,暗色背景,充滿科技感的幾何圖形,給電影做動畫的人,還是懂設計的。
之所以這樣設計,是因為他們要暗示你,這些軟體即使設計得再神奇(交互方式是智能
的),也只有高科技人士、極客、機要部門的人才會用。
試問天天面對命令行的極客需要擬物界面嗎?


個人認為,當科技發展到一定階段,只要設計者願意,虛擬現實和現實之間的界限是難以劃分的,有必要通過扁平化強行區分兩者的區別,以避免人類認識上的錯亂感。畢竟多數情形下,現實才是主要目標,虛擬現實的界面和輔助數據是從屬地位的。

不管影片拍攝公司是出於什麼考慮這麼做了,至少我堅信界面的扁平化是長遠趨勢,而不是因為吃膩了擬物化的大餐後的螺旋迴歸。


擬物化的界面需要模仿當前現實中存在的東西,對於科幻電影來說你模仿什麼都不合適,唯有扁平化。


看了樓上各種答案開了眼界了,還想補充一個比較淺顯的。

科幻電影往往講的都是未來的故事,如果採用擬物化設計,是以現代的物作為參考呢,還是再重新設計出新的物作為參考?這是一個問題。

舉個例子,現在的單反相機都長得差不多,因此擬物化的相機圖標用一個現在單反相機的模型就行了。但是沒人能保證往後幾十年上百年相機會變成什麼樣子,那麼科幻電影設計者要不要先設計一個未來相機的樣子然後再以此為參照做圖標呢?這很難選擇吧。

因此乾脆做扁平化,既保證了科技感,又避免了設計難題。


雖然只是電影,也許導演並沒有深入思考軟體界面會如何演進,只是主觀的感覺扁平化應該比較符合未來,其實這種直覺相當準確的!
隨著科技的發展,現實和虛擬界限越來越模糊,科幻代表未來科技,可以預見,未來憑人的肉眼無法分辨虛擬出來的現實和真實的現實哪個是真的,所以想表達這是虛擬的,那必須扁平化!因為:這是虛擬的,所以可以用手點擊、拖拽,而不是撫摸、捏、抱。
設計是包裝數據的,擬物設計非常棒,他能返璞歸真,符合人類親近自然的天性,但是它反饋回來的數據不是天然的,是人造的,兩者有不可逾越反差。
設計是藝術,會天然迴避擬物,現在畫家、藝術家的作品已經越來越抽象,因為真實交給照片、視頻去了。


記得不知從哪看過一個說法,擬物化在互聯網發展的早期是有一定作用的,方便剛接觸到電腦的人們迅速憑藉著在現實世界裡養成的習慣適應虛擬世界。但隨著人們對技術的掌握和知識水平的提高,擬物化就會顯得非常的笨拙,沒有存在的必要。以現實世界的標準模擬出一個虛擬世界,是一種效率很低的選擇。就像人們使用瀏覽器時,學會了滑鼠手勢和快捷鍵就會覺得用滑鼠去點一個個按鈕非常麻煩甚至愚蠢。所以拋棄擬物化是現在的趨勢,而完全拋棄圖形界面讓所有人去擼代碼同樣是簡潔的另一種誤區,對大多數人來說同樣是沒有效率的。而抽象而精簡的圖形頁面比如扁平化,恰恰處於兩者之間。


看到這個問題,我真想說:
有些人討論扁平化是不是有點走火入魔了!


影片中的GUI分為兩種:一是展示炫酷的未來風格,二是展示給觀眾必要的情節。
前者的設計原則就是炫酷,目標是要觀眾「眼花繚亂」,所以要有多個元素在同時進行動畫操作,旋轉、移動、縮放、變色等等,電影看完了也沒整理出頭緒,新鮮感還沒過;
後者的設計原則是易懂,目標是要觀眾看一眼就知道發生了什麼事,動畫點最多只有一個、焦點突出、配色符合日常習慣,意義表達明確。總共展示的時間也不超過兩秒鐘,再花三秒鐘去解讀,就跟不上劇情了。

什麼樣的設計可以同時達到這兩個目標呢?抽象的線條、圓圈就足夠了,你搞個擬物的,就會顯得很喧嘩。


這並不是真正意義上的扁平化設計理念吧,只是採用了一種扁平化的展示方式而已。當大量且多層次的數據文字信息需要展示給用戶的時候,不在扁平界面上展示用戶會覺得很混亂的吧。這類信息也沒法用擬物來傳達,如果用代碼,那還叫科幻電影嗎?GUI是發展的趨勢那是必然的。

在《普羅米修斯》裡面勘探地形的軟體界面就是三維立體的,因為需求是這樣的,只有用三維立體圖像才能更好展現地形的真實狀況,這裡要傳達的是圖像信息,所以不在扁平界面上展示,否則還要用戶根據等高線地形圖自己來判斷。

吐槽一下,科幻電影的FUI看著很炫,有些可供未來的研究方向借鑒,但例如《少數派報告》FUI就是純粹的炫技而已,那種交互方式很不科學、不夠人性化,一直舉著手臂做著大幅度的動作,這真的不是運動器械嗎……?!根本不符合發展趨勢


嘛,我來回答一下吧。首先你得清楚什麼是FUI。

大多數人都認為,簡單的,平面化的設計就叫FUI。簡單的、平面化的是對的,但是卻不僅僅於此而已,FUI更注重的是信息的表達。充分的把信息的層次,分類,以最簡單的形勢做有效區分,摒棄擬真的元素是為了最大限度的減少視覺干擾。當信息獲取變的簡單以後,用戶從繁瑣的信息中獲取自己想要的內容就更加的方便和輕鬆了。

從po主提供的照片我們不難看到,每一張圖中所展示的信息內容都很多,如果這個時候還是以擬真的UI來展示,我想是po主你自己,也會瘋掉的吧。

再來就是顯示環境,擬真的UI元素應用到圖中的場景,5.2的眼睛要想很清晰的分辨信息,也會非常的費勁,更別說在面臨戰爭的時候還得更快速、更精確,更高效的去用user的那雙氪金X眼去獲取信息了。那會直接讓你想撞牆死掉的。

說了這麼多,稍微總結下就是科幻電影都用Flat Design來設計界面,並不是為了酷和炫。當然,其實也有酷、炫的因素在裡邊,但更多的,是真正的考慮到了應用場景,用戶體驗等一些專業層面的知識。


比較主觀的意見:扁平化看起來更精緻,可疊加很多內容而不會被嫌多,還更顯神秘。


其實這些都是flash


推薦閱讀:

TAG:用戶界面設計 | 科幻電影 | 扁平化設計 (Flat Design) | FUI (Fictional User Interfaces) |