圖標(biāo)是UI設(shè)計(jì)師必會(huì)技能之一，而一個(gè)好的icon是怎么設(shè)計(jì)出來(lái)的呢？

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

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

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

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

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

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

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

2. 從一個(gè)簡(jiǎn)單的幾何圖形下手

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

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

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

角度

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

曲線

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

邊角

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

像素效果

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

線的粗細(xì)

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

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

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

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

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

6. 獨(dú)特性

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

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

1. 讓用戶更容易理解

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

2. 圖標(biāo)并不是圖像

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

3. 避免文字

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

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

4. 用鮮亮的顏色

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

5. 做一個(gè)logo的延伸

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

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

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

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

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

8. 單色挑戰(zhàn)

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

來(lái)源： IDC創(chuàng)新設(shè)計(jì)中心