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