圖標(biāo)設(shè)計是 UI 設(shè)計中最入門也最基礎(chǔ)的技能，但想要牢固的掌握這門技能并不容易。并且因為素材的普及，使得新手在前期學(xué)習(xí)過程中可以用素材完成界面的設(shè)計。
多數(shù) UI 設(shè)計師養(yǎng)成了這種路徑依賴，就越發(fā)無法離開素材的幫助，且不具備獨立創(chuàng)作圖標(biāo)的能力。而且有了一段工作經(jīng)驗以后，又認(rèn)為自己不是新手了，不屑于再把注意力聚焦到這些“基礎(chǔ)”的學(xué)習(xí)上！
殊不知，目前產(chǎn)品設(shè)計界面越來越花哨，需要原創(chuàng)繪圖部分的內(nèi)容給你越來越來多（素材滿足不了），基礎(chǔ)能力的缺失只會讓你們和其他優(yōu)秀的 UI 設(shè)計師差距越來越大，離進階越來越遠(yuǎn)。
正好上周公開課看到有同學(xué)提不知道圖標(biāo)應(yīng)該怎么學(xué)，如何做提升。所以我要通過這篇分享來整理一遍，圖標(biāo)從入門到進階的詳細(xì)流程，幫助你們快速掌握這門基礎(chǔ)能力。
圖標(biāo)的學(xué)習(xí)不要急著先上手實踐，而是先從宏觀層面對它進行解構(gòu)，真正了解圖標(biāo)設(shè)計是什么，欠缺哪些知識點以后，再去規(guī)劃后續(xù)的學(xué)習(xí)實踐。
在這里我要把圖標(biāo)的基礎(chǔ)知識拆解成下面幾個大類:
了解圖標(biāo)的第一步就是能對圖標(biāo)的類型做出正確的判斷、歸類，在以前的分享中，我根據(jù)功能性把圖標(biāo)劃分成三個大類：
而每個大類中還可以根據(jù)設(shè)計風(fēng)格劃分出不同的子類，比如在工具圖標(biāo)中，有線性、面性、混合三個主要風(fēng)格，每個風(fēng)格下還可以再挑出更細(xì)分的風(fēng)格類型。
這些分類并沒有覆蓋所有類型，也不是非常嚴(yán)謹(jǐn)，因為設(shè)計風(fēng)格這種東西是不存在嚴(yán)格的界定或公約的。而你們要具備的就是能建立一套自己的圖標(biāo)分類體系，對所見的圖標(biāo)進行有效歸類的能力。
因為從客觀上講，不同類型的圖標(biāo)繪制難度、特點、技法是不一樣的，如果連圖標(biāo)類型都無法區(qū)分，就沒辦法對它所需的技能進行分析，更不用談如何掌握和提升繪畫質(zhì)量了。
想要建立自己對圖標(biāo)的分類人事，可以去花瓣、Pinterest 等網(wǎng)站大量瀏覽并收集圖標(biāo)案例，以上面提到的三個大分類為基礎(chǔ)，根據(jù)設(shè)計風(fēng)格的相似性整理出下級分類。
圖標(biāo)規(guī)范在之前有分享做過，啟動圖標(biāo)和界面圖標(biāo)（包含工具和裝飾圖標(biāo)）具有不同的規(guī)范，使用不同的柵格系統(tǒng)。
設(shè)計師都要理解這個格線系統(tǒng)創(chuàng)建得思路，以及如何使用它們的邏輯。而其中涉及最重要的知識點，就是 —— 幾何圖形的視覺差。
只有充分理解并運用幾何視覺差的規(guī)則時，才能正確應(yīng)用格線系統(tǒng)，輸出簡單、整潔、美觀、專業(yè)的圖標(biāo)。不具備這種能力的設(shè)計師就會在作品集里表現(xiàn)出 —— “連這么簡單的圖標(biāo)都畫不好” 的致命缺陷。
幾何視差的理解和運用是有門檻的，包含很大的“意會”成分在里面，必須通過一定數(shù)量的訓(xùn)練才能掌握，光用看和理解是絕對不夠的。所以這些簡潔的圖標(biāo)繪制其實并沒有你們想的那么簡單。
圖標(biāo)設(shè)計本身有一個繪制的過程，在游戲 UI 中圖標(biāo)很多是用數(shù)位板手繪的，但在一般 UI 項目中，圖標(biāo)是使用矢量繪圖來完成輪廓創(chuàng)建的（建模本質(zhì)上也是矢量繪圖）。
想要用掌握好矢量繪圖，對路徑本身的理解就要深入，包括下面這些基礎(chǔ)知識點：
很多人可能認(rèn)為圖標(biāo)只要用基礎(chǔ)幾何圖形+布爾裁切就能畫出來，這在簡單的圖標(biāo)種類中可以實現(xiàn)。但是要畫復(fù)雜的應(yīng)用圖標(biāo)或是裝飾圖標(biāo)時是捉襟見肘的，必須要實打?qū)嵉倪\用鋼筆工具來繪制輪廓。
所以想要具體掌握這些技能的運用，就必須用好 Adobe AI ，因為 UI 類的軟件都缺失一些進階的矢量繪圖功能，會極大的限制設(shè)計師的發(fā)揮。
除了輪廓外，這些復(fù)雜的圖標(biāo)還包含效果的添加，除了 3D 渲染的效果外，其實大多數(shù)復(fù)雜圖標(biāo)的效果都是用繪圖軟件實現(xiàn)，除了理解效果本身的類型外，也要掌握軟件如何添加這些效果。
和前面相同，UI 設(shè)計軟件的功能限制，所以就得用 Adobe PS 來完成復(fù)雜的圖標(biāo)效果制作。
不管是 PS 還是 AI，包含的功能都非常龐大，而我們要掌握的只是其中的矢量繪圖和效果創(chuàng)建相關(guān)的技能即可。這同樣需要我們進行大量的練習(xí)，最好的做法就是找到不同的案例教學(xué)，跟著教學(xué)做一遍理解不同繪畫方式和效果的實現(xiàn)方法。
PS 和 AI 的掌握就是更具體的門檻，因為這決定了能不能把圖標(biāo)做出來的下限。基礎(chǔ)工具圖標(biāo)雖然規(guī)范掌握的不好你還可以歪歪扭扭的輸出一套撇腳的成品，但不具備這兩個軟件的基礎(chǔ)那么復(fù)雜點的圖標(biāo)就連抄都抄不出來。
圖標(biāo)的圖形類型和設(shè)計風(fēng)格多種多樣，只有扎實的繪制技法，才能支撐我們輸出多樣化的設(shè)計和各式各樣的場景需求。
前面已經(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è)計師，因為花哨的圖標(biāo)設(shè)計方向和可能性太多，用什么方案取決于設(shè)計師本身的積累和經(jīng)驗。而且專業(yè)的項目中，這類方案不會只輸出一套，需要輸出好幾個方向的設(shè)計進行比較，再選擇最終稿。
對風(fēng)格的選擇和應(yīng)用就涉及到前面提到的圖標(biāo)分類，這部分積累得越多，那么在實際應(yīng)用過程中想法也就會越多越清晰。而不是只能盯著成熟案例照著抄，或者干脆抄都不知道應(yīng)該怎么下手。
有效地創(chuàng)意是對長期積累的濃縮反饋，但不可能無中生有，和平面視覺中字體設(shè)計和特效的應(yīng)用同理。這部分只能依靠設(shè)計師自己的努力，而無法通過幾篇分享和干貨就突然領(lǐng)悟。
上面提到了圖標(biāo)設(shè)計中的一些關(guān)鍵知識點，我也反復(fù)強調(diào)過這些知識多數(shù)是需要經(jīng)過練習(xí)才能真正掌握。所以接下來我會針對實踐的部分，來解釋如何進行圖標(biāo)的訓(xùn)練，真正系統(tǒng)、有效的提升圖標(biāo)繪制的能力。
圖標(biāo)練習(xí)的第一步，是有目的性的臨摹，通過大量臨摹訓(xùn)練提升對軟件矢量工具的使用和幾何形體認(rèn)識的內(nèi)化。
這個臨摹要以成套的圖標(biāo)為對象，在剛開始臨摹的時候選擇簡單數(shù)量少的，隨著熟練度的提升再逐步增加難度和數(shù)量。
我的建議是這個階段臨摹的圖標(biāo)總數(shù)不要低于1000個，這會是一個越畫越快的過程，所以畫的快一個月就能完成（一天30多個），慢點兩個月無論如何都可以畫完。而且要在臨摹過程中，要自己創(chuàng)建格線系統(tǒng)，并復(fù)盤每次臨摹完成后的問題，并在下套臨摹中進行改進。
不要覺得1000個圖標(biāo)多，這只是最低限度。圖標(biāo)練習(xí)可以等比小學(xué)練字，我們光是用拓本就不止臨摹上萬字，投入的時間也遠(yuǎn)遠(yuǎn)不止畫這1000個圖標(biāo)所需的時間。
之所要練字就是因為除了認(rèn)字外還要掌握字體本身的幾何特征，圖標(biāo)和字體的幾何性質(zhì)是基本相同的，沒有任何捷徑可以走。平面設(shè)計訓(xùn)練中字體練習(xí)也是以非常高的強度和數(shù)量進行輸出，UI 設(shè)計能有什么理由就偷懶不聞不問？
只要完成這個數(shù)量的訓(xùn)練，你就會對幾何視差有了深刻的認(rèn)識，能真正運用格線系統(tǒng)進行專業(yè)的原創(chuàng)工具圖標(biāo)設(shè)計。
PS：根據(jù)個人經(jīng)驗，工具圖標(biāo)畫越多，幾何的理解會直接繼承到后續(xù)排版還有字體設(shè)計上，字體設(shè)計的輪廓知識和技巧會一看就懂一點就會，比直接學(xué)字體設(shè)計效率還高。
臨摹完簡單的，就可以開始臨摹更難的裝飾性圖標(biāo)。而這類圖標(biāo)的難度跨度特別大，所以臨摹的對象肯定也要遵循從簡單到難得順序進行。
最簡單的肯定是和工具圖標(biāo)互為表里的類型，只是在原有圖形上做出輕微的改動或添加特定的效果。臨摹這些圖標(biāo)可以進一步掌握這類圖標(biāo)的設(shè)計方法，并固化對風(fēng)格的認(rèn)識。
而更進一步，就是在圖形輪廓本身開始突破，但效果相對簡單的類型，比如扁平插畫類的圖標(biāo)。只要你掌握了足夠的矢量繪圖基礎(chǔ)，要畫出相同的圖形是輕而易舉的。
比如下圖是我們臨摹課程里應(yīng)用的案例餓了么的圖標(biāo)，要畫它之前肯定是先畫出具體輪廓，然后再使用簡單的漸變色填充就做完了。
這類圖標(biāo)的繪制可以當(dāng)成基礎(chǔ)的矢量插畫入門，通過臨摹一些小物件，來快速上手矢量插畫并適應(yīng)它的繪畫方式。這個階段的臨摹數(shù)量建議不低于100個。
而這種能力的掌握有助于我們后續(xù)將任何現(xiàn)實世界的物體，抽象成矢量的圖形繪制出來，無需借助具體的參考。
而更復(fù)雜的圖標(biāo)，就要以復(fù)現(xiàn)它們的效果為目標(biāo)了，這個完全考驗的就是對效果的分析和對軟件功能本身的掌握能力。
如果覺得非常吃力做不下來，建議看一些古早時期的基礎(chǔ)擬物教學(xué)做聯(lián)系，比如如何畫一個牛皮紙箱，還是畫一個真實的開關(guān)之類的，可以幫助我們理解空間、光影、材質(zhì)，以及如何使用軟件功能來表現(xiàn)它們。
這部分的練習(xí)同樣建議不低于100個，在這個過程中你可以積累擬物的繪制技巧，對于后續(xù)一些復(fù)雜效果的實現(xiàn)，尤其是運營端 H5 頁面的設(shè)計會有非常大得幫助。
上面兩部分的能力訓(xùn)練做多少都不過分，做的越多，提升當(dāng)然也越多。但我們怎么檢驗自己已經(jīng)具備的能力？同時，只臨摹肯定頁不行，我們得有原創(chuàng)的能力。
所以我們必須要做一些特定的練習(xí)，我的建議就是直接從線上找一些做的一般的應(yīng)用進行截圖，然后用設(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)格差異越大越多，那么進步也就會越快，讓我們再未來可以應(yīng)對更復(fù)雜的設(shè)計需求和環(huán)境。
訓(xùn)練雖然是無窮無盡的，但是時間是有限的，我們不可能一口氣掌握所有設(shè)計種類和技巧。所以前面給大家的要求是盡可能提升基礎(chǔ)的、通用的知識和能力，而一些更復(fù)雜、使用場景少的風(fēng)格，可以等到你碰到的時候再去學(xué)習(xí)也可以。
比如在 B 端很流行的 3D 微軟風(fēng)圖標(biāo)，這類圖標(biāo)的繪制新手第一眼會想到的必然是 3D 軟件的建模，以及如何設(shè)置對應(yīng)的材質(zhì)、渲染參數(shù)。
但實際上那些技能的使用一點都不復(fù)雜，在 B 站的教學(xué)案例就有非常多，看幾個練幾天就能掌握個大概。
難的是怎么在使用 3D 建模的同時還保持整體性和一致性，而這些全是前面練習(xí)所要掌握的基礎(chǔ)。所以任何特殊類型的圖標(biāo)掌握，我們都可以分解成兩個部分，即基礎(chǔ)+針對技巧。
想要掌握任何特殊的圖標(biāo)設(shè)計類型，要做的就是先去了解它之所以特殊的理由、概念、知識是什么，再去專門查找相關(guān)的教學(xué)和資料，就可能快速掌握并進行原創(chuàng)。
比如 2.5D 圖標(biāo)的繪制，只要認(rèn)真看幾篇 2.5D 繪圖技法分享，就能很快掌握這類圖標(biāo)應(yīng)該怎么畫，而不是只能看這類圖標(biāo)的教學(xué)給你操作到牙齒你才會跟著一起做……
原創(chuàng)能力的提升，就是創(chuàng)建一個場景給自己出題再反復(fù)驗證自己的過程。而訓(xùn)練和真實項目不同的是，真實項目往往操心的事情太多，時間還少，會造成很多思想上的負(fù)擔(dān)，所以兩者都有提升但類型不同。
只有認(rèn)識到圖標(biāo)的重要性，并有自我驅(qū)動力去制定訓(xùn)練的計劃，才能真正提升這部分能力。而它的附帶價值遠(yuǎn)遠(yuǎn)不止畫好圖標(biāo)……
作者：酸梅干超人鏈接：https://www.zcool.com.cn/article/ZMTYzOTUxMg==.html來源：站酷著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
