在新的圖標(biāo)課程中，我們打算更貼合真實(shí)項(xiàng)目中的場景，以解決工作中的圖標(biāo)繪制需求為目標(biāo)規(guī)劃內(nèi)容。所以文章中講解的圖標(biāo)設(shè)計(jì)案例，都會(huì)選用已經(jīng)上線的大家最感興趣的真實(shí)案例。

而今天我們選擇講解的案例，就是近期的焦點(diǎn)應(yīng)用京東外賣首頁中的快速入口圖標(biāo)。

一、輕擬物圖標(biāo)的基本認(rèn)識(shí)

既然要完成它的設(shè)計(jì)，首先就要先分析它們的設(shè)計(jì)風(fēng)格和特征，這類圖標(biāo)屬于 “輕擬物” 風(fēng)格。

輕擬物是擬物風(fēng)格的變體，而擬物風(fēng)格是模擬真實(shí)物體形體、特征、效果的設(shè)計(jì)風(fēng)格，用于盡可能在 UI 界面中復(fù)現(xiàn)真實(shí)世界的視覺。

擬物風(fēng)格因?yàn)榧?xì)節(jié)太多，所以最終落地的效果不好控制，而且設(shè)計(jì)起來還麻煩。所以為了保留這種立體特征，又想減少細(xì)節(jié)的數(shù)量，輕擬物風(fēng)格也就應(yīng)運(yùn)而生了。

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

1. 擬真的圖形結(jié)構(gòu)
2. 立體角度的表現(xiàn)
3. 光影效果的添加

擬真圖形結(jié)構(gòu)就是根據(jù)物體的真實(shí)結(jié)構(gòu)特征去繪制它，比如案例中的超市圖標(biāo)，表現(xiàn)了店鋪的門面和雨棚之間的結(jié)構(gòu)關(guān)系，是相對(duì)寫實(shí)的。與之相對(duì)的，就是一般線性、面性圖標(biāo)使用更簡單的圖形輪廓對(duì)它進(jìn)行抽象化的表現(xiàn)。

立體角度就是使用不同的視角查看物體，從而呈現(xiàn)出多個(gè)面的圖形輪廓和細(xì)節(jié)。比如飲料圖標(biāo)，不僅從盒子本表現(xiàn)出立體效果，瓶蓋本身的厚度也被表現(xiàn)出來。一般線性和面性雖然也可能表現(xiàn)多面，但也是經(jīng)過抽象后的效果，不會(huì)有較為真實(shí)的細(xì)節(jié)。

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

一定要充分理解輕擬物的這三個(gè)要點(diǎn)，才能區(qū)分和它近似的不同設(shè)計(jì)風(fēng)格。比如下面這些帶有復(fù)雜細(xì)節(jié)和漸變的圖標(biāo)，就不是輕擬物，需要學(xué)習(xí)和使用的技巧也有差異。

二、團(tuán)購圖標(biāo)案例演示

完成圖標(biāo)設(shè)計(jì)需要先創(chuàng)建對(duì)應(yīng)的圖形輪廓，再完成對(duì)色彩效果的疊加。而這套圖標(biāo)的特征是有個(gè)圓形背景包含里面的圖形，所以第一步，就是先創(chuàng)建圓形輪廓?？梢韵犬媯€(gè)大點(diǎn)的圓，比如 200*200，然后再根據(jù)比例繪制里面的三個(gè)矩形。

PS：輕擬物類圖標(biāo)的設(shè)計(jì)和一般工具圖標(biāo)不同，可以做較大的尺寸，在最終輸出的時(shí)候再進(jìn)行縮放。

然后再通過布爾完成優(yōu)惠券缺口的裁切，并添加文字和圓點(diǎn)等內(nèi)容。

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

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

漸變只是對(duì)光影的一個(gè)整體性表現(xiàn)，只有它的話就顯得有點(diǎn)枯燥和乏味，所以下一步就要開始添加細(xì)節(jié)了，首先要加的東西就是高光?？梢允褂谩皟?nèi)陰影”功能，設(shè)置白色（就是高光，黑色就是陰影）和向右下角偏移的參數(shù)，以及一定的模糊值，就能得到一個(gè)高光的邊緣。

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

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

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

三、自營秒送圖標(biāo)案例演示

還是依照上一篇所說的步驟，第一步需要完成這個(gè)圖標(biāo)中所有形狀輪廓的繪制。這個(gè)圖標(biāo)看似形狀上比較復(fù)雜，實(shí)際上我們只要將它拆分成三個(gè)部分：籃子、橘子、牛奶盒，就會(huì)發(fā)現(xiàn)構(gòu)成每個(gè)部分的形狀都非常簡單，很容易就能完成。

其中需要用到簡單的布爾運(yùn)算以及調(diào)整錨點(diǎn)的技巧：

下一步，依然是對(duì)不同模塊進(jìn)行純色塊的填充，確定每個(gè)部分的基礎(chǔ)配色以及三個(gè)部分色彩的協(xié)調(diào)。

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

然后如法炮制進(jìn)行高光的覆蓋。

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

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

作者：超人的電話亭