幾乎所有的UI設計都離不開圖標。但是對于這個司空見慣的東西，在分類上面卻往往會陷入混亂。為此，設計師Tess Gadd提出了自己的層次化分類建議，先按大小，再按類別，最后按要素對圖標進行劃分。里面不僅給出了具體的應用建議，還包括了豐富的樣例，可以成為各位設計師的參考指南。原文發表在Medium上，標題是：UI cheat sheet: Icon categories + icon style reference guide。篇幅關系，我們分兩部分刊出，此為第一部分。
圖標是最好的，不接受反駁。我對圖標的喜愛程度不亞于按鈕。不過，圖標的問題之一是我們真的不知道該從何說起。對于沒有圖形設計經驗的人來說，這尤其困難。
所以，我的這份速查表關注的重點是幫助我們對圖標的不同類型、類別以及樣式建立共同的理解。對圖標進行分類不是精確科學，不過這是我對怎么最好地做到這一點給出的解釋/建議。
在本速查表中，我們將介紹：
圖標分類：
定義圖標類別
圖標尺寸
圖標類別
圖標要素
Ico樣式參考：
小圖標樣式參考
大圖標樣式參考
最后思考
1.定義圖標類別
圖標樣式的分類方法有很多種。可以根據主題、色彩調色板、尺寸、年代、創建方式、文化背景、審美等進分類。對圖標進行分類時遇到的主要問題是，很多都是重復的，不具備很多的特異性。
下面的圖標看起來簡單，但從技術上講，就可以分為幾個類別。
目前的圖標分類存在的問題示例。
好吧，“但它究竟屬于哪一類？”，在回答這個問題之前，我們先看看其他網站是怎么分類的：
Iconfinder ：填充、輪廓、扁平、填充輪廓、3D、等距、手繪、卡通、像素、平滑、長陰影、徽章、半實線等。
FlatIcon ：黑色輪廓、黑色填充、多色、線性顏色（lineal colour）、扁平、漸變
IconStore.co：彩色，圖象字符、輪廓。
Material Design圖標：填充、輪廓、圓角、雙色調、銳利。
但是，可惜，以上的分類對我來說是無效的。圖標應該既可以是3D彩色的，也可以是手繪的、輪廓狀的，也可以是銳利的圖象字符等。
我的做法是分類要建立層次結構。首先，你得按大小（大圖標或小圖標）進行劃分，然后再按類別劃分（圖象字符、輪廓、填充、彩色形狀、擬物），然后按要素劃分（陰影、容器、3D、手繪等）。這樣就可以避免在前兩個級別出現重合，然后鼓勵在最底層的級別上重合。
該圖顯示兩個大類（大和小），然后是大類（字形，線條，實心輪廓，彩色形狀，擬形），然后是成分（標準，容器，漸變，等距，手繪，陰影，其他）。
2.圖標尺寸
你要設計的圖標的大小要取決于用途是什么。帶亮眼漸變和陰影的酷炫圖標的確很好看，但放在16px的文本標簽旁邊卻不會起到應有的作用。
因此，我傾向于把“大圖標”和“小圖標”分開，因為它們各自有不同的目的，偶爾也會重合。小圖標往往用作UI控件，可以起到功能性或裝飾性的目的。大圖標一般用來以圖形方式說明服務或功能，但也可以用來表示品牌的標識，并讓平臺在美學上更加令人愉悅。
區分大小圖標沒有明確的界限，但我一般以40px為分界線。
大圖標、小圖標劃分的圖示。
3.圖標類別
一旦確定了所需的圖標是“大”圖標還是“小”圖標，就可以把它們進一步細分為圖標類別：
填充圖標/字形
線條圖標
填充輪廓圖標
彩色形狀圖標
擬物圖標
圖標類別：字形、線條、填充輪廓、彩色形狀、擬物。
乍看之下，這似乎有點簡單，但是這么做的好處是不會重疊。你不能把彩色形狀的圖標往字形里面放，也不能把填充輪廓網擬物里面放。
就像油和水一樣，這些類別不會混在一起。
4.圖標要素
在使用較大的圖形時，你會希望圖標具備更多的細節，否則的話，圖標看起來就有些平淡無趣，甚至變成上天不容的“剪貼畫”。不過在用較小的圖標時——你幾乎不需要任何細節。
由于小圖標很小，所以可以操縱的像素更少。像素有限會導致要素有限。雖然小圖標做擬物也有可能性，但這種可能性不高，所以我們就略掉了。
圖標分類、要素二維表示例。
如果要制作的是大圖標，你會有更多的空間來表現一下你的藝術氣息。雖說做大字形也不是不可以，但我不建議你這樣做，因為會有點無聊，而且吸引力沒有顏色更豐富、細節更多的其他圖標類別那么大。
有些要素適用于所有的類別，有的則不然。某些圖標樣式可以包含多種要素，或者只能在某種樣式里面復制。或者，如果你觀察一下擬物圖標的話，其實大部分的要素它們都具備。
圖標要素示例：標準、容器、漸變、3D、手繪、陰影等。
注：不用說，實際的要素比這里提到的要多得多。
5.小圖標樣式參考
大家往往認為小圖標沒有大圖標那么有趣，但這跟事實相距甚遠。可以擺弄的空間更少迫使你要更具創造力。而且你還要被迫更多地考慮圖標要傳達的內容，而不是風格。
“簡單圖像可以更具包容性。” —蘇珊·卡瑞（Susan Kare）
5.1. 字形
字形（glyph）這個詞最初來自希臘語的單詞“gluphē ”，大致意思是“符號或象形文字”。我們現在使用的字形或填充/實心圖標通常只是一種彩色和實體形狀。這些圖標在縮小的時候往往仍會保持形狀。盡管它們非常容易辨認，但它們往往有點······無聊。在不運用顏色、輪廓等的情況下想給這些圖標增加一點“個性”可能會很棘手。
5.1.1. 標準字形或實心圖標
字形/填充圖標
字形不是最漂亮的圖標——但確實很容易看。這種圖標最適合在界面中用作小尺寸。以及在標志上用作大尺寸。
設計師注意事項：
要確保你的圖標達到像素完美。如果圖標制作得不正確的話，只有一種顏色會使得羽化非常明顯。
小字形要比大字形好看些。
在制作自己的字形之前，不妨考慮用現成的圖標字體。
不同字形集示例。Material Design圖標（填充）、Font Awesome（實心）、Ionicons（填充）。
5.1.2銳利圖標
銳利圖標
銳利圖標一般都是以字形/填充/實心圖標為基礎，但這些圖標有著銳利的邊緣。大多數圖標的邊框半徑只有一兩個像素，但銳利圖標會有硬邊。
你可能選擇使用銳利圖標而不是圓角圖標的原因之一是，圖標縮小到較小尺寸時會更清晰。如果看看下面的參考并將它們跟上一節的示例進行比較，你就會看到邊界半徑的差異。
設計師注意事項：
確保你的圖標像素完美。如果圖標制作不正確，只有一種顏色會導致羽化非常明顯。
小字形比大字形更好看。
在制作自己的字體之前，不妨考慮采用現有的圖標字體。
采用0像素邊框半徑。
不同銳利字形集示例。Material Design圖標（銳利），Ionicons（銳利）。
5.1.3. 帶彩色背景的字形圖標
彩色容器里面的字形圖標
2013年，Windows為極簡設計和字形引入了一種嶄新的外觀——把它們放到彩色背景上。事實證明，這種超級簡單的技巧能夠讓字形更友好，更具吸引力。
設計師注意事項：
為容器選擇4至12種顏色的調色板。
確定字形是淺色還是深色，并確保適用于所有的容器顏色。理想情況下，圖標的對比度為+7，而且最好不要黑色和白色。
在彩色背景上把字形做成白色要比在彩色背景上做成黑色更好看些。黑色會導致亮色看起來比較“模糊”。
彩色容器背景的字形例子。
5.2. 線條圖標
近年來，由于有著簡潔性以及更現代的外觀，線條或輪廓圖標已變得越來越流行。雖然字形往往被認為在可用性方面表現更好，但并不是所有的符號都這樣。比方說，對話泡泡圖標用線條圖標表示起來會更好。
5.2.1. 小尺寸線條圖標
小尺寸線條圖標
創建小尺寸線條圖標可能會比較棘手，過去我一般會用字形，因為創建更容易，并且更容易保持。但是，隨著智能手機屏幕變得越來越好，我們現在也可以享受一下采用線條圖標的奢侈了，就算做得不好的線條圖標在新iPhone上面也過得去。
設計師注意事項：
確保像素完美，這個要求甚至比字形圖標還要高。
越簡單越好。
力求細節簡單一些。
線條圖標集示例。Material Design圖標（輪廓），Feather Icon，Ionicons（填充）。
5.2.2. 雙色小尺寸線條圖標
雙色小尺寸線條圖標
在制作較小尺寸的圖標時，你得放棄細節，強調簡單形狀。添加一些顏色是可行的，但是當使用一種顏色的時候，可讀性就不會很理想。
設計師注意事項：
用兩種可以配合使用的顏色。
考慮一種顏色用于主要形狀，第二種顏色用于細節。
少即是多
使用粗線
盡管技術上而言這些圖標是小圖標，但不能太小。如果你想做得很小（22像素及以下），請使用普通的小尺寸線條圖標。
帶兩種顏色的小尺寸線條圖標示例。Yi?itPinrba?i制作的Candy Icons，Wilbur Xu制作的35 Simple Line Icons，Freebie：PixelBuddha的電子商務和導航矢量圖標集。
5.3小尺寸填充輪廓圖標
小尺寸填充輪廓圖標
我認為填充輪廓圖標是最“令人愉悅”的小圖標樣式之一。但是，如果顏色太多的話，就會出問題。
設計師注意事項：
純黑色的輪廓有時候看起來會很刺眼，所以還是用深色的顏色就好了。
按圖標、圖標集限制顏色調色板。
避免細節。少即是多。
小尺寸填充圖標的例子。Material Design圖標（雙色），Aha-Soft的16x16免費工具欄圖標， Sihan Liu的彩色天氣圖標。
5.4. 小尺寸彩色形狀圖標
小尺寸簡約扁平彩色圖標
在所有樣式里面，就美學而言，這也許是我最喜歡的樣式。簡單又巧妙的，這些小圖標很有內涵，同時還靠調色板和樣式傳遞出強大的品牌標識。
極簡圖標在縮小比例的時候也比其他的扁平圖標類型要有效得多，雖然仍比不上字形。不過這種圖標用在圖形區域的時候有時會顯得太小，用在界面的時候有時候又會顯得太大。我最喜歡的應用場合是演示是作為“要點符號”。
給設計師的提示：
這種圖標樣式要避免小尺寸（<20px）。
選擇2到3種可以一起使用的顏色。
以一種顏色作為基礎色，另一種顏色應作為高亮色/細節色。
彩色形狀圖標集的示例。Erdem創作的Freebie Security圖標，Nitish Khagwal的Vivid svg Icons， Fajrul Fitrianto為Inipagi Studio創作的SEO ICONS (FREE!)。
