超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

數(shù)據(jù)可視化為什么偏愛FUI

2022-4-13    seo達(dá)人

1.FUI的定義

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


圖片源自 HUDS+GUIS

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

 

A.定義

為了讓大家更好的理解 “FUI” 的定義,我們將 “FUI” 這個(gè)詞拆開分別進(jìn)行簡(jiǎn)單解釋。在 FUI 中:

“U”代表用戶(User)

“I”代表界面(Interface)

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

簡(jiǎn)單點(diǎn)來(lái)講 FUI 就是:虛構(gòu)的、未來(lái)的、幻想的用戶界面。

相信讀到這里大家已經(jīng)對(duì) FUI 有了初步的認(rèn)識(shí),“科幻界面”只是 FUI 中的分支,并不能完全解釋 FUI 。對(duì)與“虛構(gòu)、未來(lái)、幻想”三個(gè)詞我們?cè)僮鲞M(jìn)一步分析解構(gòu):

 

a.虛構(gòu)的

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


圖片源自 Behance

 

b.未來(lái)的

我們?cè)倩貞浳覀兛催^(guò)的科幻電影,在電影中它通常作為故事的一部分而創(chuàng)建。故事可以在不同的時(shí)間段進(jìn)行設(shè)定,例如將來(lái)、當(dāng)前或者過(guò)去。所以我們并不將 FUI 限制在“未來(lái)”用戶界面,它的時(shí)間線是相對(duì)的。不同時(shí)代的人們對(duì)于科幻電影的理解不一樣,所以大家對(duì)于未來(lái)的定義也有所不同,例如早年的《星球大戰(zhàn)》系列電影和《環(huán)太平洋》系列電影都屬于科幻電影,但存在的時(shí)間線卻有所不同,其中的界面設(shè)計(jì)風(fēng)格也會(huì)因有所不同。


圖片源自 HUDS+GUIS

 

c.幻想的

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


圖片源自百度

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

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


圖片源自 HUDS+GUIS

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

 

2.FUI的優(yōu)勢(shì)

相對(duì)于大眾接受度更好的扁平化,數(shù)據(jù)可視化設(shè)計(jì)卻對(duì) FUI 的設(shè)計(jì)風(fēng)格情有獨(dú)鐘,在筆者所接觸得到的數(shù)據(jù)可視化的設(shè)計(jì)中,無(wú)論是實(shí)際的工作項(xiàng)目還是一些概念稿的設(shè)計(jì)都頻繁用到 FUI 的設(shè)計(jì)風(fēng)格。到底是什么原因讓市場(chǎng)對(duì) FUI 接受程度如此之高呢?接下來(lái)我們從心理學(xué)、視覺、思維以及硬件幾個(gè)角度作為切入點(diǎn)來(lái)進(jìn)行分析。

 

A.物以希為貴

羅馬人說(shuō):“物以希為貴?!币?yàn)樵谄綍r(shí)生活中極為罕見,則顯得十分珍貴。例如大家平時(shí)的在玩游戲的時(shí)候,游戲中“限定”的虛擬商品總是能夠比其它虛擬商品更加吸引玩家去購(gòu)買,因?yàn)椤跋薅ā鳖A(yù)示珍貴、與眾不同,即使價(jià)格高一點(diǎn),玩家也能夠接受。例如最近王者榮耀中的新年限定皮膚,因?yàn)槭恰跋薅ā?,所以總是不斷的勾引用戶的錢包。


圖片源自 王者榮耀

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

 

B.視覺優(yōu)勢(shì)

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


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

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

 

色彩

a.背景

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


圖片源自 HUDS+GUIS

 

b.配色簡(jiǎn)潔

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


圖片源自 HUDS+GUIS

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


圖片源自 HUDS+GUIS

 

c.對(duì)比強(qiáng)烈

FUI 中的配色對(duì)比強(qiáng)烈,首先因?yàn)楸尘岸嘁陨钌珵橹?,?qiáng)烈的對(duì)比能夠有效的拉開頁(yè)面中的空間感,例如鋼鐵俠中的史塔克戰(zhàn)役中頭盔的界面。


圖片源自 HUDS+GUIS

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


圖片源自 HUDS+GUIS

 

圖形

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


圖片來(lái)自于 Grey Goo

 

a.軍事風(fēng)格

FUI 的設(shè)計(jì)大量借鑒了軍事風(fēng)格,其中也大量借鑒軍事操控的平臺(tái)的界面圖形設(shè)計(jì),這里借鑒軍事風(fēng)格的原因很簡(jiǎn)單,因?yàn)樵诒姸嗟目苹谩?dòng)作的故事題材中都是以軍隊(duì)或者其他超級(jí)團(tuán)隊(duì)來(lái)去對(duì)抗惡勢(shì)力或者外星人入侵者,在界面設(shè)計(jì)上自然要延續(xù)其中軍事風(fēng)格。


圖片源自Behance

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


圖片源自 HUDS+GUIS

 

b.機(jī)甲元素的運(yùn)用

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


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


圖片源自 HUDS+GUIS

 

C.突破思維限制

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


圖片源自 HUDS+GUIS

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

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

 

D.硬件載體

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


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

 

3.總結(jié)

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

 

借鑒參考:

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

圖片來(lái)源:

https://www.hudsandguis.com

https://scifiinterfaces.com

 

原文地址:海鹽社(公眾號(hào))

作者: 姜正

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化為什么偏愛FUI

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔