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