欧美国产亚洲另类动漫_最新欧美精品一区二区三区_亚洲国产婷婷综合在线精品_久久精品欧美视频

首先，在制作圖標(biāo)前要考慮以下幾點(diǎn)（那張紙默默寫下來）：

你的icon主要適用于什么設(shè)備？

需要什么風(fēng)格的icon？

有沒有其他設(shè)計(jì)要求？

接下來我們進(jìn)入設(shè)計(jì)過程：

1. 設(shè)計(jì)從網(wǎng)格開始

 針對不同的設(shè)計(jì)我們會運(yùn)用不同大小的網(wǎng)格。我們這里以32*32的網(wǎng)格為例。

網(wǎng)格邊緣的2px是我設(shè)計(jì)中不可觸及的，也就是留白邊緣。如果沒有特殊情況的話，我一定不會讓我的設(shè)計(jì)圖形進(jìn)入這個邊緣界限。而留白的目的也是為了讓設(shè)計(jì)看著不會太滿給用戶一定的呼吸感。

圖標(biāo)的結(jié)構(gòu)分為形狀和方向兩部分。如果你的圖標(biāo)有邊框，一般會在邊界框位置畫出像正方形，圓形，三角形，矩形等圖形作為邊框。

圓形圖標(biāo)會在網(wǎng)格中成居中狀。在圓形圖標(biāo)設(shè)計(jì)中四個邊緣會觸及到內(nèi)容區(qū)域的邊緣，但不會到留白區(qū)域。一些小的圖形和邊邊角角部位會超出圓形，但不用擔(dān)心，這是一個常見的現(xiàn)象。

方形圖標(biāo)一般也會在網(wǎng)格中居中，但大多數(shù)情況也會觸及到內(nèi)容區(qū)域的邊緣。我們看下下面這張圖：圖中分三個方形區(qū)域（藍(lán)色、橙色和綠色），圖標(biāo)中的大部分圖形在中間橙色區(qū)域內(nèi)。每個區(qū)域內(nèi)的圖形占比取決于圖標(biāo)整體的視覺效果，而這個把控需要你不斷地練習(xí)找一些感覺才能自如的運(yùn)用。

在32px的網(wǎng)格中，你會注意到從28px中垂直和水平的分出20px區(qū)域，一般在設(shè)計(jì)圖標(biāo)時會試圖遵循這樣的規(guī)矩。

不規(guī)則的圖標(biāo)設(shè)計(jì)會用一個圓形來去對齊。

但你要記住網(wǎng)格規(guī)矩不是所有設(shè)計(jì)都要遵循的，一個圖標(biāo)的本質(zhì)遠(yuǎn)遠(yuǎn)超過了這種規(guī)矩的設(shè)定。網(wǎng)格會幫助你提高圖標(biāo)設(shè)計(jì)的一致性，但是如果在設(shè)計(jì)一個牛逼圖標(biāo)和遵循規(guī)則中選擇的話，相信你也會選牛逼設(shè)計(jì)的。

2. 從一個簡單的幾何圖形下手

 設(shè)計(jì)圖標(biāo)跟畫草圖一樣：從一個簡單而粗糙的圓形、長方形又或是三角形開始。在設(shè)計(jì)小圖標(biāo)的時候，手繪的表現(xiàn)方式可能會看著不那么精致，所以用AI做設(shè)計(jì)是個更好的選擇。用一些基本的幾何圖形進(jìn)行設(shè)計(jì)會更加準(zhǔn)確（尤其在曲線邊緣部分），在調(diào)整的時候會更快，同時也能更精確的適應(yīng)網(wǎng)格模式。

3. 邊緣、邊角、曲線及角度規(guī)范

盡可能在設(shè)計(jì)時邊緣、邊角、曲線及角度遵循一些數(shù)學(xué)規(guī)范的同時又不失有趣。換句話說就是不要太相信自己的眼球，在一些細(xì)節(jié)上需要遵循規(guī)范，因?yàn)槿绻@些元素不一致的話會很影響圖標(biāo)的質(zhì)量。

角度

在設(shè)計(jì)中，大多情況我會使用45度角或者它的倍數(shù)。45度角會顯得很均勻（在像素下會表現(xiàn)得更強(qiáng)），這種完美的對角線會讓人眼很舒服也很清晰。這種模式同時也可以建立一組圖標(biāo)的統(tǒng)一性。如果我要打破這種規(guī)則我可能會使用減半角度（22.5或者11.5度）或者15的倍數(shù)，當(dāng)然也會根據(jù)情況進(jìn)行調(diào)整。使用45度的好處是即使反角度用也是不打亂規(guī)則的。

曲線

曲線是個特別考量技術(shù)的地方，即使圖片質(zhì)量很差，一看曲線就知道設(shè)計(jì)師的能力怎樣。而且人眼的測量總也一些小的誤差，大多數(shù)人眼睛和手協(xié)調(diào)能力達(dá)不到那么高層次，所以用軟件的形狀工具和一些數(shù)字來創(chuàng)造曲線從而達(dá)到效果。

邊角

圓角可能用的并不多，2px半徑的圓角就很顯然是個圓形了。你要根據(jù)你的設(shè)計(jì)總特征來選擇是否用圓角，并且要用多大的圓角。

像素效果

圖標(biāo)的像素效果在用戶界面中是很重要的一部分，尤其在小尺寸設(shè)計(jì)中很影響整體視覺。如果像素網(wǎng)格中行間距不對齊，會導(dǎo)致邊緣出現(xiàn)鋸齒在小圖標(biāo)上會看起來很模糊。要是調(diào)整圖標(biāo)的像素網(wǎng)格會使直線變得單薄，角度與曲線的精確度就沒那么精確。這也是為什么建議大家用45度角的原因，比較好掌握，更加精準(zhǔn)容易對齊。

線的粗細(xì)

說到線的粗細(xì)，2像素應(yīng)該是最理想的，可3像素是最通用的。我個人更傾向2PX和4px，理想狀態(tài)下我會用2的倍數(shù)比較多。在大多情況下字和扁平的圖標(biāo)是要避免特別細(xì)的線條，除非你是為了做出一些期望效果。如果你想定義線條的形狀，一般設(shè)計(jì)師會通過光線和陰影的方法。

4. 通過設(shè)計(jì)元素及圖標(biāo)特點(diǎn)來達(dá)成統(tǒng)一性

   設(shè)計(jì)師會通過某一個元素讓一系列設(shè)計(jì)更統(tǒng)一，像荷蘭設(shè)計(jì)師在2015年圖標(biāo)沙龍上談到他為荷蘭政府做的項(xiàng)目，在設(shè)計(jì)中他跟伙伴運(yùn)用了“缺口“的元素，不是每一個圖標(biāo)都有這個元素，但是大多數(shù)的統(tǒng)一讓這一系列有了自己的特色，也真正的把它們?nèi)诤狭似饋怼?/span>

5. 有節(jié)制的使用細(xì)節(jié)與裝飾

   圖標(biāo)的目的與讓用戶的溝通，讓他們想到并且進(jìn)行選擇。太多的細(xì)節(jié)會增加圖標(biāo)的辨識復(fù)雜度，尤其是小尺寸更會成為累贅。當(dāng)然，細(xì)節(jié)的復(fù)雜程度也會影響單個或者整個系列圖標(biāo)的效果。所以當(dāng)你拿不準(zhǔn)細(xì)節(jié)輕重的時候，最好的方法是考慮最低限度的保證細(xì)節(jié)，但要保證高質(zhì)量的明確圖標(biāo)含義。

6. 獨(dú)特性

   雖然我們能看到很對牛逼設(shè)計(jì)師在制作高質(zhì)量的圖標(biāo)，但是他們過于注重設(shè)計(jì)趨勢和其他高端設(shè)計(jì)師的風(fēng)格模仿。作為一個設(shè)計(jì)師來說，創(chuàng)造可能是我們應(yīng)該更看重的，我們可以從結(jié)構(gòu)、字體、工業(yè)、心理、自然等其他領(lǐng)域?qū)ふ异`感。千篇一律的圖標(biāo)我們都見過，可是特立獨(dú)行的你才是用戶真正認(rèn)可的風(fēng)格。