2021-10-19 ui設(shè)計(jì)分享達(dá)人
老板:給我來一套科技風(fēng),要炫酷,要眼前一亮的感覺
你:好嘞~(叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng))
老板:哎呀,我要的不是這種太花了,不夠高端
你:給您改(叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng))
老板:哎呀,也不是這種太素了
你:行,改....(我刀呢)
沒做過科技風(fēng)格的新人缺乏對常見科技風(fēng)格的了解,很容易根據(jù)甲方模糊的描述及要求,主觀性的設(shè)計(jì),還會(huì)在甲方要改的情況下十分委屈,我做的就是你描述的炫酷科技風(fēng)啊??萍硷L(fēng)格大類本身特征就是炫酷,眼前一亮的感覺,甲方?jīng)]有了解只能粗略的表述。設(shè)計(jì)師主動(dòng)了解市面常見的科技風(fēng)格細(xì)分及其使用場景。就能夠問出甲方爸爸更細(xì)化的需求,更客觀的根據(jù)使用場景選擇恰當(dāng)?shù)募?xì)分科技風(fēng),減少不斷重改的成本。
FUI 就是 Fictional User Interfaces (Fictional GUI),就是 Fantasy User Interfaces,就是 Fake User Interfaces,就是 Futuristic User Interfaces,這些用戶界面它們是科幻的,是未來派的,是奇幻的,是虛假的.觀賞性大于實(shí)用性。
并不是所有風(fēng)格的FUI都適合應(yīng)用于現(xiàn)實(shí)中,比如——半透明介質(zhì)且信息復(fù)雜的的UI,只適合出現(xiàn)在影視作品里面(和一些視頻游戲當(dāng)中)。它們的表現(xiàn)性強(qiáng),看起來復(fù)雜精密,但對于信息展示功能很弱。其存在的目的是更好的配合場景,不會(huì)遮擋演員的臉部。想想看主角對復(fù)雜的數(shù)據(jù)一頓操作猛如虎,讓觀眾眼花繚亂,對主角更加崇拜。
精致、高端、輕質(zhì)感;簡約干凈、形體線條精細(xì);功能感強(qiáng)
應(yīng)用:
車載UI;金融UI;各種科技工具類產(chǎn)品的登錄注冊或官網(wǎng)Banner;商務(wù)海報(bào)等
特征:
1.商務(wù)科技配色較為嚴(yán)肅,低調(diào)。背景以深藍(lán)色,深灰色背景居多。
2.元素的形狀并不復(fù)雜、外輪廓整體規(guī)則,周圍的細(xì)碎裝飾較少。
3.強(qiáng)調(diào)品質(zhì)感,會(huì)模擬一些較為細(xì)膩玻璃、金屬或啞光的微質(zhì)感。對于光的使用較為克制,較少大范圍的使用輝光,多在邊緣使用較細(xì)的流光,看起來更加的犀利精致。
(偏商務(wù)科技風(fēng)格例子-圖片來源于網(wǎng)絡(luò))
整體風(fēng)格偏向機(jī)械、直觀,其扁平特征是元素扁平純色塊或漸變,弱化圖表空間感及體積感。多組扁平的數(shù)據(jù)可 視化圖表,在空間層次的表現(xiàn)上更多是在同一平面上。
非常適合多數(shù)據(jù)后臺(tái)數(shù)據(jù)展示,強(qiáng)調(diào)信息數(shù)據(jù)的清晰展示,較多使用純色面元素作為底板,減少了環(huán)境的背景外擾因素。且數(shù)據(jù)分組展示,功能分區(qū)明顯。
設(shè)計(jì)成本及實(shí)現(xiàn)成本較低,為目前大多數(shù)數(shù)據(jù)可視化大屏展示所選擇。
(偏扁平科技風(fēng)格例-圖片來源于網(wǎng)絡(luò))
視覺多使用單色,點(diǎn)線元素??梢耘c現(xiàn)實(shí)背景結(jié)合度高。
應(yīng)用:
電影(漫威系列FUI)、游戲、企業(yè)產(chǎn)品宣傳視頻、AR等展示型為主
特征:
1.顏色使用上單色居多,尤其多亮色白,亮色藍(lán),同色相多透明梯度變化。無質(zhì)感或毛玻璃質(zhì)感。
2.簡潔而不簡單,層次豐富,典型風(fēng)格HUD。空間層次感豐富,使用半透的結(jié)構(gòu)線3D模型或晶格模型,顯得輕 巧而精致,用戶能夠透過信息層看到場景層,
3.極簡科技風(fēng)需要設(shè)計(jì)師把控好細(xì)碎元素的體量和數(shù)量,對信息不會(huì)進(jìn)行過多的視覺干擾。
ps:
極簡科技風(fēng)數(shù)據(jù)的展示容量大于扁平科技風(fēng),看起來很復(fù)雜高端但通常實(shí)用性差。如果使用過多的數(shù)據(jù),則顯示 相似類型的圖表展示相似的數(shù)據(jù)集在視覺上可能會(huì)缺乏新鮮感,但更易于理解和理解。具有不同的圖表在視覺上是令人興奮的,但用戶需要花費(fèi)更多時(shí)間閱讀。
(偏極簡科技風(fēng)格例-圖片來源于網(wǎng)絡(luò))
賽博朋克又稱數(shù)字朋克、網(wǎng)絡(luò)朋克。
應(yīng)用:游戲、H5、運(yùn)營banner配圖等需要強(qiáng)視覺氛圍的運(yùn)營。代表電影如:攻殼機(jī)動(dòng)隊(duì)、頭號(hào)玩家、銀翼殺手等
特征:
1.張揚(yáng)奇幻的娛樂感,技能風(fēng)、故障風(fēng)、視覺沖擊強(qiáng)烈。常見元素:全息投影、義體、立體城市、高達(dá)機(jī)械元素 等。
2.人造光是賽博朋克在視覺上最大的特征,背景暗色,常用熒光黃、紫、藍(lán)、粉 、綠燈內(nèi)外發(fā)光,模擬霓虹燈管自發(fā)光效果,重點(diǎn)元素高亮輝光。
3.色彩冷暖撞色對比強(qiáng)烈,如:紅藍(lán)對比青紫對比黃橙對比等。
4.數(shù)碼屏幕與全息投影是霓虹燈的一種延伸,既能體現(xiàn)未來世界的高科技的感,也能體現(xiàn)出人造和虛擬的概念。部分元素前后疊影色彩錯(cuò)位,有頻次的閃動(dòng),模擬電子科技的偶發(fā)故障。機(jī)械化IP形象和字體設(shè)計(jì)常見金屬感和拼接感。
(偏賽博科技風(fēng)格例-圖片來源于網(wǎng)絡(luò))
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報(bào)下信息,會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com