前面啰嗦了那么多，到這篇開始就要進(jìn)入到大家最喜歡的操作演示環(huán)節(jié)了！這一部分演示的是線性風(fēng)格的設(shè)計(jì)，包含 8 個(gè)圖標(biāo)的繪制，如下圖所示。
線性圖標(biāo)是所有圖標(biāo)中最基礎(chǔ)的設(shè)計(jì)形式，也是最入門和最簡(jiǎn)單的。在我們?cè)O(shè)計(jì)后續(xù)的其它風(fēng)格圖標(biāo)前，首先要通過線性圖標(biāo)的練習(xí)來打下堅(jiān)實(shí)的基礎(chǔ)！
什么是圖標(biāo)的基礎(chǔ)呢，有兩個(gè)方面：
• 制圖的規(guī)范性
• 圖形的合理應(yīng)用
只要圖形的設(shè)計(jì)上能達(dá)到這兩個(gè)要求，才能在進(jìn)一步的創(chuàng)作中施展拳腳。并且，我們的案例演示，也會(huì)在每種類型的設(shè)計(jì)中，通過最基礎(chǔ)的風(fēng)格演示，一層層遞進(jìn)演示其它設(shè)計(jì)風(fēng)格的設(shè)計(jì)過程，充分展示任何設(shè)計(jì)風(fēng)格與基礎(chǔ)之間的關(guān)系。
通過上一篇文章我們知道，線性圖標(biāo)的設(shè)計(jì)首先要確定圖標(biāo)的尺寸、描邊的粗細(xì)、還有繪制圖標(biāo)的柵格系統(tǒng)，所以我們先確定圖標(biāo)的規(guī)格為 28pt * 28pt，使用 2pt 的內(nèi)描邊 (pt 可以等同 于 Ai 中的 px)，然后再畫出柵格，并進(jìn)行編組。
5.1 線性圖標(biāo)設(shè)計(jì)演示
5.1.1 搜索圖標(biāo)
搜索圖標(biāo)是 APP 中最常見的圖標(biāo)，繪制原理也很簡(jiǎn)單，就是一個(gè)圓和圓角矩形的結(jié)合。
步驟1：在案例中，設(shè)計(jì)的風(fēng)格主要是偏圓潤一點(diǎn)的，那么鏡片的比例就要較大。我們使用了尺寸為 20pt 的圓，和一個(gè)寬 2pt 高 9pt 的圓角矩形。
步驟2：將矩形和圓形進(jìn)行連接并垂直方向居中、編組，然后旋轉(zhuǎn) 45 度。之所以要先垂直再旋轉(zhuǎn)，是因?yàn)橹苯赢嫵鲆粭l傾斜的矩形再去連接鏡片，那么矩形的中軸將很難移動(dòng)到和圓心相交的位置（簡(jiǎn)單理解就是和下面對(duì)齊后的效果一致的狀態(tài)，你們可以自己試試看）。
步驟3：調(diào)整搜索圖標(biāo)在模版中的位置，因?yàn)閹缀我曈X差的關(guān)系，要讓圖標(biāo)重心平穩(wěn)，那么就要向右下角偏移，最終效果見下圖。
5.1.2 聊天圖標(biāo)
聊天圖標(biāo)的設(shè)計(jì)和搜索圖標(biāo)一樣，需要通過幾何圖形的組合完成，但不同于搜索的是，該圖標(biāo)需要應(yīng)用到路徑查找器面板的相關(guān)功能。
步驟1：首先要畫出聊天的氣泡外輪廓，我們可以看出它是由一個(gè)圓角矩形和三角形組成，所以第一步要做的就是畫出這兩個(gè)元素。
步驟2：將它們連接并垂直方向居中，然后使用路徑查找器面板的 “聯(lián)集” 選項(xiàng)，將它們合并成一個(gè)圖形。
步驟3：在輪廓內(nèi)部畫一長一短兩條 2pt 寬的矩形。
步驟4：調(diào)整圖標(biāo)在模版中的位置，根據(jù)視覺差要將圖標(biāo)向下偏移，最終效果見下圖。
5.1.3 查看圖標(biāo)
查看圖標(biāo)的設(shè)計(jì)也需要應(yīng)用路徑查找器的功能，實(shí)現(xiàn)過程也非常簡(jiǎn)單。
步驟1：畫兩個(gè) 2pt 描邊垂直方向?qū)R并相交的圓，并使用路徑查找器中的 “交集” 功能獲取它們相交的部分。
步驟2：將這個(gè)圖形置入到模版中，然后可以通過拖動(dòng)圖形大小的方式，更改它的的左右兩邊，到像素對(duì)齊的位置（這個(gè)形狀的比例發(fā)生變化是沒問題的）。
步驟3：在中央位置添加一個(gè) 8pt 大小的圓，就完成了最終的效果。
5.1.4 心形圖標(biāo)
心形圖標(biāo)如何繪制，對(duì)于新人來說是一個(gè)非常常見的問題。很多人都不知道具體該怎么畫出這個(gè)圖形，而心形圖標(biāo)又幾乎被使用在所有應(yīng)用中，所以我們就要巧妙運(yùn)用用幾何圖形的組合。
步驟1：畫兩個(gè)矩形，一個(gè)豎直一個(gè)水平放置，并將上方和右側(cè)的兩個(gè)邊緣進(jìn)行圓角處理。
步驟2：將兩個(gè)圖形進(jìn)行移動(dòng)相交，并保證上方和右側(cè)的兩個(gè)半圓正好緊貼在另一個(gè)矩形的邊緣，然后使用路徑查找器中的 “聯(lián)集” 功能，就可以得到一個(gè)躺著的心形。
步驟3：將心形進(jìn)行旋轉(zhuǎn)，并置入到模版中，添加圓角細(xì)節(jié)，略微向下偏移，就可以得到下圖的最終效果。
5.1.5 卡券圖標(biāo)
卡券圖標(biāo)有一個(gè)外輪廓和內(nèi)部的虛線部分，外輪廓在上下有兩個(gè)半圓的凹槽，要通過兩個(gè)圓進(jìn)行裁切。
步驟1：畫一個(gè) 28pt * 24pt 的圓角矩形，并在上下方各畫一個(gè) 4pt 大小的圓，與矩形的邊緣相交。
步驟2：確認(rèn)兩個(gè)小圓圖層順序在矩形的上方，然后選中三個(gè)圖層，使用路徑查找器中的 “減去頂層” 操作即可得到外輪廓。
步驟3：最后，就是畫出卡片中的兩條 “虛線”，再置入到模版中，就可以得到下圖的最終效果。
5.1.6 房屋圖標(biāo)
從房屋圖標(biāo)的形狀中，我們可以看出它包含了三角、圓和矩形這三個(gè)形狀，主要的難點(diǎn)就是如何通過三角形和矩形畫出外部的輪廓。
步驟1：首先畫出一個(gè) 28pt10pt 的等腰三角形，再畫一個(gè) 22pt16pt 的矩形，將它們邊緣進(jìn)行重疊。
步驟2：設(shè)置三角形三個(gè)尖角的圓角依次為 3pt、1pt、1pt (上、左、右)，再為矩形下半部分的兩個(gè)直角添加 4pt 圓角。
步驟3：執(zhí)行 “聯(lián)集” 操作，生成完整的外輪廓。之所以先做圓角再執(zhí)行聯(lián)集，是因?yàn)樘崆昂喜蓚€(gè)形狀，會(huì)導(dǎo)致一些尖角無法使用圓角工具。
步驟4：畫出房屋中間的圓形，然后將圖形置入模版中，就可以得到下圖的最終效果。
5.1.7 齒輪圖標(biāo)
齒輪在 UI 中一般作為設(shè)置的圖標(biāo)使用，也是常用圖標(biāo)中最難畫的圖標(biāo)之一。
步驟1：畫一個(gè) 28pt 的大圓，然后再畫 1 個(gè) 8pt 的小圓，置于圓的左側(cè)。然后使用 “旋轉(zhuǎn)工具”，將小圓旋轉(zhuǎn)中心固定到大圓的圓心中，按回車鍵，在彈出的對(duì)話框中選擇 60° 然后點(diǎn)擊「復(fù)制」按鈕，生成第二個(gè)圓。之后再按 Ctrl / Command+D 重復(fù)操作 4 次，就可以得到完整的圓環(huán)。
步驟2：保證周圍的 6 個(gè)圓在大圓的上層 (一般來說，新畫的六個(gè)小圓必然在大圓上層) ，并將 7 個(gè)圓全部選中，執(zhí)行“減去頂層”操作。
步驟3：最后，將所有內(nèi)圓角改為 2pt，再畫一個(gè)直徑 8pt 的內(nèi)圓，然后在模版中調(diào)整到正確的位置即可，就可以得到下圖的最終效果。
5.1.8 文件圖標(biāo)
文件圖標(biāo)也是一個(gè)很簡(jiǎn)單，但是大多數(shù)人就是做不好的圖標(biāo)，右下角的折角難倒了很多新手，在這里我們用一個(gè)簡(jiǎn)單的方法進(jìn)行實(shí)現(xiàn)。
步驟1：先畫一個(gè) 20pt*23pt 的圓角矩形（高不是偶數(shù)，后面會(huì)解釋），然后要先把右下角的缺口做出來。這里如果要使用減去頂層的方法做也可以，但我們要用一個(gè)更簡(jiǎn)單的操作，在右下角頂點(diǎn)上方和左側(cè) 6pt 的位置各添加一個(gè)錨點(diǎn)，然后使用 “刪除錨點(diǎn)工具” 刪除右下角頂點(diǎn)的錨點(diǎn)，就可以得到一個(gè)傾斜的切口。
步驟2：在右下角畫一個(gè)圓角為 4pt 的矩形，然后將其中一個(gè)邊與上個(gè)步驟的缺口相交，相交的部分即為折角的部分。這時(shí)候選中兩個(gè)矩形，使用 “形狀生成器工具” （快捷鍵 Shift+M），點(diǎn)擊一下圖示的部分，就會(huì)生成一個(gè)新的形狀組，接著取消它們的編組，再選中多余的圖形進(jìn)行刪除，就可以得到一個(gè)完整的折角效果。
步驟3：最后，設(shè)置大圓角 (4pt) 和小圓角 (2pt)，并在內(nèi)部添加 3 條圓角矩形，再根據(jù)幾何的視覺差將圖標(biāo)置入模版中向下移動(dòng)一個(gè)像素，就可以得到下圖的最終效果。
5.2 線性圖標(biāo)操作總結(jié)
作為圖文教程，沒辦法精細(xì)還原每一步操作，即使我們對(duì)第一部分的圖標(biāo)設(shè)計(jì)理論已經(jīng)有了深刻的認(rèn)識(shí)，但在實(shí)際操作階段還是有很多小細(xì)節(jié)會(huì)阻撓我們?cè)O(shè)計(jì)的進(jìn)度。下面，我們會(huì)列舉一些具體的問題，幫助大家更好的認(rèn)識(shí)和解決操作過程的難題。
5.2.1 柵格的使用
就是針對(duì)柵格的使用了，為了便于演示，我都給出了具體的數(shù)值，在最后一步才置入到模版中。實(shí)際上，我們應(yīng)該在一開始的繪制中就在模版中進(jìn)行，而往往剛開始畫的圖形尺寸是不能代表最終效果的。
比如最后一個(gè)文件圖標(biāo)中，為什么是 23pt，并且偏下 1pt。是因?yàn)橐婚_始創(chuàng)建 24pt 高的矩形，在完成最終效果以后會(huì)發(fā)現(xiàn)重心上移，而且整體偏大了 (下圖第一行) ，這時(shí)候縮減高度才能保證視覺的穩(wěn)定性 (下圖第二行) 。而房屋屋頂?shù)娜切?，我們使用的?28pt 撐滿畫布，這也是經(jīng)過了不斷地嘗試了，測(cè)試了多種寬度和圓角效果后才確定出來的，并不是一蹴而就的。
5.2.2 圖形的調(diào)整
圖形不同角度、尺寸、比例，都會(huì)影響圖標(biāo)最后呈現(xiàn)的效果，需要我們?cè)谥谱鞯倪^程保持對(duì)圖形優(yōu)化的態(tài)度，通過持續(xù)調(diào)整和比對(duì)找到最合適的結(jié)果。
就像搜索圖標(biāo)，重點(diǎn)就在于圓和矩形的比例，不同比例會(huì)帶給我們截然不同的感受。
以及在查看圖標(biāo)中，圓形相切的比例不同，也決定了最終呈現(xiàn)出來效果的差異， 相交越少那么感覺越尖銳，相交越多則越圓潤。
5.2.3 多種操作方法
實(shí)現(xiàn)同一個(gè)效果，可以有非常多的操作方法，殊途同歸！雖然軟件只是實(shí)現(xiàn)設(shè)計(jì)的工具，但對(duì)工具的理解越全面越好，很多時(shí)候我們都可以嘗試使用不同的方法來實(shí)現(xiàn)相同的效果，而不用太拘泥于一種固定的套路。
比如在房子圖標(biāo)的繪制中，我們用的是三角形和矩形合并的形式制做的外輪廓，但因?yàn)榫W(wǎng)格的存在，還可以直接通過鋼筆工具繪制，自由度更高，但對(duì)圖形把控能力的要求也更高。
再比如文件圖標(biāo)的步驟 2 中，用的是 “形狀生成器工具” ，但如果將兩個(gè)圖形輪廓化，再使用路徑查找器中的 “分割”，也能夠達(dá)到相同的效果。
這部分教學(xué)的目的不是為了讓大家跟著我的步驟畫一遍湊一個(gè)小作業(yè)出來，而是要從更多的緯度去思考設(shè)計(jì)過程中操作的細(xì)節(jié)。因?yàn)樗鼈兛雌饋韺?shí)在是太容易了，從而使新人缺乏敬畏，直接跳過這個(gè)階段，開始設(shè)計(jì)一些更復(fù)雜、花哨的圖標(biāo)，比如下圖案例，這種做法對(duì)圖標(biāo)水平的提升沒有任何作用。
新手想要開啟圖標(biāo)的練習(xí)，就要從這些最基礎(chǔ)的線性圖標(biāo)入手，不斷練習(xí)和思考如何通過正確、規(guī)范的操作制做圖標(biāo)。如果實(shí)在不知道要畫什么，通過臨摹微信、QQ 等成熟應(yīng)用的工具圖標(biāo)即可。
基礎(chǔ)線性圖標(biāo)的演示部分就到這里結(jié)束了，軟件基礎(chǔ)比較弱的同學(xué)，可以看我后面補(bǔ)錄的演示視頻，會(huì)對(duì)常見的疑難雜癥做比較全面的分析。
在上一節(jié)中，我們講解了線性圖標(biāo)的繪制方法，在本節(jié)，我們就可以從它的基礎(chǔ)中延伸出其它線性風(fēng)格的設(shè)計(jì)過程。包含：
• 多種粗細(xì)風(fēng)格
• 描邊缺口風(fēng)格
• 多色描邊風(fēng)格
• 漸變描邊風(fēng)格
• 描邊疊加風(fēng)格
6.1 多種粗細(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ì)圖形時(shí)就得保證它們的內(nèi)部有線條元素。常見的做法就是在原圖標(biāo)的基礎(chǔ)上，進(jìn)行一些 “復(fù)雜化” 的處理，為它們?cè)黾觾?nèi)部的線條樣式，比如下面的案例。
有時(shí)候?yàn)榱藦?qiáng)化線條間的對(duì)比，會(huì)降低內(nèi)部線條的透明度或飽和度，來增加視覺觀賞性，比如我們將案例中的圖標(biāo)進(jìn)行對(duì)應(yīng)調(diào)整，那么最后的效果如下。
6.2 描邊缺口風(fēng)格
先給初學(xué)者澆盆冷水了，這種風(fēng)格看起來簡(jiǎn)單，實(shí)際在細(xì)節(jié)處理上有很多麻煩，有哪些問題呢，我們來看看實(shí)際的操作和解決方案。
首先我們要做的是搜索圖標(biāo)的缺口，通常開口是在原型的鏡片邊框上。那么，就可以先畫一個(gè)矩形，并將它進(jìn)行旋轉(zhuǎn)，用來確定我們要裁切的區(qū)域。多數(shù)新手會(huì)以為只要用這個(gè)矩形，和底部的圓進(jìn)行減去頂部圖形操作就可以得到目標(biāo)圖形，這個(gè)想法是沒考慮周到的。
布爾運(yùn)算不會(huì)改變圖形本身的閉合狀態(tài)，即使裁切了，缺口的部分也會(huì)被連接起來了。所以，要實(shí)現(xiàn)真的缺口，就得換種做法。
6.2.1 方法1
第一種，是使用路徑錨點(diǎn)刪除的方法。即使用添加錨點(diǎn)工具在兩個(gè)圖形交匯點(diǎn)上打點(diǎn)，然后再在中間隨意添加一個(gè)錨點(diǎn)，再刪除它，就可以獲得缺口的效果。
這時(shí)候，只要在描邊設(shè)置中，將邊緣設(shè)置成圓角，就可以獲得圓潤的切口邊緣。
但是咦？好像不對(duì)勁。
是的，問題就出在描邊上面。圓形本身作為一個(gè)閉合路徑，刪去錨點(diǎn)后變成了非閉合路徑，那么無論原本使用外描邊或者內(nèi)描邊，都會(huì)轉(zhuǎn)化為居中描邊。
在工具圖標(biāo)設(shè)計(jì)演示中，我們應(yīng)該知道，使用內(nèi)描邊是最容易控制圖形實(shí)際大小，以及符合像素對(duì)齊規(guī)范的，但在這類風(fēng)格的使用上我們要盡可能在一開始設(shè)計(jì)時(shí)就使用居中描邊。而居中描邊的使用需要在畫布中開啟 ”對(duì)齊到像素“ 的選項(xiàng)，并關(guān)閉另外兩項(xiàng)，才能保證操作的規(guī)范性。
通過文章的形式這個(gè)問題很難描述清楚，大家可以自己動(dòng)手嘗試一遍，或者在之后的視頻分享中查看具體的操作演示。
6.2.2 方法2
應(yīng)用方法 1，理論上可以解決大多數(shù)問題了，但還有一些說不清道不明的原因，會(huì)導(dǎo)致演示 1 中的方法失效！所以，在第 2 個(gè)演示中，我們來應(yīng)用另一種方案。
這種方案要重點(diǎn)使用的功能是 “輪廓化描邊”，也就是一個(gè)將所有路徑格式轉(zhuǎn)化成完整的比例路徑圖形的操作。它具體的操作方式是，選中任何矢量圖形，然后點(diǎn)擊工具欄的 ”對(duì)象“ —— ”路徑“ —— ”輪廓化描邊“。
通過這個(gè)方法，就可以將描邊的圖形轉(zhuǎn)化成一個(gè)完整的矢量圖形，而原本路徑的描邊就失效了，變成了路徑填充色。
當(dāng)這個(gè)圖形變成了一個(gè)完整的閉合路徑以后，我們就可以用大家心心念的布爾進(jìn)行裁切了！
到這一步，操作看起來都很簡(jiǎn)單，一片和諧，但不和諧的地方，就在切口邊緣的調(diào)整上。如果設(shè)計(jì)的風(fēng)格使用尖角，那么不用做什么處理，如果使用圓角，那么這個(gè)半圓就非常棘手。
通常，要制造這個(gè)圓角，需要我們畫一個(gè)直徑和描邊相等的圓，然后關(guān)閉所有對(duì)齊的選項(xiàng)，再將圓移動(dòng)到這個(gè)邊緣中，使它可以和邊緣的兩側(cè)對(duì)齊。
這一步操作是依靠目測(cè)完成的，不夠嚴(yán)謹(jǐn)，雖然可以通過一些特殊的幾何輔助線手段來得到這個(gè)圓具體的坐標(biāo)位置，但往往操作起來太復(fù)雜沒有可行性。
并且，路徑查找器會(huì)破壞原本路徑的特征，將描邊的狀態(tài)變成了填充狀態(tài)，會(huì)增加我們對(duì)整個(gè)圖形細(xì)節(jié)調(diào)整的成本。所以，盡可能不要這種方案。
有了這兩種方法，就不把其它圖標(biāo)再操作一遍了，大家可以自己嘗試著動(dòng)手做做看！
6.3 多色描邊風(fēng)格
多色描邊的風(fēng)格，設(shè)計(jì)起來非常簡(jiǎn)單，就是更改圖標(biāo)其中一個(gè)線段的色彩。和粗細(xì)不同的風(fēng)格一樣，如果圖標(biāo)圖形沒有比較合適的線段來添加一個(gè)新的顏色，那么也可以對(duì)其進(jìn)行 “復(fù)雜化” 的處理，多增加一些線段出來。
如果想有一些更有趣的表現(xiàn)，也可以將圖標(biāo)強(qiáng)行拆分成若干線段，然后再替換其中一條的顏色。比如在優(yōu)惠券圖標(biāo)中，我們可以將虛線左側(cè)的描邊修改成其它顏色，而不是調(diào)整虛線的色值。
6.4 漸變描邊
漸變描邊其實(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ī)則下，既可以使用相同的漸變色，也可以使用不同的漸變色。
6.5 描邊疊加風(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ù)期不符。
從這些案例演示中，可以看見只要設(shè)計(jì)出了基本的線性圖形，那么在進(jìn)一步切換風(fēng)格的時(shí)候是非常容易的。有了這些風(fēng)格的設(shè)計(jì)經(jīng)驗(yàn)，在真實(shí)的設(shè)計(jì)中就不會(huì)只禁錮在最基本的基礎(chǔ)線性圖標(biāo)設(shè)計(jì)，可以嘗試給它們?cè)黾有碌囊曈X樣式，豐富界面的視覺體驗(yàn)。
前面用了比較長的篇幅講了線性風(fēng)格的圖標(biāo)要如何設(shè)計(jì)，再講解面性風(fēng)格的圖標(biāo)時(shí)，就不用這么長篇大論了。只要熟悉了線性圖標(biāo)的繪制方式，那么面性圖標(biāo)的操作就沒有難點(diǎn)，并且面性風(fēng)格的實(shí)際操作難度比線性圖標(biāo)更低，所以我們用一小節(jié)來講完面性圖標(biāo)的設(shè)計(jì)。
面性圖標(biāo)在操作中和線性圖標(biāo)的最大差別就在于描邊和填充模式，我們知道為了滿足像素對(duì)齊的要求，線性描邊會(huì)在操作中產(chǎn)生很多不可控的因素，要用很多額外的操作步驟去彌補(bǔ)。在面形圖標(biāo)中，就不需要使用描邊，并且應(yīng)用相同的圖標(biāo)模版即可。
7.1 基本的面性風(fēng)格
如圖所示，我們采用線性圖標(biāo)中使用的樣式，設(shè)計(jì)成面性效果。具體的操作步驟就不需要再完整演示一次了，只需要將所有線性風(fēng)格演示中的描邊替換成填充，再使用對(duì)應(yīng)的路徑查找器功能即可。
需要注意的是，有很多 1pt 寬的直線，可能我們會(huì)習(xí)慣于使用線條工具繪制，這是錯(cuò)誤的做法，我們需要使用矩形工具畫出一個(gè)完整的閉合圖形，再樣在使用路徑查找器工具或者對(duì)圖形進(jìn)行批量操作時(shí)才能保證統(tǒng)一。
還有，面性圖標(biāo)不代表完全不能出現(xiàn) “線性” 元素，在一些特定的情況下，我們依舊要通過線條的形式展示圖形輪廓，比如搜索圖標(biāo)的鏡片，使用全填充的樣式顯然效果不理想，所以鏤空鏡片區(qū)域是不可避免的。
雖然我們不可避免要使用 “線性” 的元素，但在面性風(fēng)格中，這些圖形的描邊元素不能太細(xì)，應(yīng)該使用不小于 4pt 以上的寬度 (在我們這次的網(wǎng)格中) 。并且，為了保證圖標(biāo)的一致性，整套圖標(biāo)的線條都要盡可能使用相同的粗細(xì)，而不是這里使用了 4pt，在別的圖標(biāo)中就是 6pt。
7.2 扁平插畫風(fēng)格
扁平插畫風(fēng)格實(shí)際上是一個(gè)自由度非常高的圖標(biāo)風(fēng)格，可以設(shè)計(jì)出很多有趣又極具創(chuàng)意的插畫式圖標(biāo)。在本案例中，我們只講解其中一種最基礎(chǔ)的設(shè)計(jì)方式，便于新人入門。
最基礎(chǔ)的扁平插畫，就是在面性圖標(biāo)的基礎(chǔ)上，將圖形拆分成不同面的組合，然后分別為這些面填充純色即可。比如心型圖標(biāo)，看起來像是只有一個(gè)面的圖形，但我們可以人為居中將它分割成兩個(gè)面，然后填充色系相同明度不同的色彩，就可以得到一個(gè)扁平插畫風(fēng)格的圖標(biāo)。
類似搜索或消息圖標(biāo)這樣有鏤空區(qū)域的圖標(biāo)，那么我們就可以為鏤空區(qū)域填充不同的色彩，作為獨(dú)立的面呈現(xiàn)，也能獲得相同的風(fēng)格效果。
最后一種，就是將圖標(biāo) “擬真” 化，比如眼睛圖標(biāo)，我們可以用接近真實(shí)眼睛的樣式來創(chuàng)作，為它增加瞳孔、高光等細(xì)節(jié)樣式，只要依舊使用純色填充，且將細(xì)節(jié)數(shù)量保持在合理的范圍內(nèi)，就不會(huì)與其它圖標(biāo)產(chǎn)生沖突。
7.3 彩色漸變風(fēng)格
在面性圖標(biāo)的彩色漸變中，也有多種更細(xì)致的設(shè)計(jì)類型，比如整個(gè)圖標(biāo)采用一段漸變，或者圖標(biāo)中不同的面采取不同的漸變方式。
采用整個(gè)圖標(biāo)使用同一漸變色的做法，和線性的漸變方法幾乎一樣，只要在開始填充漸變前將所有圖層進(jìn)行合并即可。我們來講解一個(gè)比較特殊的基礎(chǔ)漸變風(fēng)格——不同透明度漸變。
比如心形圖標(biāo)，我們把它劃分成了兩個(gè)不同的面的組合，然后都使用了紅色的漸變色，一強(qiáng)一弱。通常，我們只要先設(shè)定出較強(qiáng)的漸變，然后再復(fù)用這個(gè)漸變色到另一個(gè)面中，然后降低它的透明度即可。
在使用了透明度的圖形中，要注意的是為了在實(shí)際使用中不讓圖形背面的元素影響到圖標(biāo)色彩本身，我們要將這些圖形復(fù)制一層填充成白色并置于底部，才能保證正常的使用。
7.4 透明疊加風(fēng)格
最后，就是這類透明疊加的設(shè)計(jì)風(fēng)格了。和線性圖標(biāo)中的疊加設(shè)計(jì)方式一樣，我們需要將圖形拆分成若干面，才能創(chuàng)造出重疊的區(qū)域。
在這個(gè)方案中，盡可能使用純色，會(huì)比使用漸變的效果更好，原因在于我們對(duì)重疊區(qū)域色彩的控制上?？赡芎芏嗤瑢W(xué)看到這個(gè)風(fēng)格，會(huì)以為疊加的區(qū)域只要使用透明度就可以了，但這種效果通常很不理想，尤其在撞色的配色上，相交部分的色彩就會(huì)有 ”朦朧“ 感，缺少通透的舒適性，并且圖形本身的飽和度也會(huì)受到影響，比如下面的演示。
通常，相交區(qū)域的色彩要另外配置。也就是在繪制好了圖形的所有輪廓以后，將它們一起選中，然后使用 ”圖像生成工具“，再為相交的區(qū)域獨(dú)立選擇配色。下圖就是獨(dú)立挑選的兩個(gè)配色和透明度的方式對(duì)比。
面性風(fēng)格的設(shè)計(jì)到這里就講解完畢了，相對(duì)于線性設(shè)計(jì)來說，面性工具圖標(biāo)的設(shè)計(jì)就簡(jiǎn)單得多，雖然設(shè)計(jì)風(fēng)格有非常多的延展性和可能性，但大家始終要記得它們依舊是 ”工具圖標(biāo)“，識(shí)別性是優(yōu)先于視覺風(fēng)格的，所以切勿過度強(qiáng)調(diào)視覺性而將它們做成了裝飾性圖標(biāo)。
