圖標是UI設計中除了文字之外最不可或缺的視覺元素，在設計中看似只占一個很小的區域，但是它卻是考驗設計師基本功的重要標準，了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。

本文盡量將圖標進行系統一些的介紹說明，當然僅一篇文章是不可能面面俱到包含所有知識點。內容比較基礎，主要以 設計概念 和 設計思路 為主，對圖標相關的內容進行組織梳理和分類，便于小伙伴們建立圖標的概念體系。過程中也有針對幾種典型的圖標結構進行實操代練，想要把圖標設計的更好，這就需要我們在平時勤加練習外，還要進行深度的思考，希望我的這篇梳理可以給大家帶來幫助。

1.1 圖標的定義

圖標，也稱為icon或Picoto，是計算機世界對現實世界的隱喻和概括，代表軟件產品中的功能及操作。它的本質是一種符號，它采用對這個世界的隱喻，來指代功能，含義，用途等。

圖標做為國際通用性語言，生活中隨處可見，例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等，日常手機里使用的那些App圖標，如微信、電話、短信等。的確，圖標的形式有很多種，它可以應用在很多場景中，并且表現方式非常豐富，有線的、有面的、還有擬物的等。

如果粗淺劃分的話，UI設計中常見的圖標大致分為2大類，第一類我們稱之為「標志性圖標」，比如手機中應用啟動圖標;第二類我們稱之為「功能性圖標」，這類圖標經常出現于 App 或網站中，用于功能性指示引導或操作。

1.2 圖標的重要性

對于UI設計而言，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響著一款產品的形象和氣質。在不少 UI 界面中，圖標幾乎是這個頁面的核心支撐體，它直接影響著產品的視覺體驗和產品調性。它有以下幾點好處：

全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣;

節約空間：如果在一個圖標能夠表述清楚含義的時候，比如用一個叉就可以不用寫「關閉」;

快速定位：圖標可以用它獨特的形狀或者顏色讓人快速定位到一個功能;

上下文的定位：比如小飛機的圖標單獨放出來不確定是什么，但是在和收件箱在一起它就可以認為是發件箱了。

1.3 發展歷程

如你所知，圖標、標識都不是界面設計師所創造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中，早期用來傳達信息的圖標演變為系統的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標和標識。

隨著技術的發展，計算機誕生了，而顯示器的出現，也為圖形化界面的誕生，鋪平了道路。20世紀70年代，施樂在位于帕羅奧托的研究所當中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而Xerox Alto 對于喬布斯和比爾蓋茨的啟發，更是引發了計算機歷史上最著名的一場戰爭：蘋果VS微軟，Windows 對抗 Macintosh。當然這都是后話。

來自蘋果的Macintosh系統在圖形化界面發展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發布了彩色的圖標設計。圖標所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。

從iMac到iPhone引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標的質感、光影會分散用戶的注意力，形成「視覺噪聲」。于是UI設計師開始探索更新的表現形式來設計界面中的圖標。如微軟引領的Metro風格圖標設計和Google引領的長投影風格的圖標設計，但由于它們的表現形式太過于抽象，缺乏情感的傳遞，并沒有獲得用戶的青睞。

在此之后，越來越多的圖標開始借由靈活而強大的數字技術而誕生，并且基于不同的需求而演化出不同的分支和風格。許多操作系統和工具開始預制一些成體系的圖標，誕生基于種種需求，越來越多的自制的、重設計的圖標，逐步進入了我們的視野。圖標類型很多，我們可以用不同的方式來劃分它們。

圖標的類型

2.1 擬物圖標

由于人們都是通過以往的認知來理解新事物，所以基于這一點，早期應用界面必然要采用擬物風格，以便于人們的理解和操作。是一個由實物 → 符號的發展歷程。

例如「保存」圖標就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標的實體。但隨著時間的推移，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里，它不再是一個具象事物的抽象符號，而是直接當成一個實體來使用，甚至這個符號的實體已經淡出歷史，但人們還在習慣性使用這個符號。

更具體點來說，擬物設計就是追求模擬現實物品的造型和質感，通過疊加高光、紋理、材質、陰影等各種效果對實物進行再現(也可適當程度變形和夸張);扁平化設計就是摒棄以上對效果(尤其是高光、陰影等能造成透視感的效果)的追求，轉而通過抽象、簡化、符號化的設計元素來表現。你還記得曾經熬夜畫寫實圖標的日子嘛～上千個圖層不在話下有木有!

但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。再者，大家都熟悉的事物其實非常有限，而 APP 的創新卻在不斷進行，很多創新的產品本身在現實世界就沒有參照物，所以也決定了擬物圖標必然會被取代。

2.2 扁平圖標

區別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，進行平面化的表現。

2013年，蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素讓“信息”本身重新作為核心被凸顯出來。并且在設計元素上強調抽象、極簡、符號化的概念。

扁平圖標風格發展的后期，由于它們表現形式太過于抽象、缺乏情感的傳遞，也沒有獲得大眾的青睞，這也表明 UI 新的趨勢再一部向“突出內容”的本質靠攏，即“認知簡約”。也許當滿世界都是扁平化后，擬物化的設計卻又變得更顯眼了呢?最近流行的新擬物風格就是最好的證明。

2.3 微扁平、輕擬物

從扁平風格發展至現在，圖標慢慢開始發展到微扁平輕擬物的方向，相較于擬物風格不會有太多復雜的視覺元素，與扁平風格又有了更豐富的情感內容，所以現在界面中，在面積比較小的區域我們使用扁平圖標或線形圖標;在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。

2.4 線性圖標

線性圖標是由直線、曲線、點在內等元素組合而成的圖標樣式，通過線來塑造輪廓。線性圖標具有辨識度高，清晰，簡約易識別等優點，線性圖標不會對頁面造成太多的視覺干擾。缺點是：線性圖標的創作空間較少，太復雜的線性圖標對識別性產生較大的困擾。

在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。直角線條的icon顯得專業嚴謹，圓角粗線條的 ICON 顯得飽滿而可愛。

2.5 面性圖標

面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。

面形圖標具有表意能力強，細節豐富，情緒感強，視覺突出，創作空間大等優點。面性圖標可以讓用戶迅速定位圖標位置，預知點擊后的狀態。但是面性圖標在頁面中不可過多出現，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。

2.5 文字圖標

文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標，是一種很不錯的表現手法。

比如「提示」圖標，使用一個圓圈包裹一個英文字母「i」，表示 information，表示「注釋信息」的含義;比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進行表達，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標識，這個概念太抽象了，很難用象形去概括，創造新的表意符號又很難被大眾接受，這時「正」字就很適合作為這個場景特定的圖標符號，作為針對中國用戶群體的產品圖標，簡單粗暴且有效。

如果可能的話，盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。