提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!
在界面中要想體現(xiàn)出更強(qiáng)的科技感,或者說(shuō)讓人眼前一亮。那么首先要知道,大眾理解的科技感的東西或者說(shuō)大眾覺(jué)得很棒的科技感大概是什么。
人的審美一直在跟隨著主流的媒體而變化
從1985年的電影《回到未來(lái)》到現(xiàn)在的《漫威全家桶》,科技的發(fā)展跨越了幾十個(gè)年頭,用戶對(duì)于“科技感”元素的定義似乎從未像現(xiàn)在變化如此復(fù)雜。未來(lái)科技會(huì)發(fā)展成什么樣,無(wú)數(shù)的電影人通過(guò)作品告訴了我們。這也讓人們產(chǎn)生一種未來(lái)科技就是這樣的感覺(jué),因此科技感的元素 必須是未來(lái)的、前衛(wèi)的。
1985年上映的電影《回到未來(lái)》曾經(jīng)轟動(dòng)了電影界
鋼鐵俠作為漫威票房成績(jī)最好的系列,極具科技感的視覺(jué)元素?zé)o疑是經(jīng)受住時(shí)間的考驗(yàn)的
小蜘蛛戴上托尼贈(zèng)予的戰(zhàn)盔后的UI界面
環(huán)太平洋中的機(jī)器人的設(shè)定,充斥著滿滿的科技元素
在諸多的影視作品中,對(duì)于高科技元素大多體現(xiàn)在虛擬與現(xiàn)實(shí)的結(jié)合的層面上,比如AR和VR技術(shù)等,在技術(shù)層面“粒子“和”光影特效“帶給用戶的感覺(jué)最為直觀和強(qiáng)烈。
所以我將影視作品中表現(xiàn)科技感的元素概括為四個(gè)關(guān)鍵詞:1.光效 2.粒子 3.FUI 4.material
鋼鐵俠的HUD、機(jī)械的質(zhì)感、導(dǎo)彈發(fā)射的光影、銀河宇宙的粒子,都是媒體作品中體現(xiàn)科技感的關(guān)鍵。
跨界、整合的能力
一定的跨界能力是從事 數(shù)據(jù)可視化,material 等科技風(fēng)格為主的設(shè)計(jì)師必不可少的能力。從上四個(gè)關(guān)鍵詞可以看出,無(wú)論哪個(gè)層面都已經(jīng)部分逾越了作為UI設(shè)計(jì)師所涉獵的范疇,可能你看到這里并不這么認(rèn)為,但是正真著手開始了解的時(shí)候,你會(huì)發(fā)現(xiàn)無(wú)論學(xué)習(xí)哪一方面,都需要不斷的積累。
這是我目前在科技風(fēng)格上一路走來(lái)的學(xué)習(xí)路徑,希望對(duì)大家有點(diǎn)用
合適的產(chǎn)品定位
在眾多的產(chǎn)品中,找到其合適的產(chǎn)品定位還是挺重要的。設(shè)計(jì)師經(jīng)常遇到的問(wèn)題有:1界面太花哨 2界面太簡(jiǎn)單 3界面科技感太強(qiáng) 4界面科技感太弱 等等很矛盾的問(wèn)題 em。。。。。。
根據(jù)個(gè)人的經(jīng)驗(yàn),科技產(chǎn)品的設(shè)計(jì)方向大致可以分為兩類:1.為了客戶的需求2.為了體現(xiàn)產(chǎn)品的技術(shù)價(jià)值(品牌價(jià)值)
第一點(diǎn)不難理解,第二點(diǎn)其實(shí)比較有意思了。因?yàn)槁毼辉驎?huì)涉及到一些比較前沿的一些技術(shù),這些技術(shù)埋藏在產(chǎn)品的功能之下難以使用戶察覺(jué)。這就好像我用了各種神秘調(diào)料調(diào)制出的一盤大餐,但是沒(méi)人在意你到底放了哪些調(diào)料,按照什么火候烹飪出的美味一樣。所以在很多需要進(jìn)行展示用的場(chǎng)景下,催生出了一種為展示技術(shù)為需求的產(chǎn)品。我的人臉識(shí)別率是同行的5倍,能夠支持?jǐn)?shù)百個(gè)人臉同時(shí)識(shí)別,我能分析出百億為單位的數(shù)據(jù)等等,這些很牛逼的東西如何將其包裝好,并將其優(yōu)勢(shì)放大也是非常重要的一個(gè)方向。
因此在產(chǎn)品定位上:更加的智能、令人印象深刻的和品牌效應(yīng)(技術(shù)的展示)是相輔相成的。
以本人自己的作品為例,簡(jiǎn)單敘述一下一定的跨界能力和整合能力在界面設(shè)計(jì)中的作用:
《正在清理》
《已清理》
磁盤整理工具的再設(shè)計(jì),圈型元素有三種實(shí)現(xiàn)方法:
1.sketch中的loop插件→復(fù)制方塊→變形
2.通過(guò)ae粒子插件,將粒子設(shè)置為矩形→球型矩陣→增加位置的隨機(jī)率→旋轉(zhuǎn)角度
3.通過(guò)C4D中的克隆+隨機(jī)
均可以達(dá)到以上效果。
一些烘托氣氛的球型小部件:C4D建模渲染
背景層:1.ae中設(shè)置3d圖層進(jìn)行z軸旋轉(zhuǎn)
交互層:工具 origami ,捕捉鼠標(biāo)位置作彈窗的朝向
進(jìn)度條的光效:運(yùn)用ae插件:optical flares
這里單獨(dú)講一下:optical flares 這款插件,在電影特效中運(yùn)用的非常廣泛。我們熟知的科幻大片中的光影特效都可以通過(guò)opticalflares達(dá)到以假亂真的效果。
一定的渲染能力:當(dāng)時(shí)的2枚邀請(qǐng)碼宣傳圖
渲染工具:octane
本期日記的封面效果
一定有人會(huì)說(shuō)在界面中增加的燈光粒子效果沒(méi)覺(jué)得好看到哪里去。的確,對(duì)于科技風(fēng)格的理解,對(duì)美感的理解并不是增加個(gè)燈光增加個(gè)粒子就能說(shuō)他是一個(gè)合格的具有科技感的作品。而糾結(jié)于僅僅是“好看”的層面,對(duì)于專業(yè)的設(shè)計(jì)人員說(shuō)出這樣的言論未免會(huì)顯得有點(diǎn)狹隘了。能使產(chǎn)品好看的方法多到數(shù)不清,而讓一個(gè)產(chǎn)品擁有合適的視覺(jué)定位,擁有一個(gè)比較完整并且有深度的視覺(jué)體系,這需要了解相關(guān)類型的前世今生。只有知道它的始末,才能很好的把控設(shè)計(jì)的范圍,從而告別單純的疊加素材的方法。
-END-
我是一鳴
Hikvision UI desinger
一個(gè)辛勤更新的博主Dribbble
一個(gè)無(wú)聊玩玩吉他的設(shè)計(jì)狗Bilibili
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)