利用光影讓你的設(shè)計(jì)脫穎而出
發(fā)布時(shí)間:2021-12-24 09:07 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2574

1. 瑞士風(fēng)格

整潔、嚴(yán)謹(jǐn)、工整、理性化、實(shí)用的特征是瑞士平面設(shè)計(jì)的精神所在;這種一絲不茍,傳達(dá)準(zhǔn)確的風(fēng)格,即所謂瑞士國際主義風(fēng)格。簡單的說,由于 Swiss Design 這種風(fēng)格簡單明確,傳達(dá)功能準(zhǔn)確,因而很快得到世界范圍內(nèi)的普遍認(rèn)可,成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格,也是國際最流行的風(fēng)格,因此,又被稱為國際主義平面設(shè)計(jì)風(fēng)格;

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

簡單的說,瑞士的這種設(shè)計(jì)風(fēng)格典型的代表就是我們看到的雜志,其中有 3 個(gè)特點(diǎn):講究網(wǎng)格 / 非常理智的克制顏色的使用 / 層級關(guān)系;有趣的是,審美和潮流是循環(huán)的,隨著時(shí)代的發(fā)展,越來越多的 app 開始重新挖掘出來瑞士風(fēng)格并加以使用,比如我們 iOS 系統(tǒng)自帶的應(yīng)用們,Spotify:

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

年少的時(shí)候,我經(jīng)?粗@些個(gè) app 會(huì)不禁的問,為什么在沒有一張圖片的情況下還能如此好看?這些年終于明白了前人良苦用心:文字是內(nèi)容,同樣也是構(gòu)成;是信息,同樣也是裝飾;簡單可以理解為,不管在平面還是網(wǎng)頁亦或者是 UI 界面,在沒有可用的裝飾下,信息本身要承擔(dān)起裝飾和傳達(dá)的雙重功能,這就是瑞士風(fēng)格的核心本質(zhì)。

2. 擬物風(fēng)格 

iOS 是擬物的典型代表,網(wǎng)上對于這塊的講解已經(jīng)過于飽和了,我也沒必要贅述;那么這一趴,來聊聊對我產(chǎn)生深遠(yuǎn)影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷,潛意識里只不過是覺著把 iOS 的圖標(biāo)畫的更漂亮了一點(diǎn)而已…

但當(dāng)我打開下圖這個(gè)頁面的時(shí)候,我意識到我對擬物的理解還是淺薄了,第一次被光影的層次震撼到:

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

通過光影塑造了一個(gè)三維空間,讓整個(gè)畫面豐富飽滿

毫無保留的說,我的設(shè)計(jì)就是二者的融合,以 層次對比 作為核心理念。

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

啰嗦了半天,趕緊進(jìn)入正題;如果你是一名產(chǎn)品體驗(yàn)設(shè)計(jì)師,一定聽說過 “奧卡姆剃刀” ,這個(gè)定律通常用在交互鏈路的設(shè)計(jì)上(意思就是在用戶路徑中沒必要的步驟,省了就完事了),“如無必要,勿增實(shí)體” 即簡單有效原理;

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

同樣,在嘈雜的視覺結(jié)構(gòu)里,畫面也需要奧卡姆剃刀,當(dāng)你在對畫面的飽和上困擾不已,并急于找到一些背景和紋理填充的時(shí)候,我建議你先冷靜一下…因?yàn)轫撁娴目仗撐幢厥切枰獙?shí)體化的東西來填充的;上文有說過以 “層次對比” 作為核心理念出發(fā),要區(qū)別于平面設(shè)計(jì),營造一個(gè)立體空間,所以先理一下畫面結(jié)構(gòu):

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

通常來講,如果想要不平,把二維空間轉(zhuǎn)化成三維空間是必要的一步,需要在 Z 軸上下功夫;如果你恰巧也是一名攝影愛好者,可以想象下照相機(jī)的焦距和景深,工作原理是相同的,需要 前景 / 主體和背景 三個(gè)層次;當(dāng)然,虛實(shí)的對比對信息的呈現(xiàn)和層次的拉開是極其重要的,這里需要通過景深來控制效果,你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到:

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

另外,空間的感覺想要被突顯,那么“光影和空氣”的價(jià)值就可以無限放大了,按照如上所說的結(jié)構(gòu),把內(nèi)容和自然物質(zhì)擺進(jìn)去就好了,甚至可以做到舉一反三(比如不同顏色的氛圍,我就不展開了):

畫面不夠飽滿?學(xué)會(huì)用光影讓你的設(shè)計(jì)脫穎而出!

整個(gè) case 下來,你會(huì)發(fā)現(xiàn)用光來聚焦在信息上,自然而然就形成了我們說所得 “信息優(yōu)先級”;有點(diǎn)時(shí)候空氣和光影的飽滿程度超乎你的想象,這種自然存在的物質(zhì)可以很好的幫助畫面分層,以達(dá)到填充的效果,并不是一定要依賴于實(shí)體化的裝飾。

PhotoshopCC2020視頻教程
我要自學(xué)網(wǎng)商城 ¥120 元
進(jìn)入購買
文章評論
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長 AIGC