圖標在生活中是隨處可見的，如交通標志中的下坡提示標（左圖），或者是公共場合禁止抽煙的提示標（中圖），又或者是停車提示標（右圖）等，如圖所示。
相比文字來說，這些圖標可以讓人在更短的時間內認知并了解信息，并且可以大大提升信息的視覺美觀性。
從人機交互的角度來說，使用圖標比使用文本更具有優勢。因為圖標簡單、醒目且友好，同時在界面的一些空間較小的位置，圖標可以代替一段冗長枯燥的文字描述，并增加設計的藝術感染力；在用戶界面中使用圖標，是一種用戶熟知的設計模式。
盡管圖標有這些優點，但如果不考慮其一些負面影響，可能會導致出現一些不可用的問題。
例如，在一些敏感位置使用識別度不高的圖標，可能會造成用戶的誤操作。同時，圖標放置位置不合適，或者風格不統一，也會給用戶造成一些不良感受。
下面數藝君將較為系統地講解一下各種圖標的繪制方式與應用場景。
1
App圖標
應用圖標帶給用戶對產品的第一印象。從某種程度上來說，用戶可以通過應用圖標判斷出一款產品的好壞。一個好的應用圖標應該能清晰地傳遞出產品的內涵。
應用圖標的常見設計形式：
應用圖標的設計形式較多樣，包括抽象圖形、文字、卡通形象和功能圖形的運用。
（1）抽象圖形的運用
隨著設計行業的不斷發展，擬物化圖標逐漸消失，取而代之的是扁平化圖標。扁平化圖標通常由抽象元素制作而成，雖然看起來簡單了，但其實對設計提出了更高的要求。
例如，“QQ音樂”與“網易云音樂”的音符圖形（左一圖和左二圖），“微信”的聊天氣泡圖形（左三圖），以及“墨跡天氣”的云朵圖形（左四圖）等，如圖所示。
在應用圖標設計中，運用抽象圖形的優點是可以讓用戶第一眼看到圖標時就知道這大概是一個什么產品，并且使得品牌具有獨特性；
運用抽象圖形的缺點是對設計要求較高且設計難度較大，一旦圖形被設計得太過抽象，就會降低產品的識別度，并且無法使其很好地與其他圖標區分開來，質感較差。
（2）文字的運用
用戶對漢字的敏感程度遠遠高于圖形。因此，如今越來越多的產品開始使用文字來設計應用圖標了。在使用文字設計應用圖標時，一般會選擇產品名稱中具有代表性的文字，并且會通過對字體筆畫做出一些變化，使得圖標能夠與產品的屬性相融合。
一般來說，品牌名稱不超過3個字的產品，都適合采用此類設計形式進行圖標設計，如“淘寶”圖標（左一圖）、“知乎”圖標（左二圖）及“閑魚”圖標（左三圖）等；而針對品牌名稱超過3個字的產品，最好篩選具有代表性的文字作為圖標，如“字里行間”圖標（左四圖）等。如圖所示。
在應用圖標設計中，文字運用的優點是可以讓用戶更好地記住產品；文字運用的缺點是品牌延展性較差。在營造產品格調時，文字圖標相比圖形圖標來說難度要大一些，并且對于一些較為小眾的產品來說，僅通過文字是很難清晰地傳遞出產品的屬性的。
（3）卡通形象的運用
隨著各大主流產品吉祥物的出現，很多品牌商索性把吉祥物的卡通形象融入應用圖標的設計中，如“京東商城”的卡通小狗形象（左一圖）、“轉轉”的卡通小熊形象（左二圖）、“美團外賣”的卡通袋鼠形象（左三圖），以及“斗魚直播”的卡通鯊魚形象（左四圖）等，如圖所示。
在應用圖標設計中，卡通形象運用的優點是可以讓產品更具情感，相比抽象的圖形和純粹的文字運用與表達來說，會顯得更親切一些。卡通形象運用的缺點是視覺上較容易與其他同類圖標產生雷同的情況。
（4）功能圖形的運用
針對一些體量較小且功能性較單一的產品，為了更清晰地傳遞產品屬性，設計師可能會直接根據功能需求來設計出相應的功能圖形并運用到圖標中。例如，iOS 系統自帶的計算器應用圖標（左一圖）、“秒拍”的相機圖標（左二圖）、“高德地圖”的圖標（左三圖），以及“360 日歷”圖標（左四圖）等，如圖所示。
在應用圖標設計中，功能圖形運用的優點是可以強調工具屬性，減少用戶認知成本；功能圖形運用的缺點是針對一些功能體量較大的產品，很難通過一個功能圖形將產品屬性信息傳遞清楚，而且不容易表現出與同類產品圖標的差異化。
應用圖標的設計技巧及注意事項：
（1）簡潔的設計元素
應用圖標在手機屏幕中的顯示尺寸僅為120px×20px，甚至有的情況下圖標顯示的尺寸還會比這個尺寸更小。因此，在設計應用圖標時要做到盡量簡潔，避免小尺寸展示時出現不清晰甚至無法識別的情況。同時，簡潔的效果也能從一定程度上提升圖標的質感。
如圖所示，“QQ音樂”圖標（左圖）與“餓了么”圖標（右圖）設計元素都非常簡潔，即使縮小也可以看得清結構。
（2）設計語言符合產品性格
應用圖標能帶給用戶對產品的第一印象，所以應用圖標的設計語言一定要符合產品的性格。
如圖所示，“抖音”的圖標（左圖）可以體現出產品青春、動感的性格，“ONE”的圖標（右圖）可以體現出產品安靜、文藝的性格。
（3）不宜使用照片
在應用圖標設計中，應盡量避免直接使用照片。因為圖片縮小后很多細節都不容易看清，如此會影響圖標的識別性。同時，由于圖標縮小后圖片質量也可能會降低，因此對圖標的質感體現也會有影響。
（4）明亮鮮活的色彩
iOS10系統人機界面指南中闡明了其色彩搭配的一些規范，其內置的應用程序選擇使用了一些更具個性的、純粹的且干凈的顏色。
例如，iOS系統內置的“圖書”應用圖標使用的是橙色，“天氣”和“視頻”應用圖標使用的是藍色，“健康”應用圖標使用的是粉紅色等，都從一定程度上體現了產品的功能應用屬性，更方便用戶區分，如圖所示。
2
APP功能圖標
功能圖標的樣式有很多，作用也各不相同，在具體設計時要基于不同的應用場景選擇不同屬性的圖標。
同時，由于不同圖標所表達的意義不同，其樣式、復雜程度及大小也有所不同。功能圖標可以讓界面充滿設計感，且通過圖形化的設計讓用戶瀏覽界面時效率更高。
功能圖標的設計原則：
（1）預見性
功能圖標存在的最大意義是提高用戶獲取信息的效率，因此功能圖標要做到即便是脫離文字，也可以讓用戶通過圖標了解入口的屬性。如果制作的圖標只是好看而失去了識別性用戶界面關系圖，就有些本末倒置了。
一些比較抽象的圖標很難讓用戶一眼就識別清楚，在優化過程中，設計師可以進行相關元素的聯想，然后將它處理得盡量貼合表意。
當然，針對有些以文字為主的裝飾性圖標，就不需要這么強的識別性了，但也要貼合文字內容主題去進行設計。如圖所示，以圖標為主的功能入口一般設計得較為清晰和直觀，而以文字為主的功能入口則會設計得較為簡單、抽象一些。
（2）美觀性
針對功能圖標的制作，在保證識別性的前提下，要盡量做到美觀。單個圖標的美觀呈現除了靠造型與配色，更多地體現在細節處理上。這里講幾個比較重要的細節。
如果將一些復雜的圖標放在不重要且面積較小的位置，會很難被識別，也就無法達到美觀的效果了；如果將一些太過簡單的圖標放在主要功能入口，會顯得粗糙。因此，將不同樣式的圖標放置在合適的位置，才能達到美觀的目的。
以“蝦米音樂”為例，其主要功能入口的圖標稍顯復雜，而個人中心頁的圖標則較為簡單，如此既表意明確，又使得界面整體看起來美觀，如圖所示。
這里還需要注意的一點是，在設計線性功能圖標時，注意切忌用反白的方式。因為線條無法壓住大面積的色塊，同時在有底色的背景上放置線性圖標，也可能會使圖標看起來粗糙。線性圖標和面性圖標使用反白效果對比如圖所示。
（3）統一性
在一個產品中，功能圖標的數量往往較多，因此圖標的統一性就顯得尤為重要。統一的圖標可以提升產品的品質感，并且同一屬性的圖標如果保持樣式上的統一，可以降低用戶認知成本，提升用戶的使用效率。
在功能圖標設計中，要先保證同一屬性的圖標從風格、視覺大小、粗細、端點、圓角、復雜程度及特殊元素上實現統一。
風格上的統一很好理解用戶界面關系圖，因此不做過多描述。對于視覺大小的統一而言，人的視覺是有誤差的，因此有時完全保證兩個圖標的統一，在視覺上卻并不一定協調。下圖所示為兩個高度相等的圖形，我們看上去卻會明顯感覺到左邊的正方形要大一些，而右邊的圓形要小一些。
基于以上分析，在進行系列圖標設計時，可以考慮將矩形稍微調小一些，或者將圓形稍微調大一些，使兩者在視覺上看起來大小統一，如圖所示。
粗細統一、端點統一和圓角統一是細節上要留意的點，基本上沒有難度。例如，針對同一表意目的的兩個線性圖標，如果一個圖標的描邊粗細是1pt，那么另外一個也要保持1pt才行。
端點統一與圓角統一也是同理，針對同一表意目的的兩個線性圖標，如果一個圖標的端點采用了圓角樣式，那么另外一個也需要采用圓角樣式，如圖所示。
復雜程度的統一指同一組圖標內細節程度的統一。針對同一表意目的的功能圖標，如果其中一個圖標細節豐富，并且輪廓清晰，那么整組圖標都要保持這樣的細節程度才行，如圖所示。
很多設計師在設計圖標時，喜歡加入一些特殊元素，以此達到塑造產品性格并烘托產品氣氛的目的。針對同一表意目的的功能圖標，如果其中一個圖標添加了這種特殊元素，其他圖標都要添加才行，如圖所示。
以上講述的是同一表意目的的圖標設計需要注意的原則。針對不同表意目的的圖標，就不需要過多地強調細節上的統一了，迎合整個產品的性格即可，如“唱吧”等偏娛樂化并且目標用戶多為年輕人的產品，如圖所示。
功能圖標的表現形式及適用場景:
（1）線性圖標
線性圖標是通過提煉圖形的輪廓，然后簡單勾勒而成的圖標，線條描邊多為1pt。線條描邊越粗，視覺層級越高。由于線性圖標視覺層級較低，因此多在同一產品內且功能入口較多的情況（如在未點擊狀態下的底部導航按鈕和輔助功能按鈕等）下使用，而很少在主要功能入口使用。下圖所示為線性圖標的使用情況。
線性功能圖標不宜過于復雜，圖標在界面中越小就越要簡單，如圖所示。一些功能入口圖標在界面中所占面積可能較大，需要多一些細節才行，防止視覺上的單調。這種細節主要體現在端點、粗細線條結合及圖形點綴等多種方式的結合處理上。
另外要注意的一點是，純色線性圖標適用于大部分常規的產品界面中，而多色線性圖標更顯活潑、年輕化，視覺層級較高，需要謹慎使用。多色線性圖標如圖所示。
（2）面性圖標
在界面設計中，面性圖標更容易吸引用戶的視覺，一般常用于一些重要的快捷入口處。面性圖標又分為反白圖標和形狀圖標兩種類型。
反白圖標是指底部由圖形背景托起的圖標。一般這種圖標層級較高，常用于首頁界面中，并且一屏的圖標數量不超過10個，如圖所示。
形狀圖標是指沒有底部背景，由純粹的形狀圖形組成的圖標，如圖所示。這種圖標應用較廣泛，設計方式也相對固定。在設計過程中尤其要注意的是圖形風格與設計語言的統一。
（3）線面結合性圖標
線面結合性圖標比線性圖標和面性圖標多了一些細節，視覺層級也更高，常用在功能入口、空狀態及標簽欄等位置，如圖所示。線面結合性圖標能突顯年輕、文藝的視覺效果，對于屬性較為穩重的產品界面設計來說不太適用。
3
常用的圖標庫
目前，由于互聯網產品迭代較快，很多基礎的圖標并不需要設計師手動繪制，而是直接在網上的圖標庫下載調用即可。
如此可以為設計節省很多時間，讓設計師有更多的精力去思考用戶體驗方面的優化。而其中使用最多的是“”（阿里巴巴矢量圖標庫），如圖所示。