同時(shí)使用來(lái)自不同設(shè)計(jì)師或圖標(biāo)集的圖標(biāo)時(shí)，該如何使其風(fēng)格一致、富有美感呢？
找圖標(biāo)很容易。數(shù)以千計(jì)的設(shè)計(jì)師每天都在畫(huà)圖標(biāo)，數(shù)以百計(jì)的網(wǎng)站常常以免費(fèi)的形式提供給大家使用。圖標(biāo)的種類非常繁多，但是多樣性也帶來(lái)了一 個(gè)問(wèn)題。
一個(gè)普通的應(yīng)用程序需要10到20個(gè)圖標(biāo)。有些圖標(biāo)到處都可以用到，比如說(shuō) “設(shè)置” 和“編輯”。而另外一些圖標(biāo)則是專門為某個(gè)項(xiàng)目而設(shè)計(jì)的。
如上所示，這里的每一個(gè)圖標(biāo)都很討人喜歡，可是放在一起，它們就“不般配”了。
所以，在你的網(wǎng)站，應(yīng)用，或者是其它使用圖標(biāo)的用戶界面上，應(yīng)該怎樣組合來(lái)自不同設(shè)計(jì)師或圖標(biāo)組的圖標(biāo)才能使他們看起來(lái)一致，而且令人愉快呢？
1. 顏色
當(dāng)你看圖標(biāo)的時(shí)候，第一個(gè)最顯眼的特征就是它們的顏色�；旌蟻�(lái)自不同圖標(biāo)組的圖標(biāo)，最簡(jiǎn)單的方式是按顏色歸類：
這一招對(duì)于單色圖標(biāo)很簡(jiǎn)單，對(duì)于使用幾種相近顏色的圖標(biāo)也很管用：
假如你很喜歡你找到的某些圖標(biāo)，但是他們的顏色不一樣。你可以自己編輯他們的顏色，或者叫別人幫你。但是你也要知道大部分創(chuàng)作共用授權(quán)是允許小修改的。比如說(shuō)顏色和大小改變。有一些圖標(biāo)公司甚至提供鑲?cè)胧降闹匦轮?
如上圖所示，可在 Icons8右側(cè)在線改變圖標(biāo)顏色。
2. 風(fēng)格
扁平化設(shè)計(jì)和擬物化設(shè)計(jì)之間的戰(zhàn)斗已經(jīng)持續(xù)了很久很久。雖然到目前為止，扁平化設(shè)計(jì)處于上風(fēng)。但是我不知道這會(huì)延續(xù)多久。就像我不知道5年或者10年內(nèi)人們會(huì)穿什么。 大家把這稱之為時(shí)尚。
我只知道你要選一邊，你要么就是全部扁平化設(shè)計(jì)，或者你就是全部擬物化設(shè)計(jì)。
看這一組，使用的是相近的顏色。但是…
混合扁平圖標(biāo)和擬物圖標(biāo)可能會(huì)有很多后果：混亂的界面，錯(cuò)誤的裝飾，有時(shí)，不再把按鈕當(dāng)成”按鈕“了。
當(dāng)然，在扁平圖標(biāo)和擬物圖標(biāo)之間還有很多“亞風(fēng)格”。比如說(shuō)，在扁平風(fēng)格圖標(biāo)中，最有名的要數(shù)蘋果人機(jī)界面指南和谷歌 Material Design。他們被詳細(xì)記錄到極致甚至線條的寬度都有說(shuō)明：
這些指南非常受歡迎，很多設(shè)計(jì)師都在工作中遵循它們。
所以保持顏色和風(fēng)格一致是首要的。其次就是一些微妙，但仍然很重要的細(xì)節(jié)。一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)馬上發(fā)現(xiàn)這樣的缺陷。給用戶的體會(huì)也是典型的“我不知道是什么原因，但是有一些東西困擾著我�！�
3. 透視法
我們來(lái)看看這5個(gè)圖標(biāo)。它們都是擬物風(fēng)格的，我適當(dāng)?shù)恼{(diào)整了一下顏色，所以他們看起來(lái)更一致。但是它們?nèi)匀豢雌饋?lái)像是用于5個(gè)不同應(yīng)用程序的圖標(biāo)。
圖標(biāo)中的五件物品可以合并到一幅圖中：
但是它們除了零零散散的分布在幾個(gè)不同的地方之外，也沒(méi)有什么一致性。在圖標(biāo)的世界里，一致性就是一切。
圖標(biāo)應(yīng)該看起來(lái)像是面板，界面的一部分。不要忘了，圖標(biāo)最先是用于“線下的” 界面。這極大的影響著我們對(duì)它們?cè)凇皵?shù)字”世界的看法。
我想按他們，你呢？
4. 陰影效果
另外一種一致性就是光線，或者說(shuō)是陰影效果。我們來(lái)觀察一下這兩個(gè)圖標(biāo)：
看起來(lái)好像陽(yáng)光只照在其中的一個(gè)上面。光線的方向能讓兩個(gè)圖標(biāo)合并成一個(gè)整體，所以是很重要的。
注意：盡管陰影效果在擬物風(fēng)格中用的最多，但是在扁平設(shè)計(jì)中有時(shí)也會(huì)用到。 而且基本原理是一樣的——同一組中所有圖標(biāo)使用同樣的陰影效果。
5. 視覺(jué)重量
視覺(jué)重量是圖標(biāo)被感知的大小 ，密度和重量。這個(gè)理論在此做出了深入的分析。簡(jiǎn)而言之，圖標(biāo)應(yīng)該是看起來(lái)一樣大小的。
來(lái)看看這兩個(gè)圖標(biāo)：
現(xiàn)在瞇著眼睛，讓你只看到兩個(gè)褪色的大概形狀：
看到這兩個(gè)形態(tài)的巨大差異了沒(méi)？ 這可是犯了大忌了。這個(gè)例子確實(shí)是有一點(diǎn)極端。所以我們來(lái)比較一下兩組比較相似的圖標(biāo)：
就視覺(jué)重量而言，上方的一組，明顯是不均勻的。你只需要瞇著眼睛看就知道了。
6. 細(xì)節(jié)
“麻煩就在細(xì)節(jié)里�！贝蠹叶际沁@樣說(shuō)的。細(xì)節(jié)是一個(gè)很廣的話題，所以我在這里就具體一點(diǎn)：
要素重復(fù)
有些時(shí)候，設(shè)計(jì)師們?cè)趫D標(biāo)組中包含了某些元素或者是特性，所以他們的圖標(biāo)組看起來(lái)很獨(dú)特：
上圖每個(gè)圖標(biāo)右下角有像素化的部份——之后的每一個(gè)圖標(biāo)也應(yīng)該如此。另一個(gè)使用重復(fù)要素的例子就是用戶圖標(biāo)：
7. 細(xì)節(jié)的數(shù)量
另外一種情況：一致性也會(huì)被圖標(biāo)細(xì)節(jié)的數(shù)量所干擾。簡(jiǎn)而言之，一套圖標(biāo)應(yīng)該是全部簡(jiǎn)單，或者全部復(fù)雜。任意混合這兩種類型會(huì)產(chǎn)生不可預(yù)料的后果：
用戶將分不清楚這到底是一個(gè)圖標(biāo)，還是一個(gè)圖片。糟糕的用戶體驗(yàn)。
8. 結(jié)語(yǔ)
正如我反復(fù)強(qiáng)調(diào)的那樣。當(dāng)你混合來(lái)自不同圖標(biāo)組的圖標(biāo)時(shí)，唯一要力求的就是要確保圖標(biāo)的一致性。一致性，一致性，一致性。一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)師可以幾乎是直觀的通過(guò)特性判斷出一組圖標(biāo)是否適合放在一起，那些可能特性（陰影，風(fēng)格，線條）的類型是無(wú)限的。但是，在這篇文章里，我試圖確定最重要的那個(gè)，也是最容易被忽視的那個(gè)。假如你們有什么要補(bǔ)充的，歡迎評(píng)論。
微信公眾號(hào)：hunanzzjy
