隨著大數(shù)據(jù)行業(yè)的不斷發(fā)展，數(shù)據(jù)可視化設(shè)計也越來越多的服務(wù)于政企的業(yè)務(wù)工作。在數(shù)據(jù)可視化設(shè)計當(dāng)中不可或缺就是 FUI 的設(shè)計風(fēng)格，無論是政企的用戶還是設(shè)計師都對它十分青睞。為什么會如此受歡迎呢？讓我們一起探討FUI圖形設(shè)計。

1.FUI的定義

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

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

A.定義

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

“U”代表用戶（User）

“I”代表界面（Interface）

“F”代表虛構(gòu)的（Fiction）、未來的（Future）、幻想的（Fantasy）。

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

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

a.虛構(gòu)的

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

b.未來的

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

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

c.幻想的

關(guān)于“幻想”的用戶界面，人們腦袋可能首先閃過一些夸張?zhí)摶?、為人聳聽的畫面。就像《神奇博士》中的神奇博士進入多瑪姆的世界當(dāng)中一樣。

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

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

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

2.風(fēng)格介紹

我們仔細(xì)閱讀定義的關(guān)鍵詞：“虛構(gòu)的、未來的、幻想的?！睆膶?FUI 關(guān)鍵詞上我們進行粗略的分析可以得出這么一條簡單的結(jié)論：FUI 的設(shè)計不依據(jù)現(xiàn)實為基礎(chǔ)的界面設(shè)計，為設(shè)計師留有巨大的想象空間。所以朋友們，請把腦洞開大一點吧，不受到當(dāng)前的技術(shù)和硬件載體的制約，F(xiàn)UI 本身就是一種創(chuàng)新發(fā)明。

接下來我會向大家簡單介紹一下 FUI 主要的兩大設(shè)計風(fēng)格：軍事風(fēng)格和機甲風(fēng)格（也可以叫做機械風(fēng)格）。

a.軍事風(fēng)格

軍事風(fēng)格的特點在于：“直接明了”。因為在殘酷的戰(zhàn)爭中時間就是生命，士兵必須保證“快速、準(zhǔn)確、直接”才能保證戰(zhàn)斗的勝利，所以會盡量避免與操作業(yè)務(wù)無關(guān)的。你也可以理解為當(dāng)下最前沿的的設(shè)計理念“l(fā)ess is more?！崩缦聢D，在界面設(shè)計中幾乎都是利用簡單的幾何設(shè)計語言完成。

軍事風(fēng)格成為 FUI 的主流設(shè)計形式有著必然的原因。首先簡單的從我們熟知的影視作品中來講，在諸多科幻動作為主的故事題材的影視作品中，正義的一方都有軍隊的支持，其中不可避免的會出現(xiàn)的許多設(shè)備的界面；再則隨著科技的發(fā)展，許多高科技都會用運用到軍事設(shè)備的研發(fā)上，精密的結(jié)構(gòu)線和反復(fù)數(shù)據(jù)讓我們覺得其中的科技含量很高。

b.機甲風(fēng)格

機甲風(fēng)格相對于軍事風(fēng)格的最大特點就是：“具有一定的裝飾圖形元素，或多或少?！睓C甲風(fēng)格最大的特點便是具有機械或者機甲風(fēng)格的裝飾元素，其中多為異形元素。其靈感來源于工業(yè)設(shè)計，從機械和機甲的工業(yè)設(shè)計語言中提取圖形元素，在運用到界面設(shè)計上。如下圖，異形的機甲風(fēng)格讓機器人的頭部設(shè)計顯得更加統(tǒng)一，如果換成當(dāng)前流行的扁平化設(shè)計，可能就顯得有點奇怪了。

機甲風(fēng)格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開腦洞，暢想更多的可能性。在設(shè)計上激發(fā)了 FUI 的誕生，無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機甲風(fēng)格的界面設(shè)計。

3.FUI的優(yōu)勢

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

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

A.物以希為貴

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

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

B.視覺優(yōu)勢

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

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

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

色彩

a.背景

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

b.配色簡潔

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

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

c.對比強烈

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

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

圖形

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

a.軍事風(fēng)格

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

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

b.機甲元素的運用

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

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

C.突破思維限制

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

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

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

D.硬件載體

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

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

4.設(shè)計思路

設(shè)計樣式 - 軍事風(fēng)格

我們從以上的設(shè)計風(fēng)格中抓去我們需要的關(guān)鍵詞進行示例設(shè)計，首先我們看軍事風(fēng)格的關(guān)鍵詞是“直接明了、快速、準(zhǔn)確、直接，”我們轉(zhuǎn)換成我們平時的設(shè)計語言就是：“極簡風(fēng)格，”這樣是不是更好理解了。例如圖例中，頁面整體十分統(tǒng)計，利用簡潔幾何語言進行設(shè)計。

接下來我們做一個簡單的軍事風(fēng)格的進度條：

第一步，找參考！?。?/strong>這一步很重要，很多同學(xué)都很容易就忽視這一點，一心一意的閉門造車，絕不借鑒學(xué)習(xí)其它優(yōu)秀作品。這里向大家推薦 HUDS + GUIS 設(shè)計公司，這里有我們許多我們耳熟能詳?shù)挠耙曌髌分械?FUI 設(shè)計。

第二步，臨摹，臨摹可以說是學(xué)習(xí)他人技巧的最快方式，從中我們可以學(xué)習(xí)到許多設(shè)計中的細(xì)節(jié)，日后我們可以運用到自己的設(shè)計當(dāng)中。我借鑒臨摹了下面的進度條樣式。

第三部，修改細(xì)節(jié)，舉一反三。臨摹就一定是是抄襲么？當(dāng)然不是！創(chuàng)意設(shè)計，是把再簡單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式（百度百科），所以我們可以通過對設(shè)計組件內(nèi)部進行重新組合或者修改其中的細(xì)節(jié)參數(shù)來達(dá)到自己在設(shè)計的目的。

通過總結(jié)分析，我選用了最簡單直白的結(jié)合圖形作為設(shè)計元素進行設(shè)計，如下圖：

我們可以放入界面當(dāng)中感受一下視覺效果：

設(shè)計樣式 - 機甲風(fēng)格