天津UI設(shè)計(jì)師培訓(xùn)過程中100個(gè)icon的設(shè)計(jì)步驟

　　不管是做平面設(shè)計(jì)還是UI設(shè)計(jì)都不可避免的遇到icon或者是logo。

　　怎么才能成為設(shè)計(jì)師，先設(shè)計(jì)100icon試試。

　　每一個(gè)藝術(shù)家都不是正常人，一定是經(jīng)歷了非常人能經(jīng)歷的那些過程才能的。

　　誠筑說寫在你成ion為藝術(shù)家的前面

　　設(shè)計(jì)過程分為以下幾個(gè)過程，磨刀不誤砍柴工。

　　1.從網(wǎng)格開始

　　一般情況下采用32X32的網(wǎng)格。

　　圖標(biāo)的結(jié)構(gòu)分為形狀和方向兩部分。有邊框的圖標(biāo)，設(shè)計(jì)時(shí)一般會(huì)先在邊界框位置畫出圖標(biāo)樣式相似的圖形，比方說，正方形，圓形，三角形，矩形等作為邊框。圓形的icon在網(wǎng)格中一般居中。方形圖標(biāo)和圓形圖標(biāo)一樣，居中。在32px的網(wǎng)格中，通常設(shè)計(jì)圖標(biāo)都會(huì)遵循從28px中垂直和水平的分出20px區(qū)域這樣的標(biāo)準(zhǔn)，但是網(wǎng)格規(guī)矩不是所有設(shè)計(jì)都必須要遵循的，網(wǎng)格是起到幫助圖標(biāo)設(shè)計(jì)的一致性的目的，設(shè)計(jì)很棒的圖標(biāo)和遵循規(guī)則兩者還是應(yīng)該選前者。

　　2. 簡(jiǎn)單的圖形設(shè)計(jì)

　　設(shè)計(jì)初都是從花草圖開始，icon也一樣，我們可以從簡(jiǎn)單的圓形，三角形或者矩形開始。設(shè)計(jì)的時(shí)候不用特別精致，可以選擇用AI做。選用簡(jiǎn)單的幾何圖形進(jìn)行設(shè)計(jì)的好處就是準(zhǔn)確，修改調(diào)整的時(shí)候會(huì)更快也能更地適應(yīng)網(wǎng)格。已達(dá)到基礎(chǔ)要求。

　　3. 邊緣、曲線、邊角和角度

　　在設(shè)計(jì)圖標(biāo)的邊緣、邊角、曲線及角度應(yīng)該盡可能遵循數(shù)學(xué)規(guī)范，不要靠自己的直覺，如果這些元素不一致，將會(huì)直接影響出圖的質(zhì)量。

　　在設(shè)計(jì)中，角度問題一般使用45度角及其倍數(shù)。因?yàn)?5度角會(huì)顯得很均勻，對(duì)角線給人的感覺很清晰。如果非要打破這種規(guī)則，我們還可以使用減半角度，就是在45度的基礎(chǔ)上一直減半，或者15的倍數(shù)，具體問題具體分析。

　　曲線是設(shè)計(jì)中特別難的，內(nèi)行的人一看曲線就大概能判斷出設(shè)計(jì)師的水平。人眼的測(cè)量再怎么都會(huì)存在一些小的誤差，所以使用作圖軟件的形狀工具和一些數(shù)字來進(jìn)行曲線的設(shè)計(jì)會(huì)更準(zhǔn)確的達(dá)到。總之不要相信自己的眼睛和直覺。

　　圖標(biāo)的像素是很重要的，在小尺寸設(shè)計(jì)中對(duì)整體視覺的影響會(huì)很大。如果像素網(wǎng)格中行間距沒對(duì)齊，小圖標(biāo)就會(huì)看起來很模糊。如果調(diào)整圖標(biāo)的像素網(wǎng)格又會(huì)使直線變得單薄，角度與曲線也沒那么，所以才會(huì)讓大家去用45度角。

　　4. 細(xì)節(jié)和裝飾

　　設(shè)計(jì)icon的目就是為了和用戶溝通，讓他們通過icon來了解用途從而選擇。如果圖標(biāo)的細(xì)節(jié)太多就會(huì)影響辨識(shí)復(fù)雜度，甚至成為累贅。所以在沒有把握的情況下使用低限度的細(xì)節(jié)，明確。簡(jiǎn)單。

　　寫在后的

　　一些設(shè)計(jì)師在制作高質(zhì)量的圖標(biāo)時(shí)，會(huì)很注重設(shè)計(jì)趨勢(shì)和其他設(shè)計(jì)師作品風(fēng)格的模仿。但是對(duì)以設(shè)計(jì)師來講，創(chuàng)新是更應(yīng)該看重的，所以大家應(yīng)該多注意觀察，從結(jié)構(gòu)、心理、自然等領(lǐng)域都可以嘗試尋找靈感。設(shè)計(jì)出特立獨(dú)行的圖標(biāo)，才會(huì)得到用戶真正的認(rèn)可。

　　設(shè)計(jì)，與眾不同不代表著不能用。設(shè)計(jì)路上誠筑說與你同行。