2021-3-31 周周
在 UI 的設計體系中，圖標是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
網上現存不少關于圖標繪制的文章和教學，但不是太籠統，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認知中對它有比較全面、系統的認識，所以大多數初級的 UI設計師，始終畫不好圖標。
針對這個問題，我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法，讓所有設計新人更快地上手圖標設計。
本文共分為5個部分：
圖標，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義指的是所有現實中有明確指向含義的圖形符號，狹義主要指在計算機設備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI設計師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關鍵元素之一。
在當下最常見的扁平化設計風格中，界面的實際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標。
△ 由圖片、文字、幾何、圖標組成的界面
可以說，圖片、文字、幾何圖形的運用，都只用到排版的技巧，而圖標，是 UI設計中除了插畫元素以外唯一需要我們「繪制」、「創作」的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好的設計圖標？
△ Clear APP 的截圖
這就涉及圖標作用的探討了，為了節約篇幅，更快進入大家最想看的重點干貨，我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了，就談對于圖形界面本身，為什么圖標有這么重要的地位，沒它不行？
有兩個原因，第一文字雖然也是一種圖形符號，但相對于圖標而言，文字實在太復雜了，在識別效率上有先天的劣勢。再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標可以以一種更高效的方式，將我們想要傳遞的信息進行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
△ 應用文字替換了圖標的對比
第二點，就是關于視覺的觀賞性。有些頁面中，如果把圖標去掉了，也絲毫不會影響我們的操作效率，以及對內容的理解。但沒有圖標，缺少這些點綴，我們就會覺得這個頁面看起來太枯燥了，不得勁，最好的例子就是應用的設置頁了，見下方案例。
△ 設置頁有圖標和沒有圖標的對比
既然知道了圖標的作用和重要性，那么接下來，就要進一步了解在工作中我們要設計哪些圖標。
可以先劃分成三種大類：
下面，我們將對它們分別進行介紹，以及展示相關的設計類型，方便讀者在開始學習具體設計前，對 UI設計會創作的圖標有更全面的認識。
首先，我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型，即應用內有明確功能、提示含義的標識。作為最常見的圖標類型，我們就不需要做太多的說明了。
△ 常見的工具圖標
雖然理解起來容易，但是它所包含的設計樣式卻并不少，可以把它們歸納成線性、面性兩個大類，再分別進行細分。
1. 風格1：線性風格
線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的。多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。
下面我們把它們羅列出來。
△ 線性風格的工具圖標
2. 風格2：面性風格
面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。
△ 面性風格的工具圖標
當然，在設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。常見的樣式類型如下：
△ 混合風格的工具圖標
和工具圖標比起來，裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內容的觀賞性，減少一屏內顯示內容的數量。
比如在分類列表里，是可以只使用線框和文字把大量內容濃縮到一屏以內，但實際瀏覽效率并不會增加，而且并不美觀。
△ 裝飾圖標在識別性上的作用
還有就是國內的界面設計環境，會根據運營需求設計進行特殊化處理，尤其在電商領域，首屏的圖標都會改成首頁風格的樣式，增加活動氛圍。
△ 節日活動中的裝飾圖標
裝飾性的圖標設計，雖然沒有明確的規范該怎么做，效果怎么好怎么來，但最常見的類型有四種，下面分別進行介紹。
1. 扁平風格
扁平風格的裝飾圖標，通常可以理解成是用扁平插畫的方式畫出來的圖標，除了繼承扁平的純色填充特性以外，也比普通圖標有更豐富的細節與趣味性。
△ 扁平風格的裝飾圖標
擬物風格的圖標現在出現的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設計成有故事性的場景，所以自然頂部的相關圖標使用擬物的設計形式會更貼合。
△ 擬物風格的裝飾圖標
3. 2.5D風格
2.5D是一種偏卡通、像素畫風格的扁平設計類型，在一些非必要的設計環境中，使用2.5D會比較容易搭配主流的界面設計風格，有更強的趣味性和層次感。
△ 2.5D風格的裝飾圖標
4. 炫彩漸變
這是一個拗口的原創名詞，找不到更合適的形容，還是覺得浮夸點符合它的氣質。這種圖標，就是通過一系列非常激進的漸變和撞色實現，通常還會使用彩色的陰影。
使用這樣圖標的區域，通常都會呈現出一副五彩斑斕的景象，只有在內容非常豐富且用戶偏向年輕化的產品中可以使用，是一種非常難駕馭的設計風格。
△ 炫彩漸變風格的裝飾圖標
5. 實物貼圖
最后一種，就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的，但想想還是放進來合適。因為這種圖標的出現頻率非常高，有必要在后面掌握它的做法。
△ 應用攝影實物的裝飾圖標
最后，就要說說啟動圖標了。啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把「LOGO嵌套進系統圖標模版」的圖標。
除了掌握必要的規范以外，啟動圖標的主體物設計就是 LOGO 的設計，已經超出了圖標繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習，這里我們先來了解一下它有哪幾種設計形式。
1. 文字形式
使用了文字作為圖標主體物的類型，通常是這類應用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
△ 文字類的啟動圖標
2. 圖標形式
對于一些偏工具，適合用簡單圖形傳達應用功能的啟動圖標，就會采取使用工具圖標的方式設計。
△ 圖標類的啟動圖標
3. 圖形圖標
圖形形式看起來和圖標形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標，是因為這類圖標的主體圖形是一種經過高度抽象化的標識，傳達的是品牌性，而不是圖形的含義。
△ 圖形類的啟動圖標
4. 插畫形式
對于一些比較純粹的應用，如讀本、漫畫、幼兒類應用，就熱衷于采用卡通形象作為圖標的主體進行設計。
△ 插畫類的啟動圖標
5. 擬物形式
雖然現在扁平化的設計占據主導地位，但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說，擬物設計所傳遞的信息往往更直觀和準確。
△ 擬物類的啟動圖標
當然，還有其它的數之不盡的啟動圖標設計方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了。
前面介紹的三種圖標，就是今后在進入 UI 行業設計的內容。雖然圖標看起來簡單，但可以玩出的花樣不少。除了正確設計出圖標以外，高低階的 UI設計師之間的區別也包含圖標設計類型掌握的多寡。
所以，在開始學習前，不要將設計圖標的目標局限在最簡單的圖形繪制上，還有很多有趣的設計形式等待你們去嘗試。
了解了圖標的類型，就要開始了解做出這些圖標應該使用哪些軟件了。通常，UI 主要使用的設計軟件包含 PS、AI、Sketch、XD四款，理論上，它們都包含了圖標繪制的功能，如果我直接告訴大家去精通這4款軟件那么畫圖標就一點難度都沒有了，這是非常不負責任的，所以為了對新人更友好一點（如果已經全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標設計的優劣，以及需要掌握的部分。
1. Sketch / XD
這兩款軟件是我們設計 UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創作和繪圖。
雖然它們都包含路徑、鋼筆、布爾運算等功能（Sketch 相對 XD 更完善一點），想要繪制一些非常基礎的線性或面性圖標時沒有問題，但只要涉及到比較復雜的圖形，往往就束手無策。
所以，我建議所有學習 UI 的新人，都不要從這兩個軟件中入手，而是先掌握 PS 和 AI，后面想要快速實現一些簡單的圖標時，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應用決定了我們圖標設計的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款無論什么東西都設計得出來的設計軟件，但是，它本質上是一款「位圖軟件」。后續的文章中會提及，在界面中采用矢量格式的圖標是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復制到其它軟件中。
實際項目中，我們會用 PS 設計一些視覺表現相對復雜的圖標，例如啟動圖標、擬物圖標、實物圖標等等。
繪制圖標需要用到的 PS 功能并不太多，需要在前期學習這個軟件的過程中加以篩選，重點是以下知識點：
雖然 PS 在實際項目中是用來畫復雜的圖標，但并不妨礙我們使用 PS 從最基礎的圖標開始畫起，因為想要熟練掌握上方的知識點，簡易的工具圖標是最好的磨刀石，之后再學習 AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 設計必學的一款軟件，它的功能異常豐富，主要用來設計矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細節的調整上，是最全面最細膩的軟件，并且 AI 中的圖形還可以直接復制粘貼到其它應用的畫布中。
如果掌握了上方提及的 PS 基礎，那么學習 AI 也就輕松了不少，其中，AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的：
花幾個晚上，掌握了 PS 和 AI 的相關知識點以后，就為我們后續的學習提供了技術支持，可以進入下一階段了。
這是圖標系列文章的第一篇，信息量不算少。所以我們在結尾再總結一次，方便大家記憶。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務