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

    你：好嘞~（叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng)）

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

    你：給您改（叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng)）

    老板：哎呀，也不是這種太素了

    你：行，改....（我刀呢）

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

FUI：

    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ù)雜精密，但對(duì)于信息展示功能很弱。其存在的目的是更好的配合場(chǎng)景，不會(huì)遮擋演員的臉部。想想看主角對(duì)復(fù)雜的數(shù)據(jù)一頓操作猛如虎，讓觀眾眼花繚亂，對(duì)主角更加崇拜。

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

     精致、高端、輕質(zhì)感；簡(jiǎn)約干凈、形體線條精細(xì)；功能感強(qiáng)

     應(yīng)用：

    車載UI；金融UI;各種科技工具類產(chǎn)品的登錄注冊(cè)或官網(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ì)感。對(duì)于光的使用較為克制，較少大范圍的使用輝光，多在邊緣使用較細(xì)的流光，看起來更加的犀利精致。

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

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

    整體風(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ò)）

3.HUD（儀表盤）科技風(fēng)：

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

    應(yīng)用：

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

    特征：

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

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

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

    ps:

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

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

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

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

    應(yīng)用：游戲、H5、運(yùn)營(yíng)banner配圖等需要強(qiáng)視覺氛圍的運(yùn)營(yíng)。代表電影如：攻殼機(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.色彩冷暖撞色對(duì)比強(qiáng)烈，如：紅藍(lán)對(duì)比青紫對(duì)比黃橙對(duì)比等。

    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ì)分享國(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(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ù)