圖標(biāo)設(shè)計(jì)的課程做了很久也很多，但不管怎么做，大家都還是會(huì)持續(xù)提出五花八門的問題，多數(shù)問題不是沒看完課程還是沒練習(xí)導(dǎo)致的，而是純粹的認(rèn)知上的盲點(diǎn)，且這些盲點(diǎn)往往又非?；A(chǔ)。

所以，我要做個(gè)基礎(chǔ)的圖標(biāo)基本概念的掃盲，讓所有初學(xué)者在學(xué)習(xí)圖標(biāo)設(shè)計(jì)之前，先對 UI 圖標(biāo)的設(shè)計(jì)有個(gè)統(tǒng)一的認(rèn)知框架，尤其是對圖標(biāo)的類型和使用的軟件、技法的認(rèn)識(shí)，然后再去展開具體操作的學(xué)習(xí)。

一、圖標(biāo)設(shè)計(jì)學(xué)習(xí)的基本認(rèn)識(shí)

圖標(biāo)設(shè)計(jì)是 UI 界面設(shè)計(jì)中的一環(huán)，也是一個(gè)相對特殊的技能分支。常規(guī)的 UI 界面設(shè)計(jì)過程是一個(gè)排版、布局的過程，即將幾何、文本、圖片、圖標(biāo)按照一定的思路排列到一個(gè)固定的畫布區(qū)域中去。而圖標(biāo)設(shè)計(jì)這是一個(gè)“繪制”過程，要使用特定的繪圖工具來實(shí)現(xiàn)圖標(biāo)的圖形輪廓并填充適當(dāng)?shù)纳省?/p>

既然使用的工具和技巧不同，就可以給出一個(gè)新的結(jié)論：

學(xué)習(xí)圖標(biāo)設(shè)計(jì)和學(xué)習(xí)界面設(shè)計(jì)不是一件事……

也就是說，你光學(xué)會(huì)怎么做界面也做不了圖標(biāo)，這是兩個(gè)沒什么相似點(diǎn)的獨(dú)立技能。UI 界面設(shè)計(jì)之所以好學(xué)且簡單就是因?yàn)槟侵皇桥帕袃?nèi)容，而圖標(biāo)設(shè)計(jì)就是真正的“設(shè)計(jì)”，包含了創(chuàng)作和繪圖的過程，這比界面設(shè)計(jì)的門檻高了不少。

這就形成了另一個(gè)反直覺的概念，即圖標(biāo)雖然是界面的組成部分，圖標(biāo)設(shè)計(jì)也是界面設(shè)計(jì)中的子集，但圖標(biāo)設(shè)計(jì)本身卻比界面設(shè)計(jì)更難、門檻更高，入門圖標(biāo)設(shè)計(jì)需要投入比界面設(shè)計(jì)更多的學(xué)習(xí)精力和練習(xí)時(shí)長。

同時(shí)，圖標(biāo)作為一種平面視覺圖形的統(tǒng)稱，意味著它沒被限制在一個(gè)特定的設(shè)計(jì)形式還是風(fēng)格中，有數(shù)之不盡的創(chuàng)意和拓展性，而不同的設(shè)計(jì)創(chuàng)意和風(fēng)格就需要應(yīng)用不同的設(shè)計(jì)工具或技法。

這就是圖標(biāo)設(shè)計(jì)的另一個(gè)特性，想做不同風(fēng)格的圖標(biāo)往往就意味著你要掌握一套新的工具和技法，想要學(xué)會(huì)所有圖標(biāo)風(fēng)格的設(shè)計(jì)是不可能的，所以常規(guī)的圖標(biāo)學(xué)習(xí)都是掌握一些基礎(chǔ)風(fēng)格的設(shè)計(jì)以后，未來需要應(yīng)用哪種圖標(biāo)的風(fēng)格再單獨(dú)去學(xué)習(xí)即可。

雖然圖標(biāo)的每種風(fēng)格都要單獨(dú)學(xué)習(xí)，但它們總還是有一些共性和基礎(chǔ)知識(shí)點(diǎn)是相通的，包含兩個(gè)部分：圖標(biāo)規(guī)范和圖形繪制方法。

圖標(biāo)規(guī)范即圖標(biāo)作為 UI 界面的一部分需要具備的條件，如尺寸定義、柵格應(yīng)用、圖形表意、一致性等要求。作為基礎(chǔ)知識(shí)點(diǎn)大家可以翻以前的分享了解，不在這里展開。

圖形繪制方法，則是使用設(shè)計(jì)軟件畫出圖標(biāo)圖形輪廓的方式。而圖標(biāo)大多都是比較規(guī)整、嚴(yán)謹(jǐn)?shù)膱D形（少數(shù)手繪風(fēng)除外），所以要使用矢量繪圖的方式繪制，也就是要掌握設(shè)計(jì)軟件中矢量繪圖工具的使用。

不管是 UI 設(shè)計(jì)軟件還是平面設(shè)計(jì)軟件、3D 建模軟件都包含了矢量繪圖工具，它們的底層應(yīng)用邏輯是相通的，但對矢量繪圖的功能實(shí)現(xiàn)上卻有一定差異。尤其是 UI 設(shè)計(jì)軟件，作為界面設(shè)計(jì)工具來說，它的矢量繪圖功能是非常簡陋的，對于圖標(biāo)繪制上存在先天的短板。

所以這又有一個(gè)新的反直覺的結(jié)論，那就是：

UI 設(shè)計(jì)軟件并不適合用來畫圖標(biāo)……

PS：這也導(dǎo)致我們做圖標(biāo)課程里最大的麻煩，用 UI 軟件不適用缺陷多，用別的軟件又涉及受眾零基礎(chǔ)不懂操作的問題。

了解完上面這些基本概念以后，我們可以總結(jié)，圖標(biāo)設(shè)計(jì)的學(xué)習(xí)可以分為三個(gè)部分，分別是：

但在真正的 UI 設(shè)計(jì)過程中，圖標(biāo)設(shè)計(jì)的要求并不僅僅局限在這三個(gè)部分中，還有一個(gè)最重要也是最容易被忽視掉的能力 —— 圖標(biāo)風(fēng)格的選擇能力。即篩選出合適的圖標(biāo)設(shè)計(jì)風(fēng)格融入頁面的整體設(shè)計(jì)，不僅要提升所處頁面的視覺水平，還能保證視覺的統(tǒng)一性的能力。

這四點(diǎn)共同組成了在 UI 設(shè)計(jì)過程中和圖標(biāo)有關(guān)的核心技能，前三者依靠主動(dòng)練習(xí)來達(dá)成，后者則要通過經(jīng)驗(yàn)的積累來提升。

二、圖標(biāo)設(shè)計(jì)軟件的主要解析

前面我們知道了，不同圖標(biāo)設(shè)計(jì)風(fēng)格需要使用的工具和技法是不同的，而這里我們就要了解，圖標(biāo)設(shè)計(jì)中會(huì)涉及到的軟件有哪些，以及它們各自的特性和優(yōu)缺點(diǎn)。

1. UI 設(shè)計(jì)軟件

首先討論的必然是 UI 設(shè)計(jì)軟件，包括 Figma、即時(shí)設(shè)計(jì)、Mastergo、Sketch 等。這些軟件設(shè)計(jì)的主要應(yīng)用場景是完成 UI 界面的排版布局，只提供了非?；A(chǔ)的矢量圖形編輯功能和圖層視覺效果，所以它們只能繪制一些圖形和效果都相對簡單的圖標(biāo)類型，無法完成精度要求高或復(fù)雜的圖標(biāo)設(shè)計(jì)。

這些軟件中 Sketch 的矢量功能是做得最好的（遙遙領(lǐng)先），其它軟件包括 Figma 也僅僅達(dá)到勉強(qiáng)能用的水平（很多細(xì)節(jié)問題和反直覺操作），所以想畫好圖標(biāo)光掌握 UI 設(shè)計(jì)軟件是不夠的。

2. Adobe Ai

Adobe Ai 是最強(qiáng)大的矢量繪圖工具，包含了大量的矢量編輯、繪圖工具，可以實(shí)現(xiàn)任意復(fù)雜或精確的圖形效果。但是，Adobe Ai 有較高的入門門檻，需要單獨(dú)學(xué)習(xí)，且很多復(fù)雜的圖形還需要結(jié)合 PS 進(jìn)行輸出，適合成為一個(gè)純粹的圖形輪廓繪制工具使用。

3. Adobe PS

Adobe PS 是一個(gè)多功能的平面視覺繪圖工具，相比 Ai 它的矢量圖形編輯能力較弱，但優(yōu)點(diǎn)是它可以實(shí)現(xiàn)所有我們可以想到的平面視覺特效。包含了插畫、彌散、擬物等特征的風(fēng)格，都可以很輕易地通過 PS 的功能實(shí)現(xiàn)，而這些進(jìn)階視覺功能都是 UI 軟件和 Ai 提供不了的。

4. 3D 類軟件

3D 類軟件即 Blender、C4D、Maya 等包含了從建模到渲染的軟件類型，用于實(shí)現(xiàn)一些 3D 效果的圖標(biāo)。想實(shí)現(xiàn)什么效果看設(shè)計(jì)師自由發(fā)揮，最后渲染完導(dǎo)出成位圖置入界面即可。Figma 或 Ai、PS 中雖然也有實(shí)現(xiàn) 3D 效果的插件，但是它們可實(shí)現(xiàn)的結(jié)果局限性非常大，只能生成指定一兩種風(fēng)格的圖標(biāo)。

5. AIGC 類工具

AIGC 類工具即 Midjouney、Stable diffusion、ChatGPT、即夢 AI 等人工智能生成軟件，通過輸入指令文本 Prompt 來生成對應(yīng)的圖形結(jié)果。

不管網(wǎng)上怎么吹噓 AIGC 的能力，或給出完成度極高的案例成果，都不要輕易相信它們已經(jīng)十全十美，可以完整接入商業(yè)應(yīng)用中。圖標(biāo)是一種相對嚴(yán)謹(jǐn)?shù)膱D形，尤其對于整套圖標(biāo)來說更需要細(xì)節(jié)的統(tǒng)一，而這恰恰是 AIGC 最薄弱的環(huán)節(jié)，在短期內(nèi)它還完全無法替代真實(shí)的繪制過程。

以上就是 UI 設(shè)計(jì)中進(jìn)行圖標(biāo)設(shè)計(jì)會(huì)關(guān)聯(lián)到的主要軟件類型，看起來雖然多，但一定要牢記，并不是學(xué)圖標(biāo)設(shè)計(jì)就要把這些軟件全部學(xué)完，而是要根據(jù)我們的實(shí)際需求學(xué)習(xí)。

并且，如果只畫圖標(biāo)，那么每個(gè)軟件內(nèi)所要掌握的工具和功能是非常有限的，遠(yuǎn)低于正常學(xué)習(xí)該軟件的難度。所以從效率角度出發(fā)，學(xué)習(xí)不同軟件盡量從實(shí)例操作教程入手，而不是看該軟件的零基礎(chǔ)教學(xué)。

三、認(rèn)識(shí)這個(gè)圖標(biāo)怎么畫？

了解完圖標(biāo)涉及的軟件類型和特性以后，下面我們就要基于圖標(biāo)風(fēng)格出發(fā)，來認(rèn)識(shí)主流的圖標(biāo)設(shè)計(jì)風(fēng)格有哪些以及它們適用的軟件工具。

Style1：一般工具圖標(biāo)

一般線性和面性圖標(biāo)通常使用最基礎(chǔ)幾何+布爾和少量的鋼筆錨點(diǎn)控制，就可以完成繪制。所以勉強(qiáng)可以使用 Figma 等 UI 設(shè)計(jì)軟件直接繪制，能使用 Adobe AI 可以實(shí)現(xiàn)更精細(xì)可控（像素完全對齊）的結(jié)果，這個(gè)看項(xiàng)目的實(shí)際需要決定。

Style2：復(fù)雜工具圖標(biāo)

復(fù)雜工具圖標(biāo)和基礎(chǔ)的差異，就是圖形不再只是使用簡單的矢量工具能畫出來了，所以這類圖標(biāo)基本只能選用 AI 來完成，要應(yīng)用更復(fù)雜的鋼筆工具以及路徑查找器功能。

Style3：玻璃擬態(tài)/新擬態(tài)/彌散型圖標(biāo)

玻璃擬態(tài)、新擬態(tài)、彌散型圖標(biāo)，都屬于 UI 設(shè)計(jì)獨(dú)有的圖標(biāo)設(shè)計(jì)風(fēng)格，而這些風(fēng)格對圖標(biāo)輪廓的要求并不高，只有簡單的圖形能塑造這些質(zhì)感，所以使用 UI 設(shè)計(jì)軟件就足以完成。

Style4：擬物風(fēng)格圖標(biāo)

擬物風(fēng)格雖然是前幾個(gè)世代的 UI 主流風(fēng)格，但現(xiàn)在依舊有一定的應(yīng)用場景，比如復(fù)古相機(jī)應(yīng)用、DJ 調(diào)音臺(tái)工具、聲卡插件界面等等。想要實(shí)現(xiàn)高精度的擬物設(shè)計(jì)圖標(biāo)，就只能使用 PS 來完成，因?yàn)橐獞?yīng)用 PS 中的復(fù)雜的蒙版工具，以及繪制光影、紋理用的濾鏡和后期處理。

Style5：輕擬物風(fēng)格圖標(biāo)

輕擬物風(fēng)格圖標(biāo)是在擬物基礎(chǔ)上進(jìn)行簡化后的圖標(biāo)設(shè)計(jì)風(fēng)格，保留了一定的擬物特性，但又讓圖標(biāo)的視覺效果看起來沒有那么復(fù)雜。最簡單的輕擬物設(shè)計(jì)圖標(biāo)可以用 Figma 等 UI 軟件勉強(qiáng)實(shí)現(xiàn)（京東閃送圖標(biāo)教程里的），如果要做精度更高的輕擬物設(shè)計(jì)風(fēng)格，就只能用 PS 才能完成。

Style6：插畫風(fēng)格圖標(biāo)

插畫類圖標(biāo)分兩種，手繪型和矢量型。手繪型要借助數(shù)碼手繪工具完成，所以基本只能用 PS 來畫（iPad 上的另說）。而如果是矢量插畫型的，則使用 AI 來繪制更合理。

Style7：2.5D 風(fēng)格圖標(biāo)

2.5D 風(fēng)格也稱軸測圖風(fēng)格，屬于插畫風(fēng)格的一種，但它有相對標(biāo)準(zhǔn)的繪制步驟和要求，所以算成一個(gè)獨(dú)立的分類。繪制 2.5D 圖標(biāo)需要應(yīng)用大量的矢量圖標(biāo)，以及進(jìn)行邊角的對齊，所以 AI 是完成 2.5D 風(fēng)格中最合適的軟件。

Style8：3D 風(fēng)格圖標(biāo)

3D 類風(fēng)格包含了很多細(xì)分的風(fēng)格，如 lowpoly、輕質(zhì)感、微軟風(fēng)等就不做細(xì)分了，想要實(shí)現(xiàn)這些效果只能使用 3D 軟件進(jìn)行建模和渲染。雖然 3D 軟件有很多，但 3D 圖標(biāo)的模型和效果都很基礎(chǔ)，它們都能夠輕易實(shí)現(xiàn)。但基于免費(fèi)和教程量的影響，Blender 是完成這類圖標(biāo)的最佳工具。

Style9：游戲風(fēng)格圖標(biāo)

游戲類圖標(biāo)只是個(gè)大類的統(tǒng)稱，也包含了各種各樣的圖標(biāo)風(fēng)格類型，但最有代表性的，就是手繪風(fēng)格。而這類風(fēng)格想要進(jìn)行原創(chuàng)的話只能使用 PS 來繪制，但因?yàn)橛螒驁D標(biāo)細(xì)節(jié)多，圖形要求不太嚴(yán)謹(jǐn)，所以可以借助 AIGC 工具生成，大幅度提高圖標(biāo)設(shè)計(jì)的效率。

以上就是我們整理的日?？梢越佑|到的最常見的圖標(biāo)風(fēng)格類型，還有其它設(shè)計(jì)風(fēng)格就不一一例舉。只要理解這些風(fēng)格圖標(biāo)的適用工具以及繪制思路，就可能在看到其它圖標(biāo)設(shè)計(jì)風(fēng)格后舉一反三，自己構(gòu)思出它們適用的工具和技法的應(yīng)用。

結(jié)尾

圖標(biāo)的入門到掌握是一個(gè)比較艱苦的過程，基礎(chǔ)工具圖標(biāo)的繪制是整個(gè)圖標(biāo)設(shè)計(jì)的核心基礎(chǔ)，它的練習(xí)量是需要以千記的（大概需要一整個(gè)月的練習(xí)），偷懶是跨不過入門的門檻的。

最后，比掌握圖標(biāo)設(shè)計(jì)技巧更重要的技能，就是選擇適合當(dāng)前界面的圖標(biāo)風(fēng)格的能力，這也是我們在正式課程中建議優(yōu)先訓(xùn)練和掌握的技能。

作者：超人的電話亭