圖標(biāo)是UI設(shè)計師必會技能之一，而一個好的icon是怎么設(shè)計出來的呢？今天我們來給大家一個圖標(biāo)設(shè)計的全面知識匯總：

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

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

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

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

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

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

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

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

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

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

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

不規(guī)則的圖標(biāo)設(shè)計會用一個圓形來去對齊，如下圖。你看一看到圖形已經(jīng)觸及到圓形的邊緣，這里你不用特別精確的卡邊，只要接近就可以了。

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

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

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

角度

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

曲線

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

邊角

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

像素效果

圖標(biāo)的像素效果在用戶界面中是很重要的一部分，尤其在小尺寸設(shè)計中很影響整體視覺。如果像素網(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è)計師會通過光線和陰影的方法。

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

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

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

下面講一些設(shè)計過程中你需要注意的：

1. 讓用戶更容易理解

圖標(biāo)最重要的作用就是它的辨識度是否讓用戶易理解，人們需要在小圖標(biāo)中做出他們的選擇是件很困難的事，所以對于品牌來說，大部分的圖形設(shè)計是為了展現(xiàn)品牌logo或者是一個標(biāo)志性的形象。當(dāng)然對于一個新的或者小的品牌來說也會通過一些其他方式來展現(xiàn)。

圖標(biāo)可以包含圖像，但也可能是一個文本，一個logo又或是這些元素的組合。圖像圖標(biāo)在其他適應(yīng)設(shè)備上會不易閱讀，而圖形的話可以攜帶更多的視覺感。

對于一個圖標(biāo)而言，不會使用單詞作為內(nèi)容，因為空間本身就不大，而內(nèi)容不多又不易用戶理解。這也是一則經(jīng)驗：如果這個文本不是你logo的一部分，那么請盡量避免。如果是，也要慎重考慮一下。

此外，很多圖標(biāo)實際使用是在一定的環(huán)境下，大多數(shù)包括一行描述性文本在圖標(biāo)下面。設(shè)計時，字母的顏色和圖標(biāo)的類型或者網(wǎng)站也要保持一致，這樣才能建立品牌的統(tǒng)一性。

4. 用鮮亮的顏色

想讓你的圖標(biāo)脫穎而出？那么請大膽的用色。選擇一個充滿活力的顏色可以幫你抓住用戶注意力，讓你的品牌更有特點。比如藍色，特別是天空藍和海軍藍，你可能會回避因為這種大眾色并不吸引人。但如果藍色是你的主要logo色，你可以嘗試一些新的偏中性的顏色，像石灰綠，或者選擇一個季節(jié)性色調(diào)比如夏天選擇亮橙色、春天選擇粉紅色之類的。

5. 做一個logo的延伸

你的品牌會有它的logo，可一旦它變成了圖標(biāo)，更像是一個標(biāo)志。這個標(biāo)志可以是一個簡單的logo或者圖像，它需要表現(xiàn)的更直接更能讓客戶記住它。而品牌也希望將logo和圖標(biāo)建立一些聯(lián)系，讓自身達成統(tǒng)一。

6. 圖標(biāo)的用途

圖標(biāo)不止限于手機或者電腦桌面上，所以在設(shè)計時也要顧及到它的大小和應(yīng)用，所以在做大圖標(biāo)后縮小是個更好的方式。圖標(biāo)設(shè)計涉及到它的規(guī)模和大小，格式也成為了一個重要的因素，為了方面運用，矢量圖是你最佳的選擇。

7. 內(nèi)容外面的世界

最近有很多圖標(biāo)運用單色背景加白色圖標(biāo)，扁平化設(shè)計與陰影結(jié)合，這種趨勢雖然很流行，但不要局限在這種設(shè)計里，在你的圖標(biāo)中做一些不一樣的設(shè)計。當(dāng)大多數(shù)人考慮用方形的設(shè)計，也許你該考慮些別的方式。在背景中加入紋理效果就會在人家單色中脫穎而出。

8. 單色挑戰(zhàn)

有一個有趣的小竅門設(shè)計師們多年用來測試設(shè)計的有效性——單色模式。在單色設(shè)計中，如果你的設(shè)計傳達同樣的信息，那么它是個有效設(shè)計；如果沒有顏色它變得很弱甚至影響用戶識別，那么請繼續(xù)修改。也有些設(shè)計師會先用黑白色進行設(shè)計，建立一個堅實的框架后，然后再添加顏色。

以上就是設(shè)計師必知的UI圖標(biāo)設(shè)計的全面知識匯總，大家學(xué)會了嗎？希望能對大家有所幫助！