線(xiàn)性圖標(biāo)是所有圖標(biāo)中最基礎(chǔ)的設(shè)計(jì)形式，也是最簡(jiǎn)單的入門(mén)。在我們后續(xù)設(shè)計(jì)其它的風(fēng)格圖標(biāo)前，首先要通過(guò)練習(xí)線(xiàn)性圖標(biāo)來(lái)打下堅(jiān)實(shí)的基礎(chǔ)。

什么是圖標(biāo)的基礎(chǔ)，有兩個(gè)方面：

? 制圖的規(guī)范性

? 圖形的合理應(yīng)用

只要圖形的設(shè)計(jì)能達(dá)到這兩個(gè)要求，才能在進(jìn)一步的創(chuàng)作中施展拳腳。并且，我們的案例演示，也會(huì)在每種類(lèi)型的設(shè)計(jì)中，通過(guò)最基礎(chǔ)的風(fēng)格演示，一層層遞進(jìn)演示其它設(shè)計(jì)風(fēng)格的設(shè)計(jì)過(guò)程，充分展示任何設(shè)計(jì)風(fēng)格與基礎(chǔ)之間的關(guān)系。

通過(guò)上一篇文章我們知道，線(xiàn)性圖標(biāo)的設(shè)計(jì)首先要確定圖標(biāo)的尺寸、描邊的粗細(xì)和繪制圖標(biāo)的柵格系統(tǒng)，所以我們先確定圖標(biāo)的規(guī)格為 28pt * 28pt，使用 2pt 的內(nèi)描邊（設(shè)計(jì)中 PT 可以等同 PX ），然后再畫(huà)出柵格，并進(jìn)行編組。

線(xiàn)形圖標(biāo)設(shè)計(jì)演示

1. 搜索圖標(biāo)

搜索圖標(biāo)是 APP 中最常見(jiàn)的圖標(biāo)，繪制原理也很簡(jiǎn)單，就是一個(gè)圓和圓角矩形的結(jié)合。

步驟 1：在案例中，設(shè)計(jì)的風(fēng)格主要是偏圓潤(rùn)一點(diǎn)的，那么鏡片的比例就要偏大。我們使用了尺寸為 20pt 的圓，和一個(gè)寬 2pt 高 9pt 的圓角矩形。

步驟 2：將矩形和圓形進(jìn)行連接并且垂直方向居中、編組，然后旋轉(zhuǎn) 45 度。之所以要先垂直再旋轉(zhuǎn)，是因?yàn)槿绻苯赢?huà)出一條傾斜的矩形再去連接鏡片，那么矩形的中軸將很難移動(dòng)到和圓心相交的位置。

步驟 3：調(diào)整搜索圖標(biāo)在模版中的位置，因?yàn)閹缀我曈X(jué)差的關(guān)系，要讓圖標(biāo)重心平穩(wěn)，那么就要向右下角偏移，最終效果見(jiàn)下圖。

2. 聊天圖標(biāo)

聊天圖標(biāo)的設(shè)計(jì)和搜索圖標(biāo)一樣，需要通過(guò)幾何圖形的組合完成，但不同于搜索圖標(biāo)的是，該圖標(biāo)需要應(yīng)用到路徑查找器面板的相關(guān)功能。

步驟 1：首先要畫(huà)出聊天氣泡的外輪廓，我們可以看出它是由一個(gè)圓角矩形和三角形組成，所以第一步要做的就是畫(huà)出這兩個(gè)元素。

步驟 2：將它們連接并垂直方向居中，然后使用路徑查找器面板的「聯(lián)集」選項(xiàng)，將它們合并成一個(gè)圖形。

步驟 3：在輪廓內(nèi)部畫(huà)一長(zhǎng)一短兩條 2pt 寬的矩形。

步驟 4：調(diào)整圖標(biāo)在模版中的位置，根據(jù)視覺(jué)差要將圖標(biāo)向下偏移，最終效果見(jiàn)下圖。

3. 查看圖標(biāo)

查看圖標(biāo)的設(shè)計(jì)也需要應(yīng)用路徑查找器的功能，實(shí)現(xiàn)過(guò)程也非常簡(jiǎn)單。

步驟 1：畫(huà)兩個(gè) 2pt 描邊，垂直方向?qū)R且相交的圓，并使用路徑查找器中的「交集」功能獲取它們相交的部分。

步驟 2：將這個(gè)圖形置入到模版中，然后可以通過(guò)拖動(dòng)圖形大小的方式，更改它的左右兩邊到像素對(duì)齊的位置（這個(gè)形狀的比例發(fā)生變化是沒(méi)問(wèn)題的）。

步驟 3：在中央位置添加一個(gè) 8pt 大小的圓，就完成了最終的效果。

4. 心形圖標(biāo)

心形圖標(biāo)如何繪制，對(duì)于新人來(lái)說(shuō)是一個(gè)非常常見(jiàn)的問(wèn)題。很多人都不知道具體該怎么畫(huà)出這個(gè)圖形，而心形圖標(biāo)又幾乎被運(yùn)用在所有應(yīng)用中，所以我們就要巧妙運(yùn)用幾何圖形的組合。

步驟 1：畫(huà)兩個(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. 卡券圖標(biāo)

卡券圖標(biāo)有一個(gè)外輪廓和內(nèi)部的虛線(xiàn)部分，外輪廓在上下有兩個(gè)半圓的凹槽，要通過(guò)兩個(gè)圓進(jìn)行裁切。

步驟 1：畫(huà)一個(gè) 28pt * 24pt的圓角矩形，并在上下方各畫(huà)一個(gè) 4pt 大小的圓，與矩形的邊緣相交。

步驟 2：確認(rèn)兩個(gè)小圓圖層順序在矩形的上方，然后選中三個(gè)圖層，使用路徑查找器中的「減去頂層」即可得到外輪廓。

步驟 3：最后，就是畫(huà)出卡片中的兩條「虛線(xiàn)」，再置入到模版中，就可以得到下圖的最終效果。

6. 房屋圖標(biāo)

從房屋圖標(biāo)的形狀中，我們可以看出它包含了三角、圓和矩形這三個(gè)形狀，主要的難點(diǎn)是如何通過(guò)三角形和矩形畫(huà)出外部的輪廓。

步驟 1：首先畫(huà)出一個(gè) 28pt * 10pt 的等腰三角形，再畫(huà)一個(gè) 22pt * 16pt 的矩形，將它們邊緣進(jìn)行重疊。

步驟 2：三角形三個(gè)尖角的圓角依次設(shè)置為 3pt、1pt、1pt（上、左、右），再將矩形下半部分的兩個(gè)直角添加 4pt 圓角。

步驟 3：執(zhí)行「聯(lián)集」操作，生成完整的外輪廓。之所以先做圓角再執(zhí)行聯(lián)集，是因?yàn)樘崆昂喜蓚€(gè)形狀，會(huì)導(dǎo)致一些尖角無(wú)法使用圓角工具。

步驟 4：畫(huà)出房屋中間的圓形，然后將圖形置入模版中，就可以得到下圖的最終效果。

7. 齒輪圖標(biāo)

齒輪在 UI 中一般作為設(shè)置的圖標(biāo)使用，也是常用圖標(biāo)中最難畫(huà)的圖標(biāo)之一。

步驟 1：畫(huà)一個(gè) 28pt 的大圓，然后再畫(huà)一個(gè) 8pt 的小圓，置于圓的左側(cè)。然后使用「旋轉(zhuǎn)工具」，將小圓旋轉(zhuǎn)中心固定到大圓的圓心中，按回車(chē)鍵，在彈出的對(duì)話(huà)框中選擇 60° 然后點(diǎn)擊復(fù)制按鈕，生成第二個(gè)圓。之后再按 Ctrl / Command +D 重復(fù)操作 4 次，就可以得到完整的圓環(huán)。

步驟 2：保證周?chē)?6 個(gè)圓在大圓的上層（一般來(lái)說(shuō)，新畫(huà)的六個(gè)小圓必然在大圓上層），并將 7 個(gè)圓全部選中，執(zhí)行「減去頂層」操作。

步驟 3：最后，將所有內(nèi)圓角改為 2pt，再畫(huà)一個(gè)直徑 8pt 的內(nèi)圓，然后在模版中調(diào)整到正確的位置即可，就可以得到下圖的最終效果。

8. 文件圖標(biāo)

文件圖標(biāo)也是一個(gè)很簡(jiǎn)單，但是大多數(shù)人就是做不好的圖標(biāo)，右下角的折角難倒了很多新手，在這里我們用一個(gè)簡(jiǎn)單的方法進(jìn)行實(shí)現(xiàn)。

步驟 1：先畫(huà)一個(gè) 20pt * 23pt 的圓角矩形（高不是偶數(shù)，后面會(huì)解釋?zhuān)?，然后要先把右下角的缺口做出?lái)。這里如果要使用減去頂層的方法做也可以，但我們要用一個(gè)更簡(jiǎn)單的操作，在右下角頂點(diǎn)上方和左側(cè) 6pt 的位置各添加一個(gè)錨點(diǎn)，然后使用「刪除錨點(diǎn)工具」刪除右下角頂點(diǎn)的錨點(diǎn)，就可以得到一個(gè)傾斜的切口。

步驟 2：在右下角畫(huà)一個(gè)圓角為 4pt 的矩形，然后將其中一個(gè)邊與上個(gè)步驟的缺口相交，相交的部分即為折角的部分。這時(shí)候選中兩個(gè)矩形，使用「形狀生成器工具」（快捷鍵 Shift + M），點(diǎn)擊一下圖示的部分，就會(huì)生成一個(gè)新的形狀組，接著取消它們的編組，再選中多余的圖形進(jìn)行刪除，就可以得到一個(gè)完整的折角效果。

步驟 3：最后，設(shè)置大圓角（4pt）和小圓角（2pt），并在內(nèi)部添加3個(gè)圓角矩形，再根據(jù)幾何的視覺(jué)差將圖標(biāo)置入模版中，向下移動(dòng)一個(gè)像素，就可以得到下圖的最終效果。

線(xiàn)性圖標(biāo)操作總結(jié)

作為圖文教程，沒(méi)辦法精細(xì)還原每一步操作，即使我們對(duì)第一部分的圖標(biāo)設(shè)計(jì)理論已經(jīng)有了深刻的認(rèn)識(shí)，但在實(shí)際操作階段還是有很多小細(xì)節(jié)會(huì)阻撓我們的設(shè)計(jì)進(jìn)度。下面，我們會(huì)列舉一些具體的問(wèn)題，幫助大家更好地認(rèn)識(shí)和解決操作過(guò)程中的難題。

1. 柵格的使用

針對(duì)柵格的使用，為了便于演示，我都給出了具體的數(shù)值，在最后一步才置入到模版中。實(shí)際上，我們應(yīng)該在一開(kāi)始的繪制中就在模版中進(jìn)行，而往往剛開(kāi)始畫(huà)的圖形尺寸是不能代表最終效果的。

比如最后一個(gè)文件圖標(biāo)中，為什么是 23pt，并且偏下 1pt。是因?yàn)橐婚_(kāi)始創(chuàng)建 24pt 高的矩形，在完成最終效果以后會(huì)發(fā)現(xiàn)重心上移，而且整體偏大了（下圖第一行），這時(shí)候縮減高度才能保證視覺(jué)的穩(wěn)定性（下圖第二行）。而房屋屋頂?shù)娜切?，我們使用的?28pt 撐滿(mǎn)畫(huà)布，這也是經(jīng)過(guò)了不斷地嘗試，測(cè)試了多種寬度和圓角效果后才確定出來(lái)的，并不是一蹴而就的。

2. 圖形的調(diào)整

圖形的不同角度、尺寸和比例，都會(huì)影響圖標(biāo)最后呈現(xiàn)的效果，需要我們?cè)谥谱鬟^(guò)程中保持對(duì)圖形優(yōu)化的態(tài)度，通過(guò)持續(xù)調(diào)整和對(duì)比找到最合適的結(jié)果。

比如搜索圖標(biāo)，重點(diǎn)在于圓和矩形的比例，不同比例會(huì)帶給我們截然不同的感受。

以及在查看圖標(biāo)中，圓形相切的比例不同，也決定了最終呈現(xiàn)的效果差異，相交越少感覺(jué)越尖銳，相交越多則感覺(jué)越圓潤(rùn)。

3. 多種操作方式

實(shí)現(xiàn)同一種效果，可以有非常多的操作方法，殊途同歸。雖然軟件只是實(shí)現(xiàn)設(shè)計(jì)的工具，但對(duì)工具的理解越全面越好，很多時(shí)候我們都可以嘗試使用不同的方法來(lái)實(shí)現(xiàn)相同的效果，而不用太拘泥于一種固定的形式。

比如在房子圖標(biāo)的繪制中，我們用的是三角形和矩形合并的形式制作的外輪廓。因?yàn)榫W(wǎng)格的存在，還可以直接通過(guò)鋼筆工具繪制，自由度更高，但對(duì)我們圖形把控能力的要求也更高。

再比如文件圖標(biāo)的步驟 2 中，用的是「形狀生成器工具」。如果將兩個(gè)圖形輪廓化，再使用路徑查找器中的「分割」，也能夠達(dá)到相同的效果。

結(jié)語(yǔ)

本篇教學(xué)的目的不是為了讓大家跟著我的步驟畫(huà)一遍，而是要從更多的緯度去思考設(shè)計(jì)過(guò)程中操作的細(xì)節(jié)。因?yàn)樗鼈兛雌饋?lái)實(shí)在是太容易了，從而使新人缺乏敬畏，直接跳過(guò)這個(gè)階段，開(kāi)始設(shè)計(jì)一些復(fù)雜、花哨的圖標(biāo)，比如下圖案例，這種做法對(duì)自身圖標(biāo)水平的提升沒(méi)有任何作用。

新手想要開(kāi)啟圖標(biāo)的練習(xí)，就要從這些最基礎(chǔ)的線(xiàn)性圖標(biāo)入手，不斷練習(xí)和思考如何通過(guò)正確、規(guī)范的操作制作圖標(biāo)。如果實(shí)在不知道要畫(huà)什么，通過(guò)臨摹微信、QQ 等成熟的應(yīng)用工具圖標(biāo)即可。

作者：超人的電話(huà)亭?

公眾號(hào)：超人的電話(huà)亭