常見科技風(fēng)格分類

2021-10-19    ui設(shè)計分享達人

老板:給我來一套科技風(fēng),要炫酷,要眼前一亮的感覺

    你:好嘞~(叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng))

    老板:哎呀,我要的不是這種太花了,不夠高端

    你:給您改(叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng))

    老板:哎呀,也不是這種太素了

    你:行,改....(我刀呢)


    沒做過科技風(fēng)格的新人缺乏對常見科技風(fēng)格的了解,很容易根據(jù)甲方模糊的描述及要求,主觀性的設(shè)計,還會在甲方要改的情況下十分委屈,我做的就是你描述的炫酷科技風(fēng)啊??萍硷L(fēng)格大類本身特征就是炫酷,眼前一亮的感覺,甲方?jīng)]有了解只能粗略的表述。設(shè)計師主動了解市面常見的科技風(fēng)格細分及其使用場景。就能夠問出甲方爸爸更細化的需求,更客觀的根據(jù)使用場景選擇恰當(dāng)?shù)募毞挚萍硷L(fēng),減少不斷重改的成本。


FUI:

    FUI 就是 Fictional User Interfaces (Fictional GUI),就是 Fantasy User Interfaces,就是 Fake User Interfaces,就是 Futuristic User Interfaces,這些用戶界面它們是科幻的,是未來派的,是奇幻的,是虛假的.觀賞性大于實用性。

    并不是所有風(fēng)格的FUI都適合應(yīng)用于現(xiàn)實中,比如——半透明介質(zhì)且信息復(fù)雜的的UI,只適合出現(xiàn)在影視作品里面(和一些視頻游戲當(dāng)中)。它們的表現(xiàn)性強,看起來復(fù)雜精密,但對于信息展示功能很弱。其存在的目的是更好的配合場景,不會遮擋演員的臉部。想想看主角對復(fù)雜的數(shù)據(jù)一頓操作猛如虎,讓觀眾眼花繚亂,對主角更加崇拜。


1.商務(wù)科技風(fēng):

     精致、高端、輕質(zhì)感;簡約干凈、形體線條精細;功能感強

     應(yīng)用:

    車載UI;金融UI;各種科技工具類產(chǎn)品的登錄注冊或官網(wǎng)Banner;商務(wù)海報等

    特征:

    1.商務(wù)科技配色較為嚴肅,低調(diào)。背景以深藍色,深灰色背景居多。

    2.元素的形狀并不復(fù)雜、外輪廓整體規(guī)則,周圍的細碎裝飾較少。

    3.強調(diào)品質(zhì)感,會模擬一些較為細膩玻璃、金屬或啞光的微質(zhì)感。對于光的使用較為克制,較少大范圍的使用輝光,多在邊緣使用較細的流光,看起來更加的犀利精致。

(偏商務(wù)科技風(fēng)格例子-圖片來源于網(wǎng)絡(luò))

2.扁平科技風(fēng):

    整體風(fēng)格偏向機械、直觀,其扁平特征是元素扁平純色塊或漸變,弱化圖表空間感及體積感。多組扁平的數(shù)據(jù)可    視化圖表,在空間層次的表現(xiàn)上更多是在同一平面上。

    非常適合多數(shù)據(jù)后臺數(shù)據(jù)展示,強調(diào)信息數(shù)據(jù)的清晰展示,較多使用純色面元素作為底板,減少了環(huán)境的背景外擾因素。且數(shù)據(jù)分組展示,功能分區(qū)明顯。

    設(shè)計成本及實現(xiàn)成本較低,為目前大多數(shù)數(shù)據(jù)可視化大屏展示所選擇。


(偏扁平科技風(fēng)格例-圖片來源于網(wǎng)絡(luò))

3.HUD(儀表盤)科技風(fēng):

    視覺多使用單色,點線元素??梢耘c現(xiàn)實背景結(jié)合度高。

    應(yīng)用:

    電影(漫威系列FUI)、游戲、企業(yè)產(chǎn)品宣傳視頻、AR等展示型為主

    特征:

    1.顏色使用上單色居多,尤其多亮色白,亮色藍,同色相多透明梯度變化。無質(zhì)感或毛玻璃質(zhì)感。

    2.簡潔而不簡單,層次豐富,典型風(fēng)格HUD??臻g層次感豐富,使用半透的結(jié)構(gòu)線3D模型或晶格模型,顯得輕        巧而精致,用戶能夠透過信息層看到場景層,

    3.極簡科技風(fēng)需要設(shè)計師把控好細碎元素的體量和數(shù)量,對信息不會進行過多的視覺干擾。

    ps:

   極簡科技風(fēng)數(shù)據(jù)的展示容量大于扁平科技風(fēng),看起來很復(fù)雜高端但通常實用性差。如果使用過多的數(shù)據(jù),則顯示    相似類型的圖表展示相似的數(shù)據(jù)集在視覺上可能會缺乏新鮮感,但更易于理解和理解。具有不同的圖表在視覺上是令人興奮的,但用戶需要花費更多時間閱讀。


(偏極簡科技風(fēng)格例-圖片來源于網(wǎng)絡(luò))

4.賽博炫酷科技風(fēng):

    賽博朋克又稱數(shù)字朋克、網(wǎng)絡(luò)朋克。

    應(yīng)用:游戲、H5、運營banner配圖等需要強視覺氛圍的運營。代表電影如:攻殼機動隊、頭號玩家、銀翼殺手等

    特征:

    1.張揚奇幻的娛樂感,技能風(fēng)、故障風(fēng)、視覺沖擊強烈。常見元素:全息投影、義體、立體城市、高達機械元素  等。

    2.人造光是賽博朋克在視覺上最大的特征,背景暗色,常用熒光黃、紫、藍、粉 、綠燈內(nèi)外發(fā)光,模擬霓虹燈管自發(fā)光效果,重點元素高亮輝光。

    3.色彩冷暖撞色對比強烈,如:紅藍對比青紫對比黃橙對比等。

    4.數(shù)碼屏幕與全息投影是霓虹燈的一種延伸,既能體現(xiàn)未來世界的高科技的感,也能體現(xiàn)出人造和虛擬的概念。部分元素前后疊影色彩錯位,有頻次的閃動,模擬電子科技的偶發(fā)故障。機械化IP形象和字體設(shè)計常見金屬感和拼接感。

(偏賽博科技風(fēng)格例-圖片來源于網(wǎng)絡(luò))

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

文章來源:站酷  作者:唐小蔥

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔