UI設計丨怎樣設計光影輕擬物？

2021-04-16

8713

本期和大家分享一波關于光影輕擬物的技法，不局限于視覺/UI/UX~

還記得2019年4月上映的復仇者聯(lián)盟4么，漫威電影宇宙的第三階段結束了，電影很精彩，但最令人震撼的是先導版的電影海報！就是那個“五彩斑斕”的黑～

從設計上看，海報的設計師是把光運用到極限了，通過逆光和環(huán)境塑造出了酷神秘的視覺感受。光是一切視覺表現(xiàn)的基礎，是構圖和傳遞調性的關鍵，也是視覺表現(xiàn)重要的組成部分。

1. 光影的基本原理

1-1 聚光

（圖片來源：小米米家臺燈1S）

聚光是最常見光，也是在設計中用到最多的光，通常在塑造一個物體的時候就會用的到。

因為聚光的原因，場景更像個舞臺，凸顯“主角”的存在。具體的原理可以根據下圖去理解。

1-2 自然光

自然光其實就是陽光，理論上講其實光源是太陽也是聚光，但由于光源太過于龐大，無法真正的聚焦，所以就把這種光當成一種泛光源就好。在產品設計中也會經常看到類似的光源出現(xiàn)，比如行為召喚按鈕：

因為不需要強有力的表現(xiàn)和氛圍的營造，所以通常產品設計中更需要自然光來作為核心光源，通過泛光源去統(tǒng)一控制產品的光影體系就好（最新發(fā)布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會講到）。

1-3 逆光

坦誠的講逆光也是聚光的一種，只不過由于角度特殊，呈現(xiàn)的視覺效果也非常不一樣，所以就單獨把逆光拿出來說一說。當畫面需要逆光來營造氛圍的時候，只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個處于逆光的物體了。

2. 光影的塑造（光影層級）

通常現(xiàn)實中的光源并非那么理想，光線的復雜超出肉眼所見。所以我們在繪制的過程需要注意到，可以適當的抽象。舉個例子，自然光是普照的，所以我們抽象為四個小光源平均分布，依次打到物體上：

在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個辦法就可以獲得光影的層級關系，在繪制輕擬態(tài)的圖標或者運營活動中更加細膩。

3. 體積塑造色彩對光影的影響（反光/對比光）

圖片來源：09UI設計工作室-陌陌直播禮物設計

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

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

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

4. 光影/材質與產品設計中的層級關系

影響主體的除了光影之外就是材質了，近年來的三大巨頭apple/Microsoft/Google的設計都在材質上下足了功夫，蘋果的毛玻璃，微軟的亞克力和谷歌的“紙”。從趨勢上看，材質的引入對產品中拉開層級關系上有巨大意義，以往的設計僅僅是通過光影和焦距來拉開關系，這兩個維度在少量的疊加界面中還能有效果，但到了復雜的多窗口互壓互疊里就不是那么奏效了，所以鐵子們要善于運用材質區(qū)分產品顯示的優(yōu)先級。