還記得2019年4月上映的復(fù)仇者聯(lián)盟4么，漫威電影宇宙的第三階段結(jié)束了，電影很精彩，但最令人震撼的是先導(dǎo)版的電影海報(bào)！就是那個(gè)「五彩斑斕」的黑～

從設(shè)計(jì)上看，海報(bào)的設(shè)計(jì)師是把光運(yùn)用到極限了，通過(guò)逆光和環(huán)境塑造出了酷+神秘的視覺(jué)感受。光是一切視覺(jué)表現(xiàn)的基礎(chǔ)，是構(gòu)圖和傳遞調(diào)性的關(guān)鍵，也是視覺(jué)表現(xiàn)重要的組成部分。所以今天就和大家聊聊啥樣的光是一個(gè)牛X的光以及如何塑造一個(gè)合格的光影？

光影的基本原理

常見(jiàn)形式1-聚光

△ 圖片來(lái)源：小米米家臺(tái)燈1S

聚光是最常見(jiàn)光，也是在設(shè)計(jì)中用到最多的光，通常在塑造一個(gè)物體的時(shí)候就會(huì)用的到。

因?yàn)榫酃獾脑颍瑘?chǎng)景更像個(gè)舞臺(tái)，凸顯「主角」的存在。具體的原理可以根據(jù)下圖去理解。

常見(jiàn)形式2-自然光

自然光其實(shí)就是陽(yáng)光，理論上講其實(shí)光源是太陽(yáng)也是聚光，但由于光源太過(guò)于龐大，無(wú)法真正的聚焦，所以就把這種光當(dāng)成一種泛光源就好。在產(chǎn)品設(shè)計(jì)中也會(huì)經(jīng)?？吹筋?lèi)似的光源出現(xiàn)，比如行為召喚按鈕：

因?yàn)椴恍枰獜?qiáng)有力的表現(xiàn)和氛圍的營(yíng)造，所以通常產(chǎn)品設(shè)計(jì)中更需要自然光來(lái)作為核心光源，通過(guò)泛光源去統(tǒng)一控制產(chǎn)品的光影體系就好（發(fā)布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會(huì)講到）。

常見(jiàn)形式3-逆光

坦誠(chéng)的講逆光也是聚光的一種，只不過(guò)由于角度特殊，呈現(xiàn)的視覺(jué)效果也非常不一樣，所以就單獨(dú)把逆光拿出來(lái)說(shuō)一說(shuō)。當(dāng)畫(huà)面需要逆光來(lái)營(yíng)造氛圍的時(shí)候，只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個(gè)處于逆光的物體了。

小米是典型的逆光氛圍營(yíng)造高手，但萬(wàn)變不離其宗，依舊可以從海報(bào)里看到相同的方法。

△ 圖片來(lái)源：小米傳播物料

光影的塑造（光影層級(jí)）

通?，F(xiàn)實(shí)中的光源并非那么理想，光線的復(fù)雜超出肉眼所見(jiàn)。所以我們?cè)诶L制的過(guò)程需要注意到，可以適當(dāng)?shù)某橄?。舉個(gè)例子，自然光是普照的，所以我們抽象為四個(gè)小光源平均分布，依次打到物體上：

在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個(gè)辦法就可以獲得光影的層級(jí)關(guān)系，在繪制輕擬態(tài)的圖標(biāo)或者運(yùn)營(yíng)活動(dòng)中更加細(xì)膩。

體積塑造+色彩對(duì)光影的影響（反光/對(duì)比光）

△ 圖片來(lái)源：09UI設(shè)計(jì)工作室-陌陌直播禮物設(shè)計(jì)

所有的光影其實(shí)都是幫助主體塑造體積感，一個(gè)合格的立體圖形必須具備：高光/過(guò)度色/明暗交界線和反光這四個(gè)基本屬性。

然后需要一點(diǎn)超現(xiàn)實(shí)主義的手法，把太陽(yáng)光過(guò)濾下，從「赤橙黃綠青藍(lán)紫」的色調(diào)里提取跟主體和諧的顏色（通常是補(bǔ)色），營(yíng)造出介于真實(shí)與玄幻之間的美妙效果hiahia～

然后再在投影上加一點(diǎn)點(diǎn)色彩傾向，一個(gè)完美的黑八就出現(xiàn)啦～按照這種方法，你可以試著去嘗試更多的物體/場(chǎng)景。（下圖是筆者作品「插著紅旗的地球」hiahia）

光影/材質(zhì)與產(chǎn)品設(shè)計(jì)中的層級(jí)關(guān)系

影響主體的除了光影之外就是材質(zhì)了，近年來(lái)的三大巨頭apple/Microsoft/Google的設(shè)計(jì)都在材質(zhì)上下足了功夫，蘋(píng)果的毛玻璃，微軟的亞克力和谷歌的「紙」。

從趨勢(shì)上看，材質(zhì)的引入對(duì)產(chǎn)品中拉開(kāi)層級(jí)關(guān)系上有巨大意義，以往的設(shè)計(jì)僅僅是通過(guò)光影和焦距來(lái)拉開(kāi)關(guān)系，這兩個(gè)維度在少量的疊加界面中還能有效果，但到了復(fù)雜的多窗口互壓互疊里就不是那么奏效了，所以鐵子們要善于運(yùn)用材質(zhì)區(qū)分產(chǎn)品顯示的優(yōu)先級(jí)。

圖標(biāo)與插圖的光影使用技巧

△ 圖片來(lái)源：Eric Hoffman – Big Sur Mac Icons

△ 圖片來(lái)源：JIAJIE – WeSing Live gift

圖標(biāo)好壞除了造型之外最重要的就是質(zhì)感了，通常圖標(biāo)也就是4種形式（如下圖），類(lèi)似蘋(píng)果的系統(tǒng)圖標(biāo)和抖音直播間禮物的圖標(biāo)都是最后一種形式。

但如果僅僅是這樣就太水了，既然都說(shuō)了是干貨預(yù)警，那就要拿出哥們看家的本領(lǐng)～此圖是大家關(guān)注公號(hào)后就會(huì)收到的推圖，主體就是一個(gè)POI的圖標(biāo)加上微信的對(duì)話框和代表干貨的小星星營(yíng)造出的氛圍。

刨析下這個(gè)圖，三個(gè)發(fā)光體和底下的投影，通過(guò)上文的講解依次繪制完成～

之后就到了amazing的時(shí)刻了，打開(kāi)photoshop找到「濾鏡-模糊畫(huà)廊-場(chǎng)景模糊」設(shè)置幾個(gè)key-point，調(diào)試模糊值和透明度/亮度，最終完成對(duì)光影的塑造。

借助環(huán)境塑造光影

空氣中的灰塵相信大家都不陌生，這種情況多數(shù)是一束光影從窗戶(hù)里射入后，在光的折射下把平時(shí)看不到的灰塵統(tǒng)統(tǒng)照了個(gè)遍。

如果你是mac用戶(hù)一定熟知keynote里的動(dòng)畫(huà)效果「轟然墜落」，這個(gè)效果是在模擬物體振動(dòng)后彈開(kāi)周?chē)覊m，非常震撼。在PPT的設(shè)計(jì)中你也可以同樣借助光和霧來(lái)營(yíng)造你想要的效果，下圖是我在做工作總結(jié)的時(shí)候?yàn)榱送癸@Q4工作采用的辦法。

小結(jié)一下

光影輕擬物在產(chǎn)品設(shè)計(jì)中的應(yīng)用面還是很廣的，比如：圖標(biāo)、數(shù)據(jù)可視化、插圖等等。而在大量扁平設(shè)計(jì)時(shí)代適量使用會(huì)顯得很出彩，當(dāng)然再好的教程也比不上大家多動(dòng)手試試練練，所以鐵汁們行動(dòng)起來(lái)咯~

文章來(lái)源：優(yōu)設(shè)    作者：Nana的設(shè)計(jì)錦囊

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)