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