10分鐘畫完大廠圖標！拆解京東外賣的輕擬物圖標設計思路

在新的圖標課程中，我們打算更貼合真實項目中的場景，以解決工作中的圖標繪制需求為目標規劃內容。所以文章中講解的圖標設計案例，都會選用已經上線的大家最感興趣的真實案例。

往期教程：

而今天我們選擇講解的案例，就是近期的焦點應用京東外賣首頁中的快速入口圖標。

一、輕擬物圖標的基本認識

既然要完成它的設計，首先就要先分析它們的設計風格和特征，這類圖標屬于 “輕擬物” 風格。

輕擬物是擬物風格的變體，而擬物風格是模擬真實物體形體、特征、效果的設計風格，用于盡可能在 UI 界面中復現真實世界的視覺。

擬物風格因為細節太多，所以最終落地的效果不好控制，而且設計起來還麻煩。所以為了保留這種立體特征，又想減少細節的數量，輕擬物風格也就應運而生了。

輕擬物還保留了一定的擬物特性，主要包含下面要素：

1. 擬真的圖形結構
2. 立體角度的表現
3. 光影效果的添加

擬真圖形結構就是根據物體的真實結構特征去繪制它，比如案例中的超市圖標，表現了店鋪的門面和雨棚之間的結構關系，是相對寫實的。與之相對的，就是一般線性、面性圖標使用更簡單的圖形輪廓對它進行抽象化的表現。

立體角度就是使用不同的視角查看物體，從而呈現出多個面的圖形輪廓和細節。比如飲料圖標，不僅從盒子本表現出立體效果，瓶蓋本身的厚度也被表現出來。一般線性和面性雖然也可能表現多面，但也是經過抽象后的效果，不會有較為真實的細節。

最后就是通過漸變、發光、投影等效果來模擬物體的光影效果。而這個效果中使用最多的就是漸變，但要注意的是，輕擬物的漸變是為了呈現物體輪廓的弧形或反光的強弱，而不是僅僅為了提供一種不同的色彩效果。

一定要充分理解輕擬物的這三個要點，才能區分和它近似的不同設計風格。比如下面這些帶有復雜細節和漸變的圖標，就不是輕擬物，需要學習和使用的技巧也有差異。

二、團購圖標案例演示

完成圖標設計需要先創建對應的圖形輪廓，再完成對色彩效果的疊加。而這套圖標的特征是有個圓形背景包含里面的圖形，所以第一步，就是先創建圓形輪廓?？梢韵犬媯€大點的圓，比如 200*200，然后再根據比例繪制里面的三個矩形。

PS：輕擬物類圖標的設計和一般工具圖標不同，可以做較大的尺寸，在最終輸出的時候再進行縮放。

然后再通過布爾完成優惠券缺口的裁切，并添加文字和圓點等內容。

下一步，就是對不同模塊進行色彩的填充，確定整體的配色。一定要注意，色彩填充過程是先填純色，即物體本身的色彩，之后的漸變也好光影效果也罷，都是基于這個顏色產生的效果。

再下一步，就是添加漸變了。漸變是用來呈現光影效果的，首先要確定光源是在左上角，那么物體左上角受光，右下角背光。那么這個漸變就要符合光線的角度，且上方較亮，下方較暗。

漸變只是對光影的一個整體性表現，只有它的話就顯得有點枯燥和乏味，所以下一步就要開始添加細節了，首先要加的東西就是高光?？梢允褂谩皟汝幱啊惫δ?，設置白色（就是高光，黑色就是陰影）和向右下角偏移的參數，以及一定的模糊值，就能得到一個高光的邊緣。

再然后，就是添加投影，包括文本投影，以及上方卡片對下方卡片的遮擋。文本投影可以直接使用投影效果的設置，而卡片的遮擋則可以單獨畫一個黑色的圓，并添加高斯模糊，可以得到一個更合理的效果。

檢查完三個卡片的樣式和細節沒問題以后，最后再給背景圓添加一個透明度漸變，從原來的純色向上漸變到消失，并給前方圖形添加蒙版，完成對下方邊緣的裁切。

這種包含蒙版和裁切的操作，盡量留到最后再完成，這樣實際操作過程中才不會被復雜的圖層結果影響，保證我們的操作效率。

三、自營秒送圖標案例演示

還是依照上一篇所說的步驟，第一步需要完成這個圖標中所有形狀輪廓的繪制。這個圖標看似形狀上比較復雜，實際上我們只要將它拆分成三個部分：籃子、橘子、牛奶盒，就會發現構成每個部分的形狀都非常簡單，很容易就能完成。

其中需要用到簡單的布爾運算以及調整錨點的技巧：

下一步，依然是對不同模塊進行純色塊的填充，確定每個部分的基礎配色以及三個部分色彩的協調。

第三步，添加立面的漸變。此處有幾個需要注意的地方，除了仍然按照左上側光源進行光影繪制的牛奶盒側立面之外，第一、橘子作為一個圓形物體，它的漸變不是一個面，而是一個體，所以這里的漸變可以使用徑向漸變(Radial) 來方便地表達球形的光影；第二，籃子下半部分受上半部分遮擋的影響更大，所以不需要考慮左上側光影的光照，更多需要考慮陰影的部分，所以我們采用上深下淺的漸變。

然后如法炮制進行高光的覆蓋。

最后是投影，這個圖形主要的投影來自于牛奶盒的右側立面、籃子對內容物遮擋以及葉子對橘子本體的遮擋。這片葉子可以采用復制一層做圖層模糊的方法來實現。在最新的 Figma 中，我們還可以嘗試使用 Progressive Blur 來實現投影從凝實到擴散的過程 (因為葉子與橘子球體距離關系的不同，投影也會呈現從銳利到彌散的效果)。

最后依例再給背景圓添加一個透明度漸變，并將下方超出圓形的部分進行裁切。

結尾

目前視頻版本的教學已經上線，會比看圖文更詳細，對于操作不夠熟練的同學可以訪問下面鏈接查看。

記得一鍵三連！

歡迎關注作者的微信公眾號：「超人的電話亭」