UI 設計中依舊有很多裝飾圖標要使用偏擬物的設計風格,雖然很多人以為可以通過 AI 來生成,但實際上真正符合頁面需要的設計很難通過 AI 來獲得,所以我們依舊要自己來繪制。

這類輕擬物圖標畫起來并不難,只需要掌握一定的規律以及幾個基本操作技巧即可。而最好的入門方式,就是從“畫圓”開始,就像學素描時最開始畫的圓形石膏,用它來認識光影的效果。
設計中對擬物效果的實現,就是對三個基本要素的塑造,形體、光影、材質。
形體就是物體本身的外輪廓和外形樣式,不同的風格和設計標準會對外形有不同的繪制要求,比如有的復雜寫實有的簡約隨意。除了外形復雜度外,還有個關鍵的知識點,即 —— 透視關系。
透視關系就是現實世界物體在人眼中成像的一種模式,離得越近的東西越大,越遠的東西就越小,也就是我們所說的近大遠小。用一個正方體來解釋,就是當它擺出不同角度時,那么側邊的面會朝遠端逐漸縮小。
如果不帶透視關系,那么它的不同面就沒有縮小的效果,上下邊平行處于等高的狀態。
設計師輸出圖形,就要正確的反映空間關系,加或不加都可以,但不能出現兩種混用的沖突,那就是沒想好要怎么表現。同時就是元素本身角度的控制會對下一步光影的應用產生巨大的影響,因為不同的角度就會形成不同的光影關系,而之所以素描最喜歡從圓開始練起,就是因為圓形 “只有一個” 角度。
第二個光影要素,就是物體在接受光照后呈現出來的高光反射與遮擋光源后形成的投影。如果只有一個圓,在接受一個光源的照射后就會形成下面這樣的光影關系。
也只有在光照的影響下,物體的表面才不會是純色的,也才能反應本身的弧度。所以每次繪制擬物圖形我們都要確定它的光源在哪,決定受光面和投影的方向。
最后一點則是材質,也就是物體表面使用哪種材料,這不僅會決定它使用哪種肌理紋路,也會決定它面對光影的效果。比如一個鏡面材質,表面就是光滑且高反光度的,而磨砂玻璃材質,則是弱反光且具有透明模糊的效果。
上面三個就是擬物圖標繪制最核心的知識點,也是最基礎的美術專業知識,雖然它們還有很多細節可以拓展和學習,但所幸我們今天設計的質感圖標不再是追求高度還原的擬物,而是經過簡化的 —— 輕擬物。
雖然那些知識不能被忽視,但因為我們要設計的東西也簡單,所以可以在一邊實踐中一邊學習,效果會更好。
接著我們就開始來畫圓,掌握擬物效果的實操方式,在這里我們演示用的軟件還是 Figma,只用到最基礎的矢量、填充、描邊、圖形效果等基礎功能。不管你用 Sketch 還是即時設計、Mastergo 都一樣。
第一步就是創建畫布后畫個圓,這個圓用 100-200px 大小就行,然后給圓填充一個基礎的顏色。
然后我們確定這個圓是鏡面材質的,光源是從正上方往下打。所以圓應該上方比下方顏色亮,且因為這是球體有弧度,所以添加的是 “徑向漸變”。通過這個漸變的添加為整個圓的色彩定調,確定明暗關系。
接著添加高光和投影,高光在頂部呈現不規則的橢圓狀,然后使用垂直透明度漸變向下逐漸消失。高光是種折射是會受到反射對象色彩影響的,所以高光也不可能是純白,而要使用和圓一樣色相的高明度色彩。
然后就是下方投影,這里一定要明白投影會反映空間的關系。如果使用默認圖層效果中的投影,它只能表現環境中的背景和我們的視線垂直,光源也是從視線這側來的。而我們現在希望塑造的是背景是在底部,且光源是從上打下來的,那么軟件自帶的投影模式就不適用。
軟件自帶投影的方向
我們希望創建的投影方向
想實現這個效果就要獨立繪制投影,最簡單的方式就是先畫個小點的深色投影輪廓,然后為它添加圖層模糊效果。
到這里圖形基本的狀態和光影效果都有了,但這看起來太粗糙了,想讓它更細膩更生動,就看我們怎么理解光影并為它添加更多細節進去了。
首先作為一個有顏色的玻璃球體,雖然會形成投影但也有光穿過它投射到背景上,那么這些穿過的光線就可以被表現出來,也就是底部要再疊加一層有色的投影。
同時因為光穿透到底部會再往回折射,所以球體底部實際上是會“積累”光線的,這不是明暗交界線,而是玻璃材質本身的一種特性,所以這個積累亮度的底部就要單獨畫出來,然后添加漸變和模糊效果。
而光在打到頂部時高光的形成是在表面之下(這個大家可以觀察玻璃珠),那么表層也有受光面,我們就可以再做個表面的橢圓模糊疊加到上方,讓它的高光面更自然。
最后,就是為圓添加一個描邊,這個描邊還有漸變色,來表現球體邊緣的厚度。而這個厚度在頂部是遠處不是受光位置所以較深,而底部在反光處所以有高亮。
完成上面的效果這個案例就做完了,要想做細節還可以再往下做。我們可以簡單在上面添加圖標,那么就是一個玻璃質感的按鈕。
做擬物類圖標的內核,就是你想表現什么樣的結果,要讓它的細節呈現到什么地步。復雜和極簡沒有對錯,關鍵的是你添加的每個細節都能有真實的物理特性去支撐,那么它們看起來才是合理的。
學習擬物就是認識美術的基本原理的過程,再學習不同細節呈現的軟件操作方式。
軟件是次要的,理解才是最重要的。
轉載自優設網
蘭亭妙微(藍藍設計)m.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。
