相信許多同學對與“FUI”并不陌生，可能一提到這個詞大家首先想到就是漫威和 DC 科幻電影中主角的操作場景，例如漫威電影中鋼鐵俠的操作界面：
圖片源自 HUDS+GUIS
由于大家長期受到科幻電影影響，一度認為 FUI 即為“科幻界面設計”，這個定義真的是正確的么？大家可以短暫思考一下，帶著疑問繼續閱讀下面對 FUI 的定義，看是否和你想的一樣。
A.定義
為了讓大家更好的理解 “FUI” 的定義，我們將 “FUI” 這個詞拆開分別進行簡單解釋。在 FUI 中：
“U”代表用戶（User）
“I”代表界面（Interface）
“F”代表虛構的（Fiction）、未來的（Future）、幻想的（Fantasy）。
簡單點來講 FUI 就是：虛構的、未來的、幻想的用戶界面。
相信讀到這里大家已經對 FUI 有了初步的認識，“科幻界面”只是 FUI 中的分支，并不能完全解釋 FUI 。對與“虛構、未來、幻想”三個詞我們再做進一步分析解構：
a.虛構的
FUI 的專業術語是“虛構用戶界面”，其中包含各種“虛構”的用戶界面，即不真實，只是大膽的設想。例如人們大膽的設想宇宙飛船的界面設計，或者可穿戴的智能設備界面。
圖片源自 Behance
b.未來的
我們再回憶我們看過的科幻電影，在電影中它通常作為故事的一部分而創建。故事可以在不同的時間段進行設定，例如將來、當前或者過去。所以我們并不將 FUI 限制在“未來”用戶界面，它的時間線是相對的。不同時代的人們對于科幻電影的理解不一樣，所以大家對于未來的定義也有所不同，例如早年的《星球大戰》系列電影和《環太平洋》系列電影都屬于科幻電影，但存在的時間線卻有所不同，其中的界面設計風格也會因有所不同。
圖片源自 HUDS+GUIS
c.幻想的
關于“幻想”的用戶界面，人們腦袋可能首先閃過一些夸張虛幻、為人聳聽的畫面。就像《神奇博士》中的神奇博士進入多瑪姆的世界當中一樣。
圖片源自百度
“幻想”這個詞經常被用來描述哪些遠離現實的事情，這些事情難以被實現。百度百科中對幻想的解釋是“虛而不實的思想；沒有道理的想象；無根據的看法或信念；以理想或愿望為依據，對還沒有實現的事物有所象。”
關于“幻想”的用戶界面也可以包括基于現實和真實技術的用戶界面，因為人們在基于現實的基礎幻想也屬于幻想的范疇之內。例如寶馬的概念設計中，我們依然能看到現代的汽車設計的雛形，但也突破了現有的汽車設計狀態。
圖片源自 HUDS+GUIS
相信到這里大家已經對 FUI 的定義有一個較為清晰的概念，FUI 是虛構的、未來的、幻想的用戶界面設計，即進行大膽的假設虛構用戶界面，且并不受時間的限制的，遠離現實的幻想用戶界面。
2.FUI的優勢
相對于大眾接受度更好的扁平化，數據可視化設計卻對 FUI 的設計風格情有獨鐘，在筆者所接觸得到的數據可視化的設計中，無論是實際的工作項目還是一些概念稿的設計都頻繁用到 FUI 的設計風格。到底是什么原因讓市場對 FUI 接受程度如此之高呢？接下來我們從心理學、視覺、思維以及硬件幾個角度作為切入點來進行分析。
A.物以希為貴
羅馬人說：“物以希為貴。”因為在平時生活中極為罕見，則顯得十分珍貴。例如大家平時的在玩游戲的時候，游戲中“限定”的虛擬商品總是能夠比其它虛擬商品更加吸引玩家去購買，因為“限定”預示珍貴、與眾不同，即使價格高一點，玩家也能夠接受。例如最近王者榮耀中的新年限定皮膚，因為是“限定”，所以總是不斷的勾引用戶的錢包。
圖片源自 王者榮耀
同樣 FUI 的設計風格在整個設計行業屬于一個小眾的形式，我們在日常生活中難以接觸到，畢竟我們的日常生活中不可能出現宇宙飛船或者炫酷的機架。面對當今扁平化設計的主流趨勢，FUI 的設計風格會讓用戶耳目一新，接受程度會更高一些。例如在商品的展示中，同樣是 New Balance 的鞋子，你那種形式的展示會讓顧客更加愿意買單？
B.視覺優勢
相對于當前流行的扁平化設計，FUI 可謂是在 UI 設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。
作為主流趨勢的扁平化設計，無論是 Material Design 還是 iOS 都以深入人心，人們對扁平化的設計風格習以為常，已經很難在數據可視化的設計中進行視覺創新，而 FUI 的設計風格可以說是在數據可視化的設計中極具視覺優勢。
FUI 區別于我們平時所接觸的扁平化的設計，在視覺層面我們主要以色彩和圖形兩個方面進行分析。
色彩
a.背景
在背景的處理上常以深色的背景營造來營造強烈空間感，讓用戶感覺自己處在一個三維的空間當中，例如下圖，我們能夠感受到強烈的空間感，數據儀表盤處于一個具有縱深感的三維世界當中，視覺中心的數據顯示器與背景形成了鮮明的對比。
圖片源自 HUDS+GUIS
b.配色簡潔
在顏色的選擇上，借鑒了軍事設備中的配色準則，在殘酷的戰爭中“快速、準確、直接”是最重要的，所以在軍事設備上多以單一的冷色調為主，盡量避免多種色彩的使用，這樣對于操作者而言更加簡單。所以 FUI 的配色設計大多以冷色調為主，對比色通常作為輔助色用以反饋重要信息，例如在 007系列電影中的界面都是使用對比色反饋重要信息，如下圖中的坐標信息都使用了紅色作為突出重要信息的設計手段。
圖片源自 HUDS+GUIS
當然也有大量使用同類色的情況，例如 Sid Meier 中的飛船狀態頁面，著重表示當前的飛船的狀態，這樣在發生異常的狀況下可以立馬發現。
圖片源自 HUDS+GUIS
c.對比強烈
FUI 中的配色對比強烈，首先因為背景多以深色為主，強烈的對比能夠有效的拉開頁面中的空間感，例如鋼鐵俠中的史塔克戰役中頭盔的界面。
圖片源自 HUDS+GUIS
其次強烈的對比能夠突出核心信息，更好的進行信息反饋。例如下圖，強烈的對比能讓我們一眼就能看到核心信息，以及當前的狀態反饋
圖片源自 HUDS+GUIS
圖形
FUI 的圖形裝飾元素可以說是極其豐富，形式感很強。在設計的細節當中使用大量的“異形”的圖形元素，并輔以一定的裝飾元素。例如下圖：
圖片來自于 Grey Goo
a.軍事風格
FUI 的設計大量借鑒了軍事風格，其中也大量借鑒軍事操控的平臺的界面圖形設計，這里借鑒軍事風格的原因很簡單，因為在眾多的科幻、動作的故事題材中都是以軍隊或者其他超級團隊來去對抗惡勢力或者外星人入侵者，在界面設計上自然要延續其中軍事風格。
圖片源自Behance
細節上例如戰斗機上的 HUD 瞄準界面中的圖形多次被引用到飛船的操作界面上等等。
圖片源自 HUDS+GUIS
b.機甲元素的運用
大量異形元素的機架風格源于對機甲設計的靈感，并且在細節上使用大量的裝飾元素。
在細節上例如邊框和環形圖的設計，相對于扁平化的設計，FUI 的設計風格顯然更具視覺沖擊力。
圖片源自 HUDS+GUIS
C.突破思維限制
FUI 是一個非常有趣的 UI 設計領域，是我們在日常現實生活之中無法探索的用戶界面設計方式。在我們的日常工作中，通常普通設計師很難有機會為宇宙飛船、時間旅行設備，或者感知型人工智能和外星人使用的用戶界面做設計。
圖片源自 HUDS+GUIS
FUI 使設計師有機會去突破現有的用戶體驗和用戶界面的限制，探索一個新的領域。通過虛幻界面設計，我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想 AR 技術的應用，地圖可以采用全息投影技術、人與智能硬件的環境交互等等。
虛幻界面設計甚至可以是新的發明，它們可以作為一種概念的驗證，它們可以啟發我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣。虛幻用戶界面可以激勵人們為未來創造技術。
D.硬件載體
在我們之前提到影視故事中設定的使用場景多為宇宙飛船的指揮艙或者駕駛艙、可穿戴式AR設備等等，但在現實生活現在多以配備“大屏”的指揮廳為主，相對于我們平時使用的移動設備和 PC 臺式機，大屏的物理渲染尺寸更大，在比例上的差異也更大。如下圖：
由于硬件設施的變更，扁平化的設計無法滿足用戶的需求，主要原因有：扁平化設計力求干凈整潔，而在大屏中物理渲染尺寸的變大會顯得畫面格外空和呆板；其次是缺乏細節。而 FUI 的設計風格設計細節豐富，恰好可以補充其細節缺失的問題。
3.總結
數據可視化設計選擇 FUI 的設計風格有著必然的原因，首先是 FUI 的設計風格屬于一個小眾的設計風格，在這個扁平化當道的時代更容易吸引用戶的目光，接受程度高；其次是視覺沖擊力強，設計細節豐富，軍事風格和機甲風格的圖形在視覺上更加新穎；再者是“大屏”作為視覺載體，物理渲染尺寸比例的變更使得扁平化設計在大屏上顯得畫面不飽滿，缺乏細節，而 FUI 則恰好能夠補充這些空白；最后 FUI 可以幫助我們突破思維限制，尋求更好的解決方案。
借鑒參考：
《FUI-How-to-design-User-Interfaces-for-Film-and-Games》
圖片來源：
原文地址：海鹽社（公眾號）
作者：
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司