FUI的準確定義是什么？為何FUI設計風格如此受歡迎？FUI有哪些優(yōu)勢呢？

隨著大數(shù)據(jù)行業(yè)的不斷發(fā)展，數(shù)據(jù)可視化設計也越來越多的服務于政企的業(yè)務工作。在數(shù)據(jù)可視化設計當中不可或缺就是 FUI 的設計風格，無論是政企的用戶還是設計師都對它十分青睞。

為什么會如此受歡迎呢？在這里向大家提出兩個問題：

1. 大家對于 FUI 的定義是怎樣的認識？

2. FUI 的優(yōu)勢有哪幾點？

如果你心存疑問，心里沒有明確的答案，那就帶著這兩個問題繼續(xù)閱讀以下內(nèi)容，讓我們一起探討 FUI 對于數(shù)據(jù)可視化設計的重要性。

一、FUI的定義

相信許多同學對與“FUI”并不陌生，可能一提到這個詞大家首先想到就是漫威和 DC 科幻電影中主角的操作場景，例如漫威電影中鋼鐵俠的操作界面：

圖片源自 HUDS+GUIS

由于大家長期受到科幻電影影響，一度認為 FUI 即為“科幻界面設計”，這個定義真的是正確的么？大家可以短暫思考一下，帶著疑問繼續(xù)閱讀下面對 FUI 的定義，看是否和你想的一樣。

1. 定義

為了讓大家更好的理解 “FUI” 的定義，我們將 “FUI” 這個詞拆開分別進行簡單解釋。在 FUI 中：

“U”代表用戶（User）；

“I”代表界面（Interface）；

“F”代表虛構的（Fiction）、未來的（Future）、幻想的（Fantasy）。

簡單點來講 FUI 就是：虛構的、未來的、幻想的用戶界面。

相信讀到這里大家已經(jīng)對 FUI 有了初步的認識，“科幻界面”只是 FUI 中的分支，并不能完全解釋 FUI 。對與“虛構、未來、幻想”三個詞我們再做進一步分析解構：

a. 虛構的

FUI 的專業(yè)術語是“虛構用戶界面”，其中包含各種“虛構”的用戶界面，即不真實，只是大膽的設想。例如人們大膽的設想宇宙飛船的界面設計，或者可穿戴的智能設備界面。

圖片源自 Behance

b. 未來的

我們再回憶我們看過的科幻電影，在電影中它通常作為故事的一部分而創(chuàng)建。故事可以在不同的時間段進行設定，例如將來、當前或者過去。所以我們并不將 FUI 限制在“未來”用戶界面，它的時間線是相對的。

不同時代的人們對于科幻電影的理解不一樣，所以大家對于未來的定義也有所不同，例如早年的《星球大戰(zhàn)》系列電影和《環(huán)太平洋》系列電影都屬于科幻電影，但存在的時間線卻有所不同，其中的界面設計風格也會因有所不同。

圖片源自 HUDS+GUIS

c. 幻想的

關于“幻想”的用戶界面，人們腦袋可能首先閃過一些夸張?zhí)摶谩槿寺柭牭漠嬅?。就像《神奇博士》中的神奇博士進入多瑪姆的世界當中一樣。

圖片源自百度

“幻想”這個詞經(jīng)常被用來描述哪些遠離現(xiàn)實的事情，這些事情難以被實現(xiàn)。百度百科中對幻想的解釋是“虛而不實的思想；沒有道理的想象；無根據(jù)的看法或信念；以理想或愿望為依據(jù)，對還沒有實現(xiàn)的事物有所象?！?/p>

關于“幻想”的用戶界面也可以包括基于現(xiàn)實和真實技術的用戶界面，因為人們在基于現(xiàn)實的基礎幻想也屬于幻想的范疇之內(nèi)。例如寶馬的概念設計中，我們依然能看到現(xiàn)代的汽車設計的雛形，但也突破了現(xiàn)有的汽車設計狀態(tài)。

圖片源自 HUDS+GUIS

相信到這里大家已經(jīng)對 FUI 的定義有一個較為清晰的概念，F(xiàn)UI 是虛構的、未來的、幻想的用戶界面設計，即進行大膽的假設虛構用戶界面，且并不受時間的限制的，遠離現(xiàn)實的幻想用戶界面。

二、FUI的優(yōu)勢

相對于大眾接受度更好的扁平化，數(shù)據(jù)可視化設計卻對 FUI 的設計風格情有獨鐘，在筆者所接觸得到的數(shù)據(jù)可視化的設計中，無論是實際的工作項目還是一些概念稿的設計都頻繁用到 FUI 的設計風格。

到底是什么原因讓市場對 FUI 接受程度如此之高呢？接下來我們從心理學、視覺、思維以及硬件幾個角度作為切入點來進行分析。

1. 物以希為貴

羅馬人說：“物以希為貴?！币驗樵谄綍r生活中極為罕見，則顯得十分珍貴。例如大家平時的在玩游戲的時候，游戲中“限定”的虛擬商品總是能夠比其它虛擬商品更加吸引玩家去購買，因為“限定”預示珍貴、與眾不同，即使價格高一點，玩家也能夠接受。例如最近王者榮耀中的新年限定皮膚，因為是“限定”，所以總是不斷的勾引用戶的錢包。

圖片源自 王者榮耀

同樣 FUI 的設計風格在整個設計行業(yè)屬于一個小眾的形式，我們在日常生活中難以接觸到，畢竟我們的日常生活中不可能出現(xiàn)宇宙飛船或者炫酷的機架。面對當今扁平化設計的主流趨勢，F(xiàn)UI 的設計風格會讓用戶耳目一新，接受程度會更高一些。例如在商品的展示中，同樣是 New Balance 的鞋子，你那種形式的展示會讓顧客更加愿意買單？

2. 視覺優(yōu)勢

相對于當前流行的扁平化設計，F(xiàn)UI 可謂是在 UI 設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。

作為主流趨勢的扁平化設計，無論是 Material Design 還是 iOS 都以深入人心，人們對扁平化的設計風格習以為常，已經(jīng)很難在數(shù)據(jù)可視化的設計中進行視覺創(chuàng)新，而 FUI 的設計風格可以說是在數(shù)據(jù)可視化的設計中極具視覺優(yōu)勢。

FUI 區(qū)別于我們平時所接觸的扁平化的設計，在視覺層面我們主要以色彩和圖形兩個方面進行分析。

3. 色彩

a. 背景

在背景的處理上常以深色的背景營造來營造強烈空間感，讓用戶感覺自己處在一個三維的空間當中，例如下圖，我們能夠感受到強烈的空間感，數(shù)據(jù)儀表盤處于一個具有縱深感的三維世界當中，視覺中心的數(shù)據(jù)顯示器與背景形成了鮮明的對比。

圖片源自 HUDS+GUIS

b. 配色簡潔

在顏色的選擇上，借鑒了軍事設備中的配色準則，在殘酷的戰(zhàn)爭中“快速、準確、直接”是最重要的，所以在軍事設備上多以單一的冷色調(diào)為主，盡量避免多種色彩的使用，這樣對于操作者而言更加簡單。所以 FUI 的配色設計大多以冷色調(diào)為主，對比色通常作為輔助色用以反饋重要信息，例如在 007系列電影中的界面都是使用對比色反饋重要信息，如下圖中的坐標信息都使用了紅色作為突出重要信息的設計手段。

圖片源自 HUDS+GUIS

當然也有大量使用同類色的情況，例如 Sid Meier 中的飛船狀態(tài)頁面，著重表示當前的飛船的狀態(tài)，這樣在發(fā)生異常的狀況下可以立馬發(fā)現(xiàn)。

圖片源自 HUDS+GUIS

c. 對比強烈

FUI 中的配色對比強烈，首先因為背景多以深色為主，強烈的對比能夠有效的拉開頁面中的空間感，例如鋼鐵俠中的史塔克戰(zhàn)役中頭盔的界面。

圖片源自 HUDS+GUIS

其次強烈的對比能夠突出核心信息，更好的進行信息反饋。例如下圖，強烈的對比能讓我們一眼就能看到核心信息，以及當前的狀態(tài)反饋

圖片源自 HUDS+GUIS

4. 圖形

FUI 的圖形裝飾元素可以說是極其豐富，形式感很強。在設計的細節(jié)當中使用大量的“異形”的圖形元素，并輔以一定的裝飾元素。例如下圖：

圖片來自于 Grey Goo

a. 軍事風格

FUI 的設計大量借鑒了軍事風格，其中也大量借鑒軍事操控的平臺的界面圖形設計，這里借鑒軍事風格的原因很簡單，因為在眾多的科幻、動作的故事題材中都是以軍隊或者其他超級團隊來去對抗惡勢力或者外星人入侵者，在界面設計上自然要延續(xù)其中軍事風格。

圖片源自Behance

細節(jié)上例如戰(zhàn)斗機上的 HUD 瞄準界面中的圖形多次被引用到飛船的操作界面上等等。

圖片源自 HUDS+GUIS

b. 機甲元素的運用

大量異形元素的機架風格源于對機甲設計的靈感，并且在細節(jié)上使用大量的裝飾元素。

在細節(jié)上例如邊框和環(huán)形圖的設計，相對于扁平化的設計，F(xiàn)UI 的設計風格顯然更具視覺沖擊力。

圖片源自 HUDS+GUIS

c. 突破思維限制

FUI 是一個非常有趣的 UI 設計領域，是我們在日?，F(xiàn)實生活之中無法探索的用戶界面設計方式。在我們的日常工作中，通常普通設計師很難有機會為宇宙飛船、時間旅行設備，或者感知型人工智能和外星人使用的用戶界面做設計。

圖片源自 HUDS+GUIS

FUI 使設計師有機會去突破現(xiàn)有的用戶體驗和用戶界面的限制，探索一個新的領域。通過虛幻界面設計，我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想 AR 技術的應用，地圖可以采用全息投影技術、人與智能硬件的環(huán)境交互等等。

虛幻界面設計甚至可以是新的發(fā)明，它們可以作為一種概念的驗證，它們可以啟發(fā)我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣。虛幻用戶界面可以激勵人們?yōu)槲磥韯?chuàng)造技術。

d. 硬件載體

在我們之前提到影視故事中設定的使用場景多為宇宙飛船的指揮艙或者駕駛艙、可穿戴式AR設備等等，但在現(xiàn)實生活現(xiàn)在多以配備“大屏”的指揮廳為主，相對于我們平時使用的移動設備和 PC 臺式機，大屏的物理渲染尺寸更大，在比例上的差異也更大。如下圖：

由于硬件設施的變更，扁平化的設計無法滿足用戶的需求，主要原因有：扁平化設計力求干凈整潔，而在大屏中物理渲染尺寸的變大會顯得畫面格外空和呆板；其次是缺乏細節(jié)。而 FUI 的設計風格設計細節(jié)豐富，恰好可以補充其細節(jié)缺失的問題。

總結

數(shù)據(jù)可視化設計選擇 FUI 的設計風格有著必然的原因，首先是 FUI 的設計風格屬于一個小眾的設計風格，在這個扁平化當?shù)赖臅r代更容易吸引用戶的目光，接受程度高；其次是視覺沖擊力強，設計細節(jié)豐富，軍事風格和機甲風格的圖形在視覺上更加新穎；再者是“大屏”作為視覺載體，物理渲染尺寸比例的變更使得扁平化設計在大屏上顯得畫面不飽滿，缺乏細節(jié)，而 FUI 則恰好能夠補充這些空白；最后 FUI 可以幫助我們突破思維限制，尋求更好的解決方案。

參考資料：

《FUI-How-to-design-User-Interfaces-for-Film-and-Games》

圖片來源：

https://www.hudsandguis.com

https://scifiinterfaces.com

本文由 @?姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議