5分鍾移動端圖標全攻略！

icon在界麵中是一個非常重要的元素，它們解決了很多問題，也是影響界麵交互可用性及識別性的關鍵因素，看起來小小的一個icon，隻有設計師知道為了設計好每一個細節，讓它簡單、美觀又易懂花費了多少心血。

圖標的定義

在一般對圖標的定義中，圖標是具有指代意義的圖形符號，具有高度濃縮並快捷傳達信息，便於記憶的特性，應用範圍很廣，並不局限於計算機軟件，單純計算機軟件中的圖標包括了程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示等。

在界麵設計中，圖標在某些場景中可以取代文本，豐富界麵中的視覺效果，有研究表明大多數人理解圖像比文字的速度快，清晰易懂的圖標對於用戶理解界麵中的信息是非常好的助力，但如果是一個容易讓用戶理解錯誤的圖標會導致很不好的用戶體驗，因此，理解圖標的類型以及細節是界麵設計中不可或缺的一部分。

圖標的曆史

最早的計算機圖標，是出現在施樂公司在20世紀70年代研發的Xerox Alto中，當時它運用的文件夾和垃圾箱的圖標被沿用至今。

1991年蘋果公司推出了一組MacOS X彩色圖標，是圖標發展曆程中的一個裏程碑式的進步，這些交互圖標集美觀與傳達信息為一體，代表著擬物化風格的形成。

在現在的UI設計中，各式各樣的圖標非常豐富，網絡上也有非常多現成的設計包，各個圖標庫的圖標也不斷創新，那麼，主流的交互圖標可以分為幾類呢？

按功能分類

1、分類圖標

分類圖標的目的是為了解釋某種功能或者是內容的種類。有些情況下，它們會同時帶有文本信息以確保信息傳達準確，比起單文本的分類，視覺效果更豐富，提升了可識別性，可以立即理解圖標的用戶就不用再關注文字。

2、功能圖標

功能圖標是具有指代意義且具有功能標識的圖標，它們是可點擊的，可操作的，主要目的是告知用戶按鈕、控件或其它交互元素所代表的功能或特性

3、裝飾圖標

除了表達功能，界麵中也會有一些裝飾性為主，表達一些信息為輔的裝飾性圖標，常見於各個產品的節日主題等

4、應用圖標

應用圖標是產品的Logo，適用於不同的平台，要保證帶有鮮明的產品特征，在手機界麵中可以清晰的被識別。

按風格分類

1、填充圖標

填充圖標視覺占比大，具有更高的視覺衝擊力，更容易被用戶識別

（1）半透明填充圖標

圖標的部分用透明度來增加圖標的層次感，視覺效果更豐富

（2）彌散投影填充圖標

圖標內帶有同色係的深色彌散投影，增加圖標的微質感

（3）撞色填充圖標

吸引用戶目光，在APP內謹慎使用，需保持和整體界麵風格一致

2、線性圖標

線性圖標需要使用粗細一致的線條繪製，通常使用2px的線條繪製，根據風格不同也有3-5px不同的粗細程度，可以降低界麵圖形太多對用戶的視覺幹擾，讓整個界麵留白合理，視覺上更加簡潔

（1）圓角線性圖標

適用於表現女性、母嬰、年輕活力的產品，給人以親和力、可愛的感覺

（2）直角線性圖標

直角圖標偏向商務、金融等產品，給人以幹淨利落的感覺

（3）斷點線性圖標

通過圖標的斷點豐富圖標的視覺效果，增加特色

（4）雙色線性圖標

雙色圖標可以使用黑白灰色+彩色的結合，也可以用主體色+點綴色的結合，和撞色圖標一樣，配色需要謹慎使用，保持界麵整體風格一致，不要過亂過花。

3、線麵結合圖標

現在APP設計中最常用也是最流行的風格，，線是概括產品的圖形，麵通常充當裝飾點綴的作用，這裏的麵可以是單色的，也可以是漸變的，適應多種產品，表現形式豐富

（1）半透明結合圖標

半透明結合圖標通常使用同色係的半透明部分填充和線性圖標結合以增加圖標的層次感，通常用於列表、標簽欄選中狀態等

（2）撞色結合圖標

撞色圖標風格大膽，層次感更加豐富，也增加了圖標的趣味性，通常運用於標簽欄、列表、快捷入口等地.

（3）漸變結合圖標

使用漸變填充和線條結合的圖標質感更加豐富，在保持圖標一致性的同時，更加吸引用戶的注意力，識別性較強，通常用於圖標的選中狀態

（4）MBE風格

使用較粗的深色描邊，圓潤的線條，鮮明的配色，填充顏色略有錯開，簡潔有趣，用於界麵上很有活力，通常用於卡片裝飾、功能入口等

總結

1、先考慮應用的場景，再考慮APP的整體風格。

2、填充圖標、線性圖標、線麵結合圖標各有優點，填充圖標更吸引用戶注意力，視覺衝擊力強，線性圖標更加簡潔幹淨，降低太多色塊對用戶造成的視覺幹擾，而線麵結合圖標非常百搭，可以表現圖標的各種狀態。

3、圖標的統一性很重要，圖標的視覺大小、圓角弧度、線條粗細、質感參數都要保持一致.