網(wǎng)頁(yè)設(shè)計(jì)師常用的一套統(tǒng)一圖標(biāo),這些技巧不要錯(cuò)過(guò)

網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)站建設(shè)的核心內(nèi)容之一，通過(guò)設(shè)計(jì)網(wǎng)頁(yè)實(shí)現(xiàn)網(wǎng)頁(yè)組合稱為一個(gè)網(wǎng)站，以小見大的組合成網(wǎng)站從而整體提升用戶體驗(yàn)，那么在設(shè)計(jì)網(wǎng)頁(yè)過(guò)程匯總經(jīng)常會(huì)用到的是統(tǒng)一性的圖標(biāo)，比如“編輯”、“設(shè)置”、“用戶中心”、“頭像標(biāo)志”、“搜索”等不同的風(fēng)格，那么對(duì)于設(shè)計(jì)師而言統(tǒng)一化的圖標(biāo)就顯得很重要了。

圖標(biāo)對(duì)于設(shè)計(jì)師而言應(yīng)該算是很小的問(wèn)題了，一般通過(guò)免費(fèi)網(wǎng)站上的圖標(biāo)下載即可實(shí)現(xiàn)網(wǎng)站的整體規(guī)劃設(shè)計(jì)，然而某些特定的圖標(biāo)則需要找到合適的主題才能夠凸顯出設(shè)計(jì)的風(fēng)格。

從網(wǎng)絡(luò)上各色圖標(biāo)來(lái)看，網(wǎng)站和APP不同之處就是設(shè)計(jì)上的愉悅性，整體效果上用以凸顯出設(shè)計(jì)風(fēng)格，從而有效的表現(xiàn)出一個(gè)網(wǎng)站的與眾不同，那么設(shè)計(jì)圖標(biāo)過(guò)程中應(yīng)該注意到以下問(wèn)題：

一、色彩

圖標(biāo)所傳遞的諸多信息當(dāng)中，色彩是最為直觀的一種。將不同來(lái)源的圖標(biāo)先在色彩上統(tǒng)一起來(lái)，比如使用同一種顏色。

雖然說(shuō)使用單一色彩很便捷，不過(guò)你如果能運(yùn)用現(xiàn)有的配色方案來(lái)進(jìn)行圖標(biāo)的色彩統(tǒng)一，效果就更好了：

如果你真的喜歡你所找到的圖標(biāo)，但是它們的色彩又不一樣，可以先自己調(diào)整，或者找一位專業(yè)的圖標(biāo)設(shè)計(jì)師來(lái)幫你。值得注意的是，絕大多數(shù)素材的分享授權(quán)許可證是包含編輯授權(quán)的，你可以更改色彩和尺寸。

二、風(fēng)格

擬物化和扁平化設(shè)計(jì)之間的斗爭(zhēng)已經(jīng)持續(xù)多年了，目前來(lái)看扁平化設(shè)計(jì)是主流，但是我并不知道這種局面還會(huì)持續(xù)多久，因?yàn)槿缃竦谋馄交O(shè)計(jì)當(dāng)中就包含了不少擬物化的設(shè)計(jì)技巧和元素。在未來(lái)的5到10年會(huì)流行什么，就很難說(shuō)了。時(shí)尚和流行就是這樣。

我所知道的是，你必須挑選一種風(fēng)格。要么扁平，要么擬物。

將扁平化和擬物的設(shè)計(jì)風(fēng)格混搭到一起，必然會(huì)導(dǎo)致界面的雜亂無(wú)章。

不過(guò)，在大的風(fēng)格設(shè)定之下，設(shè)計(jì)師依然有足夠多的選擇。比如在扁平化的設(shè)計(jì)風(fēng)格當(dāng)中，iOS 的 Apple Human Guideline 和 Google 所推動(dòng)的 Material Design 都是非常典型的扁平化設(shè)計(jì)風(fēng)格設(shè)計(jì)規(guī)范，兩者在細(xì)節(jié)和風(fēng)格的把控上都非常的嚴(yán)格，甚至具體到每一條線的粗細(xì)：

基于那些專門為特定操作系統(tǒng)所定制的、系統(tǒng)化的圖標(biāo)來(lái)設(shè)計(jì)新的圖標(biāo)，其實(shí)是最可靠的辦法。這些被廣大設(shè)計(jì)師所接受的設(shè)計(jì)規(guī)范，在日常設(shè)計(jì)中指引著許多設(shè)計(jì)師的工作。

因此，在色彩和風(fēng)格上保持一致是最重要的。此外，還有一些微妙而值得注意的細(xì)節(jié)，需要設(shè)計(jì)師特別上心。因?yàn)檫@些圖標(biāo)的設(shè)計(jì)已經(jīng)趨于經(jīng)典，而重度用戶和經(jīng)驗(yàn)豐富的設(shè)計(jì)師，能夠一眼就分辨出不夠貼合的圖標(biāo)細(xì)節(jié)。所以，設(shè)計(jì)師常常能夠聽到這樣的反饋：「我也不知道哪里不對(duì)，就是覺(jué)得不對(duì)?！?/p>

三、透視和視角

下面的5個(gè)圖標(biāo)，同樣都是采用的擬物化的風(fēng)格，為了統(tǒng)一，我細(xì)微調(diào)整了一下它們的色彩，看起來(lái)更加一致。但是不管怎么調(diào)整，它們看起來(lái)就像是5個(gè)完全不同的應(yīng)用程序的圖標(biāo)（事實(shí)上它們就是）。

如果，按照透視圖將這5個(gè)圖標(biāo)放置進(jìn)去，就可以清晰地看到，它們所處的視角和位置是截然不同的。

它們分散在透視圖的不同位置，明顯是不一致的，而這一點(diǎn)則完全違反了圖標(biāo)設(shè)計(jì)的一致性。

圖標(biāo)應(yīng)該看起來(lái)就是整個(gè)界面的一部分，它們之間的關(guān)系是平等的，在視覺(jué)和感知上應(yīng)該保持著同等的關(guān)系。

四、陰影

在陰影的設(shè)計(jì)上，圖標(biāo)之間也應(yīng)該保持這種一致性?？纯聪旅娴膬蓚€(gè)圖標(biāo)吧：

這兩個(gè)圖標(biāo)源自同一套圖標(biāo)，但是看起來(lái)卻只有一個(gè)圖標(biāo)被太陽(yáng)照到了。光的方向同樣很重要。因此，想要讓圖標(biāo)保持一致，最好是讓圖標(biāo)在光照角度上也保持著一致。

小貼士：雖然陰影多數(shù)情況下被認(rèn)為是擬物化設(shè)計(jì)中才會(huì)用到的，但是實(shí)際上，包括 Material Design 在內(nèi)的扁平化設(shè)計(jì)風(fēng)格中也會(huì)用到陰影。所以原則上，它是泛用的，設(shè)計(jì)師需要保持設(shè)計(jì)上的一致。

五、視覺(jué)重量

圖標(biāo)給人的大小、密度和重量感，就是我們常說(shuō)的視覺(jué)重量。而在同一套圖標(biāo)當(dāng)中，圖標(biāo)的視覺(jué)重量應(yīng)該保持一個(gè)非常接近的程度。

看看下面兩個(gè)圖標(biāo)：

當(dāng)你瞇起眼睛感知這兩個(gè)圖標(biāo)所形成的色塊的時(shí)候，就能夠更加明顯的對(duì)比兩者的視覺(jué)重量了：

差異確實(shí)非常的大。這個(gè)例子看起來(lái)非常極端，所以我們?cè)倮^續(xù)找點(diǎn)別的案例來(lái)進(jìn)行對(duì)比：

就視覺(jué)重量而言，上面的一組明顯是不平衡的，你只需要瞇眼斜視就可以很快判斷出來(lái)。

六、細(xì)節(jié)

魔鬼藏于細(xì)節(jié)。但是細(xì)節(jié)中所藏的魔鬼類型還是非常多樣的，這個(gè)主題我們不妨展開了來(lái)說(shuō)。

1. 重復(fù)的元素

有的時(shí)候，設(shè)計(jì)師會(huì)加入了一些一致的、重復(fù)的元素，來(lái)確保圖標(biāo)看起來(lái)足夠獨(dú)特。

重復(fù)的元素，重點(diǎn)在于重復(fù)的一致性。

2. 細(xì)節(jié)的數(shù)量

另外一種情況，則是細(xì)節(jié)數(shù)量上的不一致。這種不一致會(huì)擾亂整體的一致性，簡(jiǎn)而言之，就是這組圖標(biāo)應(yīng)該在復(fù)雜度上保持均衡，否則，用戶將會(huì)因?yàn)榛靵y而難以判斷各個(gè)圖標(biāo)的屬性。

結(jié)語(yǔ)

正如同我剛開始所說(shuō)的，想要將不同的圖標(biāo)納入到一個(gè)系統(tǒng)當(dāng)中來(lái)，設(shè)計(jì)師主要的工作目標(biāo)就是確保一致性。經(jīng)驗(yàn)豐富的設(shè)計(jì)師會(huì)從各個(gè)角度和屬性上來(lái)針對(duì)圖標(biāo)進(jìn)行優(yōu)化，今天的文章已經(jīng)將潛在的、需要關(guān)注的問(wèn)題都梳理出來(lái)了，圖標(biāo)的設(shè)計(jì)工作做好了，界面的設(shè)計(jì)才會(huì)更加順暢。