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