怎么用Skech繪制一枚圖標(biāo)梳侨？繪制圖標(biāo)前有哪些注意事項需要了解的补履？圖標(biāo)繪制Sketch教程瓷耙，分為上下兩篇，上篇是先對圖標(biāo)的知識作大致的了解妻怎，在下篇中將講解如何使用Skech繪制圖標(biāo)壳炎，同時涉及簡單的布爾運算。
注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級的版本逼侦。
1.認(rèn)識圖標(biāo)
（1）圖標(biāo)是什么匿辩？
圖標(biāo)腰耙，外文名為icon，是計算機(jī)中的一種圖形或者符號铲球，一般由線挺庞、面或者線+面構(gòu)成。
圖標(biāo)在產(chǎn)品中隨處可見睬辐，例如手機(jī)設(shè)置項前方的圖標(biāo)挠阁，APP中的菜單圖標(biāo)宾肺。
（2）圖標(biāo)和logo的區(qū)別
很多人會把圖標(biāo)和logo歸為一類溯饵，但兩者有本質(zhì)上的區(qū)別。圖標(biāo)只是傳達(dá)想法的一些符號锨用，在產(chǎn)品中并不突出丰刊，屬于可有可無的部分；而logo是品牌標(biāo)識增拥，屬于品牌設(shè)計中的一部分啄巧，它代表的是一種企業(yè)理念。
當(dāng)然掌栅，圖標(biāo)也可以升級為logo秩仆，logo也可以當(dāng)作圖標(biāo)來使用，但一般僅限于應(yīng)用圖標(biāo)猾封，這里就涉及到應(yīng)用圖標(biāo)和功能圖標(biāo)的區(qū)別澄耍，本文主要針對功能圖標(biāo)的繪制說明。我們以谷歌瀏覽器為例晌缘，說明他們之間的差異齐莲。
（3）圖標(biāo)的作用
為什么要使用圖標(biāo)？因為圖標(biāo)發(fā)揮著兩個方面的作用：直觀磷箕、美觀选酗。直觀是指圖標(biāo)很多時候比文字表意更直接，能傳達(dá)復(fù)雜的功能含義岳枷，例如放大鏡圖標(biāo)芒填，能告訴用戶代表搜索的含義；美觀是指圖標(biāo)在頁面中起到點綴的作用空繁，可以讓頁面看起來不那么單調(diào)氢烘，也更耐看。例如家厌，支付寶首頁中播玖，基本是由圖標(biāo)組成，而不是全部文字饭于。
另外蜀踏，對于圖標(biāo)直觀的用法可以體現(xiàn)在交互說明當(dāng)中维蒙，例如針對移動端的手勢說明，使用圖標(biāo)能讓文檔閱讀對象更容易明白手勢交互效果果覆。
2.圖標(biāo)繪制規(guī)范
在動手繪制圖標(biāo)之前颅痊，圖標(biāo)繪制規(guī)范才是大部分設(shè)計需要惡補的一門課，因為局待，存在部分設(shè)計師直接照搬網(wǎng)絡(luò)圖標(biāo)資源的現(xiàn)象斑响，最終產(chǎn)出的圖標(biāo)不倫不類。
（1）圖標(biāo)繪制原則
圖標(biāo)繪制應(yīng)遵循三大原則：簡單钳榨、寓意舰罚、統(tǒng)一。
簡單：圖標(biāo)應(yīng)盡量使用簡單的線條或者填充面組成薛耻，避免過于復(fù)雜营罢。
寓意：圖標(biāo)應(yīng)貼合現(xiàn)實，從形狀上表達(dá)出一種寓意饼齿，讓用戶能了解其大概含義饲漾。
統(tǒng)一：如果為應(yīng)用設(shè)計一整套的圖標(biāo)，那風(fēng)格需要保持統(tǒng)一缕溉。
（2）圖標(biāo)尺寸
工具教程中考传，被咨詢最多的問題，應(yīng)該是尺寸問題了证鸥，常見的有原型僚楞、圖標(biāo)、屏幕尺寸等敌土。以手機(jī)APP為例镜硕，普通圖標(biāo)建議尺寸為48*48px或者64*64px，一般用于導(dǎo)航欄中返干；小圖標(biāo)建議尺寸為24*24px或者32*32px兴枯，一般用于顯示點贊數(shù)，閱讀數(shù)等輔助小圖標(biāo)中矩欠。（備注：左側(cè)手機(jī)截圖為縮放后的比例财剖，所以看起來和右側(cè)圖標(biāo)大小不太一致。）
（3）圖標(biāo)參考線
一個圖標(biāo)怎么樣設(shè)計才好看癌淮？答案是使用參考線躺坟。在參考線內(nèi)創(chuàng)作，且四周留白乳蓄，如果圖標(biāo)超出留白區(qū)域咪橙，就會顯得圖標(biāo)過大。以經(jīng)典的谷歌瀏覽器圖標(biāo)為例，它的應(yīng)用圖標(biāo)設(shè)計完全依照參考線來繪制美侦，同時符合留白法則产舞。
那么這些參考線是從哪里來呢？良心的Sketch自帶IOS圖標(biāo)的參考線菠剩，我們可以直接沿用易猫，調(diào)用路徑是在菜單欄中選擇“File”-“New From Templete”-“iOS App icon”即可。Sketch提供的參考線大小是512*512具壮，我們可以等比縮放為48*48px即可准颓。
