圖標(biāo)設(shè)計是 UI 設(shè)計中最入門也最基礎(chǔ)的技能，但想要牢固的掌握這門技能并不容易。并且因?yàn)樗夭牡钠占?，使得新手在前期學(xué)習(xí)過程中可以用素材完成界面的設(shè)計。

多數(shù) UI 設(shè)計師養(yǎng)成了這種路徑依賴，就越發(fā)無法離開素材的幫助，且不具備獨(dú)立創(chuàng)作圖標(biāo)的能力。而且有了一段工作經(jīng)驗(yàn)以后，又認(rèn)為自己不是新手了，不屑于再把注意力聚焦到這些"基礎(chǔ)"的學(xué)習(xí)上！

殊不知，目前產(chǎn)品設(shè)計界面越來越花哨，需要原創(chuàng)繪圖部分的內(nèi)容給你越來越來多（素材滿足不了），基礎(chǔ)能力的缺失只會讓你們和其他優(yōu)秀的 UI 設(shè)計師差距越來越大，離進(jìn)階越來越遠(yuǎn)。

正好上周公開課看到有同學(xué)提不知道圖標(biāo)應(yīng)該怎么學(xué)，如何做提升。所以我要通過這篇分享來整理一遍，圖標(biāo)從入門到進(jìn)階的詳細(xì)流程，幫助你們快速掌握這門基礎(chǔ)能力。

一、圖標(biāo)的學(xué)習(xí)認(rèn)知

圖標(biāo)的學(xué)習(xí)不要急著先上手實(shí)踐，而是先從宏觀層面對它進(jìn)行解構(gòu)，真正了解圖標(biāo)設(shè)計是什么，欠缺哪些知識點(diǎn)以后，再去規(guī)劃后續(xù)的學(xué)習(xí)實(shí)踐。

在這里我要把圖標(biāo)的基礎(chǔ)知識拆解成下面幾個大類:

1. 圖標(biāo)的類型
2. 圖標(biāo)的規(guī)范
3. 繪制的技法
4. 場景的應(yīng)用

1. 建立圖標(biāo)的分類

了解圖標(biāo)的第一步就是能對圖標(biāo)的類型做出正確的判斷、歸類，在以前的分享中，我根據(jù)功能性把圖標(biāo)劃分成三個大類：

而每個大類中還可以根據(jù)設(shè)計風(fēng)格劃分出不同的子類，比如在工具圖標(biāo)中，有線性、面性、混合三個主要風(fēng)格，每個風(fēng)格下還可以再挑出更細(xì)分的風(fēng)格類型。

這些分類并沒有覆蓋所有類型，也不是非常嚴(yán)謹(jǐn)，因?yàn)樵O(shè)計風(fēng)格這種東西是不存在嚴(yán)格的界定或公約的。而你們要具備的就是能建立一套自己的圖標(biāo)分類體系，對所見的圖標(biāo)進(jìn)行有效歸類的能力。

因?yàn)閺目陀^上講，不同類型的圖標(biāo)繪制難度、特點(diǎn)、技法是不一樣的，如果連圖標(biāo)類型都無法區(qū)分，就沒辦法對它所需的技能進(jìn)行分析，更不用談如何掌握和提升繪畫質(zhì)量了。

想要建立自己對圖標(biāo)的分類人事，可以去花瓣、Pinterest 等網(wǎng)站大量瀏覽并收集圖標(biāo)案例，以上面提到的三個大分類為基礎(chǔ)，根據(jù)設(shè)計風(fēng)格的相似性整理出下級分類。

2. 圖標(biāo)的規(guī)范學(xué)習(xí)

圖標(biāo)規(guī)范在之前有分享做過，啟動圖標(biāo)和界面圖標(biāo)（包含工具和裝飾圖標(biāo)）具有不同的規(guī)范，使用不同的柵格系統(tǒng)。

設(shè)計師都要理解這個格線系統(tǒng)創(chuàng)建得思路，以及如何使用它們的邏輯。而其中涉及最重要的知識點(diǎn)，就是 —— 幾何圖形的視覺差。

只有充分理解并運(yùn)用幾何視覺差的規(guī)則時，才能正確應(yīng)用格線系統(tǒng)，輸出簡單、整潔、美觀、專業(yè)的圖標(biāo)。不具備這種能力的設(shè)計師就會在作品集里表現(xiàn)出 —— "連這么簡單的圖標(biāo)都畫不好" 的致命缺陷。

幾何視差的理解和運(yùn)用是有門檻的，包含很大的"意會"成分在里面，必須通過一定數(shù)量的訓(xùn)練才能掌握，光用看和理解是絕對不夠的。所以這些簡潔的圖標(biāo)繪制其實(shí)并沒有你們想的那么簡單。

3. 掌握繪制的技法

圖標(biāo)設(shè)計本身有一個繪制的過程，在游戲 UI 中圖標(biāo)很多是用數(shù)位板手繪的，但在一般 UI 項(xiàng)目中，圖標(biāo)是使用矢量繪圖來完成輪廓創(chuàng)建的（建模本質(zhì)上也是矢量繪圖）。

想要用掌握好矢量繪圖，對路徑本身的理解就要深入，包括下面這些基礎(chǔ)知識點(diǎn)：

1. 矢量和位圖繪畫的差異
2. 矢量點(diǎn)線面的概念
3. 閉合和開放路徑的差異
4. 貝塞爾曲線的控制
5. 布爾運(yùn)算的使用類型

很多人可能認(rèn)為圖標(biāo)只要用基礎(chǔ)幾何圖形+布爾裁切就能畫出來，這在簡單的圖標(biāo)種類中可以實(shí)現(xiàn)。但是要畫復(fù)雜的應(yīng)用圖標(biāo)或是裝飾圖標(biāo)時是捉襟見肘的，必須要實(shí)打?qū)嵉倪\(yùn)用鋼筆工具來繪制輪廓。

所以想要具體掌握這些技能的運(yùn)用，就必須用好 Adobe AI，因?yàn)?UI 類的軟件都缺失一些進(jìn)階的矢量繪圖功能，會極大的限制設(shè)計師的發(fā)揮。

除了輪廓外，這些復(fù)雜的圖標(biāo)還包含效果的添加，除了 3D 渲染的效果外，其實(shí)大多數(shù)復(fù)雜圖標(biāo)的效果都是用繪圖軟件實(shí)現(xiàn)，除了理解效果本身的類型外，也要掌握軟件如何添加這些效果。

和前面相同，UI 設(shè)計軟件的功能限制，所以就得用 Adobe PS 來完成復(fù)雜的圖標(biāo)效果制作。

不管是 PS 還是 AI，包含的功能都非常龐大，而我們要掌握的只是其中的矢量繪圖和效果創(chuàng)建相關(guān)的技能即可。這同樣需要我們進(jìn)行大量的練習(xí)，最好的做法就是找到不同的案例教學(xué)，跟著教學(xué)做一遍理解不同繪畫方式和效果的實(shí)現(xiàn)方法。

PS 和 AI 的掌握就是更具體的門檻，因?yàn)檫@決定了能不能把圖標(biāo)做出來的下限。基礎(chǔ)工具圖標(biāo)雖然規(guī)范掌握的不好你還可以歪歪扭扭的輸出一套撇腳的成品，但不具備這兩個軟件的基礎(chǔ)那么復(fù)雜點(diǎn)的圖標(biāo)就連抄都抄不出來。

圖標(biāo)的圖形類型和設(shè)計風(fēng)格多種多樣，只有扎實(shí)的繪制技法，才能支撐我們輸出多樣化的設(shè)計和各式各樣的場景需求。

4. 場景的應(yīng)用選擇

前面已經(jīng)具備畫好圖標(biāo)的基本要素，但圖標(biāo)并不是一個孤立的視覺元素，而是和界面其它元素組合起來形成整體的一分子。如果沒辦法和頁面的設(shè)計視覺風(fēng)格相匹配，那么圖標(biāo)本身畫得再好也是失敗的設(shè)計。

所以這就引發(fā)圖標(biāo)設(shè)計的終極難題 —— 在頁面中應(yīng)該放什么風(fēng)格、輪廓的圖標(biāo)最合理？

這個問題主要在裝飾圖標(biāo)的設(shè)計中拷問設(shè)計師，因?yàn)榛ㄉ诘膱D標(biāo)設(shè)計方向和可能性太多，用什么方案取決于設(shè)計師本身的積累和經(jīng)驗(yàn)。而且專業(yè)的項(xiàng)目中，這類方案不會只輸出一套，需要輸出好幾個方向的設(shè)計進(jìn)行比較，再選擇最終稿。

對風(fēng)格的選擇和應(yīng)用就涉及到前面提到的圖標(biāo)分類，這部分積累得越多，那么在實(shí)際應(yīng)用過程中想法也就會越多越清晰。而不是只能盯著成熟案例照著抄，或者干脆抄都不知道應(yīng)該怎么下手。

有效地創(chuàng)意是對長期積累的濃縮反饋，但不可能無中生有，和平面視覺中字體設(shè)計和特效的應(yīng)用同理。這部分只能依靠設(shè)計師自己的努力，而無法通過幾篇分享和干貨就突然領(lǐng)悟。

二、圖標(biāo)的練習(xí)方式

上面提到了圖標(biāo)設(shè)計中的一些關(guān)鍵知識點(diǎn)，我也反復(fù)強(qiáng)調(diào)過這些知識多數(shù)是需要經(jīng)過練習(xí)才能真正掌握。所以接下來我會針對實(shí)踐的部分，來解釋如何進(jìn)行圖標(biāo)的訓(xùn)練，真正系統(tǒng)、有效的提升圖標(biāo)繪制的能力。

步驟 1：工具圖標(biāo)臨摹

圖標(biāo)練習(xí)的第一步，是有目的性的臨摹，通過大量臨摹訓(xùn)練提升對軟件矢量工具的使用和幾何形體認(rèn)識的內(nèi)化。

這個臨摹要以成套的圖標(biāo)為對象，在剛開始臨摹的時候選擇簡單數(shù)量少的，隨著熟練度的提升再逐步增加難度和數(shù)量。

我的建議是這個階段臨摹的圖標(biāo)總數(shù)不要低于 1000 個，這會是一個越畫越快的過程，所以畫的快一個月就能完成（一天 30 多個），慢點(diǎn)兩個月無論如何都可以畫完。而且要在臨摹過程中，要自己創(chuàng)建格線系統(tǒng)，并復(fù)盤每次臨摹完成后的問題，并在下套臨摹中進(jìn)行改進(jìn)。

不要覺得 1000 個圖標(biāo)多，這只是最低限度。圖標(biāo)練習(xí)可以等比小學(xué)練字，我們光是用拓本就不止臨摹上萬字，投入的時間也遠(yuǎn)遠(yuǎn)不止畫這 1000 個圖標(biāo)所需的時間。

之所要練字就是因?yàn)槌苏J(rèn)字外還要掌握字體本身的幾何特征，圖標(biāo)和字體的幾何性質(zhì)是基本相同的，沒有任何捷徑可以走。平面設(shè)計訓(xùn)練中字體練習(xí)也是以非常高的強(qiáng)度和數(shù)量進(jìn)行輸出，UI 設(shè)計能有什么理由就偷懶不聞不問？

只要完成這個數(shù)量的訓(xùn)練，你就會對幾何視差有了深刻的認(rèn)識，能真正運(yùn)用格線系統(tǒng)進(jìn)行專業(yè)的原創(chuàng)工具圖標(biāo)設(shè)計。

PS：根據(jù)個人經(jīng)驗(yàn)，工具圖標(biāo)畫越多，幾何的理解會直接繼承到后續(xù)排版還有字體設(shè)計上，字體設(shè)計的輪廓知識和技巧會一看就懂一點(diǎn)就會，比直接學(xué)字體設(shè)計效率還高。

步驟 2：裝飾圖標(biāo)臨摹

臨摹完簡單的，就可以開始臨摹更難的裝飾性圖標(biāo)。而這類圖標(biāo)的難度跨度特別大，所以臨摹的對象肯定也要遵循從簡單到難得順序進(jìn)行。

最簡單的肯定是和工具圖標(biāo)互為表里的類型，只是在原有圖形上做出輕微的改動或添加特定的效果。臨摹這些圖標(biāo)可以進(jìn)一步掌握這類圖標(biāo)的設(shè)計方法，并固化對風(fēng)格的認(rèn)識。

而更進(jìn)一步，就是在圖形輪廓本身開始突破，但效果相對簡單的類型，比如扁平插畫類的圖標(biāo)。只要你掌握了足夠的矢量繪圖基礎(chǔ)，要畫出相同的圖形是輕而易舉的。

比如下圖是我們臨摹課程里應(yīng)用的案例餓了么的圖標(biāo)，要畫它之前肯定是先畫出具體輪廓，然后再使用簡單的漸變色填充就做完了。

這類圖標(biāo)的繪制可以當(dāng)成基礎(chǔ)的矢量插畫入門，通過臨摹一些小物件，來快速上手矢量插畫并適應(yīng)它的繪畫方式。這個階段的臨摹數(shù)量建議不低于 100 個。

而這種能力的掌握有助于我們后續(xù)將任何現(xiàn)實(shí)世界的物體，抽象成矢量的圖形繪制出來，無需借助具體的參考。

而更復(fù)雜的圖標(biāo)，就要以復(fù)現(xiàn)它們的效果為目標(biāo)了，這個完全考驗(yàn)的就是對效果的分析和對軟件功能本身的掌握能力。

如果覺得非常吃力做不下來，建議看一些古早時期的基礎(chǔ)擬物教學(xué)做聯(lián)系，比如如何畫一個牛皮紙箱，還是畫一個真實(shí)的開關(guān)之類的，可以幫助我們理解空間、光影、材質(zhì)，以及如何使用軟件功能來表現(xiàn)它們。

這部分的練習(xí)同樣建議不低于 100 個，在這個過程中你可以積累擬物的繪制技巧，對于后續(xù)一些復(fù)雜效果的實(shí)現(xiàn)，尤其是運(yùn)營端 H5 頁面的設(shè)計會有非常大得幫助。

步驟 3：原創(chuàng)能力訓(xùn)練

上面兩部分的能力訓(xùn)練做多少都不過分，做的越多，提升當(dāng)然也越多。但我們怎么檢驗(yàn)自己已經(jīng)具備的能力？同時，只臨摹肯定頁不行，我們得有原創(chuàng)的能力。

所以我們必須要做一些特定的練習(xí)，我的建議就是直接從線上找一些做的一般的應(yīng)用進(jìn)行截圖，然后用設(shè)計軟件檫掉它們現(xiàn)在的圖標(biāo)，畫一套新的替換上去。

可以先從簡單的工具圖標(biāo)開始訓(xùn)練，然后逐漸過度到復(fù)雜的裝飾圖標(biāo)。并且，輸出圖標(biāo)可不是只能輸出一套方案，還可以在同一個界面中輸出多套風(fēng)格的圖標(biāo)，提升做風(fēng)格選擇的能力，

再這個訓(xùn)練中，頁面本身的設(shè)計風(fēng)格差異越大越多，那么進(jìn)步也就會越快，讓我們再未來可以應(yīng)對更復(fù)雜的設(shè)計需求和環(huán)境。

步驟 4：特殊類型積累

訓(xùn)練雖然是無窮無盡的，但是時間是有限的，我們不可能一口氣掌握所有設(shè)計種類和技巧。所以前面給大家的要求是盡可能提升基礎(chǔ)的、通用的知識和能力，而一些更復(fù)雜、使用場景少的風(fēng)格，可以等到你碰到的時候再去學(xué)習(xí)也可以。

比如在 B 端很流行的 3D 微軟風(fēng)圖標(biāo)，這類圖標(biāo)的繪制新手第一眼會想到的必然是 3D 軟件的建模，以及如何設(shè)置對應(yīng)的材質(zhì)、渲染參數(shù)。

但實(shí)際上那些技能的使用一點(diǎn)都不復(fù)雜，在 B 站的教學(xué)案例就有非常多，看幾個練幾天就能掌握個大概。

難的是怎么在使用 3D 建模的同時還保持整體性和一致性，而這些全是前面練習(xí)所要掌握的基礎(chǔ)。所以任何特殊類型的圖標(biāo)掌握，我們都可以分解成兩個部分，即基礎(chǔ)+針對技巧。

想要掌握任何特殊的圖標(biāo)設(shè)計類型，要做的就是先去了解它之所以特殊的理由、概念、知識是什么，再去專門查找相關(guān)的教學(xué)和資料，就可能快速掌握并進(jìn)行原創(chuàng)。

比如 2.5D 圖標(biāo)的繪制，只要認(rèn)真看幾篇 2.5D 繪圖技法分享，就能很快掌握這類圖標(biāo)應(yīng)該怎么畫，而不是只能看這類圖標(biāo)的教學(xué)給你操作到牙齒你才會跟著一起做……

原創(chuàng)能力的提升，就是創(chuàng)建一個場景給自己出題再反復(fù)驗(yàn)證自己的過程。而訓(xùn)練和真實(shí)項(xiàng)目不同的是，真實(shí)項(xiàng)目往往操心的事情太多，時間還少，會造成很多思想上的負(fù)擔(dān)，所以兩者都有提升但類型不同。

只有認(rèn)識到圖標(biāo)的重要性，并有自我驅(qū)動力去制定訓(xùn)練的計劃，才能真正提升這部分能力。而它的附帶價值遠(yuǎn)遠(yuǎn)不止畫好圖標(biāo)……

結(jié)尾

UI 本身作為一個成熟的職業(yè)，上面提到的練習(xí)量一點(diǎn)也不多，也就滿足職業(yè)技能需要的最低限度而已。

學(xué) UI 用幾年本科時間的投入來具備專業(yè)能力是應(yīng)該的，其它教學(xué)比較成熟的設(shè)計專業(yè)都有必要的訓(xùn)練（比如室內(nèi)設(shè)計的手繪草圖），但 UI 相關(guān)專業(yè)缺少這些東西。于是自己補(bǔ)上的和缺失的那部分設(shè)計師水平差異就越來越大，對比一目了然。

作者：超人的電話亭