在之前的文章《從零開始畫圖標(biāo)系列：線性圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)演示！》中，我們已經(jīng)講解了線性圖標(biāo)的繪制方法，在本篇文章，我們就可以從它的基礎(chǔ)中延伸出其它線性風(fēng)格的設(shè)計(jì)過程。

往期回顧：

• 《從零開始畫圖標(biāo)系列：超全面的基礎(chǔ)知識》
• 《從零開始畫圖標(biāo)系列：工具類圖標(biāo)設(shè)計(jì)規(guī)范》
• 《從零開始畫圖標(biāo)系列：線性圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)演示！》
• 《從零開始畫圖標(biāo)系列：面性圖標(biāo)設(shè)計(jì)方法詳解》
• 《從零開始畫圖標(biāo)系列：裝飾圖標(biāo)設(shè)計(jì)指南》
• 《從零開始畫圖標(biāo)系列：啟動(dòng)圖標(biāo)設(shè)計(jì)指南》
• 《從零開始畫圖標(biāo)系列：圖標(biāo)應(yīng)用詳解》

多種粗細(xì)風(fēng)格

通常多種粗細(xì)風(fēng)格的線性圖標(biāo)，會(huì)在圖形內(nèi)部選擇某條線段，修改它們的描邊值。例如在之前的演示中，我們使用了 2pt 粗細(xì)的描邊，那么通過將圖形內(nèi)部的線段修改成 1pt 的描邊，就能制造這種效果。

在這種風(fēng)格中，如果圖形只通過外輪廓展現(xiàn)，就無法融入這個(gè)風(fēng)格的特征，比如點(diǎn)贊的心形圖標(biāo)、搜索圖標(biāo)等。所以設(shè)計(jì)圖形的過程，就得保證它們有內(nèi)部線條的運(yùn)用。常見的做法就是在原圖標(biāo)的基礎(chǔ)上，進(jìn)行一些「復(fù)雜化」的處理，為它們增加內(nèi)部的線條樣式，比如下面的案例：

有時(shí)候?yàn)榱藦?qiáng)化線條間的對比，會(huì)降低內(nèi)部線條的透明度或飽和度，來增加視覺觀賞性，比如我們將案例中的圖標(biāo)進(jìn)行對應(yīng)調(diào)整，最后的效果如下：

描邊缺口風(fēng)格

這種風(fēng)格看起來簡單，實(shí)際在細(xì)節(jié)處理上有很多麻煩。有哪些問題呢？我們來看看實(shí)際的操作和解決方案。

首先我們要做的是搜索圖標(biāo)的缺口，通常開口是在原型的鏡片邊框上。那么，就可以先畫一個(gè)矩形，并將它進(jìn)行旋轉(zhuǎn)，用來確定我們要裁切的區(qū)域。多數(shù)新手會(huì)以為只要用這個(gè)矩形，和底部的圓進(jìn)行減去頂部圖形操作就可以得到目標(biāo)圖形，其實(shí)這個(gè)想法是錯(cuò)的。

布爾運(yùn)算不會(huì)改變圖形本身的閉合狀態(tài)，即使裁切了，缺口的部分也會(huì)被連接起來。所以，要實(shí)現(xiàn)真的缺口，就得換種做法。

方法1

第一種，是使用路徑錨點(diǎn)刪除的方法。即使用添加錨點(diǎn)工具在兩個(gè)圖形交匯點(diǎn)上打點(diǎn)，然后在中間隨意添加一個(gè)錨點(diǎn)，再刪除它，就可以獲得缺口的效果。

這時(shí)候，只要在描邊設(shè)置中，將邊緣設(shè)置成圓角，就可以獲得圓潤的切口邊緣。

這個(gè)操作有個(gè)問題，就是會(huì)導(dǎo)致圓形本身作為一個(gè)閉合路徑，變成了非閉合路徑。那么本身圖形的部分屬性設(shè)置就會(huì)出問題，最直接的就是描邊設(shè)置，無論原本使用外描邊或者內(nèi)描邊，都會(huì)轉(zhuǎn)化為居中描邊。

在工具圖標(biāo)設(shè)計(jì)演示中，我們應(yīng)該知道，使用內(nèi)描邊是最容易控制圖形實(shí)際大小，以及符合像素對齊規(guī)范的，但在這類風(fēng)格的使用上我們要盡可能在一開始設(shè)計(jì)時(shí)就使用居中描邊。而居中描邊的使用需要在畫布中開啟「對齊到像素」的選項(xiàng)，并關(guān)閉另外兩項(xiàng)，才能保證操作的規(guī)范性。

通過文章的形式這個(gè)問題很難描述清楚，大家可以自己動(dòng)手嘗試一遍。

方法2

方法1 理論上可以解決大多數(shù)問題了，但還有一些說不清道不明的原因，會(huì)導(dǎo)致演示 1 中的方法失效。所以，在第 2 個(gè)演示中，我們來應(yīng)用另一種方案。

這種方案重點(diǎn)使用的功能是「輪廓化描邊」，也就是一個(gè)將所有路徑格式轉(zhuǎn)化成完整的比例路徑圖形的操作。它具體的操作方式是，選中任何矢量圖形，然后點(diǎn)擊工具欄的對象 - 路徑 - 輪廓化描邊。

通過這個(gè)方法，就可以將描邊的圖形轉(zhuǎn)化成一個(gè)完整的矢量圖形，而原本路徑的描邊就失效了，變成了路徑填充色。

當(dāng)這個(gè)圖形變成了一個(gè)完整的閉合路徑以后，就可以用布爾運(yùn)算進(jìn)行裁切了。

到這一步，操作看起來都很簡單，但有不和諧的地方，就在切口邊緣的調(diào)整上。如果設(shè)計(jì)的風(fēng)格使用尖角，那么不用做什么處理；如果使用圓角，那么這個(gè)半圓就非常棘手了。

通常，要制造這個(gè)圓角，需要我們畫一個(gè)直徑和之前描邊相等的圓，然后關(guān)閉所有對齊的選項(xiàng)，再將圓移動(dòng)到這個(gè)邊緣中，使它可以和邊緣的兩側(cè)對齊。

這一步操作是依靠目測完成的，不夠嚴(yán)謹(jǐn)，雖然可以通過一些特殊的幾何輔助線手段來得到這個(gè)圓具體的坐標(biāo)位置，但往往操作起來太復(fù)雜沒有可行性。

并且，路徑查找器會(huì)破壞原本路徑的特征，將描邊的狀態(tài)變成了填充狀態(tài)，會(huì)增加我們對整個(gè)圖形細(xì)節(jié)調(diào)整的成本。所以，盡可能不使用這種方案。

多色描邊風(fēng)格

多色描邊的風(fēng)格，設(shè)計(jì)起來非常簡單，就是更改圖標(biāo)其中一個(gè)線段的色彩。和粗細(xì)不同的風(fēng)格一樣，如果圖標(biāo)圖形沒有比較合適的線段來添加一個(gè)新的顏色，那么也可以對其進(jìn)行「復(fù)雜化」的處理，多增加一些線段出來。

如果想有一些更有趣的表現(xiàn)，也可以將圖標(biāo)強(qiáng)行拆分成若干線段，然后再替換其中一條的顏色。比如在優(yōu)惠券圖標(biāo)中，我們可以將虛線左側(cè)的描邊修改成其它顏色，而不是調(diào)整虛線的色值。

漸變描邊風(fēng)格

漸變描邊其實(shí)就是為描邊填充漸變色，這也就需要我們提前將圖標(biāo)的圖形進(jìn)行輪廓化描邊，然后將所有線段進(jìn)行「聯(lián)集」，才能統(tǒng)一進(jìn)行漸變色的處理。

在漸變描邊中，要遵守一個(gè)規(guī)則就是我們要保證漸變的方向和強(qiáng)弱關(guān)系是一致的。比如我們使用 45° 傾斜的漸變角度，并且左上顏色較深，那么所有的圖標(biāo)都應(yīng)該遵守這個(gè)規(guī)律。

只要在做出第一個(gè)圖標(biāo)的漸變以后，通過吸管工具吸取漸變，就可以輕松完成漸變的復(fù)制。在這個(gè)規(guī)則下，既可以使用相同的漸變色，也可以使用不同的漸變色。

描邊疊加風(fēng)格

最后，我們來講講描邊疊加的設(shè)計(jì)風(fēng)格。在圖例中應(yīng)該發(fā)現(xiàn)了，我們將圓角改成了直角，之所以有這樣的調(diào)整，是因?yàn)橹苯窃谙嘟坏倪^程能比較好的進(jìn)行拼合，更適合疊加風(fēng)格的設(shè)計(jì)。

在設(shè)計(jì)這類風(fēng)格的過程中，主要的難點(diǎn)在于拼接的方式，因?yàn)橛械膱D形看起來是一體成型的，需要我們額外為它創(chuàng)造出拼合結(jié)構(gòu)。比如心形圖標(biāo)，在制作過程中就可以通過路徑查找器的相關(guān)功能將它拆分成兩個(gè)部分。

在完成了圖形的編輯以后，下一步才是填充色彩，在這種風(fēng)格中可以使用漸變也可以使用純色，但是我們要為不同的圖層添加透明度，才能制造出疊加的效果。如果是在 PS 或是 Sketch 中，除了使用普通透明度的方式，還可以通過調(diào)整「圖層混合模式」來呈現(xiàn)出更好的疊加效果。

最后，要注意的是，如果使用了圖層混合模式，那么要把這個(gè)圖形導(dǎo)出 PNG 格式以后，再在實(shí)際的項(xiàng)目中使用最佳，否則圖標(biāo)應(yīng)用背景不是白色的情況下可能效果與預(yù)期不符。

結(jié)語

從這些案例演示中，可以看到只要設(shè)計(jì)出了基本的線性圖形，那么在進(jìn)一步切換風(fēng)格的時(shí)候是非常容易的。有了這些風(fēng)格的設(shè)計(jì)經(jīng)驗(yàn)，在真實(shí)的設(shè)計(jì)中就不會(huì)被禁錮在最基本的基礎(chǔ)線性圖標(biāo)設(shè)計(jì)，可以嘗試給它們增加新的視覺樣式，豐富界面的視覺體驗(yàn)。

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